feat: ColorMapFunction type in WellLogView

.gitignore

@@ -297,3 +297,6 @@ bh_unicode_properties.cache
 # Sublime-github package stores a github token in this file
 # https://packagecontrol.io/packages/sublime-github
 GitHub.sublime-settings
+
+# MS Visual Studio
+.vs

example-data/facies3wells.json

@@ -1857,7 +1857,7 @@
           "name": "discrete",
           "type": "stacked",
           "color": "red",
-          "colorTable": "Stratigraphy"
+          "colorFunction": "Stratigraphy"
         },
         { "name": "categorical", "type": "stacked", "color": "green" }
       ]
@@ -1909,7 +1909,7 @@
           "name": "discrete",
           "type": "stacked",
           "color": "red",
-          "colorTable": "Stratigraphy"
+          "colorFunction": "Stratigraphy"
         },
         { "name": "categorical", "type": "stacked", "color": "green" }
       ]
@@ -1961,13 +1961,13 @@
           "name": "discrete",
           "type": "stacked",
           "color": "red",
-          "colorTable": "Stratigraphy"
+          "colorFunction": "Stratigraphy"
         },
         { "name": "categorical", "type": "stacked", "color": "green" }
       ]
     }
   ],
-  "colorTables": [
+  "colorFunctions": [
     {
       "name": "Physics",
       "discrete": false,

example-data/synclog_template.json

@@ -133,7 +133,7 @@
         {
             "name": "HKL",
             "type": "gradientfill",
-            "colorTable": "Physics",
+            "colorFunction": "Physics",
             "color": "green"
         },
         {

example-data/welllog_template_1.json

@@ -54,8 +54,8 @@
                     "name": "HKLA",
                     "type": "gradientfill",
                     "color": "blue",
-                    "colorTable": "Physics",
-                    "inverseColorTable": "Physics"
+                    "colorFunction": "Physics",
+                    "inverseColorFunction": "Physics"
                 }
             ]
         },
@@ -196,7 +196,7 @@
         {
             "name": "HKL",
             "type": "gradientfill",
-            "colorTable": "Physics",
+            "colorFunction": "Physics",
             "color": "green"
         },
         {

example-data/welllog_template_2.json

@@ -191,7 +191,7 @@
     {
       "name": "discrete",
       "type": "stacked",
-      "colorTable": "Stratigraphy"
+      "colorFunction": "Stratigraphy"
     }
   ]
 }

python/src/components/WellLogViewer/WellLogViewer.tsx

@@ -9,6 +9,9 @@
     }))
 );
 
+import type { ColorFunction } from "../components/ColorTableTypes";
+import type { WellPickProps } from "../components/WellLogView";
+
 // react-docgen / dash-generate-components/extract-meta.js does not properly parse
 // the imported WellLogViewerProps. Hence, we have to recreate them here.
 /**
@@ -52,9 +55,8 @@
     /** Prop containing track template data */
     template: object;
 
-    /** Prop containing color table data */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    colorTables: any[]; // specify the exact type if known
+    /** Prop containing color function/table array */
+    colorFunctions: ColorFunction[]; 
 
     /** Orientation of the track plots on the screen. Default is false */
     horizontal?: boolean;
@@ -66,16 +68,16 @@
     selection?: number[];
 
     /** Well picks data */
-    wellpick?: object;
+    wellpick?: WellPickProps;
 
     /** Primary axis id: " md", "tvd", "time"... */
     primaryAxis?: string;
 
     /** Log mnemonics for axes */
-    axisTitles?: object;
+    axisTitles?: Record<string, string>;
 
     /** Names for axes */
-    axisMnemos?: object;
+    axisMnemos?: Record<string, string[]>;
 
     /** Set to true for default titles or to array of individual well log titles */
     viewTitle?: boolean | string | object; // 'object' might be replaced by a specific type like ReactNode

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

@@ -3,18 +3,22 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import { colorTables } from "@emerson-eps/color-tables";
-const exampleColorTable = colorTables; /*as unknown as ColorTable[]*/ // equivalent types, should be merged
+import type { ColorFunction } from "./components/ColorTableTypes";
+const exampleColorFunctions = colorTables as ColorFunction[];
 const wellpickColorTable = require("../../../../example-data/wellpick_colors.json"); // eslint-disable-line
+const wellpickColorFunctions = wellpickColorTable as ColorFunction[];
 const wellpick = require("../../../../example-data/wellpicks.json");// eslint-disable-line
 
 import { ToggleButton } from "@mui/material";
 
 import SyncLogViewer, { argTypesSyncLogViewerProp } from "./SyncLogViewer";
+import type { SyncLogViewerProps } from "./SyncLogViewer";
 import type {
     // @ts-expect-error TS2614
     WellLogView,
     WellLogController,
     TrackMouseEvent,
+    WellPickProps,
 } from "./components/WellLogView";
 
 const ComponentCode =
@@ -32,7 +36,7 @@ const ComponentCode =
     '       require("../../../../example-data/synclog_template.json"), \r\n' +
     '       require("../../../../example-data/synclog_template.json"), \r\n' +
     "    } \r\n" +
-    "    colorTables={colorTables} \r\n" +
+    "    colorFunctions={colorFunctions} \r\n" +
     "/>";
 
 import type { WellLog } from "./components/WellLogTypes";
@@ -65,8 +69,8 @@ const stories: Meta = {
         templates: {
             description: "Array of track template data.",
         },
-        colorTables: {
-            description: "Prop containing color table data.",
+        colorFunctions: {
+            description: "Prop containing color function/table data.",
         },
         wellpickFlatting: {
             description: "Horizon names for wellpick flatting",
@@ -158,11 +162,9 @@ function fillInfo(controller: WellLogController | undefined) {
     );
 }
 
-// @ts-expect-error TS7006
-const Template = (args) => {
-    const infoRef = React.useRef();
+const Template = (args: SyncLogViewerProps) => {
+    const infoRef = React.useRef<HTMLDivElement | null>(null);
     const setInfo = function (info: string) {
-        // @ts-expect-error TS2339
         if (infoRef.current) infoRef.current.innerHTML = info;
     };
 
@@ -228,13 +230,13 @@ const Template = (args) => {
                     onDeleteController={onDeleteController}
                     onContentRescale={onContentRescale}
                     onContentSelection={onContentSelection}
-                    onTrackMouseEvent={checked ? onTrackMouseEventCustom : null}
+                    onTrackMouseEvent={
+                        checked ? onTrackMouseEventCustom : undefined
+                    }
                 />
             </div>
             {/* Print info for the first WellLog */}
             <div style={{ display: "flex", flexDirection: "row" }}>
-                {/*
-                 // @ts-expect-error TS2322 */}
                 <div ref={infoRef}></div>
                 <label style={{ marginLeft: 10 }}>disable context menu</label>
                 <input
@@ -363,9 +365,30 @@ const patternNamesEnglish = [
     "Vulcanic",
 ];
 
+const exampleWellPicks: WellPickProps[] = [
+    {
+        wellpick: wellpick[0],
+        name: "HORIZON",
+        colorFunctions: wellpickColorFunctions,
+        colorFunction: "Stratigraphy",
+    },
+    {
+        wellpick: wellpick[1],
+        name: "HORIZON",
+        colorFunctions: wellpickColorFunctions,
+        colorFunction: "Stratigraphy",
+    },
+    {
+        wellpick: wellpick[0],
+        name: "HORIZON",
+        colorFunctions: wellpickColorFunctions,
+        colorFunction: "Stratigraphy",
+    },
+];
+
 export const Default: StoryObj<typeof Template> = {
     args: {
-        id: "Sync-Log-Viewer",
+        //id: "Sync-Log-Viewer",
         syncTrackPos: true,
         syncContentDomain: true,
         syncContentSelection: true,
@@ -381,31 +404,12 @@ export const Default: StoryObj<typeof Template> = {
             require("../../../../example-data/synclog_template.json"), // eslint-disable-line
             require("../../../../example-data/synclog_template.json"), // eslint-disable-line
         ],
-        colorTables: exampleColorTable,
-        wellpicks: [
-            {
-                wellpick: wellpick[0],
-                name: "HORIZON",
-                colorTables: wellpickColorTable,
-                color: "Stratigraphy",
-            },
-            {
-                wellpick: wellpick[1],
-                name: "HORIZON",
-                colorTables: wellpickColorTable, // eslint-disable-line
-                color: "Stratigraphy",
-            },
-            {
-                wellpick: wellpick[0],
-                name: "HORIZON",
-                colorTables: wellpickColorTable, // eslint-disable-line
-                color: "Stratigraphy",
-            },
-        ],
+        colorFunctions: exampleColorFunctions,
+        wellpicks: exampleWellPicks,
         patternsTable: {
             patternSize: 24,
             patternImages: patternImages,
-            names: patternNamesEnglish,
+            patternNames: patternNamesEnglish,
         },
         patterns: require("../../../../example-data/horizon_patterns.json"), // eslint-disable-line
 
@@ -614,7 +618,7 @@ const TemplateWithSelection = (args: { welllogs: WellLog[] }) => {
                 {/*
                  // @ts-expect-error TS2739 */}
                 <SyncLogViewer
-                    id="SyncLogViewer"
+                    id="SyncLogViewer2"
                     {...argsWithSelection}
                     onCreateController={onCreateController}
                     onDeleteController={onDeleteController}

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

@@ -6,8 +6,8 @@ import React from "react";
 import SyncLogViewer from "./SyncLogViewer";
 import { axisMnemos, axisTitles } from "./utils/axes";
 
-import type { ColorTable } from "./components/ColorTableTypes";
-const exampleColorTable = colorTables as unknown as ColorTable[]; // equivalent types, should be merged
+import type { ColorFunction } from "./components/ColorTableTypes";
+const exampleColorFunction = colorTables as unknown as ColorFunction[];
 // 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];
@@ -37,7 +37,7 @@ describe("Sync Log Viewer", () => {
                 axisMnemos={axisMnemos}
                 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={exampleColorFunction} // the same colortables for all wellog viewers
             />
         );
         expect(container.firstChild).toMatchSnapshot();