using view and latested color legend still got issue

Author: shengwei zhang

react/package-lock.json

@@ -52,7 +52,11 @@
     "author": "Equinor <[email protected]>",
     "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",

react/package.json

@@ -479,33 +479,62 @@ 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,
             colorMapRange:
                 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>
     );
 };