libs/shared/lib/components/tableUI/TableUI.tsx

@@ -64,9 +64,9 @@ export const TableUI = <T extends Record<string, any>>({ data, fieldConfigs, dro
 
   return (
     <div className="mt-2 w-full overflow-x-auto">
-      <table className="min-w-full bg-white border border-gray-300 rounded-md">
+      <table className="min-w-full bg-light border border-secondary-300 rounded-md">
         <thead>
-          <tr className="bg-gray-100 border-b">
+          <tr className="bg-secondary-100 border-b">
             {fieldConfigs.map((field) => (
               <th key={field.key.toString()} className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                 {field.label}
@@ -79,7 +79,7 @@ export const TableUI = <T extends Record<string, any>>({ data, fieldConfigs, dro
           {data.map((item, index) => (
             <tr key={index} className="border-b rounded-md">
               {fieldConfigs.map((field) => (
-                <td key={field.key.toString()} className="px-6 py-4 text-sm text-gray-700">
+                <td key={field.key.toString()} className="px-6 py-4 text-sm text-light-700">
                   {editingIndex === index ? (
                     field.type === 'dropdown' ? (
                       <Input
@@ -103,7 +103,7 @@ export const TableUI = <T extends Record<string, any>>({ data, fieldConfigs, dro
                   )}
                 </td>
               ))}
-              <td className="px-6 py-4 text-sm text-gray-700">
+              <td className="px-6 py-4 text-sm text-secondary-700">
                 <div className="flex space-x-2">
                   {editingIndex === index ? (
                     <>

libs/shared/lib/data-access/store/visualizationSlice.ts

@@ -5,8 +5,8 @@ import { isEqual } from 'lodash-es';
 
 export type VisStateSettings = VisualizationSettingsType[];
 export type VisState = {
-  activeVisualizationIndex: number; // uses underscore_case to match data model from backend
-  openVisualizationArray: VisStateSettings; // uses underscore_case to match data model from backend
+  activeVisualizationIndex: number;
+  openVisualizationArray: VisStateSettings;
 };
 
 export const initialState: VisState = {
@@ -19,48 +19,58 @@ export const visualizationSlice = createSlice({
   initialState,
   reducers: {
     removeVisualization: (state, action: PayloadAction<number | undefined>) => {
-      let index = action.payload || state.activeVisualizationIndex;
-      state.openVisualizationArray.splice(index, 1);
-      if (state.activeVisualizationIndex === index) {
-        if (state.openVisualizationArray.length === 0) state.activeVisualizationIndex = -1;
-        else {
-          state.activeVisualizationIndex = Math.max(state.openVisualizationArray.length - 1, 0);
+      const index = action.payload ?? state.activeVisualizationIndex;
+      
+      if (index >= 0 && index < state.openVisualizationArray.length) {
+        state.openVisualizationArray.splice(index, 1);
+      
+        if (state.openVisualizationArray.length === 0) {
+          state.activeVisualizationIndex = -1;
+        } else if (state.activeVisualizationIndex >= state.openVisualizationArray.length) {
+          state.activeVisualizationIndex = state.openVisualizationArray.length - 1;
+        } else if (state.activeVisualizationIndex === index) {
+          state.activeVisualizationIndex = index < state.openVisualizationArray.length ? index : index - 1;
+        } else if (state.activeVisualizationIndex > index) {
+          state.activeVisualizationIndex--;
         }
       }
     },
     setActiveVisualization: (state, action: PayloadAction<number>) => {
-      state.activeVisualizationIndex = action.payload;
+      if (action.payload >= -1 && action.payload < state.openVisualizationArray.length) {
+        state.activeVisualizationIndex = action.payload;
+      }
     },
     setVisualizationState: (state, action: PayloadAction<VisState>) => {
       if (action.payload.activeVisualizationIndex !== undefined && !isEqual(action.payload, state)) {
         state.openVisualizationArray = action.payload.openVisualizationArray || [];
-        state.activeVisualizationIndex = action.payload.activeVisualizationIndex;
+        state.activeVisualizationIndex = Math.min(
+          action.payload.activeVisualizationIndex,
+          state.openVisualizationArray.length - 1
+        );
       }
     },
     updateVisualization: (state, action: PayloadAction<{ id: number; settings: VisualizationSettingsType }>) => {
       const { id, settings } = action.payload;
-      state.openVisualizationArray[id] = settings;
+      if (id >= 0 && id < state.openVisualizationArray.length) {
+        state.openVisualizationArray[id] = settings;
+      }
     },
     addVisualization: (state, action: PayloadAction<VisualizationSettingsType>) => {
       state.openVisualizationArray.push(action.payload);
       state.activeVisualizationIndex = state.openVisualizationArray.length - 1;
     },
     updateActiveVisualization: (state, action: PayloadAction<VisualizationSettingsType>) => {
-      if (state.activeVisualizationIndex === -1) {
-        return;
+      if (state.activeVisualizationIndex >= 0) {
+        state.openVisualizationArray[state.activeVisualizationIndex] = action.payload;
       }
-
-      state.openVisualizationArray[state.activeVisualizationIndex] = action.payload;
     },
     updateActiveVisualizationAttributes: (state, action: PayloadAction<Record<string, any>>) => {
-      if (state.activeVisualizationIndex === -1) {
-        return;
+      if (state.activeVisualizationIndex >= 0) {
+        state.openVisualizationArray[state.activeVisualizationIndex] = {
+          ...state.openVisualizationArray[state.activeVisualizationIndex],
+          ...action.payload,
+        };
       }
-
-      state.openVisualizationArray[state.activeVisualizationIndex] = {
-        ...state.openVisualizationArray[state.activeVisualizationIndex],
-        ...action.payload,
-      };
     },
     reorderVisState: (
       state,
@@ -70,14 +80,30 @@ export const visualizationSlice = createSlice({
       }>,
     ) => {
       const { id, newPosition } = action.payload;
-      const settingsCopy = [...state.openVisualizationArray];
-      settingsCopy.splice(newPosition, 0, settingsCopy.splice(id, 1)[0]);
-      state.openVisualizationArray = settingsCopy;
+      if (
+        id >= 0 && 
+        id < state.openVisualizationArray.length && 
+        newPosition >= 0 && 
+        newPosition < state.openVisualizationArray.length
+      ) {
+        const settingsCopy = [...state.openVisualizationArray];
+        const [movedItem] = settingsCopy.splice(id, 1);
+        settingsCopy.splice(newPosition, 0, movedItem);
+        state.openVisualizationArray = settingsCopy;
 
-      if (state.activeVisualizationIndex === id) {
-        state.activeVisualizationIndex = newPosition;
-      } else if (state.activeVisualizationIndex === newPosition) {
-        state.activeVisualizationIndex = id;
+        if (state.activeVisualizationIndex === id) {
+          state.activeVisualizationIndex = newPosition;
+        } else if (
+          state.activeVisualizationIndex > id && 
+          state.activeVisualizationIndex <= newPosition
+        ) {
+          state.activeVisualizationIndex--;
+        } else if (
+          state.activeVisualizationIndex < id && 
+          state.activeVisualizationIndex >= newPosition
+        ) {
+          state.activeVisualizationIndex++;
+        }
       }
     },
   },
@@ -100,4 +126,4 @@ export const visualizationActive = (state: RootState) =>
   state.visualize.activeVisualizationIndex !== -1
     ? state.visualize.openVisualizationArray?.[state.visualize.activeVisualizationIndex]
     : undefined;
-export default visualizationSlice.reducer;
+export default visualizationSlice.reducer;
\ No newline at end of file

libs/shared/lib/inspector/InspectorPanel.tsx

@@ -56,7 +56,6 @@ export function InspectorPanel(props: { children?: React.ReactNode }) {
       {inspector}
 
       <div className="flex flex-col w-full">
-        {buildInfo === 'dev' && (
           <div className="mt-auto p-2 bg-light">
             <Button
               variantType="primary"
@@ -72,7 +71,6 @@ export function InspectorPanel(props: { children?: React.ReactNode }) {
               className="block w-full"
             />
           </div>
-        )}
       </div>
     </Panel>
   );

libs/shared/lib/querybuilder/panel/QueryBuilderNav.tsx

@@ -262,7 +262,7 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => {
               </PopoverContent>
             </Popover>
             <Popover>
-              <PopoverTrigger>
+              <PopoverTrigger disabled={!saveStateAuthorization.query.W}>
                 <Tooltip>
                   <TooltipTrigger>
                     <Button variantType="secondary" variant="ghost" size="xs" iconComponent="icon-[ic--baseline-search]" />

libs/shared/lib/schema/schema-utils/schema-usecases.ts

@@ -64,6 +64,9 @@ export function schemaGraphology2Reactflow(
 export function createReactFlowNodes(graph: Graph): Array<Node> {
   const nodeElements: Array<Node> = [];
   graph.forEachNode((node: string, attributes: Attributes): void => {
+    if (!Array.isArray(attributes.attributes)) {
+      attributes.attributes = Object.values(attributes.attributes);
+    }
     const newNode: Node = {
       id: node,
       data: {
@@ -74,7 +77,6 @@ export function createReactFlowNodes(graph: Graph): Array<Node> {
     };
     nodeElements.push(newNode);
   });
-
   return nodeElements;
 }
 

libs/shared/lib/vis/components/VisualizationPanel.tsx

@@ -30,7 +30,7 @@ export const Visualizations: Record<string, PromiseFunc> = {
     SemanticSubstratesVis: () => import('../visualizations/semanticsubstratesvis/semanticsubstratesvis'),
   }),
   ...(isVisualizationReleased('MapVis') && { MapVis: () => import('../visualizations/mapvis/mapvis') }),
-  ...(isVisualizationReleased('Vis0D') && { Vis0D: () => import('../visualizations/Vis0D/Vis0D') }),
+  ...(isVisualizationReleased('Vis0D') && { Vis0D: () => import('../visualizations/vis0D/Vis0D') }),
   ...(isVisualizationReleased('Vis1D') && { Vis1D: () => import('../visualizations/vis1D/Vis1D') }),
 };
 
@@ -136,7 +136,7 @@ export const VisualizationPanel = ({ fullSize }: { fullSize: () => void }) => {
           </div>
         )}
       </div>
-      <VisualizationTabBar fullSize={fullSize} exportImage={exportImage} />
+      <VisualizationTabBar fullSize={fullSize} exportImage={exportImage} handleSelect={handleSelect} />
     </div>
   );
 };

libs/shared/lib/vis/components/VisualizationTabBar.tsx

@@ -7,7 +7,7 @@ import { useActiveSaveState, useActiveSaveStateAuthorization, useAppDispatch, us
 import { addVisualization, removeVisualization, reorderVisState, setActiveVisualization } from '../../data-access/store/visualizationSlice';
 import { Visualizations } from './VisualizationPanel';
 
-export default function VisualizationTabBar(props: { fullSize: () => void; exportImage: () => void }) {
+export default function VisualizationTabBar(props: { fullSize: () => void; exportImage: () => void; handleSelect: () => void }) {
   const { activeVisualizationIndex, openVisualizationArray } = useVisualization();
   const saveStateAuthorization = useActiveSaveStateAuthorization();
   const [open, setOpen] = useState(false);
@@ -34,6 +34,7 @@ export default function VisualizationTabBar(props: { fullSize: () => void; expor
 
   const onDelete = (id: number) => {
     dispatch(removeVisualization(id));
+    props.handleSelect();
   };
 
   useEffect(() => {

libs/shared/lib/vis/components/config/VisualizationSettings.tsx

@@ -56,15 +56,6 @@ export function VisualizationSettings({}: Props) {
       <div className="text-sm px-4 py-2 flex flex-col gap-1">
         <div className="flex justify-between items-center">
           <span className="font-bold">Visualization</span>
-          <Button
-            variantType="secondary"
-            variant="ghost"
-            size="xs"
-            iconComponent="icon-[ic--baseline-delete]"
-            onClick={() => {
-              if (activeVisualization) removeVisualization();
-            }}
-          />
         </div>
         <Input
           type="text"

libs/shared/lib/vis/visualizations/Vis0D/Vis0D.tsx

-import React, { useRef, useImperativeHandle, forwardRef } from 'react';
-import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
-import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
-import html2canvas from 'html2canvas';
-import { Input } from '@graphpolaris/shared/lib/components/inputs';
-
-export interface Vis0DProps {
-  title: string;
-}
-
-const settings: Vis0DProps = {
-  title: '',
-};
-
-export interface Vis0DVisHandle {
-  exportImageInternal: () => void;
-}
-
-const formatNumber = (number: number) => {
-  return number.toLocaleString('de-DE');
-};
-const Vis0D = forwardRef<Vis0DVisHandle, VisualizationPropTypes<Vis0DProps>>(({ data, settings }, refExternal) => {
-  const internalRef = useRef<HTMLDivElement>(null);
-  useImperativeHandle(refExternal, () => ({
-    exportImageInternal() {
-      const captureImage = () => {
-        const element = internalRef.current;
-        if (element) {
-          html2canvas(element, {
-            backgroundColor: '#FFFFFF',
-          })
-            .then((canvas) => {
-              const finalImage = canvas.toDataURL('image/png');
-              const link = document.createElement('a');
-              link.href = finalImage;
-              link.download = 'Vis0D.png';
-              document.body.appendChild(link);
-              link.click();
-              document.body.removeChild(link);
-            })
-            .catch((error) => {
-              console.error('Error capturing image:', error);
-            });
-        } else {
-          console.error('Container element not found');
-        }
-      };
-
-      const renderCanvas = () => {
-        requestAnimationFrame(() => {
-          captureImage();
-        });
-      };
-
-      renderCanvas();
-    },
-  }));
-
-  // !FIXME: When stats pills are ready, substitue results accordingly
-  return (
-    <div className="h-full w-full flex flex-col items-center justify-center overflow-hidden" ref={internalRef}>
-      {settings.title && <span className="text-3xl text-center mb-4">{settings.title}</span>}
-      {data?.nodes?.length > 0 ? (
-        <span className="text-4xl text-center">Select 0D data</span>
-      ) : (
-        <span className="text-8xl text-center">{formatNumber(1231312)}</span>
-      )}{' '}
-    </div>
-  );
-});
-
-const Vis0DSettings = ({ settings, updateSettings }: VisualizationSettingsPropTypes<Vis0DProps>) => {
-  return (
-    <SettingsContainer>
-      <Input type="text" label="Title" value={settings.title} onChange={(value) => updateSettings({ title: value as string })} />
-    </SettingsContainer>
-  );
-};
-
-const Vis0DRef = React.createRef<Vis0DVisHandle>();
-
-export const Vis0DComponent: VISComponentType<Vis0DProps> = {
-  component: React.forwardRef((props: VisualizationPropTypes<Vis0DProps>, ref) => <Vis0D {...props} ref={Vis0DRef} />),
-  settingsComponent: Vis0DSettings,
-  settings: settings,
-  exportImage: () => {
-    if (Vis0DRef.current) {
-      Vis0DRef.current.exportImageInternal();
-    } else {
-      console.error('0Dvis reference is not set.');
-    }
-  },
-};
-
-export default Vis0DComponent;

libs/shared/lib/vis/visualizations/index.tsx

@@ -5,4 +5,4 @@ export * from './tablevis/tablevis';
 export * from './matrixvis/matrixvis';
 export * from './semanticsubstratesvis/semanticsubstratesvis';
 export * from './vis1D/Vis1D';
-export * from './Vis0D/Vis0D';
+export * from './vis0D/Vis0D';

libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx

@@ -2,7 +2,7 @@ import { Edge, GraphQueryResult, Node, useML } from '@graphpolaris/shared/lib/da
 import { dataColors, visualizationColors } from 'config';
 import { Viewport } from 'pixi-viewport';
 import { Application, ColorSource, Container, FederatedPointerEvent, Graphics, IPointData, Point, Text } from 'pixi.js';
-import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
+import { useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef } from 'react';
 import { LinkType, NodeType } from '../types';
 import { NLPopup } from './MatrixPopup';
 
@@ -63,10 +63,11 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
   const globalConfig = useConfig();
 
   useEffect(() => {
-    if (props.graph) {
-      setup();
+    if (props.graph && internalRef.current && imperative.current) {
+      if (isSetup.current === false) setup();
+      else update();
     }
-  }, [globalConfig.theme]);
+  }, [props.graph, globalConfig.theme]);
 
   let columnOrder: string[] = [];
   let rowOrder: string[] = [];
@@ -82,6 +83,20 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
   const isSetup = useRef(false);
   const ml = useML();
 
+
+  const app = useMemo(
+    () =>
+      new Application({
+        backgroundAlpha: 0,
+        antialias: true,
+        autoDensity: true,
+        eventMode: 'auto',
+        resolution: window.devicePixelRatio || 2,
+        view: canvas.current as HTMLCanvasElement,
+      }),
+    [canvas.current],
+  );
+
   useEffect(() => {
     if (typeof refExternal === 'function') {
       refExternal(internalRef.current);
@@ -135,13 +150,11 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
     },
   }));
 
-  let app: Application;
-
   function resize() {
     const width = internalRef?.current?.clientWidth || 1000;
     const height = internalRef?.current?.clientHeight || 1000;
 
-    app.renderer.resize(width, height);
+    app?.renderer.resize(width, height);
     if (viewport.current) {
       viewport.current.screenWidth = width;
       viewport.current.worldWidth = width;
@@ -152,22 +165,23 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
     if (props.graph) {
       setup();
     }
-
-    app.render();
+    app?.render();
   }
-
+  
   useEffect(() => {
-    if (props.graph && internalRef.current && internalRef.current.children.length > 0) {
-      if (!isSetup.current) setup();
-      else update();
+    return () => {
+      app.destroy();
     }
-  }, [props.graph]);
+  }, []);
 
   useEffect(() => {
-    if (props.graph && internalRef.current && internalRef.current.children.length > 0) {
-      setup();
-    }
-  }, [props.settings]);
+    if (!internalRef.current) return;
+    const resizeObserver = new ResizeObserver(() => {
+      resize();
+    });
+    resizeObserver.observe(internalRef.current);
+    return () => resizeObserver.disconnect();
+  }, []);
 
   // TODO implement search results
   // useEffect(() => {
@@ -306,22 +320,6 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
   const setup = () => {
     if (!props.graph) throw Error('Graph is undefined; setup not possible');
 
-    if (app == null) {
-      app = new Application({
-        backgroundAlpha: 0,
-        antialias: true,
-        autoDensity: true,
-        eventMode: 'auto',
-        resolution: window.devicePixelRatio || 1,
-        view: canvas.current as HTMLCanvasElement,
-      });
-
-      const resizeObserver = new ResizeObserver(() => {
-        resize();
-      });
-      resizeObserver.observe(internalRef.current as HTMLDivElement);
-    }
-
     if (svg.current != null) {
       select(svg.current).selectAll('*').remove();
     }
@@ -409,8 +407,9 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
     viewport.current.drag().pinch().wheel().animate({}).decelerate({ friction: 0.75 });
 
     app.ticker.add(tick);
-    update();
     isSetup.current = true;
+
+    update();
   };
 
   let scaleColumns: ScaleBand<string>;

libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx

@@ -774,10 +774,7 @@ export const NLPixi = forwardRef((props: Props, refExternal) => {
     return () => {
       nodeMap.current.clear();
       linkLabelMap.current.clear();
-      linkGfx.clear();
-      nodeLayer.removeChildren();
-      linkLabelLayer.removeChildren();
-      nodeLabelLayer.removeChildren();
+      app.destroy();
 
       const layout = layoutAlgorithm.current as GraphologyForceAtlas2Webworker;
       if (layout?.cleanup != null) layout.cleanup();

libs/shared/lib/vis/visualizations/vis0D/Vis0D.tsx

+import React, { useRef, useImperativeHandle, forwardRef, useEffect, useState, Fragment } from 'react';
+import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
+import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
+import html2canvas from 'html2canvas';
+import { Input } from '@graphpolaris/shared/lib/components/inputs';
+import { EntityPill, RelationPill } from '@graphpolaris/shared/lib/components/pills/Pill';
+import { Button } from '@graphpolaris/shared/lib/components/buttons';
+export interface Vis0DProps {
+  title: string;
+  selectedEntity: string;
+  selectedAttribute: string;
+  selectedStat: string;
+}
+
+const settings: Vis0DProps = {
+  title: '',
+  selectedEntity: '',
+  selectedAttribute: '',
+  selectedStat: '',
+};
+
+export interface Vis0DVisHandle {
+  exportImageInternal: () => void;
+}
+
+const formatNumber = (number: number) => {
+  return number.toLocaleString('de-DE');
+};
+
+const Vis0D = forwardRef<Vis0DVisHandle, VisualizationPropTypes<Vis0DProps>>(({ settings, graphMetadata }, refExternal) => {
+  const [statRender, setStatRender] = useState<number | undefined>(undefined);
+  const internalRef = useRef<HTMLDivElement>(null);
+  useImperativeHandle(refExternal, () => ({
+    exportImageInternal() {
+      const captureImage = () => {
+        const element = internalRef.current;
+        if (element) {
+          html2canvas(element, {
+            backgroundColor: '#FFFFFF',
+          })
+            .then((canvas) => {
+              const finalImage = canvas.toDataURL('image/png');
+              const link = document.createElement('a');
+              link.href = finalImage;
+              link.download = 'Vis0D.png';
+              document.body.appendChild(link);
+              link.click();
+              document.body.removeChild(link);
+            })
+            .catch((error) => {
+              console.error('Error capturing image:', error);
+            });
+        } else {
+          console.error('Container element not found');
+        }
+      };
+
+      const renderCanvas = () => {
+        requestAnimationFrame(() => {
+          captureImage();
+        });
+      };
+
+      renderCanvas();
+    },
+  }));
+
+  useEffect(() => {
+    if (settings.selectedEntity != '' && graphMetadata.nodes.types && settings.selectedAttribute != '' && settings.selectedStat != '') {
+      const nodesLabels = graphMetadata.nodes.labels;
+
+      let attributes = [];
+      if (nodesLabels.includes(settings.selectedEntity)) {
+        attributes = Object.keys(graphMetadata.nodes.types[settings.selectedEntity].attributes);
+      } else {
+        attributes = Object.keys(graphMetadata.edges.types[settings.selectedEntity].attributes);
+      }
+
+      if (attributes.includes(settings.selectedAttribute)) {
+        let statsAvailable = [];
+
+        if (nodesLabels.includes(settings.selectedEntity)) {
+          statsAvailable = Object.keys(
+            graphMetadata.nodes.types[settings.selectedEntity].attributes[settings.selectedAttribute].statistics,
+          );
+        } else {
+          statsAvailable = Object.keys(
+            graphMetadata.edges.types[settings.selectedEntity].attributes[settings.selectedAttribute].statistics,
+          );
+        }
+
+        if (statsAvailable.includes(settings.selectedStat)) {
+          let statValue = 0;
+          if (nodesLabels.includes(settings.selectedEntity)) {
+            statValue = (
+              graphMetadata.nodes.types[settings.selectedEntity].attributes[settings.selectedAttribute].statistics as Record<string, number>
+            )[settings.selectedStat];
+          } else {
+            statValue = (
+              graphMetadata.edges.types[settings.selectedEntity].attributes[settings.selectedAttribute].statistics as Record<string, number>
+            )[settings.selectedStat];
+          }
+
+          setStatRender(statValue);
+        } else {
+          setStatRender(undefined);
+        }
+      } else {
+        setStatRender(undefined);
+      }
+    }
+  }, [settings.selectedEntity, settings.selectedAttribute, settings.selectedStat]);
+
+  return (
+    <div className="h-full w-full flex flex-col items-center justify-center overflow-hidden" ref={internalRef}>
+      {settings.title && <span className="text-3xl text-center mb-4">{settings.title}</span>}
+      {statRender === undefined ? (
+        <span className="text-4xl text-center">Select 0D data</span>
+      ) : (
+        <span className="text-8xl text-center">{formatNumber(statRender)}</span>
+      )}
+    </div>
+  );
+});
+
+const Vis0DSettings = ({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<Vis0DProps>) => {
+  const [attributeOptions, setAttributeOptions] = useState<string[]>([]);
+  const [statsOptions, setStatsOptions] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (settings.selectedEntity === '' && graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0) {
+      const firstEntity = graphMetadata.nodes.labels[0];
+
+      const attributesFirstEntity = Object.keys(graphMetadata.nodes.types[firstEntity].attributes);
+      setAttributeOptions(attributesFirstEntity);
+      const selectedAttribute = attributesFirstEntity[0];
+
+      const attributeSelectedStatistics = graphMetadata.nodes.types[firstEntity].attributes[selectedAttribute].statistics;
+
+      const notNaNStats = Object.keys(attributeSelectedStatistics).filter((key) => {
+        const value = attributeSelectedStatistics[key as keyof typeof attributeSelectedStatistics];
+        return typeof value === 'number' && !isNaN(value);
+      });
+
+      setStatsOptions(notNaNStats as string[]);
+      updateSettings({ selectedEntity: firstEntity, selectedAttribute: selectedAttribute, selectedStat: notNaNStats[0] });
+    }
+  }, [graphMetadata]);
+
+  useEffect(() => {
+    if (
+      settings.selectedEntity != '' &&
+      settings.selectedAttribute != '' &&
+      graphMetadata &&
+      graphMetadata.nodes &&
+      graphMetadata.nodes.labels.length > 0
+    ) {
+      const nodesLabels = graphMetadata.nodes.labels;
+
+      // attribute management
+      let attributesFirstEntity = [];
+      if (nodesLabels.includes(settings.selectedEntity)) {
+        attributesFirstEntity = Object.keys(graphMetadata.nodes.types[settings.selectedEntity].attributes);
+      } else {
+        attributesFirstEntity = Object.keys(graphMetadata.edges.types[settings.selectedEntity].attributes);
+      }
+      setAttributeOptions(attributesFirstEntity);
+      let selectedAttribute = '';
+
+      if (settings.selectedAttribute === '' || !attributesFirstEntity.includes(settings.selectedAttribute)) {
+        selectedAttribute = attributesFirstEntity[0];
+        updateSettings({ selectedAttribute: selectedAttribute });
+      } else {
+        selectedAttribute = settings.selectedAttribute;
+      }
+
+      // stat management
+      let attributeSelectedStatistics: Record<string, number> = {};
+
+      if (nodesLabels.includes(settings.selectedEntity)) {
+        attributeSelectedStatistics = graphMetadata.nodes.types[settings.selectedEntity].attributes[selectedAttribute].statistics as Record<
+          string,
+          number
+        >;
+      } else {
+        attributeSelectedStatistics = graphMetadata.edges.types[settings.selectedEntity].attributes[selectedAttribute].statistics as Record<
+          string,
+          number
+        >;
+      }
+
+      const notNaNStats = Object.keys(attributeSelectedStatistics).filter((key) => {
+        const value = attributeSelectedStatistics[key as keyof typeof attributeSelectedStatistics];
+        // !TODO: include string stats
+        return !isNaN(value);
+      });
+
+      setStatsOptions(notNaNStats as string[]);
+
+      if (settings.selectedStat == '' || !notNaNStats.includes(settings.selectedStat)) {
+        updateSettings({ selectedStat: notNaNStats[0] });
+      } else {
+        updateSettings({ selectedStat: settings.selectedStat });
+      }
+    }
+  }, [settings.selectedEntity, settings.selectedAttribute]);
+
+  return (
+    <SettingsContainer>
+      <div className="p-1">
+        <Input
+          className="mb-2"
+          type="text"
+          label="Title"
+          value={settings.title}
+          onChange={(value) => updateSettings({ title: value as string })}
+        />
+        <Input
+          className="w-full text-justify justify-start mb-2"
+          type="dropdown"
+          value={settings.selectedEntity}
+          options={[...graphMetadata.nodes.labels, ...graphMetadata.edges.labels]}
+          onChange={(val) => updateSettings({ selectedEntity: val as string })}
+          overrideRender={
+            graphMetadata.nodes.labels.includes(settings.selectedEntity) ? (
+              <EntityPill
+                title={
+                  <div className="flex flex-row justify-between items-center cursor-pointer">
+                    <span>{settings.selectedEntity || ''}</span>
+                    <Button variantType="secondary" variant="ghost" size="2xs" iconComponent="icon-[ic--baseline-arrow-drop-down]" />
+                  </div>
+                }
+              />
+            ) : (
+              <RelationPill
+                title={
+                  <div className="flex flex-row justify-between items-center cursor-pointer">
+                    <span>{settings.selectedEntity || ''}</span>
+                    <Button variantType="secondary" variant="ghost" size="2xs" iconComponent="icon-[ic--baseline-arrow-drop-down]" />
+                  </div>
+                }
+              />
+            )
+          }
+        ></Input>
+        <div className="mb-2 w-full">
+          <Input
+            className="w-full text-justify justify-start"
+            type="dropdown"
+            value={settings.selectedAttribute}
+            options={attributeOptions}
+            onChange={(val) => updateSettings({ selectedAttribute: val as string })}
+          ></Input>
+        </div>
+        <div className="mb-2">
+          <Input
+            className="w-full text-justify justify-start"
+            type="dropdown"
+            value={settings.selectedStat}
+            options={statsOptions}
+            onChange={(val) => updateSettings({ selectedStat: val as string })}
+          ></Input>
+        </div>
+      </div>
+    </SettingsContainer>
+  );
+};
+
+const Vis0DRef = React.createRef<Vis0DVisHandle>();
+
+export const Vis0DComponent: VISComponentType<Vis0DProps> = {
+  component: React.forwardRef((props: VisualizationPropTypes<Vis0DProps>, ref) => <Vis0D {...props} ref={Vis0DRef} />),
+  settingsComponent: Vis0DSettings,
+  settings: settings,
+  exportImage: () => {
+    if (Vis0DRef.current) {
+      Vis0DRef.current.exportImageInternal();
+    } else {
+      console.error('0Dvis reference is not set.');
+    }
+  },
+};
+
+export default Vis0DComponent;

libs/shared/lib/vis/visualizations/vis1D/Vis1D.tsx

@@ -4,27 +4,31 @@ import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/confi
 import html2canvas from 'html2canvas';
 import { CustomChartPlotly, plotTypeOptions } from './components/CustomChartPlotly';
 import { Input } from '@graphpolaris/shared/lib/components/inputs';
-import { DropdownTextAndIcon } from '@graphpolaris/shared/lib/components/selectors/textAndIcon';
 import { EntityPill } from '@graphpolaris/shared/lib/components/pills/Pill';
 import { Button } from '@graphpolaris/shared/lib/components/buttons';
 
 export interface Vis1DProps {
-  plotType: (typeof plotTypeOptions)[number];
-  title: string;
-  attribute?: string;
-  nodeLabel: string;
+  plotType: (typeof plotTypeOptions)[number]; // plotly plot type
+  title: string; // title of the plot
+  nodeLabel: string; // node label to plot
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  showAxis: boolean;
 }
 
 const defaultSettings: Vis1DProps = {
   plotType: 'bar',
   title: '',
-  attribute: '',
   nodeLabel: '',
+  xAxisLabel: '',
+  yAxisLabel: '',
+  showAxis: true,
 };
 
 export interface Vis1DVisHandle {
   exportImageInternal: () => void;
 }
+
 const Vis1D = forwardRef<Vis1DVisHandle, VisualizationPropTypes<Vis1DProps>>(({ data, settings }, refExternal) => {
   const internalRef = useRef<HTMLDivElement>(null);
 
@@ -63,48 +67,52 @@ const Vis1D = forwardRef<Vis1DVisHandle, VisualizationPropTypes<Vis1DProps>>(({
     },
   }));
 
-  const attributeValues = useMemo(() => {
-    if (!settings.nodeLabel || !settings.attribute) {
+  const getAttributeValues = (attributeKey: string | number | undefined) => {
+    if (!settings.nodeLabel || !attributeKey) {
       return [];
     }
 
     return data.nodes
-      .filter((item) => item.label === settings.nodeLabel && item.attributes && settings.attribute! in item.attributes)
-      .map((item) => item.attributes[settings.attribute!] as string | number);
-  }, [data, settings.nodeLabel, settings.attribute]);
+      .filter((item) => item.label === settings.nodeLabel && item.attributes && attributeKey in item.attributes)
+      .map((item) => item.attributes[attributeKey]);
+  };
+
+  const xAxisData = useMemo(() => getAttributeValues(settings.xAxisLabel), [data, settings.nodeLabel, settings.xAxisLabel]);
+  const yAxisData = useMemo(() => getAttributeValues(settings.yAxisLabel), [data, settings.nodeLabel, settings.yAxisLabel]);
 
   return (
     <div className="h-full w-full flex items-center justify-center overflow-hidden" ref={internalRef}>
-      <CustomChartPlotly data={attributeValues as string[] | number[]} plotType={settings.plotType} title={settings.title} />
+      <CustomChartPlotly
+        xAxisData={xAxisData as string[] | number[]}
+        yAxisData={yAxisData as string[] | number[]}
+        plotType={settings.plotType}
+        title={settings.title}
+        showAxis={settings.showAxis}
+        xAxisLabel={settings.xAxisLabel}
+        yAxisLabel={settings.yAxisLabel}
+      />
     </div>
   );
 });
 
 const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<Vis1DProps>) => {
   const mutablePlotTypes = [...plotTypeOptions];
-  const [attributeOptions, setAttributeOptions] = useState<{ name: string; type: string }[]>([]);
-  const [selectedOption, setSelectedOption] = useState<{ name: string; type: string } | null>(null);
+  const [attributeOptions, setAttributeOptions] = useState<string[]>([]);
 
-  const handleChange = (option: { name: string; type: string }) => {
-    setSelectedOption(option);
-    updateSettings({ attribute: option.name });
-  };
   useEffect(() => {
-    if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0) {
+    if (settings.nodeLabel === '' && graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0) {
       const nodeLabelTemp = graphMetadata.nodes.labels[0];
       updateSettings({ nodeLabel: nodeLabelTemp });
     }
-  }, [graphMetadata]);
+  }, [settings.nodeLabel, graphMetadata]);
 
   useEffect(() => {
     if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0 && settings.nodeLabel != '') {
-      const newAttributeOptions = Object.entries(graphMetadata.nodes.types[settings.nodeLabel].attributes).map(([key, value]) => ({
-        name: key,
-        type: value.attributeType,
-      }));
-      updateSettings({ attribute: newAttributeOptions[0].name });
+      const newAttributeOptions = Object.keys(graphMetadata.nodes.types[settings.nodeLabel].attributes);
+      if (settings.xAxisLabel === '') {
+        updateSettings({ xAxisLabel: newAttributeOptions[0] });
+      }
       // initialize the selected option for creating the dropdown and plots
-      setSelectedOption(newAttributeOptions[0]);
       setAttributeOptions(newAttributeOptions);
     }
   }, [graphMetadata, settings.nodeLabel]);
@@ -129,14 +137,13 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
             />
           }
         />
-
         <div className="mb-2">
           <Input type="text" label="Title" value={settings.title} onChange={(value) => updateSettings({ title: value as string })} />
         </div>
         <div className="mb-2">
           <Input
             type="dropdown"
-            label="Type Chart"
+            label="Chart"
             value={settings.plotType}
             options={mutablePlotTypes}
             onChange={(value: string | number) => {
@@ -145,7 +152,31 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
           />
         </div>
         <div className="mb-2">
-          <DropdownTextAndIcon value={selectedOption} onChange={handleChange} options={attributeOptions} />
+          <Input
+            type="dropdown"
+            label="X-axis:"
+            value={settings.xAxisLabel}
+            options={attributeOptions}
+            onChange={(value) => {
+              updateSettings({ xAxisLabel: value as string });
+            }}
+          />
+        </div>
+        {(settings.plotType === 'scatter' || settings.plotType === 'line') && (
+          <div className="mb-2">
+            <Input
+              type="dropdown"
+              label="Y-axis:"
+              value={settings.yAxisLabel}
+              options={attributeOptions}
+              onChange={(value) => {
+                updateSettings({ yAxisLabel: value as string });
+              }}
+            />
+          </div>
+        )}
+        <div className="mb-2">
+          <Input type="boolean" label="Show axis" value={settings.showAxis} onChange={(val) => updateSettings({ showAxis: val })} />
         </div>
       </div>
     </SettingsContainer>

libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx

 import { visualizationColors } from 'config';
 import React, { useRef, useEffect, useState } from 'react';
 import Plot from 'react-plotly.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@graphpolaris/shared/lib/components/tooltip';
 
+const getCSSVariableHSL = (varName: string) => {
+  const rootStyles = getComputedStyle(document.documentElement);
+  const hslValue = rootStyles.getPropertyValue(varName).trim().replace('deg', '');
+  return `hsl(${hslValue})`;
+};
 export const plotTypeOptions = ['bar', 'scatter', 'line', 'histogram', 'pie'] as const;
 
 export interface CustomChartPlotlyProps {
-  data: string[] | number[];
+  xAxisData: string[] | number[];
   plotType: (typeof plotTypeOptions)[number];
   title: string;
+  showAxis: boolean;
+  yAxisData: string[] | number[];
+  xAxisLabel?: string;
+  yAxisLabel?: string;
 }
 
-export const getPlotData = (data: (string | number)[], plotType: (typeof plotTypeOptions)[number]): Partial<Plotly.PlotData>[] => {
+export const getPlotData = (
+  xAxisData: (string | number)[],
+  plotType: (typeof plotTypeOptions)[number],
+  yAxisData?: (string | number)[],
+): Partial<Plotly.PlotData>[] => {
   const mainColors = visualizationColors.GPCat.colors[14];
-  const xValues = data.map((_, index) => index + 1);
+
+  const primaryColor = getCSSVariableHSL('--clr-sec--400');
+  let xValues: (string | number)[] = [];
+  let yValues: (string | number)[] = [];
+
+  if (plotType === 'scatter' || plotType === 'line') {
+    if (xAxisData.length != 0 && yAxisData && yAxisData.length != 0) {
+      xValues = xAxisData;
+      yValues = yAxisData;
+    } else if (xAxisData.length != 0 && yAxisData && yAxisData.length == 0) {
+      xValues = xAxisData;
+      yValues = xAxisData.map((_, index) => index + 1);
+    } else if (xAxisData.length == 0 && yAxisData && yAxisData.length != 0) {
+      xValues = yAxisData.map((_, index) => index + 1);
+      yValues = yAxisData;
+    } else if (xAxisData.length == 0 && yAxisData && yAxisData.length == 0) {
+    } else {
+    }
+  } else {
+    xValues = xAxisData;
+    yValues = xAxisData.map((_, index) => index + 1);
+  }
 
   switch (plotType) {
     case 'bar':
@@ -20,8 +55,9 @@ export const getPlotData = (data: (string | number)[], plotType: (typeof plotTyp
         {
           type: 'bar',
           x: xValues,
-          y: data,
-          marker: { color: mainColors },
+          y: yValues,
+          marker: { color: primaryColor },
+          hoverinfo: 'none',
         },
       ];
     case 'scatter':
@@ -29,9 +65,10 @@ export const getPlotData = (data: (string | number)[], plotType: (typeof plotTyp
         {
           type: 'scatter',
           x: xValues,
-          y: data,
+          y: yValues,
           mode: 'markers',
-          marker: { color: mainColors, size: 12 },
+          marker: { color: primaryColor, size: 12 },
+          hoverinfo: 'none',
         },
       ];
     case 'line':
@@ -39,17 +76,19 @@ export const getPlotData = (data: (string | number)[], plotType: (typeof plotTyp
         {
           type: 'scatter',
           x: xValues,
-          y: data,
+          y: yValues,
           mode: 'lines',
-          line: { color: mainColors },
+          line: { color: primaryColor },
+          hoverinfo: 'none',
         },
       ];
     case 'histogram':
       return [
         {
           type: 'histogram',
-          x: data,
-          marker: { color: mainColors },
+          x: xAxisData,
+          marker: { color: primaryColor },
+          hoverinfo: 'none',
         },
       ];
     case 'pie':
@@ -57,18 +96,29 @@ export const getPlotData = (data: (string | number)[], plotType: (typeof plotTyp
         {
           type: 'pie',
           labels: xValues.map(String),
-          values: data,
+          values: xAxisData,
           marker: { colors: mainColors },
+          hoverinfo: 'none',
         },
       ];
+
     default:
       return [];
   }
 };
 
-export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({ data, plotType, title }) => {
+export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
+  xAxisData,
+  plotType,
+  title,
+  showAxis,
+  yAxisData,
+  xAxisLabel,
+  yAxisLabel,
+}) => {
   const internalRef = useRef<HTMLDivElement>(null);
   const [divSize, setDivSize] = useState({ width: 0, height: 0 });
+  const [hoveredPoint, setHoveredPoint] = useState<{ left: number; top: number; value: number } | null>(null);
 
   useEffect(() => {
     const handleResize = () => {
@@ -78,7 +128,7 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({ data, plot
       }
     };
 
-    handleResize(); // Set initial size
+    handleResize();
     window.addEventListener('resize', handleResize);
     if (internalRef.current) {
       new ResizeObserver(handleResize).observe(internalRef.current);
@@ -89,28 +139,86 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({ data, plot
     };
   }, []);
 
+  const handleHover = (event: any) => {
+    const { points } = event;
+
+    if (points.length) {
+      const point = points[0];
+      const plotRect = internalRef.current?.getBoundingClientRect(); // Get the plot's bounding box
+
+      if (plotRect) {
+        // Calculate the position of the tooltip
+        const xIndex = point.xaxis.d2p(point.x); // Convert x value to pixel position
+        const yIndex = point.yaxis.d2p(point.y); // Convert y value to pixel position
+
+        setHoveredPoint({
+          left: xIndex, // Center tooltip above the point
+          top: plotRect.top + yIndex, // Position below the point
+          value: point.y, // Value to display
+        });
+      }
+    }
+  };
+
   return (
-    <div className="h-full w-full flex items-center justify-center overflow-hidden" ref={internalRef}>
+    <div className="h-full w-full flex items-center justify-center overflow-hidden relative" ref={internalRef}>
       <Plot
-        data={getPlotData(data, plotType)}
-        config={{ responsive: true, displayModeBar: false }}
+        data={getPlotData(xAxisData, plotType, yAxisData)}
+        config={{
+          responsive: true,
+          scrollZoom: false,
+          displayModeBar: false,
+          staticPlot: true,
+          displaylogo: false,
+        }}
         layout={{
           width: divSize.width,
           height: divSize.height,
           title: title,
+          dragmode: false,
           font: {
             family: 'Inter, sans-serif',
-            size: 16,
-            color: '#374151',
+            size: 12,
+            color: '#374151', // change to gp default color
           },
           xaxis: {
-            title: 'Category',
+            title: showAxis ? (xAxisLabel ? xAxisLabel : '') : '',
+            showgrid: false,
+            visible: showAxis,
+            showline: true,
+            zeroline: false,
           },
           yaxis: {
-            title: 'Value',
+            title: showAxis ? (yAxisLabel ? yAxisLabel : '') : '',
+            showgrid: false,
+            visible: showAxis,
+            showline: true,
+            zeroline: false,
           },
         }}
+        onHover={handleHover}
+        onUnhover={() => setHoveredPoint(null)}
       />
+
+      {hoveredPoint && (
+        <div>
+          <Tooltip open={true} showArrow={true}>
+            <TooltipTrigger />
+            <TooltipContent
+              style={{
+                position: 'absolute',
+                left: hoveredPoint.left,
+                top: hoveredPoint.top,
+                transform: 'translate(-50%, -100%)',
+              }}
+            >
+              <div>
+                <strong>Value:</strong> {hoveredPoint.value} <br />
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      )}
     </div>
   );
 };