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] 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>
     );
 };