fix: change implementation color function (#2054)

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

@@ -268,23 +268,13 @@ function addTemplateTrack(
     return templateNew;
 }
 
-// Custom function to demonstrate the ability to specify a function instead of color tables
-function colorTableFunc(v: number): [number, number, number] {
-    if (v >= 0 && v < 0.25) return [255, 0.0, 0.0];
-    else if (v >= 0.25 && v < 0.5) return [182, 182, 0.0];
-    else if (v >= 0.5 && v < 0.75) return [0.0, 255, 0.0];
-    else if (v >= 0.75 && v < 1) return [0.0, 182, 182];
-    else if (v == 1) return [0.0, 0.0, 255];
-    else return [0, 0, 0];
-}
-
 export const Default: StoryObj<typeof StoryTemplate> = {
     args: {
         id: "Well-Log-Viewer",
         horizontal: false,
         welllog: require("../../../../example-data/L898MUD.json")[0], // eslint-disable-line
         template: require("../../../../example-data/welllog_template_1.json"), // eslint-disable-line
-        colorTables: colorTableFunc,
+        colorTables: colorTables,
         wellpick: wellpick,
         axisTitles: axisTitles,
         axisMnemos: axisMnemos,

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

@@ -91,12 +91,6 @@ export function createBooleanItems(): ReactNode[] {
 
 function createColorTableItems(colorTables: ColorTable[]): ReactNode[] {
     const nodes: ReactNode[] = [];
-
-    if (typeof colorTables === "function") {
-        nodes.push(<option key="Function"> Function </option>);
-        return nodes;
-    }
-
     if (!colorTables) {
         console.error(
             "colorTables is missed or empty in createColorTableItems()"
@@ -223,10 +217,7 @@ export class PlotPropertiesDialog extends Component<Props, State> {
 
                   // for 'gradientfill' plot
                   colorTable:
-                      typeof this.props.wellLogView.props.colorTables ===
-                      "function"
-                          ? "Function"
-                          : this.props.wellLogView.props.colorTables?.[0]?.name,
+                      this.props.wellLogView.props.colorTables?.[0]?.name,
                   inverseColorTable: undefined,
                   colorScale: undefined,
                   inverseColorScale: undefined,

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

@@ -24,8 +24,8 @@ export type TemplatePlotProps = {
 
     fill?: CSSColor; // for 'area' plot
     fillOpacity?: number; // for 'area' and 'gradientfill' plots! default 0.25
-    colorTable?: string; // table id (name) for 'gradientfill' plot
-    inverseColorTable?: string; // table id (name) for 'gradientfill' plot
+    colorTable?: string | ((v: number) => [number, number, number]); // table id (name) for 'gradientfill' plot
+    inverseColorTable?: string | ((v: number) => [number, number, number]); // table id (name) for 'gradientfill' plot
     colorScale?: TemplatePlotScaleTypes; // for 'linear' plot scale. default equal to plot scale
     inverseColorScale?: TemplatePlotScaleTypes; // for 'linear' plot scale. default equal to plot scale
 

typescript/packages/well-log-viewer/src/utils/gradientfill-plot-legend.ts

@@ -17,7 +17,7 @@ import { color4ToString } from "./color-table";
 let __idGradient = 0;
 function createGradient(
     g: D3Selection,
-    colorTable: ColorTable,
+    colorTable: ColorTable | ((v: number) => [number, number, number]),
     rLogarithmic?: number
 ): string {
     const id = "grad" + ++__idGradient; // generate unique id

typescript/packages/well-log-viewer/src/utils/gradientfill-plot.ts

@@ -12,8 +12,8 @@ import type { ColorTable } from "../components/ColorTableTypes";
 import type { AreaPlotOptions } from "@equinor/videx-wellog/dist/plots/interfaces";
 
 export interface GradientFillPlotOptions extends AreaPlotOptions {
-    colorTable?: ColorTable;
-    inverseColorTable?: ColorTable;
+    colorTable?: ColorTable | ((v: number) => [number, number, number]);
+    inverseColorTable?: ColorTable | ((v: number) => [number, number, number]);
     colorScale?: "linear" | "log";
     inverseColorScale?: "linear" | "log";
 }
@@ -27,7 +27,7 @@ function createGradient(
     horizontal: boolean | undefined,
     plotdata: number[][],
     xscale: Scale,
-    colorTable: ColorTable,
+    colorTable: ColorTable | ((v: number) => [number, number, number]),
     scale: undefined | string // "linear" | "log"
 ): CanvasGradient {
     const dataFrom = plotdata[0];

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

@@ -362,18 +362,18 @@ const defColorTable: ColorTable = {
 };
 
 function getColorTable(
-    id: string | undefined,
+    id: string | ((v: number) => [number, number, number]) | undefined,
     colorTables?: ColorTable[]
-): ColorTable | undefined {
+): ColorTable | ((v: number) => [number, number, number]) | undefined {
+    if (id && typeof id === "function") {
+        return id;
+    }
     if (id && typeof id !== "string") {
         console.log("colorTable id='" + id + "' is not string");
         return defColorTable;
     }
     if (id && colorTables) {
-        const colorTable =
-            typeof colorTables === "function"
-                ? colorTables
-                : colorTables.find((value) => value.name === id);
+        const colorTable = colorTables.find((value) => value.name === id);
         if (colorTable) return colorTable;
         console.error(
             "colorTable id='" + id + "' is not found in getColorTable()"