From 16697fd2c59fcbd66c6ffdd3fbaf2d08198331c8 Mon Sep 17 00:00:00 2001
From: Shruthi Rai <shruthi.rai@emerson.com>
Date: Tue, 17 Jan 2023 09:24:16 +0100
Subject: [PATCH 01/10] fixing color component for well layer

---
 .../layers/wells/wellsLayer.stories.tsx       | 57 +++++++++++++------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
index 534c5d1fd..18c51302c 100644
--- a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
@@ -9,6 +9,7 @@ import {
 } from "@emerson-eps/color-tables";
 import { MapMouseEvent } from "../../components/Map";
 import { makeStyles } from "@material-ui/core";
+import { View } from "@deck.gl/core/typed";
 
 export default {
     component: SubsurfaceViewer,
@@ -536,10 +537,10 @@ const reverseRange = false;
 
 //eslint-disable-next-line
 const wellLayerTemplate = (args: any) => {
-    const [getColorName, setColorName] = React.useState("Rainbow");
+    const [getColorName, setColorName] = React.useState("Stratigraphy");
     const [isLog, setIsLog] = React.useState(false);
     const wellLayerData = React.useCallback((data) => {
-        setColorName(data);
+        setColorName(data.name ? data.name : data.legendColorName);
     }, []);
 
     // interpolation method
@@ -556,23 +557,37 @@ const wellLayerTemplate = (args: any) => {
         },
     ];
     return (
-        <div>
-            <div
-                style={{
-                    float: "right",
-                    zIndex: 999,
-                    opacity: 1,
-                    position: "relative",
-                }}
-            >
-                <ColorLegend
+        // <div>
+        //     <div
+        //         style={{
+        //             float: "right",
+        //             zIndex: 999,
+        //             opacity: 1,
+        //             position: "relative",
+        //         }}
+        //     >
+        //         <ColorLegend
+        //             {...args}
+        //             getScale={wellLayerData}
+        //             getInterpolateMethod={getInterpolateMethod}
+        //         />
+        //     </div>
+        //     <DeckGLMap {...args} layers={layers} />
+        // </div>
+        <DeckGLMap {...args} layers={layers}>
+            {
+                // @ts-expect-error This is demonstrated to work with js, but with ts it gives error
+                <View id="view_1">
+                    <div style={{ marginTop: 50 }}>
+                    <ColorLegend
                     {...args}
-                    getColorName={wellLayerData}
+                    getScale={wellLayerData}
                     getInterpolateMethod={getInterpolateMethod}
                 />
-            </div>
-            <SubsurfaceViewer {...args} layers={layers} />
-        </div>
+                    </div>
+                </View>
+            }
+        </DeckGLMap>
     );
 };
 
@@ -594,6 +609,16 @@ LegendWithColorSelector.args = {
         visible: false,
     },
     reverseRange,
+    views: {
+        layout: [1, 1],
+        showLabel: true,
+        viewports: [
+            {
+                id: "view_1",
+                zoom: -4,
+            },
+        ],
+    },
 };
 
 LegendWithColorSelector.parameters = {

From de35f382f360ee2669309982ce89746f6e2da0a9 Mon Sep 17 00:00:00 2001
From: shengwei zhang <shengwei.zhang@emerson.com>
Date: Wed, 18 Jan 2023 12:30:57 +0000
Subject: [PATCH 02/10] support for multiple color selector in deck gl map

---
 .../SubsurfaceViewer.stories.tsx              | 225 ++++++++++++++++++
 .../layers/wells/wellsLayer.stories.tsx       |  10 +-
 2 files changed, 230 insertions(+), 5 deletions(-)

diff --git a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
index 67f08ccc2..c7694d48e 100644
--- a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
@@ -15,6 +15,12 @@ import {
     View,
 } from "../..";
 import { ViewStateType, ViewsType } from "./components/Map";
+import {
+    createColorMapFunction,
+    ColorLegend,
+    colorTables,
+} from "@emerson-eps/color-tables";
+import { makeStyles } from "@material-ui/core";
 
 export default {
     component: SubsurfaceViewer,
@@ -340,3 +346,222 @@ DepthTest.parameters = {
         },
     },
 };
+
+// Example using "Map" layer. Uses float32 float for mesh and properties.
+// colorselector for welllayer
+const useStyles = makeStyles({
+    main: {
+        height: 500,
+        border: "1px solid black",
+        position: "relative",
+    },
+    colorSelector: {
+        height: 20,
+        position: "absolute",
+    },
+    legend: {
+        width: 100,
+        position: "absolute",
+        top: "0",
+        right: "0",
+    },
+});
+
+const wellLayers = [
+    {
+        ...defaultProps.layers[0],
+        refine: false,
+        outline: false,
+        logData: "./volve_logs.json",
+        logrunName: "BLOCKING",
+        logName: "ZONELOG",
+        logColor: "Stratigraphy",
+        colorMappingFunction: createColorMapFunction("Stratigraphy"),
+    },
+];
+
+// prop for legend
+const wellLayerMin = 0;
+const wellLayerMax = 0.35;
+const dataObjectName = "ZONELOG";
+const position = [16, 10];
+const horizontal = true;
+const discreteData = {
+    Above_BCU: [[], 0],
+    ABOVE: [[], 1],
+    H12: [[], 2],
+    H11: [[], 3],
+    H10: [[], 4],
+    H9: [[], 5],
+    H8: [[], 6],
+    H7: [[], 7],
+    H6: [[], 8],
+    H5: [[], 9],
+    H4: [[], 10],
+    H3: [[], 11],
+    H2: [[], 12],
+    H1: [[], 13],
+    BELOW: [[], 14],
+};
+
+const reverseRange = false;
+const meshMapLayerFloat32 = {
+    "@@type": "MapLayer",
+    id: "mesh-layer",
+    meshUrl: "hugin_depth_25_m.float32",
+    frame: {
+        origin: [432150, 6475800],
+        count: [291, 229],
+        increment: [25, 25],
+        rotDeg: 0,
+    },
+    propertiesUrl: "kh_netmap_25_m.float32",
+    contours: [0, 100],
+    isContoursDepth: true,
+    gridLines: false,
+    material: false,
+    colorMapName: "Physics",
+};
+
+//eslint-disable-next-line
+const MultiColorSelectorTemplate = (args: any) => {
+    const [getColorName, setColorName] = React.useState("Stratigraphy");
+    const [isLog, setIsLog] = React.useState(false);
+    const wellLayerData = React.useCallback((data) => {
+        setColorName(data.name ? data.name : data.legendColorName);
+    }, []);
+
+    // interpolation method
+    const getInterpolateMethod = React.useCallback((data) => {
+        setIsLog(data.isLog);
+    }, []);
+
+    const [colorName, setColorName1] = React.useState("GasWater");
+    const [colorRange, setRange] = React.useState();
+    const [isAuto, setAuto] = React.useState();
+    const [breakPoints, setBreakPoint] = React.useState();
+    const [isMapLayerLog, setIsMapLayerLog] = React.useState(false);
+    const [isNearest, setIsNearest] = React.useState(false);
+
+    // user defined breakpoint(domain)
+    const userDefinedBreakPoint = React.useCallback((data) => {
+        if (data) setBreakPoint(data.colorArray);
+    }, []);
+
+    // Get color name from color selector
+    const colorNameFromSelector = React.useCallback((data) => {
+        setColorName1(data);
+    }, []);
+
+    // user defined range
+    const userDefinedRange = React.useCallback((data) => {
+        if (data.range) setRange(data.range);
+        setAuto(data.isAuto);
+    }, []);
+
+    // Get interpolation method from color selector to layer
+    const getMapLayerInterpolateMethod = React.useCallback((data) => {
+        setIsMapLayerLog(data.isLog);
+        setIsNearest(data.isNearest);
+    }, []);
+
+    // color map function
+    const colorMapFunc = React.useCallback(() => {
+        return createColorMapFunction(
+            colorName,
+            isMapLayerLog,
+            isNearest,
+            breakPoints
+        );
+    }, [colorName, isMapLayerLog, isNearest, breakPoints]);
+
+    const min = 100;
+    const max = 1000;
+
+    const layers = [
+        {
+            ...args.wellLayers[0],
+            colorMappingFunction: createColorMapFunction(getColorName),
+            logColor: getColorName ? getColorName : wellLayers[0].logColor,
+            isLog: isLog,
+        },
+        {
+            ...meshMapLayerFloat32,
+            colorMapName: colorName,
+            colorMapRange:
+                colorRange && isAuto == false ? colorRange : [min, max],
+            colorMapFunction: colorMapFunc(),
+        },
+    ];
+    return (
+        <>
+            <div className={useStyles().colorSelector}>
+                <div style={{ marginTop: 50, height: 70 }}>
+                    <ColorLegend
+                        {...args}
+                        getScale={wellLayerData}
+                        getInterpolateMethod={getInterpolateMethod}
+                        dataObjectName={"WellLogColorSelector"}
+                    />
+                </div>
+                <div style={{ marginTop: 50, height: 70 }}>
+                    <ColorLegend
+                        min={min}
+                        max={max}
+                        colorNameFromSelector={colorNameFromSelector}
+                        getColorRange={userDefinedRange}
+                        getInterpolateMethod={getMapLayerInterpolateMethod}
+                        getBreakpointValue={userDefinedBreakPoint}
+                        horizontal={true}
+                        numberOfTicks={2}
+                        dataObjectName={"MapLayerColorSelector"}
+                    />
+                </div>
+            </div>
+
+            <div className={useStyles().main}>
+                <DeckGLMap {...args} layers={layers} />
+            </div>
+        </>
+    );
+};
+
+//eslint-disable-next-line
+export const MultiColorSelector: any = MultiColorSelectorTemplate.bind({});
+
+MultiColorSelector.args = {
+    wellLayerMin,
+    wellLayerMax,
+    dataObjectName,
+    position,
+    horizontal,
+    colorTables,
+    discreteData,
+    ...defaultProps,
+    id: defaultProps.id,
+    wellLayers,
+    legend: {
+        visible: false,
+    },
+    reverseRange,
+    views: {
+        layout: [1, 1],
+        showLabel: true,
+        viewports: [
+            {
+                id: "view_1",
+                zoom: -4,
+            },
+        ],
+    },
+};
+
+MultiColorSelector.parameters = {
+    docs: {
+        description: {
+            story: "Clicking on legend opens(toggle) the color selector component and then click on the color scale to update the layer that the selector target with.",
+        },
+        inlineStories: false,
+        iframeHeight: 500,
+    },
+};
diff --git a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
index 18c51302c..1d14b5f0b 100644
--- a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
@@ -579,11 +579,11 @@ const wellLayerTemplate = (args: any) => {
                 // @ts-expect-error This is demonstrated to work with js, but with ts it gives error
                 <View id="view_1">
                     <div style={{ marginTop: 50 }}>
-                    <ColorLegend
-                    {...args}
-                    getScale={wellLayerData}
-                    getInterpolateMethod={getInterpolateMethod}
-                />
+                        <ColorLegend
+                            {...args}
+                            getScale={wellLayerData}
+                            getInterpolateMethod={getInterpolateMethod}
+                        />
                     </div>
                 </View>
             }

From e8e9b953902f51b56a5a0b729c9ce6a279274021 Mon Sep 17 00:00:00 2001
From: shengwei zhang <shengwei.zhang@emerson.com>
Date: Wed, 18 Jan 2023 12:34:17 +0000
Subject: [PATCH 03/10] revert back wellsLayer story change to match with the
 master

---
 .../layers/wells/wellsLayer.stories.tsx       | 65 ++++++-------------
 1 file changed, 20 insertions(+), 45 deletions(-)

diff --git a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
index 1d14b5f0b..bad147a17 100644
--- a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
@@ -9,7 +9,6 @@ import {
 } from "@emerson-eps/color-tables";
 import { MapMouseEvent } from "../../components/Map";
 import { makeStyles } from "@material-ui/core";
-import { View } from "@deck.gl/core/typed";
 
 export default {
     component: SubsurfaceViewer,
@@ -537,10 +536,10 @@ const reverseRange = false;
 
 //eslint-disable-next-line
 const wellLayerTemplate = (args: any) => {
-    const [getColorName, setColorName] = React.useState("Stratigraphy");
+    const [getColorName, setColorName] = React.useState("Rainbow");
     const [isLog, setIsLog] = React.useState(false);
     const wellLayerData = React.useCallback((data) => {
-        setColorName(data.name ? data.name : data.legendColorName);
+        setColorName(data);
     }, []);
 
     // interpolation method
@@ -557,37 +556,23 @@ const wellLayerTemplate = (args: any) => {
         },
     ];
     return (
-        // <div>
-        //     <div
-        //         style={{
-        //             float: "right",
-        //             zIndex: 999,
-        //             opacity: 1,
-        //             position: "relative",
-        //         }}
-        //     >
-        //         <ColorLegend
-        //             {...args}
-        //             getScale={wellLayerData}
-        //             getInterpolateMethod={getInterpolateMethod}
-        //         />
-        //     </div>
-        //     <DeckGLMap {...args} layers={layers} />
-        // </div>
-        <DeckGLMap {...args} layers={layers}>
-            {
-                // @ts-expect-error This is demonstrated to work with js, but with ts it gives error
-                <View id="view_1">
-                    <div style={{ marginTop: 50 }}>
-                        <ColorLegend
-                            {...args}
-                            getScale={wellLayerData}
-                            getInterpolateMethod={getInterpolateMethod}
-                        />
-                    </div>
-                </View>
-            }
-        </DeckGLMap>
+        <div>
+            <div
+                style={{
+                    float: "right",
+                    zIndex: 999,
+                    opacity: 1,
+                    position: "relative",
+                }}
+            >
+                <ColorLegend
+                    {...args}
+                    getColorName={wellLayerData}
+                    getInterpolateMethod={getInterpolateMethod}
+                />
+            </div>
+            <DeckGLMap {...args} layers={layers} />
+        </div>
     );
 };
 
@@ -609,16 +594,6 @@ LegendWithColorSelector.args = {
         visible: false,
     },
     reverseRange,
-    views: {
-        layout: [1, 1],
-        showLabel: true,
-        viewports: [
-            {
-                id: "view_1",
-                zoom: -4,
-            },
-        ],
-    },
 };
 
 LegendWithColorSelector.parameters = {
@@ -629,4 +604,4 @@ LegendWithColorSelector.parameters = {
         inlineStories: false,
         iframeHeight: 500,
     },
-};
+};
\ No newline at end of file

From b362034efc90ab41ed49196b2006512ce4315db1 Mon Sep 17 00:00:00 2001
From: shengwei zhang <shengwei.zhang@emerson.com>
Date: Wed, 18 Jan 2023 12:35:52 +0000
Subject: [PATCH 04/10] revert back wellsLayer story change to match with the
 master

---
 .../SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
index bad147a17..d0189c962 100644
--- a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
@@ -604,4 +604,4 @@ LegendWithColorSelector.parameters = {
         inlineStories: false,
         iframeHeight: 500,
     },
-};
\ No newline at end of file
+};

From 3463ee82c2782c35bdfa15b169705c9d6497a29a Mon Sep 17 00:00:00 2001
From: shengwei zhang <shengwei.zhang@emerson.com>
Date: Fri, 20 Jan 2023 10:10:01 +0000
Subject: [PATCH 05/10] using view and latested color legend still got issue

---
 react/package-lock.json                       | 16 +++++
 react/package.json                            |  4 ++
 .../SubsurfaceViewer.stories.tsx              | 65 +++++++++++++------
 3 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/react/package-lock.json b/react/package-lock.json
index f78542cca..dec5d5e0e 100644
--- a/react/package-lock.json
+++ b/react/package-lock.json
@@ -7,7 +7,11 @@
             "name": "@webviz/subsurface-components",
             "license": "MPL",
             "dependencies": {
+<<<<<<< HEAD
                 "@emerson-eps/color-tables": "^0.4.43",
+=======
+                "@emerson-eps/color-tables": "^0.4.44",
+>>>>>>> 583da83 (using view and latested color legend still got issue)
                 "@equinor/eds-core-react": "^0.12.1",
                 "@equinor/eds-icons": "^0.9.1",
                 "@equinor/videx-wellog": "^0.7.0",
@@ -2875,9 +2879,15 @@
             }
         },
         "node_modules/@emerson-eps/color-tables": {
+<<<<<<< HEAD
             "version": "0.4.43",
             "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.43.tgz",
             "integrity": "sha512-Q5hyjJbGGJMkaslJRDhHpfdaqPuHVjlk8pNVGSI+qFX9gCsa5wr7RMzP7LR07bSQ06M+bzGgKwq3RDzrqmXxcw==",
+=======
+            "version": "0.4.44",
+            "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.44.tgz",
+            "integrity": "sha512-i93GQ85zX5vvYYssLcLHY/3teySpDsd6JK+L4oBmblMbNzkb9uAe+IbvzJHhtFMgfARysDQsbM78A/y9i6McUA==",
+>>>>>>> 583da83 (using view and latested color legend still got issue)
             "dependencies": {
                 "@emotion/react": "^11.10.5",
                 "@emotion/styled": "^11.10.0",
@@ -45991,9 +46001,15 @@
             "dev": true
         },
         "@emerson-eps/color-tables": {
+<<<<<<< HEAD
             "version": "0.4.43",
             "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.43.tgz",
             "integrity": "sha512-Q5hyjJbGGJMkaslJRDhHpfdaqPuHVjlk8pNVGSI+qFX9gCsa5wr7RMzP7LR07bSQ06M+bzGgKwq3RDzrqmXxcw==",
+=======
+            "version": "0.4.44",
+            "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.44.tgz",
+            "integrity": "sha512-i93GQ85zX5vvYYssLcLHY/3teySpDsd6JK+L4oBmblMbNzkb9uAe+IbvzJHhtFMgfARysDQsbM78A/y9i6McUA==",
+>>>>>>> 583da83 (using view and latested color legend still got issue)
             "requires": {
                 "@emotion/react": "^11.10.5",
                 "@emotion/styled": "^11.10.0",
diff --git a/react/package.json b/react/package.json
index 20af3cd2c..c32559d0f 100644
--- a/react/package.json
+++ b/react/package.json
@@ -52,7 +52,11 @@
     "author": "Equinor <opensource@equinor.com>",
     "license": "MPL",
     "dependencies": {
+<<<<<<< HEAD
         "@emerson-eps/color-tables": "^0.4.43",
+=======
+        "@emerson-eps/color-tables": "^0.4.44",
+>>>>>>> 583da83 (using view and latested color legend still got issue)
         "@equinor/eds-core-react": "^0.12.1",
         "@equinor/eds-icons": "^0.9.1",
         "@equinor/videx-wellog": "^0.7.0",
diff --git a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
index c7694d48e..10669e9da 100644
--- a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
@@ -479,12 +479,6 @@ const MultiColorSelectorTemplate = (args: any) => {
     const max = 1000;
 
     const layers = [
-        {
-            ...args.wellLayers[0],
-            colorMappingFunction: createColorMapFunction(getColorName),
-            logColor: getColorName ? getColorName : wellLayers[0].logColor,
-            isLog: isLog,
-        },
         {
             ...meshMapLayerFloat32,
             colorMapName: colorName,
@@ -492,20 +486,55 @@ const MultiColorSelectorTemplate = (args: any) => {
                 colorRange && isAuto == false ? colorRange : [min, max],
             colorMapFunction: colorMapFunc(),
         },
+        {
+            ...args.wellLayers[0],
+            colorMappingFunction: createColorMapFunction(getColorName),
+            logColor: getColorName ? getColorName : wellLayers[0].logColor,
+            isLog: isLog,
+            depthTest: false,
+        },
     ];
     return (
-        <>
-            <div className={useStyles().colorSelector}>
-                <div style={{ marginTop: 50, height: 70 }}>
-                    <ColorLegend
+        // <>
+        //     <div className={useStyles().colorSelector}>
+        //         <div style={{ marginTop: 50, height: 70 }}>
+        //             <ColorLegend
+        //                 {...args}
+        //                 getScale={wellLayerData}
+        //                 getInterpolateMethod={getInterpolateMethod}
+        //                 dataObjectName={"WellLogColorSelector"}
+        //             />
+        //         </div>
+        //         <div style={{ marginTop: 50, height: 70 }}>
+        //             <ColorLegend
+        //                 min={min}
+        //                 max={max}
+        //                 colorNameFromSelector={colorNameFromSelector}
+        //                 getColorRange={userDefinedRange}
+        //                 getInterpolateMethod={getMapLayerInterpolateMethod}
+        //                 getBreakpointValue={userDefinedBreakPoint}
+        //                 horizontal={true}
+        //                 numberOfTicks={2}
+        //                 dataObjectName={"MapLayerColorSelector"}
+        //             />
+        //         </div>
+        //     </div>
+
+        //     <div className={useStyles().main}>
+        //         <DeckGLMap {...args} layers={layers} />
+        //     </div>
+        // </>
+        <DeckGLMap {...args} layers={layers}>
+        {
+            <View id="view_1">
+               <ColorLegend
                         {...args}
                         getScale={wellLayerData}
                         getInterpolateMethod={getInterpolateMethod}
                         dataObjectName={"WellLogColorSelector"}
+                        cssLegendStyle={{ top: 50, left: 0, position: "absolute"}}
                     />
-                </div>
-                <div style={{ marginTop: 50, height: 70 }}>
-                    <ColorLegend
+                <ColorLegend
                         min={min}
                         max={max}
                         colorNameFromSelector={colorNameFromSelector}
@@ -516,13 +545,9 @@ const MultiColorSelectorTemplate = (args: any) => {
                         numberOfTicks={2}
                         dataObjectName={"MapLayerColorSelector"}
                     />
-                </div>
-            </div>
-
-            <div className={useStyles().main}>
-                <DeckGLMap {...args} layers={layers} />
-            </div>
-        </>
+            </View>
+}
+    </DeckGLMap>
     );
 };
 

From f8afc0b2b0c256afe3fbc34b320eb693ecf93e81 Mon Sep 17 00:00:00 2001
From: shengwei zhang <shengwei.zhang@emerson.com>
Date: Fri, 20 Jan 2023 10:20:49 +0000
Subject: [PATCH 06/10] fix

---
 .../SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
index d0189c962..6920a06f0 100644
--- a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
@@ -571,7 +571,7 @@ const wellLayerTemplate = (args: any) => {
                     getInterpolateMethod={getInterpolateMethod}
                 />
             </div>
-            <DeckGLMap {...args} layers={layers} />
+            <SubsurfaceViewer {...args} layers={layers} />
         </div>
     );
 };
@@ -604,4 +604,4 @@ LegendWithColorSelector.parameters = {
         inlineStories: false,
         iframeHeight: 500,
     },
-};
+};
\ No newline at end of file

From 2695effd336d399754814e91cfe87631fcba96d8 Mon Sep 17 00:00:00 2001
From: shengwei zhang <shengwei.zhang@emerson.com>
Date: Fri, 20 Jan 2023 10:23:25 +0000
Subject: [PATCH 07/10] fix

---
 react/package-lock.json | 10 ----------
 react/package.json      |  4 ----
 2 files changed, 14 deletions(-)

diff --git a/react/package-lock.json b/react/package-lock.json
index dec5d5e0e..125c907f3 100644
--- a/react/package-lock.json
+++ b/react/package-lock.json
@@ -7,11 +7,7 @@
             "name": "@webviz/subsurface-components",
             "license": "MPL",
             "dependencies": {
-<<<<<<< HEAD
-                "@emerson-eps/color-tables": "^0.4.43",
-=======
                 "@emerson-eps/color-tables": "^0.4.44",
->>>>>>> 583da83 (using view and latested color legend still got issue)
                 "@equinor/eds-core-react": "^0.12.1",
                 "@equinor/eds-icons": "^0.9.1",
                 "@equinor/videx-wellog": "^0.7.0",
@@ -2879,15 +2875,9 @@
             }
         },
         "node_modules/@emerson-eps/color-tables": {
-<<<<<<< HEAD
-            "version": "0.4.43",
-            "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.43.tgz",
-            "integrity": "sha512-Q5hyjJbGGJMkaslJRDhHpfdaqPuHVjlk8pNVGSI+qFX9gCsa5wr7RMzP7LR07bSQ06M+bzGgKwq3RDzrqmXxcw==",
-=======
             "version": "0.4.44",
             "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.44.tgz",
             "integrity": "sha512-i93GQ85zX5vvYYssLcLHY/3teySpDsd6JK+L4oBmblMbNzkb9uAe+IbvzJHhtFMgfARysDQsbM78A/y9i6McUA==",
->>>>>>> 583da83 (using view and latested color legend still got issue)
             "dependencies": {
                 "@emotion/react": "^11.10.5",
                 "@emotion/styled": "^11.10.0",
diff --git a/react/package.json b/react/package.json
index c32559d0f..733d43e12 100644
--- a/react/package.json
+++ b/react/package.json
@@ -52,11 +52,7 @@
     "author": "Equinor <opensource@equinor.com>",
     "license": "MPL",
     "dependencies": {
-<<<<<<< HEAD
-        "@emerson-eps/color-tables": "^0.4.43",
-=======
         "@emerson-eps/color-tables": "^0.4.44",
->>>>>>> 583da83 (using view and latested color legend still got issue)
         "@equinor/eds-core-react": "^0.12.1",
         "@equinor/eds-icons": "^0.9.1",
         "@equinor/videx-wellog": "^0.7.0",

From 1545150874601c0dd725e0f25c858352ceeb1f0b Mon Sep 17 00:00:00 2001
From: shengwei zhang <shengwei.zhang@emerson.com>
Date: Fri, 20 Jan 2023 10:40:36 +0000
Subject: [PATCH 08/10] fix

---
 react/package-lock.json                       |  6 --
 .../SubsurfaceViewer.stories.tsx              | 70 +++----------------
 .../layers/wells/wellsLayer.stories.tsx       |  2 +-
 3 files changed, 12 insertions(+), 66 deletions(-)

diff --git a/react/package-lock.json b/react/package-lock.json
index 125c907f3..4c1af83da 100644
--- a/react/package-lock.json
+++ b/react/package-lock.json
@@ -45991,15 +45991,9 @@
             "dev": true
         },
         "@emerson-eps/color-tables": {
-<<<<<<< HEAD
-            "version": "0.4.43",
-            "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.43.tgz",
-            "integrity": "sha512-Q5hyjJbGGJMkaslJRDhHpfdaqPuHVjlk8pNVGSI+qFX9gCsa5wr7RMzP7LR07bSQ06M+bzGgKwq3RDzrqmXxcw==",
-=======
             "version": "0.4.44",
             "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.44.tgz",
             "integrity": "sha512-i93GQ85zX5vvYYssLcLHY/3teySpDsd6JK+L4oBmblMbNzkb9uAe+IbvzJHhtFMgfARysDQsbM78A/y9i6McUA==",
->>>>>>> 583da83 (using view and latested color legend still got issue)
             "requires": {
                 "@emotion/react": "^11.10.5",
                 "@emotion/styled": "^11.10.0",
diff --git a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
index 10669e9da..0d3c86f1c 100644
--- a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
@@ -20,7 +20,6 @@ import {
     ColorLegend,
     colorTables,
 } from "@emerson-eps/color-tables";
-import { makeStyles } from "@material-ui/core";
 
 export default {
     component: SubsurfaceViewer,
@@ -348,25 +347,6 @@ DepthTest.parameters = {
 };
 
 // Example using "Map" layer. Uses float32 float for mesh and properties.
-// colorselector for welllayer
-const useStyles = makeStyles({
-    main: {
-        height: 500,
-        border: "1px solid black",
-        position: "relative",
-    },
-    colorSelector: {
-        height: 20,
-        position: "absolute",
-    },
-    legend: {
-        width: 100,
-        position: "absolute",
-        top: "0",
-        right: "0",
-    },
-});
-
 const wellLayers = [
     {
         ...defaultProps.layers[0],
@@ -436,7 +416,7 @@ const MultiColorSelectorTemplate = (args: any) => {
         setIsLog(data.isLog);
     }, []);
 
-    const [colorName, setColorName1] = React.useState("GasWater");
+    const [colorName, setColorName1] = React.useState("Tableau10");
     const [colorRange, setRange] = React.useState();
     const [isAuto, setAuto] = React.useState();
     const [breakPoints, setBreakPoint] = React.useState();
@@ -495,46 +475,17 @@ const MultiColorSelectorTemplate = (args: any) => {
         },
     ];
     return (
-        // <>
-        //     <div className={useStyles().colorSelector}>
-        //         <div style={{ marginTop: 50, height: 70 }}>
-        //             <ColorLegend
-        //                 {...args}
-        //                 getScale={wellLayerData}
-        //                 getInterpolateMethod={getInterpolateMethod}
-        //                 dataObjectName={"WellLogColorSelector"}
-        //             />
-        //         </div>
-        //         <div style={{ marginTop: 50, height: 70 }}>
-        //             <ColorLegend
-        //                 min={min}
-        //                 max={max}
-        //                 colorNameFromSelector={colorNameFromSelector}
-        //                 getColorRange={userDefinedRange}
-        //                 getInterpolateMethod={getMapLayerInterpolateMethod}
-        //                 getBreakpointValue={userDefinedBreakPoint}
-        //                 horizontal={true}
-        //                 numberOfTicks={2}
-        //                 dataObjectName={"MapLayerColorSelector"}
-        //             />
-        //         </div>
-        //     </div>
-
-        //     <div className={useStyles().main}>
-        //         <DeckGLMap {...args} layers={layers} />
-        //     </div>
-        // </>
-        <DeckGLMap {...args} layers={layers}>
-        {
-            <View id="view_1">
-               <ColorLegend
+        <SubsurfaceViewer {...args} layers={layers}>
+            {
+                <View id="view_1">
+                    <ColorLegend
                         {...args}
                         getScale={wellLayerData}
                         getInterpolateMethod={getInterpolateMethod}
                         dataObjectName={"WellLogColorSelector"}
-                        cssLegendStyle={{ top: 50, left: 0, position: "absolute"}}
+                        cssLegendStyles={{ top: 50, left: 0 }}
                     />
-                <ColorLegend
+                    <ColorLegend
                         min={min}
                         max={max}
                         colorNameFromSelector={colorNameFromSelector}
@@ -544,10 +495,11 @@ const MultiColorSelectorTemplate = (args: any) => {
                         horizontal={true}
                         numberOfTicks={2}
                         dataObjectName={"MapLayerColorSelector"}
+                        cssLegendStyles={{ top: 90, left: 0 }}
                     />
-            </View>
-}
-    </DeckGLMap>
+                </View>
+            }
+        </SubsurfaceViewer>
     );
 };
 
diff --git a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
index 6920a06f0..534c5d1fd 100644
--- a/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/layers/wells/wellsLayer.stories.tsx
@@ -604,4 +604,4 @@ LegendWithColorSelector.parameters = {
         inlineStories: false,
         iframeHeight: 500,
     },
-};
\ No newline at end of file
+};

From 5b349fb00a8271baa892a627bf486ee111bfd31a Mon Sep 17 00:00:00 2001
From: shengwei zhang <shengwei.zhang@emerson.com>
Date: Fri, 20 Jan 2023 16:02:14 +0000
Subject: [PATCH 09/10] fix color legend bugs

---
 .../SubsurfaceViewer.stories.tsx              | 93 ++++++++++---------
 .../layers/map/mapLayer.stories.tsx           |  5 +-
 2 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
index 0d3c86f1c..8e21b6ce4 100644
--- a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
@@ -360,31 +360,6 @@ const wellLayers = [
     },
 ];
 
-// prop for legend
-const wellLayerMin = 0;
-const wellLayerMax = 0.35;
-const dataObjectName = "ZONELOG";
-const position = [16, 10];
-const horizontal = true;
-const discreteData = {
-    Above_BCU: [[], 0],
-    ABOVE: [[], 1],
-    H12: [[], 2],
-    H11: [[], 3],
-    H10: [[], 4],
-    H9: [[], 5],
-    H8: [[], 6],
-    H7: [[], 7],
-    H6: [[], 8],
-    H5: [[], 9],
-    H4: [[], 10],
-    H3: [[], 11],
-    H2: [[], 12],
-    H1: [[], 13],
-    BELOW: [[], 14],
-};
-
-const reverseRange = false;
 const meshMapLayerFloat32 = {
     "@@type": "MapLayer",
     id: "mesh-layer",
@@ -405,18 +380,22 @@ const meshMapLayerFloat32 = {
 
 //eslint-disable-next-line
 const MultiColorSelectorTemplate = (args: any) => {
-    const [getColorName, setColorName] = React.useState("Stratigraphy");
+    const [wellLogColorName, setWellLogColorName] = React.useState("Stratigraphy");
     const [isLog, setIsLog] = React.useState(false);
-    const wellLayerData = React.useCallback((data) => {
-        setColorName(data.name ? data.name : data.legendColorName);
-    }, []);
+    const wellLayerData = React.useCallback(
+        (data) => {
+            console.log(data);
+            setWellLogColorName(data.name ? data.name : data.legendColorName);
+        },
+        [wellLogColorName]
+    );
 
     // interpolation method
     const getInterpolateMethod = React.useCallback((data) => {
         setIsLog(data.isLog);
     }, []);
 
-    const [colorName, setColorName1] = React.useState("Tableau10");
+    const [mapLayerColorName, setMapLayerColorName1] = React.useState("Physics");
     const [colorRange, setRange] = React.useState();
     const [isAuto, setAuto] = React.useState();
     const [breakPoints, setBreakPoint] = React.useState();
@@ -430,7 +409,7 @@ const MultiColorSelectorTemplate = (args: any) => {
 
     // Get color name from color selector
     const colorNameFromSelector = React.useCallback((data) => {
-        setColorName1(data);
+        setMapLayerColorName1(data);
     }, []);
 
     // user defined range
@@ -448,28 +427,30 @@ const MultiColorSelectorTemplate = (args: any) => {
     // color map function
     const colorMapFunc = React.useCallback(() => {
         return createColorMapFunction(
-            colorName,
+            mapLayerColorName,
             isMapLayerLog,
             isNearest,
             breakPoints
         );
-    }, [colorName, isMapLayerLog, isNearest, breakPoints]);
+    }, [mapLayerColorName, isMapLayerLog, isNearest, breakPoints]);
 
-    const min = 100;
-    const max = 1000;
+    const min = -3071;
+    const max = 41048;
 
     const layers = [
         {
             ...meshMapLayerFloat32,
-            colorMapName: colorName,
+            colorMapName: mapLayerColorName,
             colorMapRange:
                 colorRange && isAuto == false ? colorRange : [min, max],
             colorMapFunction: colorMapFunc(),
         },
         {
             ...args.wellLayers[0],
-            colorMappingFunction: createColorMapFunction(getColorName),
-            logColor: getColorName ? getColorName : wellLayers[0].logColor,
+            colorMappingFunction: createColorMapFunction(wellLogColorName),
+            logColor: wellLogColorName
+                ? wellLogColorName
+                : wellLayers[0].logColor,
             isLog: isLog,
             depthTest: false,
         },
@@ -484,10 +465,12 @@ const MultiColorSelectorTemplate = (args: any) => {
                         getInterpolateMethod={getInterpolateMethod}
                         dataObjectName={"WellLogColorSelector"}
                         cssLegendStyles={{ top: 50, left: 0 }}
+                        colorName={wellLogColorName}
                     />
                     <ColorLegend
+                        {...args}
                         min={min}
-                        max={max}
+                        max={41048}
                         colorNameFromSelector={colorNameFromSelector}
                         getColorRange={userDefinedRange}
                         getInterpolateMethod={getMapLayerInterpolateMethod}
@@ -496,6 +479,7 @@ const MultiColorSelectorTemplate = (args: any) => {
                         numberOfTicks={2}
                         dataObjectName={"MapLayerColorSelector"}
                         cssLegendStyles={{ top: 90, left: 0 }}
+                        colorName={mapLayerColorName}
                     />
                 </View>
             }
@@ -506,12 +490,31 @@ const MultiColorSelectorTemplate = (args: any) => {
 //eslint-disable-next-line
 export const MultiColorSelector: any = MultiColorSelectorTemplate.bind({});
 
+// prop for legend
+const discreteData = {
+    Above_BCU: [[], 0],
+    ABOVE: [[], 1],
+    H12: [[], 2],
+    H11: [[], 3],
+    H10: [[], 4],
+    H9: [[], 5],
+    H8: [[], 6],
+    H7: [[], 7],
+    H6: [[], 8],
+    H5: [[], 9],
+    H4: [[], 10],
+    H3: [[], 11],
+    H2: [[], 12],
+    H1: [[], 13],
+    BELOW: [[], 14],
+};
+
 MultiColorSelector.args = {
-    wellLayerMin,
-    wellLayerMax,
-    dataObjectName,
-    position,
-    horizontal,
+    wellLayerMin: 0,
+    wellLayerMax: 0.35,
+    dataObjectName: "ZONELOG",
+    position: [16, 10],
+    horizontal: true,
     colorTables,
     discreteData,
     ...defaultProps,
@@ -520,7 +523,7 @@ MultiColorSelector.args = {
     legend: {
         visible: false,
     },
-    reverseRange,
+    reverseRange: false,
     views: {
         layout: [1, 1],
         showLabel: true,
diff --git a/react/src/lib/components/SubsurfaceViewer/layers/map/mapLayer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/layers/map/mapLayer.stories.tsx
index 98e3cf501..8f85c0031 100644
--- a/react/src/lib/components/SubsurfaceViewer/layers/map/mapLayer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/layers/map/mapLayer.stories.tsx
@@ -1004,8 +1004,8 @@ const MapLayerColorSelectorTemplate: ComponentStory<typeof SubsurfaceViewer> = (
         return createColorMapFunction(colorName, isLog, isNearest, breakPoints);
     }, [colorName, isLog, isNearest, breakPoints]);
 
-    const min = 100;
-    const max = 1000;
+    const min = -3071;
+    const max = 41048;
 
     const updatedLayerData = [
         {
@@ -1031,6 +1031,7 @@ const MapLayerColorSelectorTemplate: ComponentStory<typeof SubsurfaceViewer> = (
                             getBreakpointValue={userDefinedBreakPoint}
                             horizontal={true}
                             numberOfTicks={2}
+                            colorName={colorName}
                         />
                     </div>
                 </View>

From dbb70e61663b95ec0737f5ed4a31778c9eb56765 Mon Sep 17 00:00:00 2001
From: shengwei zhang <shengwei.zhang@emerson.com>
Date: Fri, 20 Jan 2023 16:45:15 +0000
Subject: [PATCH 10/10] fix lint issue

---
 .../SubsurfaceViewer/SubsurfaceViewer.stories.tsx           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
index 8e21b6ce4..9f4d3dd38 100644
--- a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
+++ b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx
@@ -380,7 +380,8 @@ const meshMapLayerFloat32 = {
 
 //eslint-disable-next-line
 const MultiColorSelectorTemplate = (args: any) => {
-    const [wellLogColorName, setWellLogColorName] = React.useState("Stratigraphy");
+    const [wellLogColorName, setWellLogColorName] =
+        React.useState("Stratigraphy");
     const [isLog, setIsLog] = React.useState(false);
     const wellLayerData = React.useCallback(
         (data) => {
@@ -395,7 +396,8 @@ const MultiColorSelectorTemplate = (args: any) => {
         setIsLog(data.isLog);
     }, []);
 
-    const [mapLayerColorName, setMapLayerColorName1] = React.useState("Physics");
+    const [mapLayerColorName, setMapLayerColorName1] =
+        React.useState("Physics");
     const [colorRange, setRange] = React.useState();
     const [isAuto, setAuto] = React.useState();
     const [breakPoints, setBreakPoint] = React.useState();