geo intergation

libs/shared/lib/vis/visualizations/mapvis/components/layers/node-layer/NodeLayer.tsx

 import React from 'react';
-import { CompositeLayer } from 'deck.gl/typed';
-import { ScatterplotLayer } from '@deck.gl/layers/typed';
-import { getProperty } from '../../utlis';
-import * as d3 from 'd3';
+import { CompositeLayer } from 'deck.gl';
+import { ScatterplotLayer } from '@deck.gl/layers';
+import { getProperty } from '../../../utlis';
 import NodeOptions from './NodeOptions';
-import { Node, LayerProps } from '../../types';
+import { Node, LayerProps } from '../../../mapvis.types';
+import { color, scaleLinear, scaleOrdinal } from 'd3';
+import { dataColors, visualizationColors } from 'config';
 
-export const NodeLayerConfig = {
-  colisionFilter: true,
+export const NodeLayerConfig: {
+  collisionFilter: boolean;
+  opacity: number;
+  fillColor: {
+    filled: boolean;
+    type: string;
+    label: string;
+    accessor: string;
+    fixed: boolean;
+    defaultValue: string;
+    value: string;
+    scaleRange: string[];
+    condition: string;
+  };
+} = {
+  collisionFilter: true,
   opacity: 1,
   fillColor: {
     filled: true,
@@ -15,12 +30,9 @@ export const NodeLayerConfig = {
     label: 'color',
     accessor: 'getFillColor',
     fixed: true,
-    defaultValue: [255, 0, 0],
-    value: [255, 0, 0],
-    scaleRange: [
-      [255, 0, 0],
-      [0, 0, 255],
-    ],
+    defaultValue: visualizationColors.GPPrimary.colors[1][0],
+    value: visualizationColors.GPPrimary.colors[1][0],
+    scaleRange: visualizationColors.GPPrimary.colors[1],
     condition: '',
   },
 };
@@ -44,14 +56,12 @@ export class NodeLayer extends CompositeLayer<LayerProps> {
   }
 
   createColorScale(colorProp: { [key: string]: any }, colorAttribute: { [key: string]: any }) {
-    console.log(colorAttribute);
     if (colorAttribute.dataType == 'boolean') {
-      return d3.scaleOrdinal().domain(['0', '1']).range(colorProp.scaleRange);
+      return scaleOrdinal().domain(['0', '1']).range(colorProp.scaleRange);
     } else if (colorAttribute.dataType == 'number') {
-      return d3.scaleLinear().domain(colorAttribute.values).range(colorProp.scaleRange);
+      return scaleLinear().domain(colorAttribute.values).range(colorProp.scaleRange);
     } else if (colorAttribute.dataType == 'string') {
-      return d3
-        .scaleOrdinal()
+      return scaleOrdinal()
         .domain([...colorAttribute.values])
         .range(colorProp.scaleRange);
     } else {
@@ -68,16 +78,16 @@ export class NodeLayer extends CompositeLayer<LayerProps> {
         return colorProps.defaultValue;
       }
       const value = getProperty(node.attributes, condition);
-      return this.state.colorScale(value);
+      return (this.state as any).colorScale(value);
     }
   }
 
   renderLayers() {
-    const { graph, config, visible } = this.props;
+    const { graph, config, visible, getNodeLocation } = this.props;
 
     return new ScatterplotLayer({
       hidden: visible,
-      data: graph.getNodes(),
+      data: graph.nodes,
       pickable: true,
       opacity: config.opacity,
       filled: config.fillColor.filled,
@@ -85,8 +95,15 @@ export class NodeLayer extends CompositeLayer<LayerProps> {
       radiusMinPixels: 7,
       radiusMaxPixels: 100,
       lineWidthMinPixels: 1,
-      getPosition: (d: any) => [d.attributes.long, d.attributes.lat],
-      getFillColor: (d: any) => this.getColor(d, config.fillColor),
+      getPosition: (d: any) => getNodeLocation(d.id),
+      // getFillColor: (d: any) => this.getColor(d, config.fillColor),
+      getFillColor: (d: any) => {
+        const c = color(config.fillColor.value as string)?.rgb();
+        if (!c) {
+          return [0, 0, 0];
+        }
+        return [c.r, c.g, c.b];
+      },
       getRadius: (d: any) => 5,
     });
   }