feat(map_nodelink): added nodelink layer

libs/shared/lib/vis/visualizations/mapvis/MapSettings.tsx

@@ -4,6 +4,44 @@ import { layerSettings, layerTypes } from './components/layers';
 import { Input } from '../../..';
 import { VisualizationSettingsPropTypes } from '../../common';
 import { MapProps } from './mapvis';
+import { nodeColorHex } from '../nodelinkvis/components/utils';
+
+const DataLayerSettings = ({
+  layer,
+  settings,
+  graphMetadata,
+  updateSettings,
+}: VisualizationSettingsPropTypes<MapProps> & { layer: keyof typeof layerTypes }) => {
+  switch (layer) {
+    case 'nodelink':
+      return (
+        <>
+          {graphMetadata.nodes.labels.map((item, index) => (
+            <div className="flex m-1 items-center" key={item}>
+              <div className="w-3/4 mr-6">
+                <EntityPill title={item} />
+              </div>
+              <div className="w-1/2">
+                <div className={`h-5 w-5 border-2 border-sec-300`} style={{ backgroundColor: nodeColorHex(index + 1) }}></div>
+              </div>
+            </div>
+          ))}
+
+          <Input
+            label="Enable brushing"
+            type="boolean"
+            value={settings.enableBrushing}
+            onChange={(val) => {
+              console.log('update brush', val);
+              updateSettings({ enableBrushing: val as boolean });
+            }}
+          />
+        </>
+      );
+    default:
+      return;
+  }
+};
 
 export const MapSettings = ({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<MapProps>) => {
   const DataLayerSettings = settings.layer && layerSettings?.[settings.layer];

libs/shared/lib/vis/visualizations/mapvis/components/layers/nodelink-layer/NodeLinkLayer.tsx

@@ -20,6 +20,9 @@ export class NodeLinkLayer extends CompositeLayer<LayerProps> {
     const brushingExtension = new BrushingExtension();
     const collisionFilter = new CollisionFilterExtension();
 
+    const brushingExtension = new BrushingExtension();
+    const collisionFilter = new CollisionFilterExtension();
+
     graph.metaData.nodes.labels.map((label: string) => {
       layers.push(
         new ScatterplotLayer({

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

@@ -15,6 +15,7 @@ export type MapProps = {
   lat: string;
   lon: string;
   enableBrushing: boolean;
+  enableBrushing: boolean;
 };
 
 const settings: MapProps = {
@@ -23,6 +24,7 @@ const settings: MapProps = {
   lat: 'gp_latitude',
   lon: 'gp_longitude',
   enableBrushing: false,
+  enableBrushing: false,
 };
 
 const INITIAL_VIEW_STATE = {
@@ -105,6 +107,7 @@ export const MapVis = ({ data, settings, updateSettings, graphMetadata, handleSe
       name: 'New layer',
       type: layerType,
       config: settings,
+      config: settings,
       visible: true,
     });
   }, [settings.layer]);