@webviz/subsurface-viewer 1.17.8 → 1.18.2

package/dist/components/Map.js

@@ -34,7 +34,6 @@ const DEFAULT_VIEWS = {
     viewports: [{ id: "main-view", viewType: OrthographicView }],
 };
 function parseLights(lights) {
-    var _a, _b, _c, _d;
     if (!lights) {
         return undefined;
     }
@@ -43,22 +42,26 @@ function parseLights(lights) {
     if (lights.ambientLight) {
         lightsObj["AmbientLight"] = new AmbientLight({
             intensity: lights.ambientLight.intensity,
-            color: (_a = lights.ambientLight.color) !== null && _a !== void 0 ? _a : [255, 255, 255],
+            color: lights.ambientLight.color ?? [255, 255, 255],
         });
     }
     if (lights.headLight) {
         lightsObj["HeadLight"] = new CameraLight({
             intensity: lights.headLight.intensity,
-            color: (_b = lights.headLight.color) !== null && _b !== void 0 ? _b : [255, 255, 255],
+            color: lights.headLight.color ?? [255, 255, 255],
         });
     }
-    (_c = lights.pointLights) === null || _c === void 0 ? void 0 : _c.forEach((light, index) => {
-        var _a;
-        lightsObj[`PointLight_${index}`] = new PointLight(Object.assign(Object.assign({}, light), { color: (_a = light.color) !== null && _a !== void 0 ? _a : [255, 255, 255] }));
+    lights.pointLights?.forEach((light, index) => {
+        lightsObj[`PointLight_${index}`] = new PointLight({
+            ...light,
+            color: light.color ?? [255, 255, 255],
+        });
     });
-    (_d = lights.directionalLights) === null || _d === void 0 ? void 0 : _d.forEach((light, index) => {
-        var _a;
-        lightsObj[`DirectionalLight_${index}`] = new DirectionalLight(Object.assign(Object.assign({}, light), { color: (_a = light.color) !== null && _a !== void 0 ? _a : [255, 255, 255] }));
+    lights.directionalLights?.forEach((light, index) => {
+        lightsObj[`DirectionalLight_${index}`] = new DirectionalLight({
+            ...light,
+            color: light.color ?? [255, 255, 255],
+        });
     });
     const lightingEffect = new LightingEffect(lightsObj);
     effects.push(lightingEffect);
@@ -84,31 +87,31 @@ function show3D(viewPort) {
     return viewPort.viewType === OrbitView;
 }
 function defaultTooltip(info) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    if ((((_a = info.layer) === null || _a === void 0 ? void 0 : _a.constructor) === WellLabelLayer ||
-        ((_b = info.sourceLayer) === null || _b === void 0 ? void 0 : _b.constructor) === WellLabelLayer) &&
-        ((_c = info.object) === null || _c === void 0 ? void 0 : _c.wellLabels)) {
-        return (_d = info.object.wellLabels) === null || _d === void 0 ? void 0 : _d.join("\n");
+    if ((info.layer?.constructor === WellLabelLayer ||
+        info.sourceLayer?.constructor === WellLabelLayer) &&
+        info.object?.wellLabels) {
+        return info.object.wellLabels?.join("\n");
     }
-    else if (info === null || info === void 0 ? void 0 : info.logName) {
-        return info === null || info === void 0 ? void 0 : info.logName;
+    else if (info?.logName) {
+        return info?.logName;
     }
-    else if (((_e = info.layer) === null || _e === void 0 ? void 0 : _e.id) === "drawing-layer") {
-        return (_f = info.propertyValue) === null || _f === void 0 ? void 0 : _f.toFixed(2);
+    else if (info.layer?.id === "drawing-layer") {
+        return info.propertyValue?.toFixed(2);
     }
     const feat = info.object;
-    return (_g = feat === null || feat === void 0 ? void 0 : feat.properties) === null || _g === void 0 ? void 0 : _g["name"];
+    return feat?.properties?.["name"];
 }
 function makeExtendedPickingInfo(info) {
     const scaledCoordinate = info.coordinate
         ? [...info.coordinate]
         : undefined;
-    const extendedPickInfo = Object.assign(Object.assign({}, info), { scaledCoordinate });
+    const extendedPickInfo = {
+        ...info,
+        scaledCoordinate,
+    };
     return extendedPickInfo;
 }
-const Map = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h;
-    var { id, layers, bounds, cameraPosition, triggerHome, views = DEFAULT_VIEWS, scale = { visible: true, cssStyle: { top: 10, left: 10 } }, coords, showReadout = (_b = coords === null || coords === void 0 ? void 0 : coords.visible) !== null && _b !== void 0 ? _b : true, pickingDepth = (_c = coords === null || coords === void 0 ? void 0 : coords.pickDepth) !== null && _c !== void 0 ? _c : 2, coordinateUnit = "m", colorTables = defaultColorTables, setEditedData, checkDatafileSchema = false, onMouseEvent, selection, children, getTooltip = defaultTooltip, getCameraPosition, onRenderingProgress, onDragStart, onDragEnd, onDrag, getCursor, lights, triggerResetMultipleWells, verticalScale, innerRef, pickingRadius, deckGlRef, } = _a;
+const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views = DEFAULT_VIEWS, scale = { visible: true, cssStyle: { top: 10, left: 10 } }, coords, showReadout = coords?.visible ?? true, pickingDepth = coords?.pickDepth ?? 2, coordinateUnit = "m", colorTables = defaultColorTables, setEditedData, checkDatafileSchema = false, onMouseEvent, selection, children, getTooltip = defaultTooltip, getCameraPosition, onRenderingProgress, onDragStart, onDragEnd, onDrag, getCursor, lights, triggerResetMultipleWells, verticalScale, innerRef, pickingRadius, deckGlRef, }) => {
     // From react doc, ref should not be read nor modified during rendering.
     const deckRef = React.useRef(null);
     React.useImperativeHandle(deckGlRef, () => deckRef.current);
@@ -120,8 +123,8 @@ const Map = (_a) => {
         // exclude {0, 0} size (when rendered hidden pages)
         if (size.width > 0 && size.height > 0) {
             setDeckSize((prevSize) => {
-                if ((prevSize === null || prevSize === void 0 ? void 0 : prevSize.width) !== size.width ||
-                    (prevSize === null || prevSize === void 0 ? void 0 : prevSize.height) !== size.height) {
+                if (prevSize?.width !== size.width ||
+                    prevSize?.height !== size.height) {
                     return size;
                 }
                 return prevSize;
@@ -131,19 +134,18 @@ const Map = (_a) => {
     // 3d bounding box computed from the layers
     const [dataBoundingBox3d, dispatchBoundingBox] = React.useReducer(mapBoundingBoxReducer, undefined);
     // Get vertical scaling factor defined in viewports.
-    const viewportVerticalScale = useVerticalScale(views === null || views === void 0 ? void 0 : views.viewports);
+    const viewportVerticalScale = useVerticalScale(views?.viewports);
     // Used for scaling in z direction using arrow keys.
     const { factor: zReScale, elementRef: zScaleRef } = useScaleFactor();
     const { shiftHeld, divRef: shiftHeldRef } = useShiftHeld();
     // Prevent using internal hook for manipulating vertical scale when the vertical
     // scale is explicitly defined.
-    const overrideVerticalScaling = verticalScale !== null && verticalScale !== void 0 ? verticalScale : viewportVerticalScale;
+    const overrideVerticalScaling = verticalScale ?? viewportVerticalScale;
     const divRef = mergeRefs(overrideVerticalScaling ? undefined : zScaleRef, shiftHeldRef, innerRef);
-    const zScale = (_d = verticalScale !== null && verticalScale !== void 0 ? verticalScale : viewportVerticalScale) !== null && _d !== void 0 ? _d : zReScale;
+    const zScale = verticalScale ?? viewportVerticalScale ?? zReScale;
     // compute the viewport margins
     const viewPortMargins = React.useMemo(() => {
-        var _a, _b;
-        if (!(layers === null || layers === void 0 ? void 0 : layers.length)) {
+        if (!layers?.length) {
             return {
                 left: 0,
                 right: 0,
@@ -152,37 +154,35 @@ const Map = (_a) => {
             };
         }
         // Margins on the viewport are extracted from a potential axes2D layer.
-        const axes2DLayer = layers === null || layers === void 0 ? void 0 : layers.find((e) => {
-            return (e === null || e === void 0 ? void 0 : e.constructor) === Axes2DLayer;
+        const axes2DLayer = layers?.find((e) => {
+            return e?.constructor === Axes2DLayer;
         });
-        const axes2DProps = axes2DLayer === null || axes2DLayer === void 0 ? void 0 : axes2DLayer.props;
-        const marginV = (_a = axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.minimalMarginV) !== null && _a !== void 0 ? _a : axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.marginV;
-        const marginH = (_b = axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.minimalMarginH) !== null && _b !== void 0 ? _b : axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.marginH;
+        const axes2DProps = axes2DLayer?.props;
+        const marginV = axes2DProps?.minimalMarginV ?? axes2DProps?.marginV;
+        const marginH = axes2DProps?.minimalMarginH ?? axes2DProps?.marginH;
         return {
-            left: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isLeftRuler) ? marginH : 0,
-            right: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isRightRuler) ? marginH : 0,
-            top: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isTopRuler) ? marginV : 0,
-            bottom: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isBottomRuler) ? marginV : 0,
+            left: axes2DProps?.isLeftRuler ? marginH : 0,
+            right: axes2DProps?.isRightRuler ? marginH : 0,
+            top: axes2DProps?.isTopRuler ? marginV : 0,
+            bottom: axes2DProps?.isBottomRuler ? marginV : 0,
         };
     }, [layers]);
     // selection
     useEffect(() => {
-        var _a, _b, _c;
-        const layers = (_b = (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck) === null || _b === void 0 ? void 0 : _b.props.layers;
+        const layers = deckRef.current?.deck?.props.layers;
         if (layers) {
-            const wellslayer = (_c = getLayersByType(layers, WellsLayer.name)) === null || _c === void 0 ? void 0 : _c[0];
-            wellslayer === null || wellslayer === void 0 ? void 0 : wellslayer.setSelection(selection === null || selection === void 0 ? void 0 : selection.well, selection === null || selection === void 0 ? void 0 : selection.selection);
+            const wellslayer = getLayersByType(layers, WellsLayer.name)?.[0];
+            wellslayer?.setSelection(selection?.well, selection?.selection);
         }
     }, [selection]);
     // multiple well layers
     const [multipleWells, setMultipleWells] = useState([]);
     const [selectedWell, setSelectedWell] = useState("");
     useEffect(() => {
-        var _a, _b, _c;
-        const layers = (_b = (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck) === null || _b === void 0 ? void 0 : _b.props.layers;
+        const layers = deckRef.current?.deck?.props.layers;
         if (layers) {
-            const wellslayer = (_c = getWellLayerByTypeAndSelectedWells(layers, "WellsLayer", selectedWell)) === null || _c === void 0 ? void 0 : _c[0];
-            wellslayer === null || wellslayer === void 0 ? void 0 : wellslayer.setMultiSelection(multipleWells);
+            const wellslayer = getWellLayerByTypeAndSelectedWells(layers, "WellsLayer", selectedWell)?.[0];
+            wellslayer?.setMultiSelection(multipleWells);
         }
     }, [multipleWells, selectedWell]);
     useEffect(() => {
@@ -191,7 +191,6 @@ const Map = (_a) => {
         }
     }, [triggerResetMultipleWells]);
     const getPickingInfos = useCallback((type, pickInfo, event) => {
-        var _a;
         const depth = isFunction(pickingDepth)
             ? pickingDepth(type)
             : pickingDepth;
@@ -199,7 +198,7 @@ const Map = (_a) => {
             throw new Error(`Expected a picking depth to be positive. Received ${depth}`);
         if (depth === 0)
             return [];
-        if (!((_a = pickInfo.layer) === null || _a === void 0 ? void 0 : _a.context.deck)) {
+        if (!pickInfo.layer?.context.deck) {
             const extendedPickInfo = makeExtendedPickingInfo(pickInfo);
             // Z value should not take into account the Z scale factor.
             viewController.unscaledTarget(pickInfo.coordinate);
@@ -213,14 +212,13 @@ const Map = (_a) => {
             radius: pickingRadius,
         });
         const extendedPickInfos = pickInfos.map((itemPick) => {
-            var _a, _b, _c, _d;
             const extItemPick = makeExtendedPickingInfo(itemPick);
             // Z value should not take into account the Z scale factor.
             viewController.unscaledTarget(extItemPick.coordinate);
             if (extItemPick.layer instanceof WellsLayer) {
                 const wellsPickInfo = extItemPick;
-                const unit = (_c = (_b = (_a = extItemPick.layer) === null || _a === void 0 ? void 0 : _a.state.data) === null || _b === void 0 ? void 0 : _b.unit) !== null && _c !== void 0 ? _c : " ";
-                (_d = wellsPickInfo.properties) === null || _d === void 0 ? void 0 : _d.forEach((property) => {
+                const unit = extItemPick.layer?.state.data?.unit ?? " ";
+                wellsPickInfo.properties?.forEach((property) => {
                     if (property.name.includes("MD") ||
                         property.name.includes("TVD")) {
                         const fixedNumber = Number(property.value).toFixed(2);
@@ -256,11 +254,11 @@ const Map = (_a) => {
     const onHover = useCallback((pickInfo, event) => {
         const infos = getPickingInfos("hover", pickInfo, event);
         setHoverInfo(infos);
-        callOnMouseEvent === null || callOnMouseEvent === void 0 ? void 0 : callOnMouseEvent("hover", infos, event);
+        callOnMouseEvent?.("hover", infos, event);
     }, [callOnMouseEvent, getPickingInfos]);
     const onClick = useCallback((pickInfo, event) => {
         const infos = getPickingInfos("click", pickInfo, event);
-        callOnMouseEvent === null || callOnMouseEvent === void 0 ? void 0 : callOnMouseEvent("click", infos, event);
+        callOnMouseEvent?.("click", infos, event);
     }, [callOnMouseEvent, getPickingInfos]);
     const deckGLLayers = React.useMemo(() => {
         if (!layers) {
@@ -276,7 +274,7 @@ const Map = (_a) => {
             layers.push(dummy_layer);
         }
         return layers.map((item) => {
-            if ((item === null || item === void 0 ? void 0 : item.constructor.name) === NorthArrow3DLayer.name) {
+            if (item?.constructor.name === NorthArrow3DLayer.name) {
                 return item;
             }
             let m;
@@ -299,14 +297,15 @@ const Map = (_a) => {
     }, [layers, zScale]);
     const [loadingProgress, setLoadingProgress] = useState(0);
     const onAfterRender = useCallback(() => {
-        var _a, _b;
         if (deckGLLayers) {
             let progress = 100;
             // get all the layers ids used in the views, to consider only visible layers
-            const layersIdsPresentInViews = (_b = (_a = views === null || views === void 0 ? void 0 : views.viewports) === null || _a === void 0 ? void 0 : _a.map((viewport) => viewport === null || viewport === void 0 ? void 0 : viewport.layerIds)) === null || _b === void 0 ? void 0 : _b.flat();
-            const someViewportHasUndefinedLayerIds = layersIdsPresentInViews === null || layersIdsPresentInViews === void 0 ? void 0 : layersIdsPresentInViews.includes(undefined);
+            const layersIdsPresentInViews = views?.viewports
+                ?.map((viewport) => viewport?.layerIds)
+                ?.flat();
+            const someViewportHasUndefinedLayerIds = layersIdsPresentInViews?.includes(undefined);
             const allViewportsHaveAnEmptyListOfLayerIds = !someViewportHasUndefinedLayerIds &&
-                (layersIdsPresentInViews === null || layersIdsPresentInViews === void 0 ? void 0 : layersIdsPresentInViews.length) === 0;
+                layersIdsPresentInViews?.length === 0;
             const emptyLayers = // There will always be a dummy layer. Deck.gl does not like empty array of layers.
              deckGLLayers.length === 1 &&
                 deckGLLayers[0].id ===
@@ -314,28 +313,26 @@ const Map = (_a) => {
             if (!emptyLayers && !allViewportsHaveAnEmptyListOfLayerIds) {
                 // compute #done layers / #visible layers percentage
                 const visibleLayers = deckGLLayers.filter((layer) => {
-                    var _a;
                     const layerWithType = layer;
                     const filterByLayersInViews = !someViewportHasUndefinedLayerIds
-                        ? layersIdsPresentInViews === null || layersIdsPresentInViews === void 0 ? void 0 : layersIdsPresentInViews.includes(layerWithType.id)
+                        ? layersIdsPresentInViews?.includes(layerWithType.id)
                         : true;
-                    return (((_a = layerWithType === null || layerWithType === void 0 ? void 0 : layerWithType.props) === null || _a === void 0 ? void 0 : _a.visible) && filterByLayersInViews);
+                    return (layerWithType?.props?.visible && filterByLayersInViews);
                 });
-                const loaded = visibleLayers === null || visibleLayers === void 0 ? void 0 : visibleLayers.filter((layer) => layer === null || layer === void 0 ? void 0 : layer.isLoaded).length;
+                const loaded = visibleLayers?.filter((layer) => layer?.isLoaded).length;
                 // ceil to ensure reaching 100 (important to check if done)
-                progress = Math.ceil((100 * loaded) / (visibleLayers === null || visibleLayers === void 0 ? void 0 : visibleLayers.length));
+                progress = Math.ceil((100 * loaded) / visibleLayers?.length);
             }
             setLoadingProgress(progress);
             if (onRenderingProgress) {
                 onRenderingProgress(progress);
             }
         }
-    }, [deckGLLayers, onRenderingProgress, views === null || views === void 0 ? void 0 : views.viewports]);
+    }, [deckGLLayers, onRenderingProgress, views?.viewports]);
     // validate layers data
     const [errorText, setErrorText] = useState();
     useEffect(() => {
-        var _a, _b;
-        const layers = (_b = (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck) === null || _b === void 0 ? void 0 : _b.props.layers;
+        const layers = deckRef.current?.deck?.props.layers;
         // this ensures to validate the schemas only once
         if (checkDatafileSchema && layers && loadingProgress === 100) {
             try {
@@ -353,19 +350,19 @@ const Map = (_a) => {
     }, [
         checkDatafileSchema,
         colorTables,
-        (_f = (_e = deckRef === null || deckRef === void 0 ? void 0 : deckRef.current) === null || _e === void 0 ? void 0 : _e.deck) === null || _f === void 0 ? void 0 : _f.props.layers,
+        deckRef?.current?.deck?.props.layers,
         loadingProgress,
     ]);
     const layerFilter = useCallback((args) => {
         // display all the layers if views are not specified correctly
-        if (!(views === null || views === void 0 ? void 0 : views.viewports) || !(views === null || views === void 0 ? void 0 : views.layout)) {
+        if (!views?.viewports || !views?.layout) {
             return true;
         }
         const cur_view = views.viewports.find(({ id }) => args.viewport.id && id === args.viewport.id);
-        if ((cur_view === null || cur_view === void 0 ? void 0 : cur_view.layerIds) === undefined) {
+        if (cur_view?.layerIds === undefined) {
             return true;
         }
-        if ((cur_view === null || cur_view === void 0 ? void 0 : cur_view.layerIds) && cur_view.layerIds.length > 0) {
+        if (cur_view?.layerIds && cur_view.layerIds.length > 0) {
             const layer_ids = cur_view.layerIds;
             return layer_ids.some((layer_id) => {
                 const t = layer_id === args.layer.id;
@@ -385,7 +382,7 @@ const Map = (_a) => {
         }
         return cursorState.isDragging ? "grabbing" : "default";
     }, [getCursor]);
-    const effects = (_g = parseLights(lights)) !== null && _g !== void 0 ? _g : [];
+    const effects = parseLights(lights) ?? [];
     const [deckGlViews, deckGlViewState] = useMemo(() => {
         const state = {
             triggerHome,
@@ -437,11 +434,11 @@ const Map = (_a) => {
                             setMultipleWells([]);
                         }
                     }
-                    setEditedData === null || setEditedData === void 0 ? void 0 : setEditedData(updated_prop);
+                    setEditedData?.(updated_prop);
                 },
                 colorTables: colorTables,
             }, getCursor: getCursorFunc, getTooltip: getTooltip, ref: deckRef, onViewStateChange: onViewStateChange, onHover: onHover, onClick: onClick, onAfterRender: onAfterRender, effects: effects, onDragStart: onDragStart, onDragEnd: onDragEnd, onDrag: onDrag, onResize: onResize, pickingRadius: pickingRadius }, children),
-        (scale === null || scale === void 0 ? void 0 : scale.visible) ? (React.createElement(DistanceScale, Object.assign({}, scale, { zoom: lateralZoom, scaleUnit: coordinateUnit, style: (_h = scale.cssStyle) !== null && _h !== void 0 ? _h : {} }))) : null,
+        scale?.visible ? (React.createElement(DistanceScale, { ...scale, zoom: lateralZoom, scaleUnit: coordinateUnit, style: scale.cssStyle ?? {} })) : null,
         !onRenderingProgress && loadingProgress < 100 && (React.createElement("div", { style: {
                 display: "flex",
                 alignItems: "flex-end",
@@ -508,25 +505,27 @@ export function createLayers(layers, enums = undefined) {
 }
 function createConfiguration(enums = undefined) {
     const configuration = new JSONConfiguration(JSON_CONVERTER_CONFIG);
-    enums === null || enums === void 0 ? void 0 : enums.forEach((enumeration) => {
+    enums?.forEach((enumeration) => {
         if (enumeration) {
             configuration.merge({
-                enumerations: Object.assign({}, enumeration),
+                enumerations: {
+                    ...enumeration,
+                },
             });
         }
     });
     return configuration;
 }
 function createLayer(layerData, configuration) {
-    const typeKey = configuration.typeKey;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const classes = configuration.classes;
-    if (layerData[typeKey]) {
+    const configProps = configuration.getProps();
+    const typeKey = configProps.typeKey;
+    const classes = configProps.classes;
+    if (typeKey && classes && layerData[typeKey]) {
         const type = layerData[typeKey];
         if (type in classes) {
             const Class = classes[type];
             // Prepare a props object
-            const props = Object.assign({}, layerData);
+            const props = { ...layerData };
             delete props[typeKey];
             return new Class(props);
         }
@@ -542,40 +541,54 @@ function createLayer(layerData, configuration) {
  *            to set targets, get views, and handle view state changes.
  */
 class ViewController {
+    /**
+     * Function to trigger a re-render.
+     */
+    rerender_;
+    /**
+     * Derived state for interaction readiness and view state changes.
+     */
+    derivedState_ = {
+        readyForInteraction: false,
+        viewStateChanged: false,
+    };
+    /**
+     * Full state including camera settings, bounds, and deck size.
+     */
+    state_ = {
+        triggerHome: undefined,
+        camera: undefined,
+        bounds: undefined,
+        boundingBox3d: undefined,
+        deckSize: { width: 0, height: 0 },
+        zScale: 1,
+        viewPortMargins: {
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+        },
+        // Derived state
+        ...this.derivedState_,
+    };
+    /**
+     * The current views being managed.
+     */
+    views_ = undefined;
+    /**
+     * The result object containing views and view states.
+     */
+    result_ = {
+        views: [],
+        deckglViewStates: {},
+        viewStates: {},
+    };
     /**
      * Constructs a new instance of the Map component.
      *
      * @param rerender - A function to trigger a re-render of the component.
      */
     constructor(rerender) {
-        /**
-         * Derived state for interaction readiness and view state changes.
-         */
-        this.derivedState_ = {
-            readyForInteraction: false,
-            viewStateChanged: false,
-        };
-        /**
-         * Full state including camera settings, bounds, and deck size.
-         */
-        this.state_ = Object.assign({ triggerHome: undefined, camera: undefined, bounds: undefined, boundingBox3d: undefined, deckSize: { width: 0, height: 0 }, zScale: 1, viewPortMargins: {
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            } }, this.derivedState_);
-        /**
-         * The current views being managed.
-         */
-        this.views_ = undefined;
-        /**
-         * The result object containing views and view states.
-         */
-        this.result_ = {
-            views: [],
-            deckglViewStates: {},
-            viewStates: {},
-        };
         this.rerender_ = rerender;
     }
     /**
@@ -627,7 +640,7 @@ class ViewController {
      * @returns The consolidated state.
      */
     consolidateState(state) {
-        return Object.assign(Object.assign({}, state), this.derivedState_);
+        return { ...state, ...this.derivedState_ };
     }
     /**
      * Returns the DeckGL views (ie. view position and viewport) based on the input views and current state.
@@ -651,10 +664,9 @@ class ViewController {
      * @returns The DeckGL view states and the corresponding view states in user space.
      */
     getDeckGlAndUserViewStates(views, state) {
-        var _a;
         const viewsChanged = views != this.views_;
         const triggerHome = state.triggerHome !== this.state_.triggerHome;
-        const updateZScale = viewsChanged || state.zScale !== ((_a = this.state_) === null || _a === void 0 ? void 0 : _a.zScale) || triggerHome;
+        const updateZScale = viewsChanged || state.zScale !== this.state_?.zScale || triggerHome;
         const updateViewState = viewsChanged ||
             triggerHome ||
             state.camera != this.state_.camera ||
@@ -706,33 +718,52 @@ class ViewController {
      * @param getCameraPosition - A function to get the camera position.
      */
     onViewStateChange(viewId, viewState, getCameraPosition) {
-        var _a, _b, _c, _d, _e, _f;
         if (!this.derivedState_.readyForInteraction) {
             // disable interaction if the camera is not defined
             return;
         }
-        const viewports = (_b = (_a = this.views_) === null || _a === void 0 ? void 0 : _a.viewports) !== null && _b !== void 0 ? _b : [];
-        if (((_c = viewState.target) === null || _c === void 0 ? void 0 : _c.length) === 2) {
+        const viewports = this.views_?.viewports ?? [];
+        if (viewState.target?.length === 2) {
             // In orthographic mode viewState.target contains only x and y. Add existing z value.
-            viewState.target.push((_e = (_d = this.result_.deckglViewStates[viewId].target) === null || _d === void 0 ? void 0 : _d[2]) !== null && _e !== void 0 ? _e : 1);
+            viewState.target.push(this.result_.deckglViewStates[viewId].target?.[2] ?? 1);
         }
         const isSyncIds = viewports
             .filter((item) => item.isSync)
             .map((item) => item.id);
-        if (isSyncIds === null || isSyncIds === void 0 ? void 0 : isSyncIds.includes(viewId)) {
-            const syncedViewStates = (_f = this.views_) === null || _f === void 0 ? void 0 : _f.viewports.filter((item) => item.isSync).map((item) => [item.id, viewState]);
-            const tempViewStates = Object.fromEntries(syncedViewStates !== null && syncedViewStates !== void 0 ? syncedViewStates : []);
-            this.result_.deckglViewStates = Object.assign(Object.assign({}, this.result_.deckglViewStates), tempViewStates);
+        if (isSyncIds?.includes(viewId)) {
+            const syncedViewStates = this.views_?.viewports
+                .filter((item) => item.isSync)
+                .map((item) => [item.id, viewState]);
+            const tempViewStates = Object.fromEntries(syncedViewStates ?? []);
+            this.result_.deckglViewStates = {
+                ...this.result_.deckglViewStates,
+                ...tempViewStates,
+            };
             // update corresponding view state
             const keys = Object.keys(tempViewStates);
             keys.forEach((key) => {
-                this.result_.viewStates = Object.assign(Object.assign({}, this.result_.viewStates), { [key]: Object.assign(Object.assign({}, tempViewStates[key]), { target: inversedZScaled(tempViewStates[key].target, this.state_.zScale, this.result_.viewStates[key].target) }) });
+                this.result_.viewStates = {
+                    ...this.result_.viewStates,
+                    [key]: {
+                        ...tempViewStates[key],
+                        target: inversedZScaled(tempViewStates[key].target, this.state_.zScale, this.result_.viewStates[key].target),
+                    },
+                };
             });
         }
         else {
-            this.result_.deckglViewStates = Object.assign(Object.assign({}, this.result_.deckglViewStates), { [viewId]: viewState });
+            this.result_.deckglViewStates = {
+                ...this.result_.deckglViewStates,
+                [viewId]: viewState,
+            };
             // update corresponding view state
-            this.result_.viewStates = Object.assign(Object.assign({}, this.result_.viewStates), { [viewId]: Object.assign(Object.assign({}, viewState), { target: inversedZScaled(viewState.target, this.state_.zScale, this.result_.viewStates[viewId].target) }) });
+            this.result_.viewStates = {
+                ...this.result_.viewStates,
+                [viewId]: {
+                    ...viewState,
+                    target: inversedZScaled(viewState.target, this.state_.zScale, this.result_.viewStates[viewId].target),
+                },
+            };
         }
         if (getCameraPosition) {
             getCameraPosition(this.result_.viewStates[viewId]);
@@ -810,7 +841,6 @@ function computeCameraZoom(camera, boundingBox, size, fovy = 50) {
 ///////////////////////////////////////////////////////////////////////////////////////////
 // return viewstate with computed bounds to fit the data in viewport
 function getViewStateFromBounds(viewPortMargins, bounds_accessor, target, views, viewPort, size) {
-    var _a, _b;
     const bounds = typeof bounds_accessor == "function"
         ? bounds_accessor()
         : bounds_accessor;
@@ -836,11 +866,11 @@ function getViewStateFromBounds(viewPortMargins, bounds_accessor, target, views,
         h = size.height - marginV;
         // Special case if matrix views.
         // Use width and height for a sub-view instead of full viewport.
-        if (views === null || views === void 0 ? void 0 : views.layout) {
+        if (views?.layout) {
             const [nY, nX] = views.layout;
             const isMatrixViews = nX !== 1 || nY !== 1;
             if (isMatrixViews) {
-                const mPixels = (_a = views === null || views === void 0 ? void 0 : views.marginPixels) !== null && _a !== void 0 ? _a : 0;
+                const mPixels = views?.marginPixels ?? 0;
                 const w_ = 99.5 / nX; // Using 99.5% of viewport to avoid flickering of deckgl canvas
                 const h_ = 99.5 / nY;
                 const marginHorPercentage = 100 * 100 * (mPixels / (w_ * size.width)); //percentage of sub view
@@ -878,7 +908,7 @@ function getViewStateFromBounds(viewPortMargins, bounds_accessor, target, views,
     const isLarge = Math.max(bounds[0], bounds[1]) > 99999;
     const max2DZoom = isLarge ? 3 : maxZoom2D;
     const view_state = {
-        target: (_b = viewPort.target) !== null && _b !== void 0 ? _b : fb_target,
+        target: viewPort.target ?? fb_target,
         zoom: getZoom(viewPort, fb_zoom),
         rotationX: 90, // look down z -axis
         rotationOrbit: 0,
@@ -909,11 +939,10 @@ function getViewType(viewport) {
     return [OrthographicView, OrthographicController];
 }
 function areViewsValid(views, size) {
-    var _a, _b;
-    const isInvalid = (views === null || views === void 0 ? void 0 : views.viewports) == undefined ||
-        (views === null || views === void 0 ? void 0 : views.layout) == undefined ||
-        !((_a = views === null || views === void 0 ? void 0 : views.layout) === null || _a === void 0 ? void 0 : _a[0]) ||
-        !((_b = views === null || views === void 0 ? void 0 : views.layout) === null || _b === void 0 ? void 0 : _b[1]) ||
+    const isInvalid = views?.viewports == undefined ||
+        views?.layout == undefined ||
+        !views?.layout?.[0] ||
+        !views?.layout?.[1] ||
         !size.width ||
         !size.height;
     return !isInvalid;
@@ -923,9 +952,12 @@ function newView(viewport, x, y, width, height) {
     const far = 9999;
     const near = show3D(viewport) ? 0.1 : -1000;
     const [ViewType, Controller] = getViewType(viewport);
+    const controllerConfig = Controller === OrbitController
+        ? defineController(OrbitController, viewport?.controller)
+        : defineController(OrthographicController, viewport?.controller);
     return new ViewType({
         id: viewport.id,
-        controller: defineController(Controller, viewport === null || viewport === void 0 ? void 0 : viewport.controller),
+        controller: controllerConfig,
         x,
         y,
         width,
@@ -936,7 +968,6 @@ function newView(viewport, x, y, width, height) {
     });
 }
 function buildDeckGlViews(views, size) {
-    var _a;
     const isOk = areViewsValid(views, size);
     if (!views || !isOk) {
         return [
@@ -965,7 +996,7 @@ function buildDeckGlViews(views, size) {
     const result = [];
     const w = 99.5 / nX; // Using 99.5% of viewport to avoid flickering of deckgl canvas
     const h = 99.5 / nY;
-    const marginPixels = (_a = views.marginPixels) !== null && _a !== void 0 ? _a : 0;
+    const marginPixels = views.marginPixels ?? 0;
     const marginHorPercentage = 100 * 100 * (marginPixels / (w * size.width));
     const marginVerPercentage = 100 * 100 * (marginPixels / (h * size.height));
     let yPos = 0;
@@ -994,7 +1025,7 @@ function buildDeckGlViews(views, size) {
  * @returns true if the camera camera zoom is set.
  */
 function cameraHasZoom(camera) {
-    const zoom = camera === null || camera === void 0 ? void 0 : camera.zoom;
+    const zoom = camera?.zoom;
     const isNumber = typeof zoom === "number" && !Number.isNaN(zoom);
     const isXy = Array.isArray(zoom) && zoom.length == 2;
     return isNumber || isXy;
@@ -1005,7 +1036,7 @@ function cameraHasZoom(camera) {
  * @returns true if the camera camera target is set.
  */
 function cameraHasTarget(camera) {
-    return (Array.isArray(camera === null || camera === void 0 ? void 0 : camera.target) &&
+    return (Array.isArray(camera?.target) &&
         camera.target.length >= 2 &&
         camera.target.length <= 3);
 }
@@ -1025,7 +1056,7 @@ function isCameraDefined(camera) {
  * @returns true if the camera is fully defined.
  */
 function cameraDefinesBoundingBox(camera) {
-    return (Array.isArray(camera === null || camera === void 0 ? void 0 : camera.zoom) &&
+    return (Array.isArray(camera?.zoom) &&
         !isEmptyBox3D(camera.zoom));
 }
 /**
@@ -1054,7 +1085,7 @@ function canCameraBeDefined(camera, boundingBox, bounds, size) {
  * @param zScale Z scale.
  */
 function applyZScale(target, zScale) {
-    if ((target === null || target === void 0 ? void 0 : target[2]) != undefined) {
+    if (target?.[2] != undefined) {
         target[2] = target[2] * zScale;
     }
 }
@@ -1084,7 +1115,7 @@ function zScaledTarget(target, zScale) {
  * @param zScale Z scale.
  */
 function applyInverseZScale(target, zScale) {
-    if ((target === null || target === void 0 ? void 0 : target[2]) != undefined && zScale != 0) {
+    if (target?.[2] != undefined && zScale != 0) {
         target[2] = target[2] / zScale;
     }
 }
@@ -1107,9 +1138,9 @@ function inversedZScaled(target, zScale, unscaledTarget) {
     if (zScale != 0) {
         return [target[0], target[1], target[2] / zScale];
     }
-    if ((unscaledTarget === null || unscaledTarget === void 0 ? void 0 : unscaledTarget[2]) != undefined &&
-        target[0] === (unscaledTarget === null || unscaledTarget === void 0 ? void 0 : unscaledTarget[0]) &&
-        target[1] === (unscaledTarget === null || unscaledTarget === void 0 ? void 0 : unscaledTarget[1])) {
+    if (unscaledTarget?.[2] != undefined &&
+        target[0] === unscaledTarget?.[0] &&
+        target[1] === unscaledTarget?.[1]) {
         return [
             target[0],
             target[1],
@@ -1126,7 +1157,6 @@ function inversedZScaled(target, zScale, unscaledTarget) {
  * @param size widget size in pixels.
  */
 function updateViewState(camera, boundingBox, size, is3D = true) {
-    var _a, _b;
     if (isCameraDefined(camera)) {
         return camera;
     }
@@ -1146,8 +1176,8 @@ function updateViewState(camera, boundingBox, size, is3D = true) {
     if (!cameraHasTarget(camera)) {
         camera.target = boxCenter(boundingBox);
     }
-    camera.minZoom = (_a = camera.minZoom) !== null && _a !== void 0 ? _a : minZoom3D;
-    camera.maxZoom = (_b = camera.maxZoom) !== null && _b !== void 0 ? _b : maxZoom3D;
+    camera.minZoom = camera.minZoom ?? minZoom3D;
+    camera.maxZoom = camera.maxZoom ?? maxZoom3D;
     return camera;
 }
 /**
@@ -1236,9 +1266,11 @@ function buildViewStates(views, viewPortMargins, scaledCamera, boundingBox, boun
             const currentViewport = views.viewports[resultLength];
             const currentViewState = computeViewState(currentViewport, scaledCamera, boundingBox, bounds, viewPortMargins, views, size);
             if (currentViewState) {
-                result = Object.assign(Object.assign({}, result), { 
+                result = {
+                    ...result,
                     // Each viewport should have distinct state objects, so we clone to avoid any shared object references
-                    [currentViewport.id]: cloneDeep(currentViewState) });
+                    [currentViewport.id]: cloneDeep(currentViewState),
+                };
             }
         }
     }
@@ -1263,7 +1295,6 @@ function buildScaledViewStates(viewStates, zScale) {
     return result;
 }
 function handleMouseEvent(type, infos, event) {
-    var _a;
     const ev = {
         type: type,
         infos: infos,
@@ -1282,7 +1313,7 @@ function handleMouseEvent(type, infos, event) {
             {
                 // try to use Object info (see DeckGL getToolTip callback)
                 const feat = info.object;
-                const properties = feat === null || feat === void 0 ? void 0 : feat.properties;
+                const properties = feat?.properties;
                 if (properties) {
                     ev.wellname = properties["name"];
                     ev.wellcolor = properties["color"];
@@ -1290,7 +1321,7 @@ function handleMouseEvent(type, infos, event) {
             }
             if (!ev.wellname)
                 if (info.object) {
-                    ev.wellname = (_a = info.object.header) === null || _a === void 0 ? void 0 : _a["well"]; // object is WellLog
+                    ev.wellname = info.object.header?.["well"]; // object is WellLog
                 }
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (info.properties) {