@webviz/well-log-viewer 2.8.4 → 2.9.0

package/dist/components/WellLogView.js

@@ -104,9 +104,8 @@ function addReadoutOverlay(instance, parent) {
     const horizontal = parent.props.horizontal;
     const elm = instance.overlay.create("depth", {
         onClick: (event) => {
-            var _a, _b;
-            if (((_a = parent.props.options) === null || _a === void 0 ? void 0 : _a.hideCurrentPosition) ||
-                ((_b = parent.props.options) === null || _b === void 0 ? void 0 : _b.hideSelectionInterval))
+            if (parent.props.options?.hideCurrentPosition ||
+                parent.props.options?.hideSelectionInterval)
                 return;
             const { caller, x, y } = event;
             const value = caller.scale.invert(horizontal ? x : y);
@@ -174,7 +173,6 @@ function addPinnedValueOverlay(instance, parent) {
     const horizontal = parent.props.horizontal;
     const pinelm = instance.overlay.create("pinned", {
         onClick: (event) => {
-            var _a;
             const v = horizontal ? event.x : event.y;
             const pinelm = event.target;
             if (pinelm) {
@@ -193,7 +191,7 @@ function addPinnedValueOverlay(instance, parent) {
                 else {
                     parent.selPinned = instance.scale.invert(v);
                     if (parent.selCurrent === undefined &&
-                        !((_a = parent.props.options) === null || _a === void 0 ? void 0 : _a.hideCurrentPosition))
+                        !parent.props.options?.hideCurrentPosition)
                         parent.selCurrent = parent.selPinned;
                     const rbelm = instance.overlay.elements["rubber-band"];
                     if (rbelm && pinelm) {
@@ -279,7 +277,6 @@ function _getLogIndexByNames(curves, names) {
     return -1;
 }
 export function getWellPicks(wellLogView) {
-    var _a;
     const wps = [];
     const wellpick = wellLogView.props.wellpick;
     if (!wellpick)
@@ -289,7 +286,7 @@ export function getWellPicks(wellLogView) {
         return wps;
     }
     const curves = wellpick.wellpick.curves;
-    const mnemo = (_a = wellpick.md) !== null && _a !== void 0 ? _a : "MD";
+    const mnemo = wellpick.md ?? "MD";
     const md = _getLogIndexByNames(curves, [mnemo]);
     if (md < 0) {
         console.error("Depth log '" + mnemo + "' is not found for wellpicks");
@@ -310,8 +307,8 @@ export function getWellPicks(wellLogView) {
             if (horizon === null || horizon === undefined)
                 continue;
             const vMD = d[md];
-            const vPrimary = primaryAxis === "md" ? vMD : scaleInterpolator === null || scaleInterpolator === void 0 ? void 0 : scaleInterpolator.forward(vMD);
-            const vSecondary = primaryAxis === "md" ? scaleInterpolator === null || scaleInterpolator === void 0 ? void 0 : scaleInterpolator.reverse(vMD) : vMD;
+            const vPrimary = primaryAxis === "md" ? vMD : scaleInterpolator?.forward(vMD);
+            const vSecondary = primaryAxis === "md" ? scaleInterpolator?.reverse(vMD) : vMD;
             const colormapFunction = wellpick.colorMapFunctions.find((colormapFunction) => colormapFunction.name === wellpick.colorMapFunctionName);
             const meta = getDiscreteMeta(wellpick.wellpick, wellpick.name);
             const { color } = getDiscreteColorAndName(d[c], colormapFunction, meta);
@@ -359,7 +356,6 @@ function posWellPickTitles(instance, parent) {
     }
 }
 function addWellPickOverlay(instance, parent) {
-    var _a, _b;
     {
         /* clear old wellpicks */
         for (const elmName in instance.overlay.elements) {
@@ -376,12 +372,12 @@ function addWellPickOverlay(instance, parent) {
         return;
     //const primaryAxis = parent.props.primaryAxis;
     const horizontal = parent.props.horizontal;
-    const wellpickColorFill = (_a = parent.props.options) === null || _a === void 0 ? void 0 : _a.wellpickColorFill;
+    const wellpickColorFill = parent.props.options?.wellpickColorFill;
     const patternsTable = parent.props.patternsTable;
     const patterns = parent.props.patterns;
-    const wellpickPatternFill = patternsTable && patterns && ((_b = parent.props.options) === null || _b === void 0 ? void 0 : _b.wellpickPatternFill);
-    const patternSize = patternsTable === null || patternsTable === void 0 ? void 0 : patternsTable.patternSize;
-    const patternImages = patternsTable === null || patternsTable === void 0 ? void 0 : patternsTable.patternImages;
+    const wellpickPatternFill = patternsTable && patterns && parent.props.options?.wellpickPatternFill;
+    const patternSize = patternsTable?.patternSize;
+    const patternImages = patternsTable?.patternImages;
     for (const wp of wps) {
         const horizon = wp.horizon;
         const vPrimary = wp.vPrimary;
@@ -389,10 +385,10 @@ function addWellPickOverlay(instance, parent) {
         const color = wp.color;
         const txtPrimary = !Number.isFinite(vPrimary)
             ? ""
-            : vPrimary === null || vPrimary === void 0 ? void 0 : vPrimary.toFixed(0);
+            : vPrimary?.toFixed(0);
         const txtSecondary = !Number.isFinite(vSecondary)
             ? ""
-            : /*(primaryAxis === "md" ? "TVD:" : "MD:") +*/ vSecondary === null || vSecondary === void 0 ? void 0 : vSecondary.toFixed(0);
+            : /*(primaryAxis === "md" ? "TVD:" : "MD:") +*/ vSecondary?.toFixed(0);
         const elmName = "wp" + horizon;
         const pinelm = instance.overlay.create(elmName, {});
         const rgba = "rgba(" + color[0] + "," + color[1] + "," + color[2] + ",0.8)";
@@ -510,14 +506,17 @@ function initOverlays(instance, parent) {
 }
 function setTracksToController(logController, axes, wellLogSets, // JSON Log Format
 templateTracks, // JSON
-colorMapFunctions // JS code array or JSON file for pure color tables array without color functions elements
+domain, visibleRange, colorMapFunctions // JS code array or JSON file for pure color tables array without color functions elements
 ) {
-    const { tracks, minmaxPrimaryAxis: minmaxPrimaryAxis } = createWellLogTracks(wellLogSets, axes, templateTracks, colorMapFunctions);
+    const { tracks, minmaxPrimaryAxis } = createWellLogTracks(wellLogSets, axes, templateTracks, colorMapFunctions);
     logController.reset();
     const scaleInterpolator = setUpScaleInterpolator(logController, 
     // ! We assume each set has the same index curves, so we just use the first one
     wellLogSets[0], axes);
-    setContentBaseDomain(logController, minmaxPrimaryAxis);
+    // respect the provided domain, otherwise use the minmaxPrimaryAxis
+    setContentBaseDomain(logController, domain ?? minmaxPrimaryAxis);
+    // respect the provided visibleRange, otherwise use the base domain
+    zoomContentTo(logController, visibleRange ?? domain ?? minmaxPrimaryAxis);
     logController.setTracks(tracks);
     return scaleInterpolator;
 }
@@ -561,7 +560,6 @@ function addPlot(parent, wellLogView, track) {
     createRoot(el).render(React.createElement(PlotPropertiesDialog, { wellLogView: wellLogView, track: track, onOK: wellLogView.addTrackPlot.bind(wellLogView, track) }));
 }
 function fillPlotTemplate(templateTrack, plot) {
-    var _a, _b, _c, _d;
     const options = plot.options;
     const optionsDifferential = plot.options; // DifferentialPlot - 2 series!
     const options1 = optionsDifferential.serie1;
@@ -570,7 +568,7 @@ function fillPlotTemplate(templateTrack, plot) {
     const legendDifferential = legend; // DifferentialPlot - 2 series!
     const legend1 = legendDifferential.serie1;
     const legend2 = legendDifferential.serie2;
-    const scale = (templateTrack === null || templateTrack === void 0 ? void 0 : templateTrack.scale) !== options.scale ? options.scale : undefined;
+    const scale = templateTrack?.scale !== options.scale ? options.scale : undefined;
     return {
         style: undefined, // No style for this full Plot options.
         type: getPlotType(plot),
@@ -582,8 +580,8 @@ function fillPlotTemplate(templateTrack, plot) {
         inverseColor: options.inverseColor || "",
         fill: (options1 ? options1.fill : options.fill) || "",
         fill2: options2 ? options2.fill : "",
-        colorMapFunctionName: (_b = (_a = options.colorMapFunction) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : "",
-        inverseColorMapFunctionName: (_d = (_c = options.inverseColorMapFunction) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : "",
+        colorMapFunctionName: options.colorMapFunction?.name ?? "",
+        inverseColorMapFunctionName: options.inverseColorMapFunction?.name ?? "",
         colorScale: options.colorScale,
         inverseColorScale: options.inverseColorScale,
     };
@@ -615,8 +613,8 @@ export function getContentBaseScale(controller, horizontal) {
         const wellLogView = controller;
         const logController = wellLogView.logController;
         if (logController) {
-            const overlay = logController === null || logController === void 0 ? void 0 : logController.overlay;
-            const source = overlay === null || overlay === void 0 ? void 0 : overlay.elm.node();
+            const overlay = logController?.overlay;
+            const source = overlay?.elm.node();
             if (source) {
                 const clientSize = horizontal
                     ? source.clientWidth
@@ -648,7 +646,7 @@ export const argTypesWellLogViewProp = {
         description: "Prop containing track template data.",
     },
     colorMapFunctions: {
-        description: "Prop containing color function tablefor discrete well logs and gradient plots.",
+        description: "Prop containing color function table for discrete well logs and gradient plots.",
     },
     wellpick: {
         description: "Well Picks data",
@@ -660,6 +658,9 @@ export const argTypesWellLogViewProp = {
         description: "Horizon to pattern index map",
     },
     domain: {
+        description: "Initial base domain range",
+    },
+    visibleRange: {
         description: "Initial visible range",
     },
     selection: {
@@ -688,7 +689,6 @@ export const argTypesWellLogViewProp = {
     // callbacks...
 };
 export function shouldUpdateWellLogView(props, nextProps) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     // Props could contain some unknown object key:value so we should ignore they
     // so compare only known key:values
     if (props.horizontal !== nextProps.horizontal)
@@ -713,33 +713,48 @@ export function shouldUpdateWellLogView(props, nextProps) {
         return true;
     if (!isEqualRanges(props.domain, nextProps.domain))
         return true;
+    if (!isEqualRanges(props.visibleRange, nextProps.visibleRange))
+        return true;
     if (!isEqualRanges(props.selection, nextProps.selection))
         return true;
-    if (((_a = props.options) === null || _a === void 0 ? void 0 : _a.hideTrackTitle) !== ((_b = nextProps.options) === null || _b === void 0 ? void 0 : _b.hideTrackTitle))
+    if (props.options?.hideTrackTitle !== nextProps.options?.hideTrackTitle)
         return true;
-    if (((_c = props.options) === null || _c === void 0 ? void 0 : _c.hideTrackLegend) !== ((_d = nextProps.options) === null || _d === void 0 ? void 0 : _d.hideTrackLegend))
+    if (props.options?.hideTrackLegend !== nextProps.options?.hideTrackLegend)
         return true;
-    if (((_e = props.options) === null || _e === void 0 ? void 0 : _e.maxVisibleTrackNum) !==
-        ((_f = nextProps.options) === null || _f === void 0 ? void 0 : _f.maxVisibleTrackNum))
+    if (props.options?.maxVisibleTrackNum !==
+        nextProps.options?.maxVisibleTrackNum)
         return true;
-    if (((_g = props.options) === null || _g === void 0 ? void 0 : _g.maxContentZoom) !== ((_h = nextProps.options) === null || _h === void 0 ? void 0 : _h.maxContentZoom))
+    if (props.options?.maxContentZoom !== nextProps.options?.maxContentZoom)
         return true;
-    if (((_j = props.options) === null || _j === void 0 ? void 0 : _j.checkDatafileSchema) !==
-        ((_k = nextProps.options) === null || _k === void 0 ? void 0 : _k.checkDatafileSchema))
+    if (props.options?.checkDatafileSchema !==
+        nextProps.options?.checkDatafileSchema)
         return true;
-    if (((_l = props.options) === null || _l === void 0 ? void 0 : _l.wellpickColorFill) !==
-        ((_m = nextProps.options) === null || _m === void 0 ? void 0 : _m.wellpickColorFill))
+    if (props.options?.wellpickColorFill !==
+        nextProps.options?.wellpickColorFill)
         return true;
-    if (((_o = props.options) === null || _o === void 0 ? void 0 : _o.wellpickPatternFill) !==
-        ((_p = nextProps.options) === null || _p === void 0 ? void 0 : _p.wellpickPatternFill))
+    if (props.options?.wellpickPatternFill !==
+        nextProps.options?.wellpickPatternFill)
         return true;
     // callbacks
     // ignore all?
     return false;
 }
 class WellLogView extends Component {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static propTypes;
+    wellLogSets;
+    container;
+    title;
+    resizeObserver;
+    logController;
+    selCurrent; // current mouse position
+    selPinned; // pinned position
+    selPersistent;
+    isDefZoom;
+    template;
+    scaleInterpolator;
+    _isMount;
     constructor(props) {
-        var _a, _b;
         super(props);
         this.wellLogSets = getWellLogSetsFromProps(props);
         this.container = undefined;
@@ -775,12 +790,32 @@ class WellLogView extends Component {
         };
         this.onTrackMouseEvent = this.onTrackMouseEvent.bind(this);
         // set callback to component's caller
-        (_b = (_a = this.props).onCreateController) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.props.onCreateController?.(this);
         this._isMount = false;
     }
     componentDidMount() {
         this._isMount = true;
-        this.template = deepCopy(this.props.template); // save external template content to current
+        this.template = deepCopy(this.props.template ?? {
+            name: "Empty Template",
+            scale: {
+                primary: "md",
+            },
+            tracks: [
+                {
+                    title: "",
+                    plots: [
+                        {
+                            name: "Empty",
+                            type: "line",
+                            color: "black",
+                            showLines: false,
+                            showLabels: false,
+                        },
+                    ],
+                },
+            ],
+            styles: [],
+        }); // save external template content to current
         if (!this.logController) {
             this.createLogViewer();
             this.setTracks(true);
@@ -799,23 +834,22 @@ class WellLogView extends Component {
         return false;
     }
     componentDidUpdate(prevProps, prevState) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         // Typical usage (don't forget to compare props):
         if (this.props.onCreateController !== prevProps.onCreateController) {
             // update callback to component's caller
-            (_b = (_a = this.props).onCreateController) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+            this.props.onCreateController?.(this);
         }
         let selectedTrackIndices = []; // Indices to restore
         let selection = undefined; // content selection to restore
         let shouldSetTracks = false;
         let checkSchema = false;
         if (this.props.horizontal !== prevProps.horizontal ||
-            ((_c = this.props.options) === null || _c === void 0 ? void 0 : _c.hideTrackTitle) !==
-                ((_d = prevProps.options) === null || _d === void 0 ? void 0 : _d.hideTrackTitle) ||
-            ((_e = this.props.options) === null || _e === void 0 ? void 0 : _e.hideTrackLegend) !==
-                ((_f = prevProps.options) === null || _f === void 0 ? void 0 : _f.hideTrackLegend) ||
-            ((_g = this.props.options) === null || _g === void 0 ? void 0 : _g.maxContentZoom) !==
-                ((_h = prevProps.options) === null || _h === void 0 ? void 0 : _h.maxContentZoom)) {
+            this.props.options?.hideTrackTitle !==
+                prevProps.options?.hideTrackTitle ||
+            this.props.options?.hideTrackLegend !==
+                prevProps.options?.hideTrackLegend ||
+            this.props.options?.maxContentZoom !==
+                prevProps.options?.maxContentZoom) {
             selection = this.getContentSelection();
             selectedTrackIndices = this.getSelectedTrackIndices();
             this.createLogViewer();
@@ -823,8 +857,8 @@ class WellLogView extends Component {
         }
         if (this.props.welllog !== prevProps.welllog ||
             this.props.wellLogSets !== prevProps.wellLogSets ||
-            ((_j = this.props.options) === null || _j === void 0 ? void 0 : _j.checkDatafileSchema) !==
-                ((_k = prevProps.options) === null || _k === void 0 ? void 0 : _k.checkDatafileSchema)) {
+            this.props.options?.checkDatafileSchema !==
+                prevProps.options?.checkDatafileSchema) {
             selection = this.props.selection;
             selectedTrackIndices = this.getSelectedTrackIndices();
             shouldSetTracks = true;
@@ -853,10 +887,10 @@ class WellLogView extends Component {
             shouldSetTracks = true; //??
         }
         if (this.props.wellpick !== prevProps.wellpick ||
-            ((_l = this.props.options) === null || _l === void 0 ? void 0 : _l.wellpickPatternFill) !==
-                ((_m = prevProps.options) === null || _m === void 0 ? void 0 : _m.wellpickPatternFill) ||
-            ((_o = this.props.options) === null || _o === void 0 ? void 0 : _o.wellpickColorFill) !==
-                ((_p = prevProps.options) === null || _p === void 0 ? void 0 : _p.wellpickColorFill)) {
+            this.props.options?.wellpickPatternFill !==
+                prevProps.options?.wellpickPatternFill ||
+            this.props.options?.wellpickColorFill !==
+                prevProps.options?.wellpickColorFill) {
             if (this.logController) {
                 addWellPickOverlay(this.logController, this);
                 this.showSelection();
@@ -870,8 +904,8 @@ class WellLogView extends Component {
                 this.selectContent(selection);
         }
         else if (this.state.scrollTrackPos !== prevState.scrollTrackPos ||
-            ((_q = this.props.options) === null || _q === void 0 ? void 0 : _q.maxVisibleTrackNum) !==
-                ((_r = prevProps.options) === null || _r === void 0 ? void 0 : _r.maxVisibleTrackNum)) {
+            this.props.options?.maxVisibleTrackNum !==
+                prevProps.options?.maxVisibleTrackNum) {
             this.onTrackScroll();
             this.onTrackSelection();
             this.updateInfo();
@@ -880,7 +914,13 @@ class WellLogView extends Component {
             (!prevProps.domain ||
                 this.props.domain[0] !== prevProps.domain[0] ||
                 this.props.domain[1] !== prevProps.domain[1])) {
-            this.setControllerZoom();
+            this.setContentBaseDomain(this.props.domain);
+        }
+        if (this.props.visibleRange &&
+            (!prevProps.visibleRange ||
+                this.props.visibleRange[0] !== prevProps.visibleRange[0] ||
+                this.props.visibleRange[1] !== prevProps.visibleRange[1])) {
+            this.zoomContentTo(this.props.visibleRange);
         }
         if (this.props.selection &&
             (!prevProps.selection ||
@@ -890,7 +930,6 @@ class WellLogView extends Component {
         }
     }
     createLogViewer() {
-        var _a, _b, _c;
         this.selPersistent = undefined;
         if (this.logController) {
             // remove old LogViewer
@@ -903,9 +942,9 @@ class WellLogView extends Component {
             // create new LogViewer
             this.logController = new LogViewer({
                 horizontal: this.props.horizontal,
-                showTitles: !((_a = this.props.options) === null || _a === void 0 ? void 0 : _a.hideTrackTitle),
-                showLegend: !((_b = this.props.options) === null || _b === void 0 ? void 0 : _b.hideTrackLegend),
-                maxZoom: (_c = this.props.options) === null || _c === void 0 ? void 0 : _c.maxContentZoom,
+                showTitles: !this.props.options?.hideTrackTitle,
+                showLegend: !this.props.options?.hideTrackLegend,
+                maxZoom: this.props.options?.maxContentZoom,
                 onTrackEnter: (elm, track) => addTrackMouseEventHandlers(elm, track, this.onTrackMouseEvent),
             });
             this.logController.init(this.container);
@@ -933,13 +972,12 @@ class WellLogView extends Component {
         };
     }
     setTracks(checkSchema) {
-        var _a;
         this.selCurrent = this.selPinned = undefined; // clear old selection (primary scale could be changed)
         if (checkSchema) {
             //check against the json schema
             try {
                 validateSchema(this.template, "WellLogTemplate");
-                if ((_a = this.props.options) === null || _a === void 0 ? void 0 : _a.checkDatafileSchema) {
+                if (this.props.options?.checkDatafileSchema) {
                     this.wellLogSets.forEach((wellLogSet) => validateSchema(wellLogSet, "WellLog"));
                 }
             }
@@ -949,7 +987,7 @@ class WellLogView extends Component {
         }
         if (this.logController) {
             const axes = this.getAxesInfo();
-            this.scaleInterpolator = setTracksToController(this.logController, axes, this.wellLogSets, this.getStyledTemplate().tracks, this.props.colorMapFunctions);
+            this.scaleInterpolator = setTracksToController(this.logController, axes, this.wellLogSets, this.getStyledTemplate().tracks, this.props.domain, this.props.visibleRange, this.props.colorMapFunctions);
             addWellPickOverlay(this.logController, this);
             this._updateWellLogTitle();
         }
@@ -961,40 +999,39 @@ class WellLogView extends Component {
         this.updateInfo(); // Clear old track information
     }
     findTrackById(trackId) {
-        var _a;
-        return (_a = this.logController) === null || _a === void 0 ? void 0 : _a.tracks.find(function (track) {
+        return this.logController?.tracks.find(function (track) {
             return track.id === trackId;
         });
     }
     setControllerZoom() {
-        if (this.props.domain)
-            this.zoomContentTo(this.props.domain);
+        if (this.props.visibleRange)
+            this.zoomContentTo(this.props.visibleRange);
     }
     setControllerSelection() {
         if (this.props.selection)
             this.selectContent(this.props.selection);
     }
     setControllerDefaultZoom() {
-        if (this.props.domain)
-            this.zoomContentTo(this.props.domain);
-        else
-            this.zoomContentTo(this.getContentBaseDomain());
-        this.isDefZoom = true;
+        const visibleRange = this.props.visibleRange ??
+            this.props.domain ??
+            this.getContentBaseDomain();
+        if (visibleRange) {
+            this.zoomContentTo(visibleRange);
+            this.isDefZoom = true;
+        }
     }
     /**
       Display current state of track scrolling
       */
     onTrackScroll() {
-        var _a, _b;
         const iFrom = this.getTrackScrollPos();
         const iTo = iFrom + this._maxVisibleTrackNum();
         if (this.logController)
             scrollTracksTo(this.logController, iFrom, iTo);
-        (_b = (_a = this.props).onTrackScroll) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.props.onTrackScroll?.();
     }
     onTrackSelection() {
-        var _a, _b;
-        (_b = (_a = this.props).onTrackSelection) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.props.onTrackSelection?.();
     }
     setInfo(x = Number.NaN) {
         if (!this.props.onInfo)
@@ -1008,28 +1045,23 @@ class WellLogView extends Component {
         this.props.onInfo(x, this.logController, iFrom, iTo);
     }
     onContentRescale() {
-        var _a, _b;
         this.showSelection();
-        (_b = (_a = this.props).onContentRescale) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.props.onContentRescale?.();
     }
     onContentSelection() {
-        var _a, _b;
         this.showSelection();
-        (_b = (_a = this.props).onContentSelection) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.props.onContentSelection?.();
     }
     onTrackMouseEvent(ev) {
-        var _a, _b;
-        (_b = (_a = this.props).onTrackMouseEvent) === null || _b === void 0 ? void 0 : _b.call(_a, this, ev);
+        this.props.onTrackMouseEvent?.(this, ev);
     }
     onTrackMouseLeaveEvent() {
-        var _a, _b;
-        (_b = (_a = this.props).onTrackMouseLeaveEvent) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.props.onTrackMouseLeaveEvent?.();
     }
     onTemplateChanged(noEmit) {
-        var _a, _b;
         this.updateInfo();
         if (!noEmit)
-            (_b = (_a = this.props).onTemplateChanged) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.props.onTemplateChanged?.();
     }
     // content
     zoomContentTo(domain) {
@@ -1052,12 +1084,11 @@ class WellLogView extends Component {
         return zoomContent(this.logController, zoom);
     }
     showSelection() {
-        var _a, _b;
         if (!this.logController)
             return;
-        if ((_a = this.props.options) === null || _a === void 0 ? void 0 : _a.hideCurrentPosition)
+        if (this.props.options?.hideCurrentPosition)
             this.selCurrent = undefined;
-        if ((_b = this.props.options) === null || _b === void 0 ? void 0 : _b.hideSelectionInterval)
+        if (this.props.options?.hideSelectionInterval)
             this.selPinned = undefined;
         const horizontal = this.props.horizontal;
         const elements = this.logController.overlay.elements;
@@ -1089,7 +1120,7 @@ class WellLogView extends Component {
                     const pinelm1 = elements[elmName1];
                     if (pinelm1) {
                         const wp2 = wps[i + 1];
-                        const vPrimary2 = wp2 === null || wp2 === void 0 ? void 0 : wp2.vPrimary;
+                        const vPrimary2 = wp2?.vPrimary;
                         fillWellPicks(pinelm1, vPrimary, vPrimary2, horizontal, this.logController);
                     }
                 }
@@ -1159,9 +1190,8 @@ class WellLogView extends Component {
         return newPos;
     }
     _maxVisibleTrackNum() {
-        var _a, _b;
-        if ((_a = this.props.options) === null || _a === void 0 ? void 0 : _a.maxVisibleTrackNum)
-            return (_b = this.props.options) === null || _b === void 0 ? void 0 : _b.maxVisibleTrackNum;
+        if (this.props.options?.maxVisibleTrackNum)
+            return this.props.options?.maxVisibleTrackNum;
         return this.props.horizontal ? 3 : 5 /*some default value*/;
     }
     _forceUpdateTitleTooltips() {
@@ -1175,9 +1205,8 @@ class WellLogView extends Component {
         }
     }
     _updateWellLogTitle() {
-        var _a, _b;
         if (this.title && this.props.viewTitle === true) {
-            this.title.textContent = (_b = (_a = this.wellLogSets[0]) === null || _a === void 0 ? void 0 : _a.header.well) !== null && _b !== void 0 ? _b : null;
+            this.title.textContent = this.wellLogSets[0]?.header.well ?? null;
         }
     }
     scrollTrackBy(delta) {
@@ -1224,8 +1253,7 @@ class WellLogView extends Component {
      * @deprecated Use getWellLogSets instead
      */
     getWellLog() {
-        var _a;
-        return (_a = this.props.wellLogSets) !== null && _a !== void 0 ? _a : this.props.welllog;
+        return this.props.wellLogSets ?? this.props.welllog;
     }
     getWellLogSets() {
         if (this.props.wellLogSets)
@@ -1240,7 +1268,11 @@ class WellLogView extends Component {
         return this.template;
     }
     getStyledTemplate() {
-        return Object.assign(Object.assign({}, this.template), { tracks: getStyledTemplateTracks(this.template), styles: [] });
+        return {
+            ...this.template,
+            tracks: getStyledTemplateTracks(this.template),
+            styles: [],
+        };
     }
     setTemplate(template, noEmit) {
         const tNew = JSON.stringify(template);
@@ -1253,7 +1285,6 @@ class WellLogView extends Component {
         }
     }
     _recomputeTemplateFromController() {
-        var _a;
         const template = this.template;
         const tracks = [];
         if (this.logController) {
@@ -1270,7 +1301,7 @@ class WellLogView extends Component {
             name: template.name,
             scale: {
                 primary: this.props.primaryAxis || "" /* no scale track */,
-                allowSecondary: ((_a = template.scale) === null || _a === void 0 ? void 0 : _a.allowSecondary) && axes.length > 1,
+                allowSecondary: template.scale?.allowSecondary && axes.length > 1,
             },
             tracks: tracks,
             styles: template.styles,
@@ -1279,7 +1310,6 @@ class WellLogView extends Component {
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
     // Track management -- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
     _addTrack(clickedTrack, templateTrack) {
-        var _a;
         if (!this.logController)
             return console.warn("Log controller not initialized");
         // User's track might be empty, but we should show it regardless
@@ -1287,7 +1317,7 @@ class WellLogView extends Component {
         const iClickedTrack = getTrackIndex(this.logController, clickedTrack);
         // Always add the new track to the right of the one that was clicked
         const iNewTrack = iClickedTrack + 1;
-        const newTrack = createNewViewTrack(this.logController, templateTrack, iNewTrack, this.getAxesInfo(), (_a = this.getWellLogSets()) !== null && _a !== void 0 ? _a : []);
+        const newTrack = createNewViewTrack(this.logController, templateTrack, iNewTrack, this.getAxesInfo(), this.getWellLogSets() ?? []);
         if (!newTrack)
             return;
         this._recomputeTemplateFromController();
@@ -1297,13 +1327,12 @@ class WellLogView extends Component {
         this.onTrackScroll();
     }
     _editTrack(track, newTemplateTrack) {
-        var _a, _b, _c;
         if (!this.logController)
             return console.warn("Log controller not initialized");
-        const oldTitle = (_a = track.options.label) !== null && _a !== void 0 ? _a : "";
-        const newTitle = (_b = newTemplateTrack.title) !== null && _b !== void 0 ? _b : "";
+        const oldTitle = track.options.label ?? "";
+        const newTitle = newTemplateTrack.title ?? "";
         const titleChanged = !oldTitle.localeCompare(newTitle);
-        editViewTrack(this.logController, track, newTemplateTrack, this.getAxesInfo(), (_c = this.getWellLogSets()) !== null && _c !== void 0 ? _c : [], this.props.colorMapFunctions);
+        editViewTrack(this.logController, track, newTemplateTrack, this.getAxesInfo(), this.getWellLogSets() ?? [], this.props.colorMapFunctions);
         if (titleChanged)
             // workaround to refresh tooltips in videx wellog component
             this._forceUpdateTitleTooltips();
@@ -1335,15 +1364,13 @@ class WellLogView extends Component {
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
     // Track plot management - --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
     addTrackPlot(track, templatePlot) {
-        var _a;
         if (!this.logController)
             return console.warn("Log controller not initialized");
-        addPlotToTrack(track, templatePlot, (_a = this.getWellLogSets()) !== null && _a !== void 0 ? _a : [], this.getAxesInfo(), this.props.colorMapFunctions);
+        addPlotToTrack(track, templatePlot, this.getWellLogSets() ?? [], this.getAxesInfo(), this.props.colorMapFunctions);
         adjustControllerToModifiedTrack(this.logController, track);
         this._recomputeTemplateFromController();
     }
     _editTrackPlot(track, plot, templatePlot) {
-        var _a;
         if (!this.logController)
             return console.warn("Log controller not initialized");
         /* We have special option for track scale!
@@ -1351,7 +1378,7 @@ class WellLogView extends Component {
         if (templatePlot.scale === templateTrack.scale)
             templatePlot.scale = undefined;
         */
-        editTrackPlot(track, plot, templatePlot, (_a = this.getWellLogSets()) !== null && _a !== void 0 ? _a : [], this.getAxesInfo(), this.props.colorMapFunctions);
+        editTrackPlot(track, plot, templatePlot, this.getWellLogSets() ?? [], this.getAxesInfo(), this.props.colorMapFunctions);
         adjustControllerToModifiedTrack(this.logController, track);
         this._recomputeTemplateFromController();
     }
@@ -1389,11 +1416,10 @@ class WellLogView extends Component {
     }
     createViewTitle(viewTitle //| undefined
     ) {
-        var _a;
         if (typeof viewTitle === "object" /*react element*/)
             return viewTitle;
         if (viewTitle === true)
-            return (_a = this.wellLogSets[0]) === null || _a === void 0 ? void 0 : _a.header.well;
+            return this.wellLogSets[0]?.header.well;
         return viewTitle; // string
     }
     render() {
@@ -1504,6 +1530,10 @@ export function _propTypesWellLogView() {
          * Initial visible interval of the log data
          */
         domain: PropTypes.arrayOf(PropTypes.number),
+        /**
+         * Initial visible interval of the log data
+         */
+        visibleRange: PropTypes.arrayOf(PropTypes.number),
         /**
          * Initial selected interval of the log data
          */