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/layers/heatmap-layer/HeatLayerOptions.tsx

+import React, { useState, useMemo, useEffect } from 'react';
+import { VisualizationSettingsPropTypes } from '@graphpolaris/shared/lib/vis/common';
+import { MapProps } from '../../mapvis';
+import { Button, EntityPill, Icon, Input } from '@graphpolaris/shared/lib/components';
+import { SubdirectoryArrowRight, Visibility, VisibilityOff } from '@mui/icons-material';
+
+export default function HeatLayerOptions({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<MapProps>) {
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    graphMetadata.nodes.labels.forEach((node) => {
+      updateSettings({
+        [node]: {
+          color: [0, 0, 0],
+          hidden: false,
+          fixed: true,
+          min: 0,
+          max: 10,
+          radius: 1,
+          sizeAttribute: '',
+          lon: '',
+          lat: '',
+          ...settings?.[node],
+        },
+      });
+    });
+  }, [graphMetadata]);
+
+  const spatialAttributes: { [id: string]: string[] } = {};
+  graphMetadata.nodes.labels.forEach((node) => {
+    spatialAttributes[node] = Object.entries(graphMetadata.nodes.types[node].attributes)
+      .filter(([, value]) => value.dimension === 'numerical')
+      .map(([key]) => key);
+  });
+
+  const handleCollapseToggle = (nodeType: string) => {
+    setCollapsed((prevCollapsed) => ({
+      ...prevCollapsed,
+      [nodeType]: !prevCollapsed[nodeType],
+    }));
+  };
+
+  return (
+    <div>
+      {graphMetadata.nodes.labels.map((nodeType) => (
+        <div className="mt-2" key={nodeType}>
+          <div className="flex items-center">
+            <div className="w-3/4 mr-6 cursor-pointer" onClick={() => handleCollapseToggle(nodeType)}>
+              <EntityPill title={nodeType} />
+            </div>
+            <div className="w-1/2">
+              <Button
+                iconComponent={settings?.[nodeType].hidden ? <VisibilityOff /> : <Visibility />}
+                variant="ghost"
+                onClick={() => {
+                  updateSettings({ [nodeType]: { ...settings?.[nodeType], hidden: !settings?.[nodeType].hidden as boolean } });
+                }}
+              />
+            </div>
+          </div>
+
+          {!collapsed[nodeType] && (
+            <div>
+              <Input
+                inline
+                label="Longitude"
+                type="dropdown"
+                value={settings?.[nodeType]?.lon}
+                options={[...spatialAttributes[nodeType]]}
+                disabled={!settings.node || spatialAttributes[nodeType].length < 1}
+                onChange={(val) => updateSettings({ [nodeType]: { ...settings?.[nodeType], lon: val as string } })}
+              />
+
+              <Input
+                inline
+                label="Latitude"
+                type="dropdown"
+                value={settings?.[nodeType]?.lat}
+                options={[...spatialAttributes[nodeType]]}
+                disabled={!settings.node || spatialAttributes[nodeType].length < 1}
+                onChange={(val) => updateSettings({ [nodeType]: { ...settings?.[nodeType], lat: val as string } })}
+              />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}