fix: update shape dropdown to correctly handle node shape selection

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

@@ -13,20 +13,19 @@ import { Node } from '@graphpolaris/shared/lib/data-access/store/graphQueryResul
 import { IPointData } from 'pixi.js';
 import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
 
-  
 // For backwards compatibility with older saveStates, we migrate information from settings.nodes to settings.location
 // FIXME: this can be removed once all systems have updated their saveStates.
 function patchLegacySettings(settings: NodelinkVisProps): NodelinkVisProps {
   if (!('nodes' in settings)) {
-    settings = JSON.parse(JSON.stringify(settings));  // Undo Object.preventExtensions()
+    settings = JSON.parse(JSON.stringify(settings)); // Undo Object.preventExtensions()
 
     settings.nodes = {
       shape: {
         type: (settings as any).shapes.shape,
         similar: (settings as any).shapes.similar,
-        shapeMap: undefined
+        shapeMap: undefined,
       },
-      labelAttributes: {}
+      labelAttributes: {},
     };
     settings.edges.labelAttributes = {};
   }
@@ -49,7 +48,7 @@ export interface NodelinkVisProps {
       shapeMap: { [id: string]: 'circle' | 'rectangle' } | undefined;
     };
     labelAttributes: { [nodeType: string]: string };
-  },
+  };
   edges: {
     width: {
       similar: boolean;
@@ -89,7 +88,7 @@ const NodeLinkVis = forwardRef<NodeLinkVisHandle, VisualizationPropTypes<Nodelin
     const [highlightedLinks, setHighlightedLinks] = useState<LinkType[]>([]);
 
     settings = patchLegacySettings(settings);
-  
+
     useEffect(() => {
       if (data) {
         setGraph(
@@ -218,9 +217,19 @@ const NodelinkSettings = ({ settings, graphMetadata, updateSettings }: Visualiza
           <Input
             type="dropdown"
             label="Shape"
-            value={settings.shapes.shape}
+            value={settings.nodes.shape.type}
             options={[{ circle: 'Circle' }, { rectangle: 'Square' }]}
-            onChange={(val) => updateSettings({ shapes: { ...settings.shapes, shape: val as any } })}
+            onChange={(val) =>
+              updateSettings({
+                nodes: {
+                  ...settings.nodes,
+                  shape: {
+                    ...settings.nodes.shape,
+                    type: val as 'circle' | 'rectangle',
+                  },
+                },
+              })
+            }
           />
         </div>
       </div>
@@ -242,18 +251,21 @@ const NodelinkSettings = ({ settings, graphMetadata, updateSettings }: Visualiza
       </div>
       <div>
         <span className="text-xs font-semibold">Labels</span>
-        { Object.entries(graphMetadata.edges.types).map(([label, type]) =>
+        {Object.entries(graphMetadata.edges.types).map(([label, type]) => (
           <Input
             type="dropdown"
             key={label}
             label={label}
             value={settings.edges.labelAttributes ? settings.edges.labelAttributes[label] || 'Default' : undefined}
-            options={['Default', ...Object.keys(type.attributes).filter(x => x != 'Type')]}
-            onChange={(val) => updateSettings({ edges: { ...settings.edges, labelAttributes: { ... settings.edges.labelAttributes, [label]: val as string } } })}
+            options={['Default', ...Object.keys(type.attributes).filter((x) => x != 'Type')]}
+            onChange={(val) =>
+              updateSettings({
+                edges: { ...settings.edges, labelAttributes: { ...settings.edges.labelAttributes, [label]: val as string } },
+              })
+            }
           />
-        )}  
+        ))}
       </div>
-      
     </SettingsContainer>
   );
 };