feat: ColorMapFunction type in WellLogView

python/src/components/WellLogViewer/WellLogViewer.tsx

@@ -56,6 +56,10 @@ type WellLogViewerProps = {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     colorTables: any[]; // specify the exact type if known
 
+    /** Prop containing color function table */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    colorFunctions: any[]; // specify the exact type if known
+
     /** Orientation of the track plots on the screen. Default is false */
     horizontal?: boolean;
 

typescript/packages/subsurface-viewer/src/components/settings/Settings.tsx

@@ -34,7 +34,7 @@ export interface SettingsProps {
 
 const Settings: React.FC<SettingsProps> = React.memo(
     ({ viewportId, layerIds }: SettingsProps) => {
-        const spec = useSelector((st: MapState) => st.spec);
+        const spec : any = useSelector((st: MapState) => st.spec);
         const [layersInView, setLayersInView] = useState<
             Record<string, unknown>[]
         >([]);

typescript/packages/subsurface-viewer/src/redux/reducer.ts

@@ -3,7 +3,7 @@ import type { PayloadAction } from "@reduxjs/toolkit";
 import { combineReducers, createSlice } from "@reduxjs/toolkit";
 import type { DrawMode } from "./types";
 
-export const specSlice = createSlice({
+export const specSlice: any = createSlice({
     name: "spec",
     initialState: {} as Record<string, unknown>,
     reducers: {

typescript/packages/well-log-viewer/src/SyncLogViewer.stories.tsx

@@ -2,8 +2,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
+import type { ColorTable } from "./components/ColorTableTypes";
+
 import { colorTables } from "@emerson-eps/color-tables";
-const exampleColorTable = colorTables; /*as unknown as ColorTable[]*/ // equivalent types, should be merged
+const exampleColorTable = colorTables as ColorTable[];
 const wellpickColorTable = require("../../../../example-data/wellpick_colors.json"); // eslint-disable-line
 const wellpick = require("../../../../example-data/wellpicks.json");// eslint-disable-line
 
@@ -382,6 +384,7 @@ export const Default: StoryObj<typeof Template> = {
             require("../../../../example-data/synclog_template.json"), // eslint-disable-line
         ],
         colorTables: exampleColorTable,
+        colorFunctions: [],
         wellpicks: [
             {
                 wellpick: wellpick[0],

typescript/packages/well-log-viewer/src/SyncLogViewer.test.tsx

@@ -38,6 +38,7 @@ describe("Sync Log Viewer", () => {
                 welllogs={[exampleWellLog]} // the same log for all wellog viewers
                 templates={[exampleTemplate]} // the same template for all wellog viewers
                 colorTables={exampleColorTable} // the same colortables for all wellog viewers
+                colorFunctions={[]} // not used
             />
         );
         expect(container.firstChild).toMatchSnapshot();

typescript/packages/well-log-viewer/src/SyncLogViewer.tsx

@@ -14,7 +14,7 @@ import defaultLayout from "./components/DefaultSyncLogViewerLayout";
 
 import type { WellLog } from "./components/WellLogTypes";
 import type { Template } from "./components/WellLogTemplateTypes";
-import type { ColorTable } from "./components/ColorTableTypes";
+import type { ColorTable, ColorFunction } from "./components/ColorTableTypes";
 import type { PatternsTable } from "./utils/pattern";
 
 import type {
@@ -74,6 +74,10 @@ export interface SyncLogViewerProps {
      * Prop containing color table data.
      */
     colorTables: ColorTable[];
+    /**
+     * Prop containing color function table array.
+     */
+    colorFunctions: ColorFunction[];
     /**
      * Set to true for default titles or to array of individial welllog titles
      */
@@ -954,6 +958,7 @@ class SyncLogViewer extends Component<SyncLogViewerProps, State> {
                 viewTitle={viewTitle}
                 template={template}
                 colorTables={this.props.colorTables}
+                colorFunctions={this.props.colorFunctions}
                 wellpick={this.props.wellpicks?.[index]}
                 patternsTable={this.props.patternsTable}
                 patterns={this.props.patterns}
@@ -1017,6 +1022,7 @@ class SyncLogViewer extends Component<SyncLogViewerProps, State> {
                         value: this.props.wellDistances?.distances[prev],
                     }}
                     colorTables={this.props.colorTables}
+                    colorFunctions={this.props.colorFunctions}
                     wellpicks={
                         this.props.wellpicks
                             ? [
@@ -1160,7 +1166,7 @@ SyncLogViewer.propTypes = {
     wellpickFlatting: PropTypes.arrayOf(PropTypes.string),
 
     /**
-     * Set to true or to array of spaser widths if WellLogSpacers should be used
+     * Set to true or to array of spacer widths if WellLogSpacers should be used
      */
     spacers: PropTypes.oneOfType([
         PropTypes.bool,

typescript/packages/well-log-viewer/src/WellLogViewer.stories.tsx

@@ -30,7 +30,7 @@ const welllogs = welllogsJson as unknown as WellLog[];
 import templateJson from "../../../../example-data/welllog_template_2.json";
 const template = templateJson as unknown as Template;
 
-import type { ColorTable } from "./components/ColorTableTypes";
+import type { ColorTable, ColorFunction } from "./components/ColorTableTypes";
 
 import type { MapMouseEvent } from "@webviz/subsurface-viewer/dist/components/Map";
 
@@ -49,6 +49,31 @@ import { isEqualRanges } from "./utils/log-viewer";
 import { CallbackManager } from "./components/CallbackManager";
 
 import colorTables from "../../../../example-data/wellpick_colors.json";
+const exampleColorTable = colorTables as ColorTable[];
+
+const exampleColorFunctions: ColorFunction[] = [
+    {
+        name: "Gray func",
+        func: (v: number) => [v * 255, v * 255, v * 255],
+    },
+    {
+        name: "Red func",
+        func: (v: number) => [v * 255, 0, 0],
+    },
+    {
+        name: "Green func",
+        func: (v: number) => [0, v * 255, 0],
+    },
+    {
+        name: "Blue func",
+        func: (v: number) => [0, 0, v * 255],
+    },
+    {
+        name: "Step func",
+        func: (v: number) =>
+            v < 0.5 ? [v * 255, 0, 0] : [0, v * 255, v * 255],
+    },
+];
 import wellPicks from "../../../../example-data/wellpicks.json";
 
 import type { Info } from "./components/InfoTypes";
@@ -60,7 +85,7 @@ const ComponentCode =
     "    horizontal=false \r\n" +
     '    welllog={require("../../../../example-data/L898MUD.json")[0]} \r\n' +
     '    template={require("../../../../example-data/welllog_template_1.json")} \r\n' +
-    "    colorTables={colorTables} \r\n" +
+    "    colorTables={exampleColorTable} \r\n" +
     "/>";
 
 const stories: Meta = {
@@ -190,7 +215,7 @@ const StoryTemplate = (args: WellLogViewerProps) => {
 const wellpick = {
     wellpick: wellPicks[0],
     name: "HORIZON",
-    colorTables: colorTables,
+    colorTables: exampleColorTable,
     color: "Stratigraphy",
 };
 
@@ -281,7 +306,8 @@ export const Default: StoryObj<typeof StoryTemplate> = {
         welllog: require("../../../../example-data/L898MUD.json")[0], // eslint-disable-line
         template: require("../../../../example-data/welllog_template_1.json"), // eslint-disable-line
         // @ts-expect-error TS2322
-        colorTables: colorTables,
+        colorTables: exampleColorTable,
+        colorFunctions: [],
         // @ts-expect-error TS2322
         wellpick: wellpick,
         axisTitles: axisTitles,
@@ -299,7 +325,7 @@ export const Default: StoryObj<typeof StoryTemplate> = {
     render: (args) => <StoryTemplate {...args} />,
 };
 
-export const ColorByFunctionTBD: StoryObj<typeof StoryTemplate> = {
+export const ColorByFunction: StoryObj<typeof StoryTemplate> = {
     args: {
         id: "Well-Log-Viewer",
         horizontal: false,
@@ -327,15 +353,14 @@ export const ColorByFunctionTBD: StoryObj<typeof StoryTemplate> = {
                 {
                     name: "HKL",
                     type: "gradientfill", // Is this the correct type for using color function?
-                    // @ts-expect-error TS2322
-                    colorTable: (value: number) =>
-                        value < 100 ? [1, 0, 0] : [[0, 1, 1]],
+                    colorFunction: "Step func",
                     color: "green",
                 },
             ],
         },
         // @ts-expect-error TS2322
-        colorTables: colorTables,
+        colorTables: exampleColorTable,
+        colorFunctions: exampleColorFunctions,
         // @ts-expect-error TS2322
         wellpick: wellpick,
         axisTitles: axisTitles,
@@ -361,7 +386,7 @@ export const Horizontal: StoryObj<typeof StoryTemplate> = {
             require("../../../../example-data/WL_RAW_AAC-BHPR-CAL-DEN-GR-MECH-NEU-NMR-REMP_MWD_3.json")[0], // eslint-disable-line
         template: require("../../../../example-data/welllog_template_2.json"), // eslint-disable-line
         // @ts-expect-error TS2322
-        colorTables: colorTables,
+        colorTables: exampleColorTable,
         // @ts-expect-error TS2322
         wellpick: wellpick,
         axisTitles: axisTitles,
@@ -387,7 +412,7 @@ export const OnInfoFilledEvent: StoryObj<typeof StoryTemplate> = {
         template: require("../../../../example-data/welllog_template_2.json"), // eslint-disable-line
 
         // @ts-expect-error TS2322
-        colorTables: colorTables,
+        colorTables: exampleColorTable,
         // @ts-expect-error TS2322
 
         wellpick: wellpick,

typescript/packages/well-log-viewer/src/WellLogViewer.test.tsx

@@ -5,6 +5,7 @@ import "jest-styled-components";
 import React from "react";
 import WellLogViewer from "./WellLogViewer";
 import type { WellLogController } from "./components/WellLogView";
+import type { ColorTable } from "./components/ColorTableTypes";
 import { axisMnemos, axisTitles } from "./utils/axes";
 
 // TODO: Fix this the next time the file is edited.
@@ -13,7 +14,7 @@ const exampleTemplate = require("../../../../example-data/welllog_template_1.jso
 // TODO: Fix this the next time the file is edited.
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const exampleWellLog = require("../../../../example-data/L898MUD.json")[0];
-const exampleColorTable = colorTables;
+const exampleColorTable = colorTables as ColorTable[];
 
 window.ResizeObserver =
     window.ResizeObserver ||
@@ -35,6 +36,7 @@ describe("Test Well Log Viewer Component", () => {
                 welllog={exampleWellLog}
                 template={exampleTemplate}
                 colorTables={exampleColorTable}
+                colorFunctions={[]} // not used
                 horizontal={true}
                 primaryAxis={"md"}
                 axisTitles={axisTitles}

typescript/packages/well-log-viewer/src/WellLogViewer.tsx

@@ -279,6 +279,7 @@ export default class WellLogViewer extends Component<
                         viewTitle={this.props.viewTitle}
                         template={this.props.template}
                         colorTables={this.props.colorTables}
+                        colorFunctions={this.props.colorFunctions}
                         wellpick={this.props.wellpick}
                         // TODO: Fix this the next time the file is edited.
                         // eslint-disable-next-line react/prop-types

typescript/packages/well-log-viewer/src/WellLogViewer_performance.test.tsx

@@ -7,6 +7,7 @@ import React, { Profiler } from "react";
 import WellLogViewer from "./WellLogViewer";
 import logTimes, { obj } from "./test/performanceMetrics";
 import { axisMnemos, axisTitles } from "./utils/axes";
+import type { ColorTable } from "./components/ColorTableTypes";
 
 // TODO: Fix this the next time the file is edited.
 // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -17,7 +18,7 @@ const exampleWellLog = {
     curves: [],
     data: [],
 };
-const exampleColorTable = colorTables;
+const exampleColorTable = colorTables as ColorTable[];
 
 window.ResizeObserver =
     window.ResizeObserver ||
@@ -43,6 +44,7 @@ describe("Well Log Viewer perfomance", () => {
                     axisMnemos={axisMnemos}
                     template={exampleTemplate}
                     colorTables={exampleColorTable}
+                    colorFunctions={[]}
                     onContentRescale={function (): void {
                         // todo: fix the test
                         // commented to make test pass

typescript/packages/well-log-viewer/src/components/ColorTableTypes.ts

@@ -1,9 +1,6 @@
-export interface ColorTable {
+import type { colorTablesObj } from "@emerson-eps/color-tables/dist/component/colorTableTypes";
+export type ColorTable = colorTablesObj;
+export type ColorFunction = {
     name: string;
-    colors: [number, number, number, number][];
-    discrete?: boolean; // default false
-
-    colorNaN?: [number, number, number]; // default "white"
-    colorBelow?: [number, number, number]; // default colorNaN
-    colorAbove?: [number, number, number]; // default colorBelow
-}
+    func: (v: number) => [number, number, number];
+};

typescript/packages/well-log-viewer/src/components/PlotDialog.tsx

@@ -5,7 +5,7 @@ import type { Track, GraphTrack } from "@equinor/videx-wellog";
 
 import type { TemplatePlot, TemplatePlotTypes } from "./WellLogTemplateTypes";
 import type { WellLog } from "./WellLogTypes";
-import type { ColorTable } from "./ColorTableTypes";
+import type { ColorTable, ColorFunction } from "./ColorTableTypes";
 
 import type WellLogView from "./WellLogView";
 
@@ -89,24 +89,39 @@ export function createBooleanItems(): ReactNode[] {
     return _createItems(booleanItems);
 }
 
-function createColorTableItems(colorTables: ColorTable[]): ReactNode[] {
+function createColorTableItems(
+    colorTables: ColorTable[],
+    colorFunctions: ColorFunction[]
+): ReactNode[] {
     const nodes: ReactNode[] = [];
-    if (!colorTables) {
+    if (!colorTables && !colorFunctions) {
         console.error(
-            "colorTables is missed or empty in createColorTableItems()"
+            "colorTables and colorFunctions are missed or empty in createColorTableItems()"
         );
-    } else
-        for (const colorTable of colorTables) {
-            if (colorTable.discrete) continue; // skip discrete color tables
-            if (!colorTable.name) {
-                console.log(
-                    "colorTable.name is empty in createColorTableItems()"
-                );
+    } else {
+        if (colorTables)
+            for (const colorTable of colorTables) {
+                if (colorTable.discrete) continue; // skip discrete color tables
+                const name = colorTable.name;
+                if (!name) {
+                    console.error(
+                        "colorTable.name is empty in createColorTableItems()"
+                    );
+                }
+                nodes.push(<option key={name}>{name}</option>);
             }
-            nodes.push(
-                <option key={colorTable.name}>{colorTable.name}</option>
-            );
-        }
+        if (colorFunctions)
+            for (const colorFunction of colorFunctions) {
+                let name = colorFunction.name;
+                if (!name) {
+                    console.error(
+                        "colorFunction.name is empty in createColorTableItems()"
+                    );
+                }
+                name = "@" + name; // insert function sign
+                nodes.push(<option key={name}>{name}</option>);
+            }
+    }
     return nodes;
 }
 
@@ -224,7 +239,10 @@ export class PlotPropertiesDialog extends Component<Props, State> {
                       // TODO: Fix this the next time the file is edited.
                       // eslint-disable-next-line react/prop-types
                       this.props.wellLogView.props.colorTables?.[0]?.name,
-                  inverseColorTable: undefined,
+                  colorFunction:
+                      this.props.wellLogView.props.colorFunctions?.[0]?.name,
+                  inverseColorTable1: undefined,
+                  inverseColorFunction: undefined,
                   colorScale: undefined,
                   inverseColorScale: undefined,
 
@@ -351,18 +369,19 @@ export class PlotPropertiesDialog extends Component<Props, State> {
             // TODO: Fix this the next time the file is edited.
             // eslint-disable-next-line react/prop-types
             const colorTables = this.props.wellLogView.props.colorTables;
+            const colorFunctions = this.props.wellLogView.props.colorFunctions;
             return [
                 this.createSelectControl(
                     "colorTable",
                     "Fill Color table",
-                    createColorTableItems(colorTables)
+                    createColorTableItems(colorTables, colorFunctions)
                 ),
                 <FormControl fullWidth key="211" />,
                 <FormControl fullWidth key="212" />,
                 this.createSelectControl(
                     "inverseColorTable",
                     "Inverse Color table",
-                    createColorTableItems(colorTables),
+                    createColorTableItems(colorTables, colorFunctions),
                     true
                 ),
             ];