@webviz/subsurface-viewer 0.9.1 → 0.10.0

package/dist/SubsurfaceViewer.d.ts

@@ -38,6 +38,8 @@ export interface SubsurfaceViewerProps {
     resources?: Record<string, unknown>;
     layers?: Record<string, unknown>[] | LayersList;
     bounds?: [number, number, number, number] | BoundsAccessor;
+    cameraPosition?: ViewStateType | undefined;
+    triggerHome?: number;
     views?: ViewsType;
     coords?: {
         visible?: boolean | null;
@@ -69,10 +71,6 @@ export interface SubsurfaceViewerProps {
     isRenderedCallback?: (arg: boolean) => void;
     onDragStart?: (info: PickingInfo, event: MjolnirGestureEvent) => void;
     onDragEnd?: (info: PickingInfo, event: MjolnirGestureEvent) => void;
-    /**
-     * If changed will reset camera to default position.
-     */
-    triggerHome?: number;
     triggerResetMultipleWells?: number;
     /**
      * Range selection of the current well
@@ -85,7 +83,6 @@ export interface SubsurfaceViewerProps {
      * Override default tooltip with a callback.
      */
     getTooltip?: TooltipCallback;
-    cameraPosition?: ViewStateType | undefined;
     lights?: LightsType;
     children?: React.ReactNode;
 }

package/dist/SubsurfaceViewer.js

@@ -3,7 +3,7 @@ import Map, { jsonToObject } from "./components/Map";
 import React from "react";
 import PropTypes from "prop-types";
 import convert from "convert-units";
-const SubsurfaceViewer = ({ id, resources, layers, bounds, views, coords, scale, coordinateUnit, colorTables, editedData, setProps, checkDatafileSchema, onMouseEvent, selection, getTooltip, cameraPosition, getCameraPosition, isRenderedCallback: isRenderedCallback, onDragStart, onDragEnd, triggerHome, triggerResetMultipleWells, lights, children, }) => {
+const SubsurfaceViewer = ({ id, resources, layers, bounds, cameraPosition, triggerHome, views, coords, scale, coordinateUnit, colorTables, editedData, setProps, checkDatafileSchema, onMouseEvent, selection, getTooltip, getCameraPosition, isRenderedCallback, onDragStart, onDragEnd, triggerResetMultipleWells, lights, children, }) => {
     // Contains layers data received from map layers by user interaction
     const [layerEditedData, setLayerEditedData] = React.useState(editedData);
     const [layerInstances, setLayerInstances] = React.useState([]);

package/dist/SubsurfaceViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubsurfaceViewer.js","sourceRoot":"","sources":["../src/SubsurfaceViewer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SubsurfaceViewer.js","sourceRoot":"","sources":["../src/SubsurfaceViewer.tsx"],"names":[],"mappings":"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"}

package/dist/components/Map.d.ts

@@ -8,6 +8,9 @@ import type { MjolnirGestureEvent } from "mjolnir.js";
  * 3D bounding box defined as [xmin, ymin, zmin, xmax, ymax, zmax].
  */
 export type BoundingBox3D = [number, number, number, number, number, number];
+export type ReportBoundingBoxAction = {
+    layerBoundingBox: BoundingBox3D;
+};
 /**
  * Type of the function returning coordinate boundary for the view defined as [left, bottom, right, top].
  */
@@ -98,8 +101,20 @@ export interface MapProps {
     layers?: LayersList;
     /**
      * Coordinate boundary for the view defined as [left, bottom, right, top].
+     * Should be used for 2D view only.
      */
     bounds?: [number, number, number, number] | BoundsAccessor;
+    /**
+     * Camera state for the view defined as [left, bottom, right, top].
+     * Should be used for 3D view only.
+     * If the zoom is given as a 3D bounding box, the camera state is computed to
+     * display the full box.
+     */
+    cameraPosition?: ViewStateType;
+    /**
+     * If changed will reset view settings (bounds or camera) to default position.
+     */
+    triggerHome?: number;
     /**
      * Views configuration for map. If not specified, all the layers will be
      * displayed in a single 2D viewport
@@ -156,10 +171,6 @@ export interface MapProps {
     isRenderedCallback?: (arg: boolean) => void;
     onDragStart?: (info: PickingInfo, event: MjolnirGestureEvent) => void;
     onDragEnd?: (info: PickingInfo, event: MjolnirGestureEvent) => void;
-    /**
-     * If changed will reset camera to default position.
-     */
-    triggerHome?: number;
     triggerResetMultipleWells?: number;
     selection?: {
         well: string | undefined;
@@ -168,7 +179,6 @@ export interface MapProps {
     lights?: LightsType;
     children?: React.ReactNode;
     getTooltip?: TooltipCallback;
-    cameraPosition?: ViewStateType;
 }
 export interface MapMouseEvent {
     type: "click" | "hover" | "contextmenu";

package/dist/components/Map.js

@@ -1,7 +1,7 @@
 import { JSONConfiguration, JSONConverter } from "@deck.gl/json/typed";
 import DeckGL from "@deck.gl/react/typed";
 import { OrthographicView, OrbitView, PointLight } from "@deck.gl/core/typed";
-import React, { useEffect, useState, useCallback, useRef } from "react";
+import React, { useEffect, useState, useCallback, useMemo } from "react";
 import JSON_CONVERTER_CONFIG from "../utils/configuration";
 import InfoCard from "./InfoCard";
 import DistanceScale from "./DistanceScale";
@@ -112,6 +112,9 @@ function addBoundingBoxes(b1, b2) {
     const zmax = Math.max(b1[5], b2[5]);
     return [xmin, ymin, zmin, xmax, ymax, zmax];
 }
+function mapBoundingBoxReducer(mapBoundingBox, action) {
+    return addBoundingBoxes(mapBoundingBox, action.layerBoundingBox);
+}
 function boundingBoxCenter(box) {
     const xmin = box[0];
     const ymin = box[1];
@@ -140,8 +143,8 @@ function compareViewsProp(views) {
     return JSON.stringify(copy);
 }
 export function useHoverInfo() {
-    const [hoverInfo, setHoverInfo] = React.useState([]);
-    const callback = React.useCallback((pickEvent) => {
+    const [hoverInfo, setHoverInfo] = useState([]);
+    const callback = useCallback((pickEvent) => {
         setHoverInfo(pickEvent.infos);
     }, []);
     return [hoverInfo, callback];
@@ -168,7 +171,7 @@ function adjustCameraTarget(viewStates, scale, newScale) {
     }
     return vs;
 }
-function calculateZoomFromBBox3D(camera, deck) {
+function calculateZoomFromBBox3D(camera, size) {
     const DEGREES_TO_RADIANS = Math.PI / 180;
     const RADIANS_TO_DEGREES = 180 / Math.PI;
     const IDENTITY = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
@@ -176,13 +179,11 @@ function calculateZoomFromBBox3D(camera, deck) {
     if (typeof camera_ === "undefined" || !Array.isArray(camera_.zoom)) {
         return camera;
     }
-    if (!(deck === null || deck === void 0 ? void 0 : deck.width) || !(deck === null || deck === void 0 ? void 0 : deck.height)) {
+    if (size.width === 0 || size.height === 0) {
         camera_.zoom = 0;
         camera_.target = [0, 0, 0];
         return camera_;
     }
-    const width = deck.width;
-    const height = deck.height;
     // camera fov eye position. see deck.gl file orbit-viewports.ts
     const fovy = 50; // default in deck.gl. May also be set construction OrbitView
     const fD = fovyToAltitude(fovy);
@@ -200,9 +201,9 @@ function calculateZoomFromBBox3D(camera, deck) {
     ];
     const cameraFovVertical = 50;
     const angle_ver = (cameraFovVertical / 2) * DEGREES_TO_RADIANS;
-    const L = height / 2 / Math.sin(angle_ver);
+    const L = size.height / 2 / Math.sin(angle_ver);
     const r = L * Math.cos(angle_ver);
-    const cameraFov = 2 * Math.atan(width / 2 / r) * RADIANS_TO_DEGREES;
+    const cameraFov = 2 * Math.atan(size.width / 2 / r) * RADIANS_TO_DEGREES;
     const angle_hor = (cameraFov / 2) * DEGREES_TO_RADIANS;
     const points = [];
     points.push([xMin, yMin, zMin]);
@@ -215,9 +216,9 @@ function calculateZoomFromBBox3D(camera, deck) {
     points.push([xMax, yMin, zMax]);
     let zoom = 999;
     for (const point of points) {
-        const x_ = (point[0] - target[0]) / height;
-        const y_ = (point[1] - target[1]) / height;
-        const z_ = (point[2] - target[2]) / height;
+        const x_ = (point[0] - target[0]) / size.height;
+        const y_ = (point[1] - target[1]) / size.height;
+        const z_ = (point[2] - target[2]) / size.height;
         const m = new Matrix4(IDENTITY);
         m.rotateX(camera_.rotationX * DEGREES_TO_RADIANS);
         m.rotateZ(camera_.rotationOrbit * DEGREES_TO_RADIANS);
@@ -240,29 +241,33 @@ function calculateZoomFromBBox3D(camera, deck) {
     camera_.target = target;
     return camera_;
 }
-const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTables, setEditedData, checkDatafileSchema, onMouseEvent, selection, children, getTooltip = defaultTooltip, cameraPosition, getCameraPosition, isRenderedCallback, onDragStart, onDragEnd, triggerHome, lights, triggerResetMultipleWells, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const deckRef = useRef(null);
-    const bboxInitial = [0, 0, 0, 1, 1, 1];
+const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, scale, coordinateUnit, colorTables, setEditedData, checkDatafileSchema, onMouseEvent, selection, children, getTooltip = defaultTooltip, getCameraPosition, isRenderedCallback, onDragStart, onDragEnd, lights, triggerResetMultipleWells, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const deckRef = React.useRef(null);
+    // From react doc, ref should not be read nor modified during rendering.
+    // Extract the needed size in an effect to respect this rule (which proved true)
+    const [deckSize, setDeckSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (((_b = (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck) === null || _b === void 0 ? void 0 : _b.width) &&
+            ((_d = (_c = deckRef.current) === null || _c === void 0 ? void 0 : _c.deck) === null || _d === void 0 ? void 0 : _d.height) &&
+            deckRef.current.deck.width !== deckSize.width &&
+            deckRef.current.deck.height !== deckSize.height) {
+            setDeckSize({
+                width: deckRef.current.deck.width,
+                height: deckRef.current.deck.height,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [(_b = (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck) === null || _b === void 0 ? void 0 : _b.width, (_d = (_c = deckRef.current) === null || _c === void 0 ? void 0 : _c.deck) === null || _d === void 0 ? void 0 : _d.height]);
     // Deck.gl View's and viewStates as input to Deck.gl
     const [deckGLViews, setDeckGLViews] = useState([]);
     const [viewStates, setViewStates] = useState({});
-    const [reportedBoundingBox, setReportedBoundingBox] = useState(bboxInitial);
-    const [reportedBoundingBoxAcc, setReportedBoundingBoxAcc] = useState(bboxInitial);
-    const [deckGLLayers, setDeckGLLayers] = useState([]);
+    const [dataBoundingBox3d, dispatchBoundingBox] = React.useReducer(mapBoundingBoxReducer, [0, 0, 0, 1, 1, 1]);
     const [viewStateChanged, setViewStateChanged] = useState(false);
-    const [viewPortMargins, setViewPortMargins] = useState({
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-    });
-    const [camera, setCamera] = useState();
-    React.useEffect(() => {
-        var _a;
-        const camera = calculateZoomFromBBox3D(cameraPosition, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck);
-        setCamera(camera);
-    }, [cameraPosition, (_a = deckRef === null || deckRef === void 0 ? void 0 : deckRef.current) === null || _a === void 0 ? void 0 : _a.deck]);
+    const camera = useMemo(() => {
+        return calculateZoomFromBBox3D(cameraPosition, deckSize);
+    }, [cameraPosition, deckSize]);
     // Used for scaling in z direction using arrow keys.
     const [scaleZ, setScaleZ] = useState(1);
     const [scaleZUp, setScaleZUp] = useState(Number.MAX_VALUE);
@@ -274,15 +279,13 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
         ZScaleOrbitController.setZScaleDownReference(setScaleZDown);
     }, [setScaleZDown]);
     useEffect(() => {
-        var _a;
         const [Views, viewStates] = createViewsAndViewStates(views, viewPortMargins, bounds, undefined, // Use bounds not cameraPosition,
-        reportedBoundingBoxAcc, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck);
+        dataBoundingBox3d, deckSize);
         setDeckGLViews(Views);
         setViewStates(viewStates);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [triggerHome]);
     useEffect(() => {
-        var _a;
         const isBoundsDefined = typeof bounds !== "undefined";
         const isCameraPositionDefined = typeof cameraPosition !== "undefined" &&
             Object.keys(cameraPosition).length !== 0;
@@ -290,15 +293,14 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
             // User has changed viewState or camera is defined, do not recalculate.
             return;
         }
-        const [Views, viewStates] = createViewsAndViewStates(views, viewPortMargins, bounds, camera, reportedBoundingBoxAcc, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck);
+        const [Views, viewStates] = createViewsAndViewStates(views, viewPortMargins, bounds, camera, dataBoundingBox3d, deckSize);
         setDeckGLViews(Views);
         setViewStates(viewStates);
         setViewStateChanged(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [reportedBoundingBoxAcc]);
+    }, [dataBoundingBox3d]);
     useEffect(() => {
-        var _a;
-        const [Views, viewStates] = createViewsAndViewStates(views, viewPortMargins, bounds, camera, reportedBoundingBoxAcc, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck);
+        const [Views, viewStates] = createViewsAndViewStates(views, viewPortMargins, bounds, camera, dataBoundingBox3d, deckSize);
         setDeckGLViews(Views);
         setViewStates(viewStates);
         setViewStateChanged(false);
@@ -306,15 +308,10 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
     }, [
         bounds,
         camera,
-        (_b = deckRef === null || deckRef === void 0 ? void 0 : deckRef.current) === null || _b === void 0 ? void 0 : _b.deck,
+        deckSize,
         // eslint-disable-next-line react-hooks/exhaustive-deps
         compareViewsProp(views),
     ]);
-    useEffect(() => {
-        const union_of_reported_bboxes = addBoundingBoxes(reportedBoundingBoxAcc, reportedBoundingBox);
-        setReportedBoundingBoxAcc(union_of_reported_bboxes);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [reportedBoundingBox]);
     useEffect(() => {
         if (scaleZUp !== Number.MAX_VALUE) {
             const newScaleZ = scaleZ * 1.05;
@@ -335,68 +332,6 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [scaleZDown]);
-    useEffect(() => {
-        if (typeof layers === "undefined") {
-            return;
-        }
-        if (layers.length === 0) {
-            // Empty layers array makes deck.gl set deckRef to undefined (no opengl context).
-            // Hence insert dummy layer.
-            const dummy_layer = new LineLayer({
-                id: "webviz_internal_dummy_layer",
-                visible: false,
-            });
-            layers.push(dummy_layer);
-        }
-        // Margins on the viewport are extracted from a potenial 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 left = axes2DLayer && axes2DLayer.props.isLeftRuler
-            ? axes2DLayer.props.marginH
-            : 0;
-        const right = axes2DLayer && axes2DLayer.props.isRightRuler
-            ? axes2DLayer.props.marginH
-            : 0;
-        const top = axes2DLayer && axes2DLayer.props.isTopRuler
-            ? axes2DLayer.props.marginV
-            : 0;
-        const bottom = axes2DLayer && axes2DLayer.props.isBottomRuler
-            ? axes2DLayer.props.marginV
-            : 0;
-        setViewPortMargins({ left, right, top, bottom });
-        const layers_copy = layers.map((item) => {
-            if ((item === null || item === void 0 ? void 0 : item.constructor.name) === NorthArrow3DLayer.name) {
-                return item;
-            }
-            // Inject "setReportedBoundingBox" function into layer for it to report
-            // back its respective bounding box.
-            return item.clone({
-                // eslint-disable-next-line
-                // @ts-ignore
-                setReportedBoundingBox: setReportedBoundingBox,
-            });
-        });
-        setDeckGLLayers(layers_copy);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [layers]);
-    useEffect(() => {
-        if (typeof layers === "undefined") {
-            return;
-        }
-        const m = getModelMatrixScale(scaleZ);
-        const layers_copy = deckGLLayers.map((item) => {
-            if ((item === null || item === void 0 ? void 0 : item.constructor.name) === NorthArrow3DLayer.name) {
-                return item;
-            }
-            // Set "modelLayer" matrix to reflect correct z scaling.
-            return item.clone({
-                modelMatrix: m,
-            });
-        });
-        setDeckGLLayers(layers_copy);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [scaleZ]);
     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;
@@ -516,6 +451,56 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
         const infos = getPickingInfos(pickInfo, event);
         callOnMouseEvent === null || callOnMouseEvent === void 0 ? void 0 : callOnMouseEvent("click", infos, event);
     }, [callOnMouseEvent, getPickingInfos]);
+    // compute the viewport margins
+    const viewPortMargins = React.useMemo(() => {
+        if (typeof layers === "undefined") {
+            return {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            };
+        }
+        // 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 axes2DProps = axes2DLayer === null || axes2DLayer === void 0 ? void 0 : axes2DLayer.props;
+        return {
+            left: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isLeftRuler) ? axes2DProps.marginH : 0,
+            right: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isRightRuler) ? axes2DProps.marginH : 0,
+            top: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isTopRuler) ? axes2DProps.marginV : 0,
+            bottom: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isBottomRuler) ? axes2DProps.marginV : 0,
+        };
+    }, [layers]);
+    const deckGLLayers = React.useMemo(() => {
+        if (typeof layers === "undefined") {
+            return [];
+        }
+        if (layers.length === 0) {
+            // Empty layers array makes deck.gl set deckRef to undefined (no OpenGL context).
+            // Hence insert dummy layer.
+            const dummy_layer = new LineLayer({
+                id: "webviz_internal_dummy_layer",
+                visible: false,
+            });
+            layers.push(dummy_layer);
+        }
+        const m = getModelMatrixScale(scaleZ);
+        return layers.map((item) => {
+            if ((item === null || item === void 0 ? void 0 : item.constructor.name) === NorthArrow3DLayer.name) {
+                return item;
+            }
+            return item.clone({
+                // Inject "dispatchBoundingBox" function into layer for it to report back its respective bounding box.
+                // eslint-disable-next-line
+                // @ts-ignore
+                reportBoundingBox: dispatchBoundingBox,
+                // Set "modelLayer" matrix to reflect correct z scaling.
+                modelMatrix: m,
+            });
+        });
+    }, [layers, scaleZ]);
     const [isLoaded, setIsLoaded] = useState(false);
     const onAfterRender = useCallback(() => {
         if (deckGLLayers) {
@@ -552,7 +537,7 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
     }, [
         checkDatafileSchema,
         colorTables,
-        (_d = (_c = deckRef === null || deckRef === void 0 ? void 0 : deckRef.current) === null || _c === void 0 ? void 0 : _c.deck) === null || _d === void 0 ? void 0 : _d.props.layers,
+        (_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,
         isLoaded,
     ]);
     const layerFilter = useCallback((args) => {
@@ -576,7 +561,7 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
     ({ viewId, viewState }) => {
         const viewports = (views === null || views === void 0 ? void 0 : views.viewports) || [];
         if (viewState.target.length === 2) {
-            // In orthograpic mode viewState.target contains only x and y. Add existing z value.
+            // In orthographic mode viewState.target contains only x and y. Add existing z value.
             viewState.target.push(viewStates[viewId].target[2]);
         }
         const isSyncIds = viewports
@@ -625,7 +610,7 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
                 },
                 colorTables: colorTables,
             }, getCursor: ({ isDragging }) => isDragging ? "grabbing" : "default", getTooltip: getTooltip, ref: deckRef, onViewStateChange: onViewStateChange, onHover: onHover, onClick: onClick, onAfterRender: onAfterRender, effects: effects, onDragStart: onDragStart, onDragEnd: onDragEnd }, children),
-        (scale === null || scale === void 0 ? void 0 : scale.visible) ? (React.createElement(DistanceScale, Object.assign({}, scale, { zoom: (_f = (_e = viewStates[Object.keys(viewStates)[0]]) === null || _e === void 0 ? void 0 : _e.zoom) !== null && _f !== void 0 ? _f : -5, scaleUnit: coordinateUnit, style: (_g = scale.cssStyle) !== null && _g !== void 0 ? _g : {} }))) : null,
+        (scale === null || scale === void 0 ? void 0 : scale.visible) ? (React.createElement(DistanceScale, Object.assign({}, scale, { zoom: (_h = (_g = viewStates[Object.keys(viewStates)[0]]) === null || _g === void 0 ? void 0 : _g.zoom) !== null && _h !== void 0 ? _h : -5, scaleUnit: coordinateUnit, style: (_j = scale.cssStyle) !== null && _j !== void 0 ? _j : {} }))) : null,
         React.createElement(StatusIndicator, { layers: deckGLLayers, isLoaded: isLoaded }),
         (coords === null || coords === void 0 ? void 0 : coords.visible) ? React.createElement(InfoCard, { pickInfos: hoverInfo }) : null,
         errorText && (React.createElement("pre", { style: {
@@ -679,7 +664,7 @@ export function jsonToObject(data, enums = undefined) {
     return jsonConverter.convert(filtered_data);
 }
 // return viewstate with computed bounds to fit the data in viewport
-function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, viewPort, deck) {
+function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, viewPort, size) {
     var _a;
     let bounds = [0, 0, 1, 1];
     if (typeof bounds_accessor == "function") {
@@ -694,7 +679,7 @@ function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, vie
     const fb = fitBounds({ width: w, height: h, bounds });
     let fb_target = [fb.x, fb.y, z];
     let fb_zoom = fb.zoom;
-    if (deck && deck.width > 0 && deck.height > 0) {
+    if (size.width > 0 && size.height > 0) {
         // If there are margins/rulers in the viewport (axes2DLayer) we have to account for that.
         // Camera target should be in the middle of viewport minus the rulers.
         const w_bounds = w;
@@ -706,8 +691,8 @@ function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, vie
         // Subtract margins.
         const marginH = (ml > 0 ? ml : 0) + (mr > 0 ? mr : 0);
         const marginV = (mb > 0 ? mb : 0) + (mt > 0 ? mt : 0);
-        w = deck.width - marginH; // width of the viewport minus margin.
-        h = deck.height - marginV;
+        w = size.width - marginH; // width of the viewport minus margin.
+        h = size.height - marginV;
         // Special case if matrix views.
         // Use width and heigt for a subview instead of full viewport.
         if (typeof (views === null || views === void 0 ? void 0 : views.layout) !== "undefined") {
@@ -717,10 +702,10 @@ function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, vie
                 const mPixels = (_a = views === null || views === void 0 ? void 0 : views.marginPixels) !== null && _a !== void 0 ? _a : 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_ * deck.width)); //percentage of sub view
-                const marginVerPercentage = 100 * 100 * (mPixels / (h_ * deck.height));
-                const sub_w = (w_ / 100) * deck.width;
-                const sub_h = (h_ / 100) * deck.height;
+                const marginHorPercentage = 100 * 100 * (mPixels / (w_ * size.width)); //percentage of sub view
+                const marginVerPercentage = 100 * 100 * (mPixels / (h_ * size.height));
+                const sub_w = (w_ / 100) * size.width;
+                const sub_h = (h_ / 100) * size.height;
                 w = sub_w * (1 - 2 * (marginHorPercentage / 100)) - marginH;
                 h = sub_h * (1 - 2 * (marginVerPercentage / 100)) - marginV;
             }
@@ -766,7 +751,7 @@ function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, vie
 }
 ///////////////////////////////////////////////////////////////////////////////////////////
 // return viewstate with computed bounds to fit the data in viewport
-function getViewState3D(is3D, bounds, zoom, deck) {
+function getViewState3D(is3D, bounds, zoom, size) {
     const xMin = bounds[0];
     const yMin = bounds[1];
     const zMin = bounds[2];
@@ -775,9 +760,9 @@ function getViewState3D(is3D, bounds, zoom, deck) {
     const zMax = bounds[5];
     let width = xMax - xMin;
     let height = yMax - yMin;
-    if (deck && (deck === null || deck === void 0 ? void 0 : deck.width) > 0 && (deck === null || deck === void 0 ? void 0 : deck.height) > 0) {
-        width = deck.width;
-        height = deck.height;
+    if (size.width > 0 && size.height > 0) {
+        width = size.width;
+        height = size.height;
     }
     const target = [
         xMin + (xMax - xMin) / 2,
@@ -801,23 +786,22 @@ function getViewState3D(is3D, bounds, zoom, deck) {
     return view_state;
 }
 // construct views and viewStates for DeckGL component
-function createViewsAndViewStates(views, viewPortMargins, bounds, cameraPosition, boundingBox, deck) {
+function createViewsAndViewStates(views, viewPortMargins, bounds, cameraPosition, boundingBox, size) {
     var _a, _b, _c, _d;
     const deckgl_views = [];
     let viewStates = {};
     const centerOfData = boundingBoxCenter(boundingBox);
-    const widthViewPort = (_a = deck === null || deck === void 0 ? void 0 : deck.width) !== null && _a !== void 0 ? _a : 1;
-    const heightViewPort = (_b = deck === null || deck === void 0 ? void 0 : deck.height) !== null && _b !== void 0 ? _b : 1;
-    const mPixels = (_c = views === null || views === void 0 ? void 0 : views.marginPixels) !== null && _c !== void 0 ? _c : 0;
-    const isOk = deck &&
-        views &&
-        Object.keys(views).length !== 0 &&
-        views.layout[0] >= 1 &&
-        views.layout[1] >= 1 &&
+    const widthViewPort = size.width;
+    const heightViewPort = size.height;
+    const mPixels = (_a = views === null || views === void 0 ? void 0 : views.marginPixels) !== null && _a !== void 0 ? _a : 0;
+    const isOk = (views === null || views === void 0 ? void 0 : views.layout) !== undefined &&
+        ((_b = views === null || views === void 0 ? void 0 : views.layout) === null || _b === void 0 ? void 0 : _b[0]) >= 1 &&
+        ((_c = views === null || views === void 0 ? void 0 : views.layout) === null || _c === void 0 ? void 0 : _c[1]) >= 1 &&
         widthViewPort > 0 &&
         heightViewPort > 0;
-    // if props for multiple viewport are not proper, or deck is not yet initialized, return 2d view
-    if (!isOk) {
+    // if props for multiple viewport are not proper, or deck size is not yet initialized, return 2d view
+    // add redundant check on views to please lint
+    if (!views || !isOk) {
         deckgl_views.push(new OrthographicView({
             id: "main",
             controller: { doubleClickZoom: false },
@@ -829,14 +813,15 @@ function createViewsAndViewStates(views, viewPortMargins, bounds, cameraPosition
             far: +99999,
             near: -99999,
         }));
-        viewStates = Object.assign(Object.assign({}, viewStates), { ["dummy"]: {
+        viewStates["dummy"] =
+            cameraPosition !== null && cameraPosition !== void 0 ? cameraPosition : {
                 target: [0, 0],
                 zoom: 0,
                 rotationX: 0,
                 rotationOrbit: 0,
                 minZoom: minZoom2D,
                 maxZoom: maxZoom2D,
-            } });
+            };
     }
     else {
         let yPos = 0;
@@ -891,8 +876,8 @@ function createViewsAndViewStates(views, viewPortMargins, bounds, cameraPosition
                 let viewState = cameraPosition;
                 if (!isCameraPositionDefined) {
                     viewState = isBoundsDefined
-                        ? getViewState(viewPortMargins, bounds !== null && bounds !== void 0 ? bounds : [0, 0, 1, 1], centerOfData, views, currentViewport, deck)
-                        : getViewState3D((_d = currentViewport.show3D) !== null && _d !== void 0 ? _d : false, boundingBox, currentViewport.zoom, deck);
+                        ? getViewState(viewPortMargins, bounds !== null && bounds !== void 0 ? bounds : [0, 0, 1, 1], centerOfData, views, currentViewport, size)
+                        : getViewState3D((_d = currentViewport.show3D) !== null && _d !== void 0 ? _d : false, boundingBox, currentViewport.zoom, size);
                 }
                 viewStates = Object.assign(Object.assign({}, viewStates), { [currentViewport.id]: viewState });
                 xPos = xPos + w;