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/mapvis.tsx

-import React, { useEffect, useMemo, useCallback, useState } from 'react';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import DeckGL from '@deck.gl/react';
 import { FlyToInterpolator, WebMercatorViewport } from '@deck.gl/core';
 import { SelectionLayer } from '@deck.gl-community/editable-layers';
 import { Coordinate, Layer } from './mapvis.types';
 import { VISComponentType, VisualizationPropTypes } from '../../common';
-import { layerTypes, createBaseMap } from './layers';
-import { MapSettings } from './settings';
+import { layerTypes } from './components/layers';
+import { createBaseMap } from './components/BaseMap';
+import { MapSettings } from './MapSettings';
 import { Node } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
-import { HighlightAlt, SearchOutlined } from '@mui/icons-material';
-import SearchBar from './search';
 
-export type MapProps = { layer: string };
+export type MapProps = {
+  layer: string;
+  node: undefined | string;
+  lat: string;
+  lon: string;
+  enableBrushing: boolean;
+};
 
-const settings: MapProps = { layer: 'node' };
+const settings: MapProps = {
+  layer: 'node',
+  node: undefined,
+  lat: 'gp_latitude',
+  lon: 'gp_longitude',
+  enableBrushing: false,
+};
 
 const INITIAL_VIEW_STATE = {
   latitude: 52.1006,
@@ -26,14 +37,13 @@ const FLY_SPEED = 1000;
 
 const baseLayer = createBaseMap();
 
-export const MapVis = ({ data, settings, handleSelect, graphMetadata }: VisualizationPropTypes<MapProps>) => {
-  const [layer, setLayer] = useState<Layer | undefined>(undefined);
-  const [viewport, setViewport] = useState<Record<string, any>>(INITIAL_VIEW_STATE);
-  const [hoverObject, setHoverObject] = useState<Node | null>(null);
-  const [selected, setSelected] = useState<any[]>([]);
-  const [selectingRectangle, setSelectingRectangle] = useState<boolean>(false);
-  const [layerIds, setLayerIds] = useState<string[]>([]);
-  const [isSearching, setIsSearching] = useState<boolean>(false);
+export const MapVis = ({ data, settings, updateSettings, graphMetadata, handleSelect }: VisualizationPropTypes<MapProps>) => {
+  const [layer, setLayer] = React.useState<Layer | undefined>(undefined);
+  const [viewport, setViewport] = React.useState<Record<string, any>>(INITIAL_VIEW_STATE);
+  const [hoverObject, setHoverObject] = React.useState<Node | null>(null);
+  const [selected, setSelected] = React.useState<any[]>([]);
+  const [isSelecting, setIsSelecting] = React.useState<boolean>(false);
+  const [selectingRectangle, setSelectingRectangle] = React.useState<boolean>(false);
 
   const getFittedViewport = useCallback(
     (minLat: number, maxLat: number, minLon: number, maxLon: number) => {
@@ -66,23 +76,33 @@ export const MapVis = ({ data, settings, handleSelect, graphMetadata }: Visualiz
 
   useEffect(() => {
     const layerType = settings.layer ? layerTypes?.[settings.layer] : layerTypes.node;
-    const newLayerId = `layer-${Date.now()}`;
 
     setLayer({
+      id: Date.now(),
+      name: 'New layer',
       type: layerType,
       config: settings,
+      visible: true,
     });
-
-    setLayerIds((prevIds) => [...prevIds, newLayerId]);
   }, [settings.layer]);
 
+  useEffect(() => {
+    console.log('configuration.node', settings.node);
+  }, [settings.node]);
+
+  useEffect(() => {
+    if (settings.node != undefined && !graphMetadata.nodes.labels.includes(settings.node)) {
+      updateSettings({ node: undefined });
+    }
+  }, [graphMetadata.nodes.types, data, settings]);
+
   const dataLayer = useMemo(() => {
-    if (!layer || !settings.layer) return null;
+    if (!layer || !settings.node || !settings.lat || !settings.lon) return null;
 
     const coordinateLookup: { [id: string]: Coordinate } = data.nodes.reduce(
       (acc, node) => {
-        const latitude = settings[node.label].lat ? (node?.attributes?.[settings[node.label].lat] as string) : undefined;
-        const longitude = settings[node.label].lon ? (node?.attributes?.[settings[node.label].lon] as string) : undefined;
+        const latitude = settings.lat ? (node?.attributes?.[settings.lat] as string) : undefined;
+        const longitude = settings.lon ? (node?.attributes?.[settings.lon] as string) : undefined;
 
         if (!!latitude && !!longitude) {
           acc[node._id] = [parseFloat(longitude), parseFloat(latitude)];
@@ -94,18 +114,19 @@ export const MapVis = ({ data, settings, handleSelect, graphMetadata }: Visualiz
     );
 
     return new layer.type({
+      id: `${layer.id}`,
       graph: data,
-      metaData: graphMetadata,
-      config: settings,
+      visible: layer.visible,
+      config: layer.config,
       selected: selected,
       hoverObject: hoverObject,
-      getNodeLocation: (d: string) => {
-        return coordinateLookup[d];
+      isSelecting: isSelecting,
+      getNodeLocation: (d: Node) => {
+        return coordinateLookup[d._id];
       },
       flyToBoundingBox: flyToBoundingBox,
-      setLayerIds: (val: string[]) => setLayerIds(val),
     });
-  }, [layer, data, selected, hoverObject, settings]);
+  }, [layer, data, selected, hoverObject, isSelecting, settings.lat, settings.lon, settings.node]);
 
   const selectionLayer = useMemo(
     () =>
@@ -113,29 +134,11 @@ export const MapVis = ({ data, settings, handleSelect, graphMetadata }: Visualiz
       new (SelectionLayer as any)({
         id: 'selection',
         selectionType: 'rectangle',
-        onSelect: ({ pickingInfos }: { pickingInfos: any[] }) => {
-          if (pickingInfos.length > 0) {
-            const nodes = [];
-            const edges = [];
-
-            for (const selectedItem of pickingInfos) {
-              const { object } = selectedItem;
-              if (object._id) {
-                if (object.from & object.to) {
-                  edges.push(object);
-                } else {
-                  nodes.push(object);
-                }
-              }
-            }
-            setSelected(nodes.map((node) => node._id));
-            handleSelect({ nodes, edges });
-          } else {
-            handleSelect();
-          }
+        onSelect: ({ pickingInfos }: any) => {
+          setSelected(pickingInfos.map((item: any) => item.object));
           setSelectingRectangle(false);
         },
-        layerIds: layerIds,
+        layerIds: [layer?.id ? layer.id : ''],
         getTentativeFillColor: () => [22, 37, 67, 100],
       }),
     [selectingRectangle, layer],
@@ -143,24 +146,8 @@ export const MapVis = ({ data, settings, handleSelect, graphMetadata }: Visualiz
 
   return (
     <div className="w-full h-full flex-grow relative overflow-hidden">
-      <div className="absolute left-0 top-0 z-50 m-1">
-        <div className="cursor-pointer p-1 bg-white shadow-md rounded mb-1" onClick={() => setSelectingRectangle(true)}>
-          <HighlightAlt />
-        </div>
-        <div className="cursor-pointer p-1 bg-white shadow-md rounded" onClick={() => setIsSearching(!isSearching)}>
-          <SearchOutlined />
-        </div>
-      </div>
-      {isSearching && (
-        <SearchBar
-          onSearch={(boundingbox: [number, number, number, number]) => {
-            flyToBoundingBox(...boundingbox);
-            setIsSearching(false);
-          }}
-        />
-      )}
       <DeckGL
-        layers={[baseLayer, dataLayer, selectionLayer]}
+        layers={[baseLayer, dataLayer]}
         controller={true}
         initialViewState={viewport}
         onViewStateChange={({ viewState }) => setViewport(viewState)}
@@ -168,7 +155,6 @@ export const MapVis = ({ data, settings, handleSelect, graphMetadata }: Visualiz
           if (data) {
             if (!object) {
               handleSelect();
-              setSelected([]);
               return;
             }
             if (object.hasOwnProperty('attributes') && object.hasOwnProperty('id') && object.hasOwnProperty('label')) {
@@ -192,12 +178,6 @@ export const MapVis = ({ data, settings, handleSelect, graphMetadata }: Visualiz
           setHoverObject(object !== undefined ? object : null);
         }}
       />
-      <div className="absolute right-0 top-0 p-1 z-50 bg-white bg-opacity-75 text-xs">
-        {'© '}
-        <a className="underline" href="http://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">
-          OpenStreetMap
-        </a>
-      </div>
     </div>
   );
 };