diff --git a/react/package-lock.json b/react/package-lock.json index f78542cca..4c1af83da 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -7,7 +7,7 @@ "name": "@webviz/subsurface-components", "license": "MPL", "dependencies": { - "@emerson-eps/color-tables": "^0.4.43", + "@emerson-eps/color-tables": "^0.4.44", "@equinor/eds-core-react": "^0.12.1", "@equinor/eds-icons": "^0.9.1", "@equinor/videx-wellog": "^0.7.0", @@ -2875,9 +2875,9 @@ } }, "node_modules/@emerson-eps/color-tables": { - "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==", "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.0", @@ -45991,9 +45991,9 @@ "dev": true }, "@emerson-eps/color-tables": { - "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==", "requires": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.0", diff --git a/react/package.json b/react/package.json index 20af3cd2c..733d43e12 100644 --- a/react/package.json +++ b/react/package.json @@ -52,7 +52,7 @@ "author": "Equinor ", "license": "MPL", "dependencies": { - "@emerson-eps/color-tables": "^0.4.43", + "@emerson-eps/color-tables": "^0.4.44", "@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 67f08ccc2..9f4d3dd38 100644 --- a/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx +++ b/react/src/lib/components/SubsurfaceViewer/SubsurfaceViewer.stories.tsx @@ -15,6 +15,11 @@ import { View, } from "../.."; import { ViewStateType, ViewsType } from "./components/Map"; +import { + createColorMapFunction, + ColorLegend, + colorTables, +} from "@emerson-eps/color-tables"; export default { component: SubsurfaceViewer, @@ -340,3 +345,205 @@ DepthTest.parameters = { }, }, }; + +// Example using "Map" layer. Uses float32 float for mesh and properties. +const wellLayers = [ + { + ...defaultProps.layers[0], + refine: false, + outline: false, + logData: "./volve_logs.json", + logrunName: "BLOCKING", + logName: "ZONELOG", + logColor: "Stratigraphy", + colorMappingFunction: createColorMapFunction("Stratigraphy"), + }, +]; + +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 [wellLogColorName, setWellLogColorName] = + React.useState("Stratigraphy"); + const [isLog, setIsLog] = React.useState(false); + 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 [mapLayerColorName, setMapLayerColorName1] = + React.useState("Physics"); + 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) => { + setMapLayerColorName1(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( + mapLayerColorName, + isMapLayerLog, + isNearest, + breakPoints + ); + }, [mapLayerColorName, isMapLayerLog, isNearest, breakPoints]); + + const min = -3071; + const max = 41048; + + const layers = [ + { + ...meshMapLayerFloat32, + colorMapName: mapLayerColorName, + colorMapRange: + colorRange && isAuto == false ? colorRange : [min, max], + colorMapFunction: colorMapFunc(), + }, + { + ...args.wellLayers[0], + colorMappingFunction: createColorMapFunction(wellLogColorName), + logColor: wellLogColorName + ? wellLogColorName + : wellLayers[0].logColor, + isLog: isLog, + depthTest: false, + }, + ]; + return ( + + { + + + + + } + + ); +}; + +//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: 0, + wellLayerMax: 0.35, + dataObjectName: "ZONELOG", + position: [16, 10], + horizontal: true, + colorTables, + discreteData, + ...defaultProps, + id: defaultProps.id, + wellLayers, + legend: { + visible: false, + }, + reverseRange: false, + 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/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 = ( 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 = ( getBreakpointValue={userDefinedBreakPoint} horizontal={true} numberOfTicks={2} + colorName={colorName} />