feat(visManager): nodelink settings

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

@@ -7,12 +7,14 @@ import * as force from './NLForce';
 import { Viewport } from 'pixi-viewport';
 import { useAppDispatch, useML, useSearchResultData } from '../../../../data-access';
 import { NLPopup } from './NLPopup';
+import { VisualizationConfiguration } from '../../../types';
 
 type Props = {
   onClick: (node: NodeType, pos: IPointData) => void;
   // onHover: (data: { node: NodeType; pos: IPointData }) => void;
   // onUnHover: (data: { node: NodeType; pos: IPointData }) => void;
   highlightNodes: NodeType[];
+  configuration: VisualizationConfiguration;
   currentShortestPathEdges?: LinkType[];
   highlightedLinks?: LinkType[];
   graph?: GraphType;

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

@@ -8,15 +8,35 @@ import { VisualizationPropTypes, VISComponentType } from '../../types';
 import Input from '@graphpolaris/shared/lib/components/inputs';
 import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
 import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
+import { validateProps } from '@deck.gl/core/typed/lifecycle/props';
 
 export interface NodelinkVisProps {
   layout: string;
   showPopUpOnHover: boolean;
+  shapes: {
+    similar: boolean;
+    shape: 'circle' | 'rectangle';
+    shapeMap: { [id: string]: 'circle' | 'rectangle' } | undefined;
+  };
+  edges: {
+    width: {
+      similar: boolean;
+      width: number;
+    };
+  };
 }
 
 const configuration: NodelinkVisProps = {
   layout: 'Force directed',
   showPopUpOnHover: true,
+  shapes: {
+    similar: true,
+    shape: 'circle',
+    shapeMap: undefined,
+  },
+  edges: {
+    width: { similar: true, width: 0.2 },
+  },
 };
 
 export const NodeLinkVis = React.memo(({ data, ml, dispatch }: VisualizationPropTypes) => {
@@ -72,6 +92,7 @@ export const NodeLinkVis = React.memo(({ data, ml, dispatch }: VisualizationProp
       <div className="h-full w-full overflow-hidden" ref={ref}>
         <NLPixi
           graph={graph}
+          configuration={configuration}
           highlightNodes={highlightNodes}
           highlightedLinks={highlightedLinks}
           onClick={(node, pos) => {
@@ -94,19 +115,73 @@ const NodelinkSettings = ({
 }) => {
   return (
     <SettingsContainer>
-      <Input
-        type="dropdown"
-        label="Layout"
-        value={configuration.layout}
-        options={['Force directed']}
-        onChange={(val) => updateSettings({ layout: val })}
-      />
-      <Input
-        type="boolean"
-        label="Show pop-up on hover"
-        value={configuration.showPopUpOnHover}
-        onChange={(val) => updateSettings({ showPopUpOnHover: val })}
-      />
+      <div className="mb-4">
+        <h1 className="text-sm font-bold">General</h1>
+        <Input
+          type="dropdown"
+          label="Layout"
+          value={configuration.layout}
+          options={['Force directed']}
+          onChange={(val) => updateSettings({ layout: val })}
+        />
+        <Input
+          type="boolean"
+          label="Show pop-up on hover"
+          value={configuration.showPopUpOnHover}
+          onChange={(val) => updateSettings({ showPopUpOnHover: val })}
+        />
+      </div>
+
+      <div className="mb-4">
+        <h1 className="text-sm font-bold">Nodes</h1>
+
+        <div>
+          <span className="text-xs font-semibold">Shape</span>
+          <Input
+            type="boolean"
+            label="Common shape?"
+            value={configuration.shapes.similar}
+            onChange={(val) => updateSettings({ shapes: { ...configuration.shapes, similar: val } })}
+          />
+          {configuration.shapes.similar ? (
+            <Input
+              type="dropdown"
+              label="Shape"
+              value={configuration.shapes.shape}
+              options={['Circle', 'Square']}
+              onChange={(val) => updateSettings({ shapes: { ...configuration.shapes, shape: val } })}
+            />
+          ) : (
+            <span>Map shapes to labels (to be implemented)</span>
+          )}
+        </div>
+
+        <div>
+          <span className="text-xs font-semibold">Color</span>
+        </div>
+      </div>
+
+      <div>
+        <h1 className="text-sm font-bold">Edges</h1>
+        <div>
+          <span className="text-xs font-semibold">Edge width</span>
+          <Input
+            type="boolean"
+            label="Common width"
+            value={configuration.edges.width.similar}
+            onChange={(val) => updateSettings({ edges: { ...configuration.edges, width: { ...configuration.edges.width, similar: val } } })}
+          />
+          <Input
+            type="slider"
+            label="Width"
+            value={configuration.edges.width.width}
+            onChange={(val) => updateSettings({ edges: { ...configuration.edges, width: { ...configuration.edges.width, width: val } } })}
+            min={0.1}
+            max={2}
+            step={0.1}
+          />
+        </div>
+      </div>
     </SettingsContainer>
   );
 };