Log Grad Function

import { mergeObjects } from "@int/geotoolkit/base.js";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { Orientation } from "@int/geotoolkit/util/Orientation.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Patterns } from "@int/geotoolkit/attributes/LineStyle.ts";
import { LogVisualHeaderProvider } from "@int/geotoolkit/welllog/header/LogVisualHeaderProvider.ts";
import { AdaptiveBasicLogVisualHeader } from "@int/geotoolkit/welllog/header/AdaptiveBasicLogVisualHeader.ts";
import { Sections } from "@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts";
import { Util as HeaderUtil } from "@int/geotoolkit/welllog/header/Util.ts";
import { Events as SelectionEvents } from "@int/geotoolkit/controls/tools/Selection.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
import { LogGradVisual } from "/src/code/WellLog/AdditionalFunctionality/LogGradFunction/LogGradVisual.ts";
import { LogGradEditor } from "/src/code/WellLog/AdditionalFunctionality/LogGradFunction/LogGradEditor.ts";
const CROSSHAIR_LABEL = {
  "visible": true,
  "linestyle": {
    "color": "rgba(175, 175, 175, 0.9)",
    "pixelsnapmode": true,
    "width": 1
  },
  "fillstyle": {
    "color": "rgba(255, 255, 255, 0.85)",
    "shadow": {
      "enable": true,
      "color": "rgba(60, 60, 60, 0.5)",
      "blur": 6,
      "offsetx": 0,
      "offsety": 4
    }
  },
  "textstyle": {
    "font": "12px sans-serif",
    "color": "#252525"
  },
  "paddingstyle": 4
};
const header = new AdaptiveBasicLogVisualHeader().setElement({
  "Line": {
    "section": Sections.Middle,
    "drawmethod": (header2, rect, context) => {
      const visual = header2.getVisual();
      const lineStyle = visual.getLineStyle();
      if (lineStyle != null) {
        HeaderUtil.drawLine(lineStyle, null, rect, context);
      }
    }
  }
});
LogVisualHeaderProvider.getDefaultInstance().registerHeaderProvider(LogGradVisual.getClassName(), header);
function createCurve(color, withNaN) {
  const data = new LogData({
    "name": "CALI",
    "depths": [10, 12, 20, 27, 30, 35, 40, 42, 50, 55, 60, 67, 70, 75],
    "values": withNaN ? [75, 100, 90, NaN, NaN, NaN, 60, 75, 80, 100, 40, 67, 40, 80] : [75, 100, 90, 50, 60, 95, 60, 75, 80, 100, 40, 67, 40, 80],
    "indexunit": "ft",
    "valuesunit": "ft"
  });
  return new LogCurve(data).setLineStyle({
    "color": color,
    "width": 2
  });
}
function createScene(canvas) {
  const widget = createWellLogWidget({
    "orientation": Orientation.Horizontal
  });
  widget.addTrack(TrackType.IndexTrack);
  const linearTrack = widget.addTrack(TrackType.LinearTrack);
  let logCurve;
  linearTrack.addChild([
    logCurve = createCurve("#ef6c00").setMicroPosition(0.1, 0.8),
    new LogGradVisual({
      "curve": logCurve,
      "intervals": [15, 31, 52, 65],
      "linestyle": {
        "width": 2,
        "color": "blue",
        "pattern": Patterns.Dash
      }
    }).setName("Log GRAD [Cali]")
  ]);
  widget.addTrack(TrackType.IndexTrack);
  widget.setDepthLimits(0, 75);
  const plot = new Plot({
    "canvaselement": canvas,
    "root": widget
  });
  const gradEditor = new LogGradEditor({
    "layer": widget.getTrackManipulatorLayer(),
    "handlestyles": {
      "inactivelinestyle": "blue"
    }
  }).setEnabled(true);
  widget.setCss(`
        .Handle:hover {
            size: 12;
        }
    `);
  widget.getToolByName("pick").on(SelectionEvents.onSelectionEnd, (evt, selector, args) => {
    const selection = args.getSelection().filter((n) => n instanceof LogGradVisual);
    gradEditor.setShape(selection[0]);
  });
  const crossHair = widget.getToolByName("cross-hair");
  crossHair.setProperties({
    "west": mergeObjects(CROSSHAIR_LABEL, {
      "alignment": AnchorType.LeftBottom,
      "offset": {
        "left": 6,
        "bottom": 8
      }
    })
  });
  const crossHairIndex = crossHair.getParentTool().getToolIndex(crossHair);
  crossHair.getParentTool().insert(crossHairIndex, gradEditor);
  widget.setHeaderHeight("auto").fitToHeight().fitToWidth();
  return plot;
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));