Rename TopographicMap => SubsurfaceMap. Add global colorscale (#302)

frontend/src/modules/SubsurfaceMap/_utils/color.ts

@@ -0,0 +1,19 @@
+import { colorTablesObj } from "@emerson-eps/color-tables";
+import { ColorScale } from "@lib/utils/ColorScale";
+
+import { Color, Rgb, parse } from "culori";
+
+export function createContinuousColorScaleForMap(colorScale: ColorScale): colorTablesObj[] {
+    const hexColors = colorScale.getPlotlyColorScale();
+    const rgbArr: [number, number, number, number][] = [];
+    hexColors.forEach((hexColor) => {
+        const color: Color | undefined = parse(hexColor[1]); // Returns object with r, g, b items for hex strings
+
+        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]);
+        }
+    });
+
+    return [{ name: "Continuous", discrete: false, colors: rgbArr }];
+}

frontend/src/modules/TopographicMap/_utils/index.ts → 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";

frontend/src/modules/TopographicMap/_utils/subsurfaceMap.ts → frontend/src/modules/SubsurfaceMap/_utils/subsurfaceMap.ts

@@ -32,6 +32,7 @@ const defaultSurfaceSettings: SurfaceMeshLayerSettings = {
     smoothShading: false,
     material: false,
 };
+
 export function createNorthArrowLayer(visible?: boolean): Record<string, unknown> {
     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<string, unknown> {

frontend/src/modules/TopographicMap/loadModule.tsx → frontend/src/modules/SubsurfaceMap/loadModule.tsx

@@ -13,7 +13,7 @@ const defaultState: state = {
     viewSettings: null,
 };
 
-const module = ModuleRegistry.initModule<state>("TopographicMap", defaultState, {
+const module = ModuleRegistry.initModule<state>("SubsurfaceMap", defaultState, {
     meshSurfaceAddress: { deepCompare: true },
     propertySurfaceAddress: { deepCompare: true },
     polygonsAddress: { deepCompare: true },

frontend/src/modules/TopographicMap/registerModule.ts → frontend/src/modules/SubsurfaceMap/registerModule.ts

@@ -4,8 +4,8 @@ import { SyncSettingKey } from "@framework/SyncSettings";
 import { state } from "./state";
 
 ModuleRegistry.registerModule<state>({
-    moduleName: "TopographicMap",
-    defaultTitle: "Topographic Map",
+    moduleName: "SubsurfaceMap",
+    defaultTitle: "Subsurface Map",
     syncableSettingKeys: [
         SyncSettingKey.ENSEMBLE,
         SyncSettingKey.SURFACE,

frontend/src/modules/TopographicMap/state.ts → 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;

frontend/src/modules/TopographicMap/view.tsx → frontend/src/modules/SubsurfaceMap/view.tsx

@@ -7,24 +7,26 @@ 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,
     createWellBoreHeaderLayer,
     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<state>) {
+export function view({ moduleContext, workbenchSettings, workbenchServices }: ModuleFCProps<state>) {
     const myInstanceIdStr = moduleContext.getInstanceIdString();
     console.debug(`${myInstanceIdStr} -- render TopographicMap view`);
     const viewIds = {
@@ -81,7 +83,10 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps<state>)
     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<state>)
                         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<state>)
                     >
                         <ViewAnnotation id={viewIds.annotation3D}>
                             <ContinuousLegend
+                                colorTables={colorTables}
+                                colorName="Continuous"
                                 min={colorRange ? colorRange[0] : undefined}
                                 max={colorRange ? colorRange[1] : undefined}
                                 cssLegendStyles={{ bottom: "0", right: "0" }}
@@ -258,6 +266,7 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps<state>)
                         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<state>)
                     >
                         <ViewAnnotation id={viewIds.annotation2D}>
                             <ContinuousLegend
+                                colorTables={colorTables}
+                                colorName="Continuous"
                                 min={colorRange ? colorRange[0] : undefined}
                                 max={colorRange ? colorRange[1] : undefined}
                                 cssLegendStyles={{ bottom: "0", right: "0" }}

frontend/src/modules/registerAllModules.ts

@@ -12,8 +12,8 @@ import "./Sensitivity/registerModule";
 import "./SimulationTimeSeries/registerModule";
 import "./SimulationTimeSeriesMatrix/registerModule";
 import "./SimulationTimeSeriesSensitivity/registerModule";
+import "./SubsurfaceMap/registerModule";
 import "./TimeSeriesParameterDistribution/registerModule";
-import "./TopographicMap/registerModule";
 import "./WellCompletions/registerModule";
 
 if (isDevMode()) {