From 869a0bae17b582e9610a91f68e2503477d7c832c Mon Sep 17 00:00:00 2001 From: Hans Kallekleiv <16436291+HansKallekleiv@users.noreply.github.com> Date: Wed, 13 Sep 2023 09:24:44 +0200 Subject: [PATCH 1/4] Rename TopographicMap => SubsurfaceMap. Add global colorscale --- .../SurfaceAddress.ts | 0 .../SurfacePolygonsAddress.ts | 0 .../src/modules/SubsurfaceMap/_utils/color.ts | 24 +++++++++++++++++ .../_utils/index.ts | 1 + .../_utils/subsurfaceMap.ts | 3 ++- .../aggregationSelector.tsx | 0 .../components/AggregationSelector/index.ts | 0 .../SyncedSubsurfaceViewer/index.ts | 0 .../syncedSubsurfaceViewer.tsx | 0 .../loadModule.tsx | 2 +- .../polygonsDirectoryProvider.ts | 0 .../queryHooks.tsx | 0 .../registerModule.ts | 4 +-- .../settings.tsx | 0 .../state.ts | 2 +- .../surfaceDirectoryProvider.ts | 0 .../view.tsx | 27 +++++++++++++------ frontend/src/modules/registerAllModules.ts | 4 +-- 18 files changed, 52 insertions(+), 15 deletions(-) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/SurfaceAddress.ts (100%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/SurfacePolygonsAddress.ts (100%) create mode 100644 frontend/src/modules/SubsurfaceMap/_utils/color.ts rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/_utils/index.ts (83%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/_utils/subsurfaceMap.ts (99%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/components/AggregationSelector/aggregationSelector.tsx (100%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/components/AggregationSelector/index.ts (100%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/components/SyncedSubsurfaceViewer/index.ts (100%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/components/SyncedSubsurfaceViewer/syncedSubsurfaceViewer.tsx (100%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/loadModule.tsx (88%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/polygonsDirectoryProvider.ts (100%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/queryHooks.tsx (100%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/registerModule.ts (83%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/settings.tsx (100%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/state.ts (99%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/surfaceDirectoryProvider.ts (100%) rename frontend/src/modules/{TopographicMap => SubsurfaceMap}/view.tsx (94%) diff --git a/frontend/src/modules/TopographicMap/SurfaceAddress.ts b/frontend/src/modules/SubsurfaceMap/SurfaceAddress.ts similarity index 100% rename from frontend/src/modules/TopographicMap/SurfaceAddress.ts rename to frontend/src/modules/SubsurfaceMap/SurfaceAddress.ts diff --git a/frontend/src/modules/TopographicMap/SurfacePolygonsAddress.ts b/frontend/src/modules/SubsurfaceMap/SurfacePolygonsAddress.ts similarity index 100% rename from frontend/src/modules/TopographicMap/SurfacePolygonsAddress.ts rename to frontend/src/modules/SubsurfaceMap/SurfacePolygonsAddress.ts diff --git a/frontend/src/modules/SubsurfaceMap/_utils/color.ts b/frontend/src/modules/SubsurfaceMap/_utils/color.ts new file mode 100644 index 000000000..abd229455 --- /dev/null +++ b/frontend/src/modules/SubsurfaceMap/_utils/color.ts @@ -0,0 +1,24 @@ +import { colorTablesObj } from "@emerson-eps/color-tables"; +import { ColorScale } from "@lib/utils/ColorScale"; + +import { formatRgb } from "culori"; + +function rgbStringToArray(rgbString: string): number[] | null { + const match = rgbString.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/); + if (match) { + return [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10)]; + } + return null; +} +export function createContinuousColorScaleForMap(colorScale: ColorScale): colorTablesObj[] { + const hexColors = colorScale.getPlotlyColorScale(); + const rgbArr: [number, number, number, number][] = []; + hexColors.forEach((color) => { + const rgbString: string = formatRgb(color[1]) as string; + const rgb = rgbStringToArray(rgbString); + if (rgb) { + rgbArr.push([color[0], rgb[0], rgb[1], rgb[2]]); + } + }); + return [{ name: "Continuous", discrete: false, colors: rgbArr }]; +} diff --git a/frontend/src/modules/TopographicMap/_utils/index.ts b/frontend/src/modules/SubsurfaceMap/_utils/index.ts similarity index 83% rename from frontend/src/modules/TopographicMap/_utils/index.ts rename to frontend/src/modules/SubsurfaceMap/_utils/index.ts index d7edd6cf3..defa64dda 100644 --- a/frontend/src/modules/TopographicMap/_utils/index.ts +++ b/frontend/src/modules/SubsurfaceMap/_utils/index.ts @@ -7,3 +7,4 @@ export { createWellBoreHeaderLayer, } from "./subsurfaceMap"; export type { SurfaceMeta, SurfaceMeshLayerSettings, ViewSettings } from "./subsurfaceMap"; +export { createContinuousColorScaleForMap } from "./color"; diff --git a/frontend/src/modules/TopographicMap/_utils/subsurfaceMap.ts b/frontend/src/modules/SubsurfaceMap/_utils/subsurfaceMap.ts similarity index 99% rename from frontend/src/modules/TopographicMap/_utils/subsurfaceMap.ts rename to frontend/src/modules/SubsurfaceMap/_utils/subsurfaceMap.ts index 1d7b415ec..47aebafe8 100644 --- a/frontend/src/modules/TopographicMap/_utils/subsurfaceMap.ts +++ b/frontend/src/modules/SubsurfaceMap/_utils/subsurfaceMap.ts @@ -32,6 +32,7 @@ const defaultSurfaceSettings: SurfaceMeshLayerSettings = { smoothShading: false, material: false, }; + export function createNorthArrowLayer(visible?: boolean): Record { return { "@@type": "NorthArrow3DLayer", @@ -74,7 +75,7 @@ export function createSurfaceMeshLayer( gridLines: surfaceSettings.gridLines, material: surfaceSettings.material, smoothShading: surfaceSettings.smoothShading, - colorMapName: "Physics", + colorMapName: "Continuous", }; } export function createSurfacePolygonsLayer(surfacePolygons: PolygonData_api[]): Record { diff --git a/frontend/src/modules/TopographicMap/components/AggregationSelector/aggregationSelector.tsx b/frontend/src/modules/SubsurfaceMap/components/AggregationSelector/aggregationSelector.tsx similarity index 100% rename from frontend/src/modules/TopographicMap/components/AggregationSelector/aggregationSelector.tsx rename to frontend/src/modules/SubsurfaceMap/components/AggregationSelector/aggregationSelector.tsx diff --git a/frontend/src/modules/TopographicMap/components/AggregationSelector/index.ts b/frontend/src/modules/SubsurfaceMap/components/AggregationSelector/index.ts similarity index 100% rename from frontend/src/modules/TopographicMap/components/AggregationSelector/index.ts rename to frontend/src/modules/SubsurfaceMap/components/AggregationSelector/index.ts diff --git a/frontend/src/modules/TopographicMap/components/SyncedSubsurfaceViewer/index.ts b/frontend/src/modules/SubsurfaceMap/components/SyncedSubsurfaceViewer/index.ts similarity index 100% rename from frontend/src/modules/TopographicMap/components/SyncedSubsurfaceViewer/index.ts rename to frontend/src/modules/SubsurfaceMap/components/SyncedSubsurfaceViewer/index.ts diff --git a/frontend/src/modules/TopographicMap/components/SyncedSubsurfaceViewer/syncedSubsurfaceViewer.tsx b/frontend/src/modules/SubsurfaceMap/components/SyncedSubsurfaceViewer/syncedSubsurfaceViewer.tsx similarity index 100% rename from frontend/src/modules/TopographicMap/components/SyncedSubsurfaceViewer/syncedSubsurfaceViewer.tsx rename to frontend/src/modules/SubsurfaceMap/components/SyncedSubsurfaceViewer/syncedSubsurfaceViewer.tsx diff --git a/frontend/src/modules/TopographicMap/loadModule.tsx b/frontend/src/modules/SubsurfaceMap/loadModule.tsx similarity index 88% rename from frontend/src/modules/TopographicMap/loadModule.tsx rename to frontend/src/modules/SubsurfaceMap/loadModule.tsx index 78a595488..2fefa8512 100644 --- a/frontend/src/modules/TopographicMap/loadModule.tsx +++ b/frontend/src/modules/SubsurfaceMap/loadModule.tsx @@ -13,7 +13,7 @@ const defaultState: state = { viewSettings: null, }; -const module = ModuleRegistry.initModule("TopographicMap", defaultState, { +const module = ModuleRegistry.initModule("SubsurfaceMap", defaultState, { meshSurfaceAddress: { deepCompare: true }, propertySurfaceAddress: { deepCompare: true }, polygonsAddress: { deepCompare: true }, diff --git a/frontend/src/modules/TopographicMap/polygonsDirectoryProvider.ts b/frontend/src/modules/SubsurfaceMap/polygonsDirectoryProvider.ts similarity index 100% rename from frontend/src/modules/TopographicMap/polygonsDirectoryProvider.ts rename to frontend/src/modules/SubsurfaceMap/polygonsDirectoryProvider.ts diff --git a/frontend/src/modules/TopographicMap/queryHooks.tsx b/frontend/src/modules/SubsurfaceMap/queryHooks.tsx similarity index 100% rename from frontend/src/modules/TopographicMap/queryHooks.tsx rename to frontend/src/modules/SubsurfaceMap/queryHooks.tsx diff --git a/frontend/src/modules/TopographicMap/registerModule.ts b/frontend/src/modules/SubsurfaceMap/registerModule.ts similarity index 83% rename from frontend/src/modules/TopographicMap/registerModule.ts rename to frontend/src/modules/SubsurfaceMap/registerModule.ts index 6332b34a9..2440a9f44 100644 --- a/frontend/src/modules/TopographicMap/registerModule.ts +++ b/frontend/src/modules/SubsurfaceMap/registerModule.ts @@ -4,8 +4,8 @@ import { SyncSettingKey } from "@framework/SyncSettings"; import { state } from "./state"; ModuleRegistry.registerModule({ - moduleName: "TopographicMap", - defaultTitle: "Topographic Map", + moduleName: "SubsurfaceMap", + defaultTitle: "Subsurface Map", syncableSettingKeys: [ SyncSettingKey.ENSEMBLE, SyncSettingKey.SURFACE, diff --git a/frontend/src/modules/TopographicMap/settings.tsx b/frontend/src/modules/SubsurfaceMap/settings.tsx similarity index 100% rename from frontend/src/modules/TopographicMap/settings.tsx rename to frontend/src/modules/SubsurfaceMap/settings.tsx diff --git a/frontend/src/modules/TopographicMap/state.ts b/frontend/src/modules/SubsurfaceMap/state.ts similarity index 99% rename from frontend/src/modules/TopographicMap/state.ts rename to frontend/src/modules/SubsurfaceMap/state.ts index 4ce339bc9..27ec06b79 100644 --- a/frontend/src/modules/TopographicMap/state.ts +++ b/frontend/src/modules/SubsurfaceMap/state.ts @@ -1,6 +1,6 @@ import { SurfAddr } from "./SurfaceAddress"; import { SurfacePolygonsAddress } from "./SurfacePolygonsAddress"; -import { SurfaceMeshLayerSettings, ViewSettings } from "./_utils/"; +import { SurfaceMeshLayerSettings, ViewSettings } from "./_utils"; export interface state { meshSurfaceAddress: SurfAddr | null; diff --git a/frontend/src/modules/TopographicMap/surfaceDirectoryProvider.ts b/frontend/src/modules/SubsurfaceMap/surfaceDirectoryProvider.ts similarity index 100% rename from frontend/src/modules/TopographicMap/surfaceDirectoryProvider.ts rename to frontend/src/modules/SubsurfaceMap/surfaceDirectoryProvider.ts diff --git a/frontend/src/modules/TopographicMap/view.tsx b/frontend/src/modules/SubsurfaceMap/view.tsx similarity index 94% rename from frontend/src/modules/TopographicMap/view.tsx rename to frontend/src/modules/SubsurfaceMap/view.tsx index 9cf185394..4ee30c022 100644 --- a/frontend/src/modules/TopographicMap/view.tsx +++ b/frontend/src/modules/SubsurfaceMap/view.tsx @@ -7,17 +7,13 @@ import { SyncSettingKey, SyncSettingsHelper } from "@framework/SyncSettings"; import { Wellbore } from "@framework/Wellbore"; import { Button } from "@lib/components/Button"; import { CircularProgress } from "@lib/components/CircularProgress"; +import { ColorScaleGradientType } from "@lib/utils/ColorScale"; import { ViewAnnotation } from "@webviz/subsurface-viewer/dist/components/ViewAnnotation"; -import { - useGetFieldWellsTrajectories, - usePolygonsDataQueryByAddress, - usePropertySurfaceDataByQueryAddress, - useSurfaceDataQueryByAddress, -} from "././queryHooks"; import { SurfaceMeta, createAxesLayer, + createContinuousColorScaleForMap, createNorthArrowLayer, createSurfaceMeshLayer, createSurfacePolygonsLayer, @@ -25,6 +21,12 @@ import { createWellboreTrajectoryLayer, } from "./_utils"; import { SyncedSubsurfaceViewer } from "./components/SyncedSubsurfaceViewer"; +import { + useGetFieldWellsTrajectories, + usePolygonsDataQueryByAddress, + usePropertySurfaceDataByQueryAddress, + useSurfaceDataQueryByAddress, +} from "./queryHooks"; import { state } from "./state"; const jsonParseWithUndefined = (arrString: string): number[] => { @@ -60,7 +62,7 @@ const updateViewPortBounds = ( return existingViewPortBounds; }; //----------------------------------------------------------------------------------------------------------- -export function view({ moduleContext, workbenchServices }: ModuleFCProps) { +export function view({ moduleContext, workbenchSettings, workbenchServices }: ModuleFCProps) { const myInstanceIdStr = moduleContext.getInstanceIdString(); console.debug(`${myInstanceIdStr} -- render TopographicMap view`); const viewIds = { @@ -81,7 +83,10 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps) const [viewportBounds, setviewPortBounds] = React.useState<[number, number, number, number] | undefined>(undefined); const syncedSettingKeys = moduleContext.useSyncedSettingKeys(); const syncHelper = new SyncSettingsHelper(syncedSettingKeys, workbenchServices); - + const surfaceColorScale = workbenchSettings.useContinuousColorScale({ + gradientType: ColorScaleGradientType.Sequential, + }); + const colorTables = createContinuousColorScaleForMap(surfaceColorScale); const show3D: boolean = viewSettings?.show3d ?? true; const meshSurfDataQuery = useSurfaceDataQueryByAddress(meshSurfAddr, true); @@ -228,6 +233,7 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps) id={viewIds.view3D} bounds={viewportBounds} layers={newLayers} + colorTables={colorTables} toolbar={{ visible: true }} views={{ layout: [1, 1], @@ -245,6 +251,8 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps) > ) id={viewIds.view2D} bounds={viewportBounds} layers={newLayers} + colorTables={colorTables} toolbar={{ visible: true }} views={{ layout: [1, 1], @@ -275,6 +284,8 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps) > Date: Tue, 26 Sep 2023 11:55:35 +0200 Subject: [PATCH 2/4] From review --- .../src/modules/SubsurfaceMap/_utils/color.ts | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/frontend/src/modules/SubsurfaceMap/_utils/color.ts b/frontend/src/modules/SubsurfaceMap/_utils/color.ts index abd229455..5bdfdd5dd 100644 --- a/frontend/src/modules/SubsurfaceMap/_utils/color.ts +++ b/frontend/src/modules/SubsurfaceMap/_utils/color.ts @@ -1,24 +1,19 @@ import { colorTablesObj } from "@emerson-eps/color-tables"; import { ColorScale } from "@lib/utils/ColorScale"; -import { formatRgb } from "culori"; +import { Color, Rgb, parse } from "culori"; -function rgbStringToArray(rgbString: string): number[] | null { - const match = rgbString.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/); - if (match) { - return [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10)]; - } - return null; -} export function createContinuousColorScaleForMap(colorScale: ColorScale): colorTablesObj[] { const hexColors = colorScale.getPlotlyColorScale(); const rgbArr: [number, number, number, number][] = []; - hexColors.forEach((color) => { - const rgbString: string = formatRgb(color[1]) as string; - const rgb = rgbStringToArray(rgbString); - if (rgb) { - rgbArr.push([color[0], rgb[0], rgb[1], rgb[2]]); + hexColors.forEach((hexColor) => { + const color: Color | undefined = parse(hexColor[1]); // Returns object with r, g, b items for hex strings + + if (color && color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) { + const rgbColor = color as Rgb; + rgbArr.push([hexColor[0], rgbColor.r * 255, rgbColor.g * 255, rgbColor.b * 255]); } }); + return [{ name: "Continuous", discrete: false, colors: rgbArr }]; } From e8a8729cf015052addbb8d7c9823f281e418acf6 Mon Sep 17 00:00:00 2001 From: Hans Kallekleiv <16436291+HansKallekleiv@users.noreply.github.com> Date: Tue, 26 Sep 2023 13:30:13 +0200 Subject: [PATCH 3/4] typo --- frontend/src/modules/registerAllModules.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/modules/registerAllModules.ts b/frontend/src/modules/registerAllModules.ts index 6ffbeee60..be2beff99 100644 --- a/frontend/src/modules/registerAllModules.ts +++ b/frontend/src/modules/registerAllModules.ts @@ -14,7 +14,7 @@ import "./SimulationTimeSeriesMatrix/registerModule"; import "./SimulationTimeSeriesSensitivity/registerModule"; import "./SubsurfaceMap/registerModule"; import "./TimeSeriesParameterDistribution/registerModule"; -import "./WellCompletion/registerModule"; +import "./WellCompletions/registerModule"; if (isDevMode()) { await import("./MyModule/registerModule"); From 36b660145105010a8f69012218d8ff1fb9a32439 Mon Sep 17 00:00:00 2001 From: Hans Kallekleiv <16436291+HansKallekleiv@users.noreply.github.com> Date: Tue, 26 Sep 2023 13:46:16 +0200 Subject: [PATCH 4/4] lint --- frontend/src/modules/SubsurfaceMap/_utils/color.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/modules/SubsurfaceMap/_utils/color.ts b/frontend/src/modules/SubsurfaceMap/_utils/color.ts index 5bdfdd5dd..de26d9938 100644 --- a/frontend/src/modules/SubsurfaceMap/_utils/color.ts +++ b/frontend/src/modules/SubsurfaceMap/_utils/color.ts @@ -9,7 +9,7 @@ export function createContinuousColorScaleForMap(colorScale: ColorScale): colorT hexColors.forEach((hexColor) => { const color: Color | undefined = parse(hexColor[1]); // Returns object with r, g, b items for hex strings - if (color && color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) { + if (color && "r" in color && "g" in color && "b" in color) { const rgbColor = color as Rgb; rgbArr.push([hexColor[0], rgbColor.r * 255, rgbColor.g * 255, rgbColor.b * 255]); }