Storybook example for custom layer (equinor#673)

Co-authored-by: Shadab Khan <[email protected]>

react/src/lib/components/DeckGLMap/DeckGLMap.jsx

@@ -21,8 +21,8 @@ DeckGLMap.defaultProps = {
         position: [46, 10],
     },
     zoom: -3,
-    colorTables: { colorTables },
-    template: { template },
+    colorTables: colorTables,
+    template: template,
 };
 
 function DeckGLMap({
@@ -41,17 +41,15 @@ function DeckGLMap({
     setProps,
 }) {
     // Contains layers data received from map layers by user interaction
-    let [layerEditedData, setLayerEditedData] = React.useState(null);
+    let [layerEditedData, setLayerEditedData] = React.useState(editedData);
 
     React.useEffect(() => {
-        if (!layerEditedData) {
-            setLayerEditedData(editedData);
-        } else {
-            setLayerEditedData({
-                ...layerEditedData,
-                ...editedData,
-            });
-        }
+        if (!editedData) return;
+
+        setLayerEditedData({
+            ...layerEditedData,
+            ...editedData,
+        });
     }, [editedData]);
 
     // This callback is used as a mechanism to update the component from the layers or toolbar.
@@ -70,23 +68,21 @@ function DeckGLMap({
     );
 
     return (
-        layerEditedData && (
-            <Map
-                id={id}
-                resources={resources}
-                layers={layers}
-                bounds={bounds}
-                zoom={zoom}
-                coords={coords}
-                scale={scale}
-                legend={legend}
-                template={template}
-                colorTables={colorTables}
-                coordinateUnit={coordinateUnit}
-                editedData={layerEditedData}
-                setEditedData={setEditedData}
-            />
-        )
+        <Map
+            id={id}
+            resources={resources}
+            layers={layers}
+            bounds={bounds}
+            zoom={zoom}
+            coords={coords}
+            scale={scale}
+            legend={legend}
+            template={template}
+            colorTables={colorTables}
+            coordinateUnit={coordinateUnit}
+            editedData={layerEditedData}
+            setEditedData={setEditedData}
+        />
     );
 }
 

react/src/lib/components/DeckGLMap/components/DeckGLWrapper.tsx

@@ -127,10 +127,16 @@ const DeckGLWrapper: React.FC<DeckGLWrapperProps> = ({
         // Add the resources as an enum in the Json Configuration and then convert the spec to actual objects.
         // See https://deck.gl/docs/api-reference/json/overview for more details.
         const configuration = new JSONConfiguration(JSON_CONVERTER_CONFIG);
-        if (resources && editedData) {
+        if (resources) {
             configuration.merge({
                 enumerations: {
                     resources,
+                },
+            });
+        }
+        if (editedData) {
+            configuration.merge({
+                enumerations: {
                     editedData,
                 },
             });

react/src/lib/components/DeckGLMap/storybook/DeckGLMap.stories.jsx

@@ -25,9 +25,114 @@ const Template = (args) => {
     );
 };
 
+// Data for custome geojson layer with polyline data
+const customLayerWithPolylineData = {
+    "@@type": "GeoJsonLayer",
+    id: "geojson-line-layer",
+    data: {
+        type: "FeatureCollection",
+        features: [
+            {
+                type: "Feature",
+                properties: {},
+                geometry: {
+                    type: "LineString",
+                    coordinates: [
+                        [434000, 6477500],
+                        [435500, 6477500],
+                    ],
+                },
+            },
+        ],
+    },
+    lineWidthScale: 20,
+    lineWidthMinPixels: 2,
+};
+
+// Data for custom geojson layer with polygon data
+const customLayerWithPolygonData = {
+    "@@type": "GeoJsonLayer",
+    id: "geojson-layer",
+    data: {
+        type: "Feature",
+        properties: {},
+        geometry: {
+            type: "Polygon",
+            coordinates: [
+                [
+                    [434562, 6477595],
+                    [434562, 6478595],
+                    [435062, 6478595],
+                    [435062, 6477595],
+                    [434562, 6477595],
+                ],
+            ],
+        },
+    },
+    lineWidthScale: 20,
+    lineWidthMinPixels: 2,
+    getLineColor: [0, 255, 255],
+    getFillColor: [0, 255, 0],
+    opacity: 0.3,
+};
+
+// Data for custom text layer
+const customLayerWithTextData = {
+    "@@type": "TextLayer",
+    id: "text-layer",
+    data: [
+        {
+            name: "Custom GeoJson layer",
+            coordinates: [434800, 6478695],
+        },
+    ],
+    pickable: true,
+    getPosition: (d) => d.coordinates,
+    getText: (d) => d.name,
+    getColor: [255, 0, 0],
+    getSize: 16,
+    getAngle: 0,
+    getTextAnchor: "middle",
+    getAlignmentBaseline: "center",
+};
+
+// Layers data for storybook example 1
+const layersData1 = [
+    customLayerWithPolylineData,
+    customLayerWithPolygonData,
+    customLayerWithTextData,
+];
+
+// Layers data for storybook example 2
+const colormapLayer = exampleData[0].layers[0];
+const layersData2 = [
+    colormapLayer,
+    customLayerWithPolylineData,
+    customLayerWithPolygonData,
+    customLayerWithTextData,
+];
+
+// Storybook example 1
 export const Default = Template.bind({});
 Default.args = {
     ...exampleData[0],
     template: template,
     colorTables: colorTables,
 };
+
+// Storybook example 2
+export const CustomLayer = Template.bind({});
+CustomLayer.args = {
+    id: exampleData[0].id,
+    bounds: exampleData[0].bounds,
+    layers: layersData1,
+};
+
+// Storybook example 3
+export const CustomLayerWithColormap = Template.bind({});
+CustomLayerWithColormap.args = {
+    id: exampleData[0].id,
+    resources: exampleData[0].resources,
+    bounds: exampleData[0].bounds,
+    layers: layersData2,
+};

react/src/lib/components/DeckGLMap/storybook/components/colorLegends/ContinuousLegend.stories.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import ContinuousLegend from "../../../components/ContinuousLegend";
 export default {
     component: ContinuousLegend,
-    title: "DeckGLMap/Components/ColorLegends",
+    title: "DeckGLMap/Components/ColorLegends/ContinuousLegend",
 };
 import template from "../../../../../../demo/example-data/welllayer_template.json";
 import colorTables from "../../../../../../demo/example-data/color-tables.json";

react/src/lib/components/DeckGLMap/storybook/components/colorLegends/DiscreteLegend.stories.jsx

@@ -5,7 +5,7 @@ import colorTables from "../../../../../../demo/example-data/color-tables.json";
 
 export default {
     component: DiscreteColorLegend,
-    title: "DeckGLMap/Components/ColorLegends",
+    title: "DeckGLMap/Components/ColorLegends/DiscreteColorLegend",
 };
 
 const discreteData = {