diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx index 3792f77a0ce07786386a358a1699f33f086df21a..dd5ce93be31ed9f5beab36acf9755e189cfd1522 100644 --- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx +++ b/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> ); };