feat(map_nodelink)

Added simple nodelink layer for the map visualization, and also the config panel for several layers

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

+import React from 'react';
+import { CompositeLayer } from 'deck.gl';
+import { LineLayer, ScatterplotLayer, TextLayer } from '@deck.gl/layers';
+import { LayerProps } from '../../../mapvis.types';
+import { BrushingExtension, CollisionFilterExtension } from '@deck.gl/extensions';
+
+export const NodeLinkConfig = {
+  showLabels: false,
+  nodeShapeDynamic: false,
+  shapeAccessor: '',
+  iconMapping: {},
+  colorMapping: {},
+  edgesOnHover: true,
+  nodeSizeDynamic: true,
+  nodeSize: 2,
+  edgeWidth: 1.5,
+};
+
+export class NodeLinkLayer extends CompositeLayer<LayerProps> {
+  static type = 'NodeLink';
+  static layerOptions = NodeLinkConfig;
+
+  shouldUpdateState({ props, oldProps, context, changeFlags }: { props: any; oldProps: any; context: any; changeFlags: any }) {
+    return changeFlags.propsChanged;
+  }
+
+  renderLayers() {
+    const { graph, config, visible, getNodeLocation, selected } = this.props;
+
+    const layers = [];
+
+    const brushingExtension = new BrushingExtension();
+    const collisionFilter = new CollisionFilterExtension();
+
+    layers.push(
+      new ScatterplotLayer({
+        hidden: visible,
+        data: graph.nodes,
+        pickable: true,
+        radiusScale: 6,
+        radiusMinPixels: 7,
+        radiusMaxPixels: 100,
+        lineWidthMinPixels: 1,
+        getPosition: (d: any) => getNodeLocation(d.id),
+        getFillColor: (d: any) => {
+          if (d.label === 'PERSON') {
+            return [182, 154, 239];
+          } else if (d.label === 'INCIDENT') {
+            return [169, 25, 25];
+          }
+          return [0, 0, 0];
+        },
+        getRadius: (d: any) => 5,
+      }),
+    );
+
+    layers.push(
+      new LineLayer({
+        id: 'edges',
+        data: graph.edges,
+        pickable: true,
+        getWidth: (d: any) => 2,
+        getSourcePosition: (d: any) => getNodeLocation(d.from),
+        getTargetPosition: (d: any) => getNodeLocation(d.to),
+        getColor: (d: any) => [145, 168, 208],
+        radiusScale: 3000,
+        brushingEnabled: config.enableBrushing,
+        extensions: [brushingExtension],
+      }),
+    );
+
+    layers.push(
+      new TextLayer({
+        id: 'label-target',
+        data: graph.nodes,
+        getPosition: (d: any) => getNodeLocation(d.id),
+        getText: (d: any) => d.id,
+        getSize: 15,
+        visible: true,
+        getAlignmentBaseline: 'top',
+        background: true,
+        getPixelOffset: [10, 10],
+        extensions: [collisionFilter],
+        collisionEnabled: true,
+        getCollisionPriority: (d: any) => d.id,
+        collisionTestProps: { sizeScale: 10 },
+        getRadius: 10,
+        radiusUnits: 'pixels',
+        collisionGroup: 'text',
+      }),
+    );
+
+    return [...layers];
+  }
+}
+
+NodeLinkLayer.layerName = 'NodeLink';