test: Color by function groundwork for test

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

@@ -291,6 +291,56 @@ export const Default: StoryObj<typeof StoryTemplate> = {
     render: (args) => <StoryTemplate {...args} />,
 };
 
+export const ColorFunc: StoryObj<typeof StoryTemplate> = {
+    args: {
+        id: "Well-Log-Viewer",
+        horizontal: false,
+        welllog: require("../../../../example-data/L898MUD.json")[0], // eslint-disable-line
+        template: {
+            name: "Template 1",
+            scale: {
+                primary: "md",
+                allowSecondary: true,
+            },
+            tracks: [
+                {
+                    title: "Multiple",
+                    width: 6,
+                    plots: [
+                        {
+                            name: "HKLA",
+                            style: "HKL",
+                        },
+                    ],
+                },
+            ],
+            styles: [
+                {
+                    name: "HKL",
+                    type: "gradientfill",
+                    //colorTable: (value: number) => value < 100 ? [1, 0, 0] : [[0, 1, 1]],
+                    colorTable: "Physics",
+                    color: "green",
+                },
+            ],
+        },
+        colorTables: colorTables,
+        wellpick: wellpick,
+        axisTitles: axisTitles,
+        axisMnemos: axisMnemos,
+        viewTitle: true, // show default welllog view title (a wellname from the welllog)
+        domain: [2500, 4000],
+        selection: [3500, 3700],
+        options: {
+            hideTrackTitle: false,
+            hideTrackLegend: false,
+            hideCurrentPosition: false,
+            hideSelectionInterval: false,
+        },
+    },
+    render: (args) => <StoryTemplate {...args} />,
+};
+
 export const Horizontal: StoryObj<typeof StoryTemplate> = {
     args: {
         id: "Well-Log-Viewer-Horizontal",

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

@@ -36,7 +36,7 @@ import type { AxesInfo } from "../utils/tracks";
 import type { ExtPlotOptions } from "../utils/tracks";
 import { getTrackTemplate } from "../utils/tracks";
 import { isScaleTrack } from "../utils/tracks";
-import { deepCopy } from "../utils/deepcopy";
+import { deepCopy, deepCopyTemplate } from "../utils/deepcopy";
 
 import {
     addOrEditGraphTrack,
@@ -1325,7 +1325,7 @@ class WellLogView
 
     componentDidMount(): void {
         this._isMount = true;
-        this.template = deepCopy(this.props.template); // save external template content to current
+        this.template = deepCopyTemplate(this.props.template); // save external template content to current
 
         if (!this.logController) {
             this.createLogViewer();
@@ -1387,7 +1387,7 @@ class WellLogView
         }
         if (this.props.template !== prevProps.template) {
             if (this.props.template)
-                this.template = deepCopy(this.props.template); // save external template content to current
+                this.template = deepCopyTemplate(this.props.template); // save external template content to current
             shouldSetTracks = true;
             checkSchema = true;
         }

typescript/packages/well-log-viewer/src/utils/deepcopy.ts

@@ -1,3 +1,26 @@
+import type { Template } from "../components/WellLogTemplateTypes";
+
 export function deepCopy<T>(source: T): T {
     return JSON.parse(JSON.stringify(source)) as T;
 }
+
+export function deepCopyTemplate(source: Template): Template {
+    const target = deepCopy(source);
+
+    source?.styles?.forEach((style, index) => {
+        const target_style = target.styles?.at(index);
+        if (target_style) {
+            if (style.colorTable && typeof style.colorTable == "function") {
+                target_style.colorTable = style.colorTable;
+            }
+            if (
+                style.inverseColorTable &&
+                typeof style.inverseColorTable == "function"
+            ) {
+                target_style.inverseColorTable = style.inverseColorTable;
+            }
+        }
+    });
+
+    return target;
+}