fix(mapvisStorybook): fixed map storybook

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

@@ -43,7 +43,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
       });
     });
 
-    if (ml.linkPrediction.enabled) {
+    if (ml?.linkPrediction?.enabled) {
       this._layers['link_prediction'] = new LineLayer({
         id: 'link-prediction-layer',
         data: ml.linkPrediction.result,

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

@@ -3,7 +3,7 @@ import { Meta } from '@storybook/react';
 import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
 import { graphQueryResultSlice, querybuilderSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
-import { MapComponent } from './mapvis';
+import MapComponent from './mapvis';
 import { mockData } from '../../../mock-data/query-result/mockData';
 
 const Mockstore = configureStore({
@@ -39,27 +39,32 @@ export const NodeLink = {
     ...(await mockData.mockMobilityQueryResult()),
     settings: {
       layer: 'nodelink',
-      parkings: {
-        color: [6, 147, 227],
-        fixed: true,
-        hidden: false,
-        lat: 'lat',
-        lon: 'long',
-        max: 10,
-        min: 0,
-        radius: 1,
-        sizeAttribute: '',
-      },
-      rides: {
-        color: [6, 147, 227],
-        fixed: true,
-        hidden: false,
-        max: 10,
-        min: 0,
-        width: 1,
-        widthAttribute: '',
+      location: { parkings: { lat: 'lat', lon: 'long' } },
+      nodelink: {
+        enableBrushing: false,
+        nodes: {
+          parkings: {
+            colorByAttribute: false,
+            colorAttribute: undefined,
+            colorAttributeType: undefined,
+            hidden: false,
+            shape: 'circle',
+            color: [6, 147, 227],
+            size: 10,
+          },
+        },
+        edges: {
+          rides: {
+            hidden: false,
+            width: 1,
+            sizeAttribute: '',
+            fixed: true,
+            color: [6, 147, 227],
+          },
+        },
       },
     },
+    handleSelect: () => {},
   },
 };
 
@@ -68,27 +73,52 @@ export const Heatmap = {
     ...(await mockData.mockMobilityQueryResult()),
     settings: {
       layer: 'heatmap',
-      parkings: {
-        color: [6, 147, 227],
-        fixed: true,
-        hidden: false,
-        lat: 'lat',
-        lon: 'long',
-        max: 10,
-        min: 0,
-        radius: 1,
-        sizeAttribute: '',
+      location: { parkings: { lat: 'lat', lon: 'long' } },
+      heatmap: {
+        nodes: {
+          parkings: {
+            size: 10,
+            hidden: false,
+          },
+        },
+        edges: {
+          rides: {},
+        },
       },
-      rides: {
-        color: [6, 147, 227],
-        fixed: true,
-        hidden: false,
-        max: 10,
-        min: 0,
-        width: 1,
-        widthAttribute: '',
+    },
+    handleSelect: () => {},
+  },
+};
+
+export const Choropleth = {
+  args: {
+    ...(await mockData.mockMobilityQueryResult()),
+    settings: {
+      layer: 'choropleth',
+      location: { parkings: { lat: 'lat', lon: 'long' } },
+      choropleth: {
+        coloringStrategy: 'Node count',
+        colorScale: 'orange',
+        opacity: 0.8,
+        nodes: {
+          parkings: {
+            color: [0, 0, 0],
+            hidden: false,
+            fixed: true,
+            min: 0,
+            max: 10,
+            sizeAttribute: '',
+          },
+        },
+        edges: {
+          rides: {
+            color: [0, 0, 0],
+            onHover: true,
+          },
+        },
       },
     },
+    handleSelect: () => {},
   },
 };