@webviz/subsurface-viewer 1.10.3 → 1.10.5

package/dist/layers/wells/wellsLayer.js

@@ -12,12 +12,17 @@ import { WellLabelLayer } from "./layers/wellLabelLayer";
 import { abscissaTransform } from "./utils/abscissaTransform";
 import { GetBoundingBox, checkWells, coarsenWells, invertPath, splineRefine, } from "./utils/spline";
 import { getColor, getTrajectory } from "./utils/trajectory";
-function onDataLoad(data, context) {
-    const bbox = GetBoundingBox(data);
-    if (typeof context.layer.props.reportBoundingBox !== "undefined") {
-        context.layer.props.reportBoundingBox({ layerBoundingBox: bbox });
-    }
-}
+export var SubLayerId;
+(function (SubLayerId) {
+    SubLayerId["COLORS"] = "colors";
+    SubLayerId["SIMPLE"] = "simple";
+    SubLayerId["OUTLINE"] = "outline";
+    SubLayerId["HIGHLIGHT"] = "highlight";
+    SubLayerId["HIGHLIGHT_2"] = "highlight2";
+    SubLayerId["LOG_CURVE"] = "log_curve";
+    SubLayerId["SELECTION"] = "selection";
+    SubLayerId["LABELS"] = "labels";
+})(SubLayerId || (SubLayerId = {}));
 const defaultProps = {
     "@@type": "WellsLayer",
     name: "Wells",
@@ -42,40 +47,11 @@ const defaultProps = {
     wellNameColor: [0, 0, 0, 255],
     wellNameSize: 10,
 };
-function multiply(pair, factor) {
-    return [pair[0] * factor, pair[1] * factor];
-}
 const LINE = "line";
 const POINT = "point";
 const DEFAULT_POINT_SIZE = 8;
 const DEFAULT_LINE_WIDTH = 5;
 const DEFAULT_DASH = [5, 5];
-function getDashFactor(accessor, width_accessor, offset = 0) {
-    return (object, objectInfo) => {
-        let width = DEFAULT_LINE_WIDTH;
-        if (typeof width_accessor == "function") {
-            width = width_accessor(object);
-        }
-        else if (width_accessor) {
-            width = width_accessor;
-        }
-        const factor = width / (width + offset);
-        let dash = [0, 0];
-        if (typeof accessor == "function") {
-            dash = accessor(object, objectInfo);
-        }
-        else if (accessor)
-            dash = accessor;
-        else if (accessor)
-            dash = DEFAULT_DASH;
-        if (dash.length == 2) {
-            return multiply(dash, factor);
-        }
-        else {
-            return multiply(DEFAULT_DASH, factor);
-        }
-    };
-}
 export function getSize(type, accessor, offset = 0) {
     if (typeof accessor == "function") {
         return (object) => {
@@ -93,24 +69,28 @@ export function getSize(type, accessor, offset = 0) {
     return 0;
 }
 export default class WellsLayer extends CompositeLayer {
-    initializeState() {
-        let data = this.props.data;
+    recomputeDataState() {
+        const data = this.props.data;
         const refine = this.props.refine;
-        if (!data || isEmpty(data)) {
+        const doRefine = typeof refine === "number" ? refine > 1 : refine;
+        const stepCount = typeof refine === "number" ? refine : 5;
+        if (!dataIsReady(data)) {
             return;
         }
+        let transformedData = data;
         if (this.props.ZIncreasingDownwards) {
-            data = invertPath(data);
+            transformedData = invertPath(transformedData);
         }
         if (this.props.section) {
-            data = abscissaTransform(data);
+            transformedData = abscissaTransform(transformedData);
         }
-        checkWells(data);
+        // Mutate data to remove duplicates
+        checkWells(transformedData);
         // Conditionally apply spline interpolation to refine the well path.
-        const doRefine = typeof refine === "number" ? refine > 1 : refine;
-        const stepCount = typeof refine === "number" ? refine : 5;
-        data = doRefine ? splineRefine(data, stepCount) : data;
-        this.setState(Object.assign(Object.assign({}, this.state), { data }));
+        if (doRefine) {
+            transformedData = splineRefine(transformedData, stepCount);
+        }
+        this.setState({ data: transformedData });
     }
     shouldUpdateState({ changeFlags }) {
         return (changeFlags.viewportChanged ||
@@ -122,10 +102,9 @@ export default class WellsLayer extends CompositeLayer {
             !isEqual(props.ZIncreasingDownwards, oldProps.ZIncreasingDownwards) ||
             !isEqual(props.refine, oldProps.refine);
         if (needs_reload) {
-            this.initializeState();
+            this.recomputeDataState();
         }
     }
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
     onClick(info) {
         var _a;
         // Make selection only when drawing is disabled
@@ -134,7 +113,7 @@ export default class WellsLayer extends CompositeLayer {
         }
         else {
             this.context.userData.setEditedData({
-                selectedWell: (_a = info.object.properties) === null || _a === void 0 ? void 0 : _a["name"],
+                selectedWell: (_a = info.object) === null || _a === void 0 ? void 0 : _a.properties.name,
             });
             return false; // do not return true to allow DeckGL props.onClick to be called
         }
@@ -154,6 +133,9 @@ export default class WellsLayer extends CompositeLayer {
             });
         }
     }
+    getWellDataState() {
+        return this.state.data;
+    }
     getLegendData(value) {
         return getLegendData(value, "", this.props.logName, this.props.logColor);
     }
@@ -213,7 +195,7 @@ export default class WellsLayer extends CompositeLayer {
             [GL.POLYGON_OFFSET_FILL]: true,
         };
         const fastDrawing = this.props.simplifiedRendering;
-        const wellLabelProps = this.getSubLayerProps(Object.assign(Object.assign({}, this.props.wellLabel), { data, 
+        const wellLabelProps = this.getSubLayerProps(Object.assign(Object.assign({}, this.props.wellLabel), { id: SubLayerId.LABELS, data, 
             // Z is always increasing upwards at this stage
             zIncreasingDownwards: false, getPositionAlongPath: this.getWellLabelPosition(), getColor: (_b = (_a = this.props.wellLabel) === null || _a === void 0 ? void 0 : _a.getColor) !== null && _b !== void 0 ? _b : this.props.wellNameColor, getAnchor: "start", getSize: (_d = (_c = this.props.wellLabel) === null || _c === void 0 ? void 0 : _c.getSize) !== null && _d !== void 0 ? _d : this.props.wellNameSize, parameters, visible: !fastDrawing, background: ((_e = this.props.wellLabel) === null || _e === void 0 ? void 0 : _e.background) ||
                 this.props.hideOverlappingWellNames }));
@@ -221,12 +203,12 @@ export default class WellsLayer extends CompositeLayer {
     }
     renderLayers() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        if (!this.props.data.features) {
-            return [];
-        }
-        const data = this.state["data"];
+        const data = this.getWellDataState();
         const positionFormat = "XYZ";
         const isDashed = !!((_a = this.props.lineStyle) === null || _a === void 0 ? void 0 : _a.dash);
+        if (!data || !(data === null || data === void 0 ? void 0 : data.features.length)) {
+            return [];
+        }
         const extensions = [
             new PathStyleExtension({
                 dash: isDashed,
@@ -255,11 +237,11 @@ export default class WellsLayer extends CompositeLayer {
             parameters,
             visible: fastDrawing,
         };
-        const colorsLayerProps = this.getSubLayerProps(Object.assign(Object.assign({}, defaultLayerProps), { id: "colors", pickable: true, extensions, getDashArray: getDashFactor((_d = this.props.lineStyle) === null || _d === void 0 ? void 0 : _d.dash, getSize(LINE, (_e = this.props.lineStyle) === null || _e === void 0 ? void 0 : _e.width), -1), visible: !fastDrawing, getLineColor: getColor((_f = this.props.lineStyle) === null || _f === void 0 ? void 0 : _f.color), getFillColor: getColor((_g = this.props.wellHeadStyle) === null || _g === void 0 ? void 0 : _g.color) }));
-        const fastLayerProps = this.getSubLayerProps(Object.assign(Object.assign({}, defaultLayerProps), { id: "simple", positionFormat, getLineColor: getColor((_h = this.props.lineStyle) === null || _h === void 0 ? void 0 : _h.color), getFillColor: getColor((_j = this.props.wellHeadStyle) === null || _j === void 0 ? void 0 : _j.color) }));
-        const outlineLayerProps = this.getSubLayerProps(Object.assign(Object.assign({}, defaultLayerProps), { id: "outline", getLineWidth: getSize(LINE, (_k = this.props.lineStyle) === null || _k === void 0 ? void 0 : _k.width), getPointRadius: getSize(POINT, (_l = this.props.wellHeadStyle) === null || _l === void 0 ? void 0 : _l.size), extensions, getDashArray: getDashFactor((_m = this.props.lineStyle) === null || _m === void 0 ? void 0 : _m.dash), visible: this.props.outline && !fastDrawing, parameters: Object.assign(Object.assign({}, parameters), { [GL.POLYGON_OFFSET_FACTOR]: 1, [GL.POLYGON_OFFSET_UNITS]: 1 }) }));
-        const highlightLayerProps = this.getSubLayerProps(Object.assign(Object.assign({}, defaultLayerProps), { id: "highlight", data: getWellObjectByName(data.features, this.props.selectedWell), getLineWidth: getSize(LINE, (_o = this.props.lineStyle) === null || _o === void 0 ? void 0 : _o.width, 2), getPointRadius: getSize(POINT, (_p = this.props.wellHeadStyle) === null || _p === void 0 ? void 0 : _p.size, 2), getLineColor: getColor((_q = this.props.lineStyle) === null || _q === void 0 ? void 0 : _q.color), getFillColor: getColor((_r = this.props.wellHeadStyle) === null || _r === void 0 ? void 0 : _r.color), visible: this.props.logCurves && !fastDrawing }));
-        const highlightMultiWellsLayerProps = this.getSubLayerProps(Object.assign(Object.assign({}, defaultLayerProps), { id: "highlight2", data: getWellObjectsByName(data.features, this.state["selectedMultiWells"]), getPointRadius: getSize(POINT, (_s = this.props.wellHeadStyle) === null || _s === void 0 ? void 0 : _s.size, 2), getFillColor: [255, 140, 0], getLineColor: [255, 140, 0], visible: this.props.logCurves && !fastDrawing }));
+        const colorsLayerProps = this.getSubLayerProps(Object.assign(Object.assign({}, defaultLayerProps), { id: SubLayerId.COLORS, pickable: true, extensions, getDashArray: getDashFactor((_d = this.props.lineStyle) === null || _d === void 0 ? void 0 : _d.dash, getSize(LINE, (_e = this.props.lineStyle) === null || _e === void 0 ? void 0 : _e.width), -1), visible: !fastDrawing, getLineColor: getColor((_f = this.props.lineStyle) === null || _f === void 0 ? void 0 : _f.color), getFillColor: getColor((_g = this.props.wellHeadStyle) === null || _g === void 0 ? void 0 : _g.color) }));
+        const fastLayerProps = this.getSubLayerProps(Object.assign(Object.assign({}, defaultLayerProps), { id: SubLayerId.SIMPLE, positionFormat, getLineColor: getColor((_h = this.props.lineStyle) === null || _h === void 0 ? void 0 : _h.color), getFillColor: getColor((_j = this.props.wellHeadStyle) === null || _j === void 0 ? void 0 : _j.color) }));
+        const outlineLayerProps = this.getSubLayerProps(Object.assign(Object.assign({}, defaultLayerProps), { id: SubLayerId.OUTLINE, getLineWidth: getSize(LINE, (_k = this.props.lineStyle) === null || _k === void 0 ? void 0 : _k.width), getPointRadius: getSize(POINT, (_l = this.props.wellHeadStyle) === null || _l === void 0 ? void 0 : _l.size), extensions, getDashArray: getDashFactor((_m = this.props.lineStyle) === null || _m === void 0 ? void 0 : _m.dash), visible: this.props.outline && !fastDrawing, parameters: Object.assign(Object.assign({}, parameters), { [GL.POLYGON_OFFSET_FACTOR]: 1, [GL.POLYGON_OFFSET_UNITS]: 1 }) }));
+        const highlightLayerProps = this.getSubLayerProps(Object.assign(Object.assign({}, defaultLayerProps), { id: SubLayerId.HIGHLIGHT, data: getWellObjectByName(data.features, this.props.selectedWell), getLineWidth: getSize(LINE, (_o = this.props.lineStyle) === null || _o === void 0 ? void 0 : _o.width, 2), getPointRadius: getSize(POINT, (_p = this.props.wellHeadStyle) === null || _p === void 0 ? void 0 : _p.size, 2), getLineColor: getColor((_q = this.props.lineStyle) === null || _q === void 0 ? void 0 : _q.color), getFillColor: getColor((_r = this.props.wellHeadStyle) === null || _r === void 0 ? void 0 : _r.color), visible: this.props.logCurves && !fastDrawing }));
+        const highlightMultiWellsLayerProps = this.getSubLayerProps(Object.assign(Object.assign({}, defaultLayerProps), { id: SubLayerId.HIGHLIGHT_2, data: getWellObjectsByName(data.features, this.state.selectedMultiWells), getPointRadius: getSize(POINT, (_s = this.props.wellHeadStyle) === null || _s === void 0 ? void 0 : _s.size, 2), getFillColor: [255, 140, 0], getLineColor: [255, 140, 0], visible: this.props.logCurves && !fastDrawing }));
         const fastLayer = new GeoJsonLayer(fastLayerProps);
         const outlineLayer = new GeoJsonLayer(outlineLayerProps);
         const colorsLayer = new GeoJsonLayer(colorsLayerProps);
@@ -268,7 +250,7 @@ export default class WellsLayer extends CompositeLayer {
         // Highlight the multi selected wells.
         const highlightMultiWellsLayer = new GeoJsonLayer(highlightMultiWellsLayerProps);
         const logLayer = new PathLayer(this.getSubLayerProps({
-            id: "log_curve",
+            id: SubLayerId.LOG_CURVE,
             data: this.props.logData,
             positionFormat,
             pickable: true,
@@ -306,7 +288,7 @@ export default class WellsLayer extends CompositeLayer {
             visible: this.props.logCurves && !fastDrawing,
         }));
         const selectionLayer = new PathLayer(this.getSubLayerProps({
-            id: "selection",
+            id: SubLayerId.SELECTION,
             data: this.props.logData,
             positionFormat,
             pickable: false,
@@ -315,16 +297,16 @@ export default class WellsLayer extends CompositeLayer {
             miterLimit: 100,
             getPath: (d) => {
                 var _a;
-                return getLogPath1(data.features, d, this.state["well"], this.state["selection"], this.props.logrunName, (_a = this.props.lineStyle) === null || _a === void 0 ? void 0 : _a.color);
+                return getLogPath1(data.features, d, this.state.well, this.state.selection, this.props.logrunName, (_a = this.props.lineStyle) === null || _a === void 0 ? void 0 : _a.color);
             },
-            getColor: (d) => getLogColor1(data.features, d, this.state["well"], this.state["selection"], this.props.logrunName),
+            getColor: (d) => getLogColor1(data.features, d, this.state.well, this.state.selection, this.props.logrunName),
             getWidth: (d) => this.props.logRadius * 1.5 ||
                 getLogWidth(d, this.props.logrunName, this.props.logName),
             updateTriggers: {
                 getColor: [
                     this.props.logrunName,
-                    this.state["well"],
-                    this.state["selection"],
+                    this.state.well,
+                    this.state.selection,
                 ],
                 getWidth: [
                     this.props.logrunName,
@@ -334,8 +316,8 @@ export default class WellsLayer extends CompositeLayer {
                 getPath: [
                     positionFormat,
                     this.props.logrunName,
-                    this.state["well"],
-                    this.state["selection"],
+                    this.state.well,
+                    this.state.selection,
                 ],
             },
             onDataLoad: (value) => {
@@ -360,23 +342,32 @@ export default class WellsLayer extends CompositeLayer {
         return layers;
     }
     getPickingInfo({ info }) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         if (!info.object)
             return Object.assign(Object.assign({}, info), { properties: [], logName: "" });
-        const coordinate = (info.coordinate || [0, 0, 0]);
+        const features = (_b = (_a = this.getWellDataState()) === null || _a === void 0 ? void 0 : _a.features) !== null && _b !== void 0 ? _b : [];
+        const coordinate = info.coordinate || [0, 0, 0];
         const zScale = this.props.modelMatrix ? this.props.modelMatrix[10] : 1;
         if (typeof coordinate[2] !== "undefined") {
             coordinate[2] /= Math.max(0.001, zScale);
         }
-        let md_property = getMdProperty(coordinate, info.object, (_a = this.props.lineStyle) === null || _a === void 0 ? void 0 : _a.color, info.featureType);
-        if (!md_property) {
-            md_property = getLogProperty(coordinate, this.props.data.features, info.object, this.props.logrunName, "MD");
+        let md_property = null;
+        let tvd_property = null;
+        let log_property = null;
+        // ! This needs to be updated if we ever change the sub-layer id!
+        if (((_c = info.sourceLayer) === null || _c === void 0 ? void 0 : _c.id) === `${this.props.id}-${SubLayerId.LOG_CURVE}`) {
+            // The user is hovering a well log entry
+            const logPick = info;
+            md_property = getLogProperty(coordinate, features, logPick.object, this.props.logrunName, "MD");
+            tvd_property = getLogProperty(coordinate, features, logPick.object, this.props.logrunName, "TVD");
+            log_property = getLogProperty(coordinate, features, info.object, this.props.logrunName, this.props.logName);
         }
-        let tvd_property = getTvdProperty(coordinate, info.object, (_b = this.props.lineStyle) === null || _b === void 0 ? void 0 : _b.color, info.featureType);
-        if (!tvd_property) {
-            tvd_property = getLogProperty(coordinate, this.props.data.features, info.object, this.props.logrunName, "TVD");
+        else {
+            // User is hovering a wellbore path
+            const wellpickInfo = info;
+            md_property = getMdProperty(coordinate, wellpickInfo.object, (_d = this.props.lineStyle) === null || _d === void 0 ? void 0 : _d.color, info.featureType);
+            tvd_property = getTvdProperty(coordinate, info.object, (_e = this.props.lineStyle) === null || _e === void 0 ? void 0 : _e.color, info.featureType);
         }
-        const log_property = getLogProperty(coordinate, this.props.data.features, info.object, this.props.logrunName, this.props.logName);
         // Patch for inverting tvd readout to fix issue #830,
         // should make proper fix when handling z increase direction - issue #842
         const inverted_tvd_property = tvd_property && Object.assign(Object.assign({}, tvd_property), { value: (tvd_property === null || tvd_property === void 0 ? void 0 : tvd_property.value) * -1 });
@@ -393,6 +384,45 @@ export default class WellsLayer extends CompositeLayer {
 WellsLayer.layerName = "WellsLayer";
 WellsLayer.defaultProps = Object.assign(Object.assign({}, defaultProps), { onDataLoad: (data, context) => onDataLoad(data, context) });
 //================= Local help functions. ==================
+function onDataLoad(data, context) {
+    const bbox = GetBoundingBox(data);
+    if (typeof context.layer.props.reportBoundingBox !== "undefined") {
+        context.layer.props.reportBoundingBox({ layerBoundingBox: bbox });
+    }
+}
+function multiply(pair, factor) {
+    return [pair[0] * factor, pair[1] * factor];
+}
+function getDashFactor(accessor, width_accessor, offset = 0) {
+    return (object, objectInfo) => {
+        let width = DEFAULT_LINE_WIDTH;
+        if (typeof width_accessor == "function") {
+            width = width_accessor(object);
+        }
+        else if (width_accessor) {
+            width = width_accessor;
+        }
+        const factor = width / (width + offset);
+        let dash = [0, 0];
+        if (typeof accessor == "function") {
+            dash = accessor(object, objectInfo);
+        }
+        else if (accessor)
+            dash = accessor;
+        else if (accessor)
+            dash = DEFAULT_DASH;
+        if (dash.length == 2) {
+            return multiply(dash, factor);
+        }
+        else {
+            return multiply(DEFAULT_DASH, factor);
+        }
+    };
+}
+function dataIsReady(layerData) {
+    // Deck.gl always shows prop.data as `[]` while external data is being loaded
+    return !!layerData && !isEmpty(layerData);
+}
 function getColumn(data, col) {
     const column = [];
     for (let i = 0; i < data.length; i++) {
@@ -426,33 +456,30 @@ function isSelectedLogRun(d, logrun_name) {
     return d.header.name.toLowerCase() === logrun_name.toLowerCase();
 }
 function getWellObjectByName(wells_data, name) {
-    return wells_data === null || wells_data === void 0 ? void 0 : wells_data.find((item) => { var _a, _b; return ((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a["name"]) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === (name === null || name === void 0 ? void 0 : name.toLowerCase()); });
+    return wells_data === null || wells_data === void 0 ? void 0 : wells_data.find((item) => { var _a, _b; return ((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === (name === null || name === void 0 ? void 0 : name.toLowerCase()); });
 }
 function getWellObjectsByName(wells_data, name) {
     const res = [];
     for (let i = 0; i < (name === null || name === void 0 ? void 0 : name.length); i++) {
         wells_data === null || wells_data === void 0 ? void 0 : wells_data.find((item) => {
             var _a, _b, _c;
-            if (((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a["name"]) === null || _b === void 0 ? void 0 : _b.toLowerCase()) ===
-                ((_c = name[i]) === null || _c === void 0 ? void 0 : _c.toLowerCase())) {
+            if (((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === ((_c = name[i]) === null || _c === void 0 ? void 0 : _c.toLowerCase()))
                 res.push(item);
-            }
         });
     }
     return res;
 }
 function getPointGeometry(well_object) {
-    var _a;
-    return (_a = well_object.geometry) === null || _a === void 0 ? void 0 : _a.geometries.find((item) => item.type == "Point");
+    const geometries = well_object.geometry.geometries;
+    return geometries.find((item) => item.type === "Point");
 }
 // Return well head position from Point Geometry
 function getWellHeadPosition(well_object) {
-    var _a;
-    return (_a = getPointGeometry(well_object)) === null || _a === void 0 ? void 0 : _a.coordinates;
+    var _a, _b;
+    return (_b = (_a = getPointGeometry(well_object)) === null || _a === void 0 ? void 0 : _a.coordinates) !== null && _b !== void 0 ? _b : [-1, -1, -1];
 }
 function getWellMds(well_object) {
-    var _a;
-    return (_a = well_object.properties) === null || _a === void 0 ? void 0 : _a["md"][0];
+    return well_object.properties.md[0];
 }
 function getNeighboringMdIndices(mds, md) {
     const idx = mds.findIndex((x) => x >= md);
@@ -495,9 +522,7 @@ function getLogIndexByNames(d, names) {
     }
     return -1;
 }
-function getLogColor(d, logrun_name, log_name, logColor, colorTables, 
-// eslint-disable-next-line
-colorMappingFunction, isLog) {
+function getLogColor(d, logrun_name, log_name, logColor, colorTables, colorMappingFunction, isLog) {
     var _a;
     const log_data = getLogValues(d, logrun_name, log_name);
     const log_info = getLogInfo(d, logrun_name, log_name);
@@ -509,17 +534,12 @@ colorMappingFunction, isLog) {
         const max = Math.max(...log_data);
         const max_delta = max - min;
         log_data.forEach((value) => {
+            const adjustedVal = (value - min) / max_delta;
             const rgb = colorMappingFunction
-                ? colorMappingFunction((value - min) / max_delta)
-                : rgbValues((value - min) / max_delta, logColor, colorTables);
-            rgbValues(value - min / max_delta, logColor, colorTables, isLog);
+                ? colorMappingFunction(adjustedVal)
+                : rgbValues(adjustedVal, logColor, colorTables, isLog);
             if (rgb) {
-                if (Array.isArray(rgb)) {
-                    log_color.push([rgb[0], rgb[1], rgb[2]]);
-                }
-                else {
-                    log_color.push([rgb === null || rgb === void 0 ? void 0 : rgb.r, rgb === null || rgb === void 0 ? void 0 : rgb.g, rgb === null || rgb === void 0 ? void 0 : rgb.b]);
-                }
+                log_color.push([rgb[0], rgb[1], rgb[2]]);
             }
             else {
                 log_color.push([0, 0, 0, 0]); // push transparent for null/undefined log values
@@ -530,53 +550,44 @@ colorMappingFunction, isLog) {
         // well log data set for ex : H1: Array(2)0: (4) [255, 26, 202, 255] 1: 13
         const log_attributes = (_a = getDiscreteLogMetadata(d, log_name)) === null || _a === void 0 ? void 0 : _a.objects;
         const logLength = Object.keys(log_attributes).length;
-        // eslint-disable-next-line
         const attributesObject = {};
-        const categorial = true;
+        const categorical = true;
         Object.keys(log_attributes).forEach((key) => {
             // get the point from log_attributes
             const point = log_attributes[key][1];
-            const categorialMin = 0;
-            const categorialMax = logLength - 1;
+            const categoricalMin = 0;
+            const categoricalMax = logLength - 1;
             let rgb;
             if (colorMappingFunction) {
-                rgb = colorMappingFunction(point, categorial, categorialMin, categorialMax);
+                rgb = colorMappingFunction(point, categorical, categoricalMin, categoricalMax);
             }
             else {
-                // if colormap function is not defined
+                // if color-map function is not defined
                 const arrayOfColors = getColors(logColor, colorTables, point);
                 if (!arrayOfColors.length)
-                    console.error("Empty or missed '" + logColor + "' color table");
-                rgb = arrayOfColors;
+                    console.error(`Empty or missed '${logColor}' color table`);
+                else {
+                    rgb = arrayOfColors;
+                }
             }
             if (rgb) {
-                if (Array.isArray(rgb)) {
-                    if (rgb.length === 3) {
-                        attributesObject[key] = [
-                            [rgb[0], rgb[1], rgb[2]],
-                            point,
-                        ];
-                    }
-                    else {
-                        attributesObject[key] = [
-                            [rgb[1], rgb[2], rgb[3]],
-                            point,
-                        ];
-                    }
+                if (rgb.length === 3) {
+                    attributesObject[key] = [[rgb[0], rgb[1], rgb[2]], point];
                 }
                 else {
-                    attributesObject[key] = [[rgb.r, rgb.g, rgb.b], point];
+                    // ? What is the point of this? Why do we offset the index in this case, isn't the fourth value the opacity?
+                    // (@anders2303)
+                    attributesObject[key] = [[rgb[1], rgb[2], rgb[3]], point];
                 }
             }
         });
         log_data.forEach((log_value) => {
             var _a;
             const dl_attrs = (_a = Object.entries(attributesObject).find(([, value]) => value[1] == log_value)) === null || _a === void 0 ? void 0 : _a[1];
-            // TODO: Fix this the next time the file is edited.
-            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-            dl_attrs
-                ? log_color.push(dl_attrs[0])
-                : log_color.push([0, 0, 0, 0]); // use transparent for undefined/null log values
+            if (dl_attrs)
+                log_color.push(dl_attrs[0]);
+            else
+                log_color.push([0, 0, 0, 0]); // use transparent for undefined/null log values
         });
     }
     return log_color;
@@ -735,13 +746,13 @@ function getMd(coord, feature, accessor) {
     var _a, _b;
     if (!((_b = (_a = feature.properties) === null || _a === void 0 ? void 0 : _a["md"]) === null || _b === void 0 ? void 0 : _b[0]) || !feature.geometry)
         return null;
-    const measured_depths = feature.properties["md"][0];
+    const measured_depths = feature.properties.md[0];
     const trajectory3D = getTrajectory(feature, accessor);
     if (trajectory3D == undefined)
         return null;
     let trajectory;
     // In 2D view coord is of type Position2D and in 3D view it's Position3D,
-    // so use apropriate trajectory for interpolation
+    // so use appropriate trajectory for interpolation
     if (coord.length == 2) {
         const trajectory2D = trajectory3D.map((v) => {
             return v.slice(0, 2);
@@ -840,7 +851,7 @@ function getLogProperty(coord, wells_data, log_data, logrun_name, log_name) {
     else
         return null;
 }
-// Return data required to build welllayer legend
+// Return data required to build well layer legend
 function getLegendData(logs, wellName, logName, logColor) {
     if (!logs)
         return null;