@webviz/subsurface-viewer 0.0.1-alpha.1

package/dist/components/Map.js

@@ -0,0 +1,867 @@
+import { JSONConfiguration, JSONConverter } from "@deck.gl/json/typed";
+import DeckGL from "@deck.gl/react/typed";
+import { OrthographicView, OrbitView, } from "@deck.gl/core/typed";
+import React, { useEffect, useState, useCallback, useRef } from "react";
+import JSON_CONVERTER_CONFIG from "../utils/configuration";
+import InfoCard from "./InfoCard";
+import DistanceScale from "./DistanceScale";
+import StatusIndicator from "./StatusIndicator";
+import fitBounds from "../utils/fit-bounds";
+import { validateColorTables, validateLayers, } from "../inputSchema/schemaValidationUtil";
+import { getLayersByType } from "../layers/utils/layerTools";
+import { getWellLayerByTypeAndSelectedWells } from "../layers/utils/layerTools";
+import { WellsLayer, Axes2DLayer, NorthArrow3DLayer } from "../layers";
+import { isEmpty, isEqual } from "lodash";
+import { cloneDeep } from "lodash";
+import { colorTables } from "@emerson-eps/color-tables";
+import { getModelMatrixScale } from "../layers/utils/layerTools";
+import { OrbitController, OrthographicController } from "@deck.gl/core/typed";
+import IntersectionView from "../views/intersectionView";
+function addBoundingBoxes(b1, b2) {
+    const boxDefault = [0, 0, 0, 1, 1, 1];
+    if (typeof b1 === "undefined" || typeof b2 === "undefined") {
+        return boxDefault;
+    }
+    if (isEqual(b1, boxDefault)) {
+        return b2;
+    }
+    const xmin = Math.min(b1[0], b2[0]);
+    const ymin = Math.min(b1[1], b2[1]);
+    const zmin = Math.min(b1[2], b2[2]);
+    const xmax = Math.max(b1[3], b2[3]);
+    const ymax = Math.max(b1[4], b2[4]);
+    const zmax = Math.max(b1[5], b2[5]);
+    return [xmin, ymin, zmin, xmax, ymax, zmax];
+}
+function boundingBoxCenter(box) {
+    const xmin = box[0];
+    const ymin = box[1];
+    const zmin = box[2];
+    const xmax = box[3];
+    const ymax = box[4];
+    const zmax = box[5];
+    return [
+        xmin + 0.5 * (xmax - xmin),
+        ymin + 0.5 * (ymax - ymin),
+        zmin + 0.5 * (zmax - zmin),
+    ];
+}
+export function useHoverInfo() {
+    const [hoverInfo, setHoverInfo] = React.useState([]);
+    const callback = React.useCallback((pickEvent) => {
+        setHoverInfo(pickEvent.infos);
+    }, []);
+    return [hoverInfo, callback];
+}
+function defaultTooltip(info) {
+    var _a, _b, _c;
+    if (info === null || info === void 0 ? void 0 : info.logName) {
+        return info === null || info === void 0 ? void 0 : info.logName;
+    }
+    else if (((_a = info.layer) === null || _a === void 0 ? void 0 : _a.id) === "drawing-layer") {
+        return (_b = info.propertyValue) === null || _b === void 0 ? void 0 : _b.toFixed(2);
+    }
+    const feat = info.object;
+    return (_c = feat === null || feat === void 0 ? void 0 : feat.properties) === null || _c === void 0 ? void 0 : _c["name"];
+}
+function adjustCameraTarget(viewStates, scale, newScale) {
+    const vs = cloneDeep(viewStates);
+    for (const key in vs) {
+        if (typeof vs[key].target !== "undefined") {
+            const t = vs[key].target;
+            const z = newScale * (t[2] / scale);
+            vs[key].target = [t[0], t[1], z];
+        }
+    }
+    return vs;
+}
+const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTables, setEditedData, checkDatafileSchema, onMouseEvent, selection, children, getTooltip = defaultTooltip, cameraPosition, getCameraPosition, triggerHome, triggerResetMultipleWells, }) => {
+    var _a, _b, _c, _d, _e;
+    const isCameraPositionDefined = typeof cameraPosition !== "undefined" &&
+        Object.keys(cameraPosition).length !== 0;
+    const deckRef = useRef(null);
+    const bboxInitial = [0, 0, 0, 1, 1, 1];
+    const boundsInitial = React.useMemo(() => bounds !== null && bounds !== void 0 ? bounds : [0, 0, 1, 1], [bounds]);
+    // state for views prop of DeckGL component
+    const [viewsProps, setViewsProps] = useState([]);
+    const [alteredLayers, setAlteredLayers] = useState([]);
+    const [viewPortMargins, setViewPortMargins] = useState({
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+    });
+    const [didUserChangeCamera, setDidUserChangeCamera] = useState(false);
+    const [reportedBoundingBox, setReportedBoundingBox] = useState(bboxInitial);
+    const [reportedBoundingBoxAcc, setReportedBoundingBoxAcc] = useState(bboxInitial);
+    const initialViewState = getViewState(viewPortMargins, boundsInitial, boundingBoxCenter(reportedBoundingBoxAcc), views, 0, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck);
+    // Local help function.
+    const calcDefaultViewStates = useCallback((boundingBox, input) => {
+        const center = boundingBoxCenter(boundingBox // note this may include axesLayer
+        );
+        const updatedViewProps = input ? input : viewsProps;
+        const isBoundsDefined = typeof bounds !== "undefined";
+        const viewStateMap = updatedViewProps.map((item, index) => {
+            var _a, _b, _c, _d, _e, _f;
+            const is3D = (_c = (_b = (_a = views === null || views === void 0 ? void 0 : views.viewports) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.show3D) !== null && _c !== void 0 ? _c : false;
+            const viewState = isBoundsDefined
+                ? getViewState(viewPortMargins, boundsInitial, center, views, index, (_d = deckRef.current) === null || _d === void 0 ? void 0 : _d.deck)
+                : getViewState3D(is3D, boundingBox, (_e = views === null || views === void 0 ? void 0 : views.viewports) === null || _e === void 0 ? void 0 : _e[index].zoom, (_f = deckRef.current) === null || _f === void 0 ? void 0 : _f.deck);
+            const minZoom = is3D ? -12 : -12;
+            const maxZoom = is3D ? +12 : +4;
+            return [item.id, Object.assign(Object.assign({}, viewState), { minZoom, maxZoom })];
+        });
+        const tempViewStates = Object.fromEntries(viewStateMap);
+        setDidUserChangeCamera(false);
+        setViewStates(tempViewStates);
+    }, [bounds, boundsInitial, views, viewPortMargins, viewsProps]);
+    // set initial view state based on supplied bounds and zoom in viewState
+    const [viewStates, setViewStates] = useState({
+        "main-view_2D": cameraPosition !== null && cameraPosition !== void 0 ? cameraPosition : {},
+    });
+    const [firstViewStateId, setFirstViewStatesId] = useState("main-view_2D");
+    useEffect(() => {
+        let tempViewStates = {};
+        if (isCameraPositionDefined) {
+            tempViewStates = Object.fromEntries(viewsProps.map((item) => [item.id, cameraPosition]));
+        }
+        else {
+            const isBoundsDefined = typeof bounds !== "undefined";
+            tempViewStates = Object.fromEntries(viewsProps.map((item, index) => {
+                var _a, _b, _c, _d, _e, _f;
+                let viewState = viewStates[item.id];
+                if (typeof viewState === "undefined") {
+                    viewState = isBoundsDefined
+                        ? getViewState(viewPortMargins, boundsInitial, boundingBoxCenter(reportedBoundingBoxAcc), views, index, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck)
+                        : getViewState3D((_d = (_c = (_b = views === null || views === void 0 ? void 0 : views.viewports) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.show3D) !== null && _d !== void 0 ? _d : false, reportedBoundingBoxAcc, (_e = views === null || views === void 0 ? void 0 : views.viewports) === null || _e === void 0 ? void 0 : _e[index].zoom, (_f = deckRef.current) === null || _f === void 0 ? void 0 : _f.deck);
+                }
+                return [item.id, viewState];
+            }));
+        }
+        if (viewsProps[0] !== undefined) {
+            setFirstViewStatesId(viewsProps[0].id);
+        }
+        setViewStates(tempViewStates);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        boundsInitial,
+        cameraPosition,
+        isCameraPositionDefined,
+        viewPortMargins,
+        views === null || views === void 0 ? void 0 : views.viewports,
+        viewsProps,
+    ]);
+    // calculate view state on deckgl context load (based on viewport size)
+    const onLoad = useCallback(() => {
+        let tempViewStates = {};
+        if (isCameraPositionDefined) {
+            tempViewStates = Object.fromEntries(viewsProps.map((item) => [item.id, cameraPosition]));
+        }
+        else {
+            tempViewStates = Object.fromEntries(viewsProps.map((item, index) => {
+                var _a;
+                return [
+                    item.id,
+                    getViewState(viewPortMargins, boundsInitial, boundingBoxCenter(reportedBoundingBoxAcc), views, index, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck),
+                ];
+            }));
+            if (viewsProps[0] !== undefined) {
+                setFirstViewStatesId(viewsProps[0].id);
+            }
+            setViewStates(tempViewStates);
+        }
+    }, [
+        isCameraPositionDefined,
+        viewsProps,
+        cameraPosition,
+        viewPortMargins,
+        boundsInitial,
+        reportedBoundingBoxAcc,
+        views,
+    ]);
+    useEffect(() => {
+        if (typeof triggerHome !== "undefined") {
+            calcDefaultViewStates(reportedBoundingBoxAcc);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [triggerHome]);
+    useEffect(() => {
+        const union_of_reported_bboxes = addBoundingBoxes(reportedBoundingBoxAcc, reportedBoundingBox);
+        setReportedBoundingBoxAcc(union_of_reported_bboxes);
+        // If "bounds" or "cameraPosition" is not defined "viewState" will be
+        // calculated based on the union of the reported bounding boxes from each layer.
+        if (!didUserChangeCamera && !isCameraPositionDefined) {
+            calcDefaultViewStates(union_of_reported_bboxes);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [reportedBoundingBox]);
+    // react on bounds prop change
+    useEffect(() => {
+        const isBoundsDefined = typeof bounds !== "undefined";
+        let tempViewStates = {};
+        if (!isCameraPositionDefined) {
+            tempViewStates = Object.fromEntries(viewsProps.map((item, index) => {
+                var _a, _b, _c, _d, _e, _f;
+                return [
+                    item.id,
+                    isBoundsDefined
+                        ? getViewState(viewPortMargins, boundsInitial, boundingBoxCenter(reportedBoundingBoxAcc), views, index, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck)
+                        : getViewState3D((_d = (_c = (_b = views === null || views === void 0 ? void 0 : views.viewports) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.show3D) !== null && _d !== void 0 ? _d : false, reportedBoundingBoxAcc, (_e = views === null || views === void 0 ? void 0 : views.viewports) === null || _e === void 0 ? void 0 : _e[index].zoom, (_f = deckRef.current) === null || _f === void 0 ? void 0 : _f.deck),
+                ];
+            }));
+            if (viewsProps[0] !== undefined) {
+                setFirstViewStatesId(viewsProps[0].id);
+            }
+            setViewStates(tempViewStates);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [boundsInitial, cameraPosition, views === null || views === void 0 ? void 0 : views.viewports, viewsProps]);
+    // react on cameraPosition prop change
+    useEffect(() => {
+        let tempViewStates = {};
+        if (isCameraPositionDefined) {
+            tempViewStates = Object.fromEntries(viewsProps.map((item) => [item.id, cameraPosition]));
+            setViewStates(tempViewStates);
+            if (viewsProps[0] !== undefined) {
+                setFirstViewStatesId(viewsProps[0].id);
+            }
+        }
+        if (cameraPosition === null) {
+            tempViewStates = Object.fromEntries(viewsProps.map((item) => [item.id, initialViewState]));
+            setViewStates(tempViewStates);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cameraPosition, viewsProps]);
+    // Used for scaling in z direction using arrow keys.
+    const [scaleZ, setScaleZ] = useState(1);
+    const [scaleZUp, setScaleZUp] = useState(1);
+    const [scaleZDown, setScaleZDown] = useState(1);
+    const scaleUpFunction = () => {
+        setScaleZUp(Math.random());
+    };
+    const scaleDownFunction = () => {
+        setScaleZDown(Math.random());
+    };
+    useEffect(() => {
+        const newScaleZ = scaleZ * 1.05;
+        setScaleZ(newScaleZ);
+        // Make camera target follow the scaling.
+        const vs = adjustCameraTarget(viewStates, scaleZ, newScaleZ);
+        setViewStates(vs);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scaleZUp]);
+    useEffect(() => {
+        const newScaleZ = scaleZ * 0.95;
+        setScaleZ(newScaleZ);
+        // Make camera target follow the scaling.
+        const vs = adjustCameraTarget(viewStates, scaleZ, newScaleZ);
+        setViewStates(vs);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scaleZDown]);
+    useEffect(() => {
+        const viewProps = getViews(views);
+        setViewsProps(viewProps);
+        if (!bounds) {
+            calcDefaultViewStates(reportedBoundingBoxAcc);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [views]);
+    useEffect(() => {
+        if (layers == undefined)
+            return;
+        // 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 m = getModelMatrixScale(scaleZ);
+        const layers_copy = layers.map((item) => {
+            if ((item === null || item === void 0 ? void 0 : item.constructor.name) === NorthArrow3DLayer.name)
+                return item;
+            const layer = item;
+            // Set "modelLayer" matrix to reflect correct z scaling.
+            const scaledLayer = layer.clone({ modelMatrix: m });
+            // Inject "setReportedBoundingBox" function into layer for it to report
+            // back its respective bounding box.
+            const boundedLayer = scaledLayer.clone({
+                setReportedBoundingBox: setReportedBoundingBox,
+            });
+            return boundedLayer !== null && boundedLayer !== void 0 ? boundedLayer : scaledLayer;
+        });
+        setAlteredLayers(layers_copy);
+    }, [scaleZ, layers /*dispatch*/]);
+    const [deckGLLayers, setDeckGLLayers] = useState([]);
+    useEffect(() => {
+        setDeckGLLayers(alteredLayers);
+    }, [alteredLayers]);
+    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;
+        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);
+        }
+    }, [selection]);
+    // multiple well layers
+    const [multipleWells, setMultipleWells] = useState([]);
+    const [selectedWell, setSelectedWell] = useState("");
+    const [shiftHeld, setShiftHeld] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function downHandler({ key }) {
+        if (key === "Shift") {
+            setShiftHeld(true);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function upHandler({ key }) {
+        if (key === "Shift") {
+            setShiftHeld(false);
+        }
+    }
+    useEffect(() => {
+        window.addEventListener("keydown", downHandler);
+        window.addEventListener("keyup", upHandler);
+        return () => {
+            window.removeEventListener("keydown", downHandler);
+            window.removeEventListener("keyup", upHandler);
+        };
+    }, []);
+    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;
+        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);
+        }
+    }, [multipleWells, selectedWell]);
+    useEffect(() => {
+        if (typeof triggerResetMultipleWells !== "undefined") {
+            setMultipleWells([]);
+        }
+    }, [triggerResetMultipleWells]);
+    const getPickingInfos = useCallback((pickInfo, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    event) => {
+        var _a;
+        if ((coords === null || coords === void 0 ? void 0 : coords.multiPicking) && ((_a = pickInfo.layer) === null || _a === void 0 ? void 0 : _a.context.deck)) {
+            const pickInfos = pickInfo.layer.context.deck.pickMultipleObjects({
+                x: event.offsetCenter.x,
+                y: event.offsetCenter.y,
+                depth: coords.pickDepth ? coords.pickDepth : undefined,
+            });
+            pickInfos.forEach((item) => {
+                var _a, _b;
+                if (item.properties) {
+                    let unit = (_b = (_a = item.sourceLayer) === null || _a === void 0 ? void 0 : _a.props.data) === null || _b === void 0 ? void 0 : _b.unit;
+                    if (unit == undefined)
+                        unit = " ";
+                    item.properties.forEach((element) => {
+                        if (element.name.includes("MD") ||
+                            element.name.includes("TVD")) {
+                            element.value =
+                                Number(element.value)
+                                    .toFixed(2)
+                                    .toString() +
+                                    " " +
+                                    unit;
+                        }
+                    });
+                }
+            });
+            return pickInfos;
+        }
+        return [pickInfo];
+    }, [coords === null || coords === void 0 ? void 0 : coords.multiPicking, coords === null || coords === void 0 ? void 0 : coords.pickDepth]);
+    /**
+     * call onMouseEvent callback
+     */
+    const callOnMouseEvent = useCallback((type, infos, event) => {
+        if (!onMouseEvent)
+            return;
+        const ev = handleMouseEvent(type, infos, event);
+        onMouseEvent(ev);
+    }, [onMouseEvent]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [hoverInfo, setHoverInfo] = useState([]);
+    const onHover = useCallback((pickInfo, event) => {
+        const infos = getPickingInfos(pickInfo, event);
+        setHoverInfo(infos); //  for InfoCard pickInfos
+        callOnMouseEvent === null || callOnMouseEvent === void 0 ? void 0 : callOnMouseEvent("hover", infos, event);
+    }, [callOnMouseEvent, getPickingInfos]);
+    const onClick = useCallback((pickInfo, event) => {
+        const infos = getPickingInfos(pickInfo, event);
+        callOnMouseEvent === null || callOnMouseEvent === void 0 ? void 0 : callOnMouseEvent("click", infos, event);
+    }, [callOnMouseEvent, getPickingInfos]);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const onAfterRender = useCallback(() => {
+        if (deckGLLayers) {
+            const state = deckGLLayers.every((layer) => layer.isLoaded);
+            setIsLoaded(state);
+        }
+    }, [deckGLLayers]);
+    // 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;
+        // this ensures to validate the schemas only once
+        if (checkDatafileSchema && layers && isLoaded) {
+            try {
+                validateLayers(layers);
+                colorTables && validateColorTables(colorTables);
+            }
+            catch (e) {
+                setErrorText(String(e));
+            }
+        }
+        else
+            setErrorText(undefined);
+    }, [
+        checkDatafileSchema,
+        colorTables,
+        (_c = (_b = deckRef === null || deckRef === void 0 ? void 0 : deckRef.current) === null || _b === void 0 ? void 0 : _b.deck) === null || _c === void 0 ? void 0 : _c.props.layers,
+        isLoaded,
+    ]);
+    const layerFilter = useCallback((args) => {
+        // display all the layers if views are not specified correctly
+        if (!views || !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) && cur_view.layerIds.length > 0) {
+            const layer_ids = cur_view.layerIds;
+            return layer_ids.some((layer_id) => {
+                const t = layer_id === args.layer.id;
+                return t;
+            });
+        }
+        else {
+            return true;
+        }
+    }, [views]);
+    const onViewStateChange = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ({ viewId, viewState }) => {
+        var _a;
+        const viewports = (views === null || views === void 0 ? void 0 : views.viewports) || [];
+        const isSyncIds = viewports
+            .filter((item) => item.isSync)
+            .map((item) => item.id);
+        if (isSyncIds === null || isSyncIds === void 0 ? void 0 : isSyncIds.includes(viewId)) {
+            const viewStateTable = views === null || views === void 0 ? void 0 : views.viewports.filter((item) => item.isSync).map((item) => [item.id, viewState]);
+            const tempViewStates = Object.fromEntries(viewStateTable !== null && viewStateTable !== void 0 ? viewStateTable : []);
+            setViewStates((currentViewStates) => (Object.assign(Object.assign({}, currentViewStates), tempViewStates)));
+        }
+        else {
+            setViewStates((currentViewStates) => (Object.assign(Object.assign({}, currentViewStates), { [viewId]: viewState })));
+        }
+        if (getCameraPosition) {
+            getCameraPosition(viewState);
+        }
+        setFirstViewStatesId((_a = viewsProps[0]) === null || _a === void 0 ? void 0 : _a.id);
+        setDidUserChangeCamera(true);
+    }, [getCameraPosition, views === null || views === void 0 ? void 0 : views.viewports, viewsProps]);
+    const deckGLViews = React.useMemo(() => {
+        var _a;
+        return createViews(views, scaleUpFunction, scaleDownFunction, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [views, views, (_d = deckRef.current) === null || _d === void 0 ? void 0 : _d.deck]);
+    if (!deckGLViews || isEmpty(deckGLViews) || isEmpty(deckGLLayers))
+        return null;
+    return (React.createElement("div", { onContextMenu: (event) => event.preventDefault() },
+        React.createElement(DeckGL, { id: id, viewState: viewStates, views: deckGLViews, layerFilter: layerFilter, layers: deckGLLayers, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            userData: {
+                setEditedData: (updated_prop) => {
+                    setSelectedWell(updated_prop["selectedWell"]);
+                    if (Object.keys(updated_prop).includes("selectedWell")) {
+                        if (shiftHeld) {
+                            if (multipleWells.includes(updated_prop["selectedWell"])) {
+                                const temp = multipleWells.filter((item) => item !==
+                                    updated_prop["selectedWell"]);
+                                setMultipleWells(temp);
+                            }
+                            else {
+                                const temp = multipleWells.concat(updated_prop["selectedWell"]);
+                                setMultipleWells(temp);
+                            }
+                        }
+                        else {
+                            setMultipleWells([]);
+                        }
+                    }
+                    setEditedData === null || setEditedData === void 0 ? void 0 : setEditedData(updated_prop);
+                },
+                colorTables: colorTables,
+            }, getCursor: ({ isDragging }) => isDragging ? "grabbing" : "default", getTooltip: getTooltip, ref: deckRef, onViewStateChange: onViewStateChange, onHover: onHover, onClick: onClick, onLoad: onLoad, onAfterRender: onAfterRender }, children),
+        (scale === null || scale === void 0 ? void 0 : scale.visible) ? (React.createElement(DistanceScale, Object.assign({}, scale, { zoom: viewStates[firstViewStateId] === undefined
+                ? -5
+                : viewStates[firstViewStateId].zoom, scaleUnit: coordinateUnit, style: (_e = scale.cssStyle) !== null && _e !== void 0 ? _e : {} }))) : 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: {
+                flex: "0, 0",
+                color: "rgb(255, 64, 64)",
+                backgroundColor: "rgb(255, 255, 192)",
+            } }, errorText))));
+};
+Map.defaultProps = {
+    coords: {
+        visible: true,
+        multiPicking: true,
+        pickDepth: 10,
+    },
+    scale: {
+        visible: true,
+        incrementValue: 100,
+        widthPerUnit: 100,
+        cssStyle: { top: 10, left: 10 },
+    },
+    toolbar: {
+        visible: false,
+    },
+    coordinateUnit: "m",
+    views: {
+        layout: [1, 1],
+        showLabel: false,
+        viewports: [{ id: "main-view", show3D: false, layerIds: [] }],
+    },
+    colorTables: colorTables,
+    checkDatafileSchema: false,
+};
+export default Map;
+// ------------- Helper functions ---------- //
+// Add the resources as an enum in the Json Configuration and then convert the spec to actual objects.
+// See https://deck.gl/docs/api-reference/json/overview for more details.
+export function jsonToObject(data, enums = undefined) {
+    if (!data)
+        return [];
+    const configuration = new JSONConfiguration(JSON_CONVERTER_CONFIG);
+    enums === null || enums === void 0 ? void 0 : enums.forEach((enumeration) => {
+        if (enumeration) {
+            configuration.merge({
+                enumerations: Object.assign({}, enumeration),
+            });
+        }
+    });
+    const jsonConverter = new JSONConverter({ configuration });
+    // remove empty data/layer object
+    const filtered_data = data.filter((value) => Object.keys(value).length !== 0);
+    return jsonConverter.convert(filtered_data);
+}
+// return viewstate with computed bounds to fit the data in viewport
+function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, viewPortIndex, deck) {
+    var _a, _b, _c, _d, _e;
+    let bounds = [0, 0, 1, 1];
+    if (typeof bounds_accessor == "function") {
+        bounds = bounds_accessor();
+    }
+    else {
+        bounds = bounds_accessor;
+    }
+    let w = bounds[2] - bounds[0]; // right - left
+    let h = bounds[3] - bounds[1]; // top - bottom
+    const z = centerOfData[2];
+    const fb = fitBounds({ width: w, height: h, bounds });
+    let fb_target = [fb.x, fb.y, z];
+    let fb_zoom = fb.zoom;
+    if (deck) {
+        // 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;
+        const h_bounds = h;
+        const ml = viewPortMargins.left;
+        const mr = viewPortMargins.right;
+        const mb = viewPortMargins.bottom;
+        const mt = viewPortMargins.top;
+        // 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;
+        // 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") {
+            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 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;
+                w = sub_w * (1 - 2 * (marginHorPercentage / 100)) - marginH;
+                h = sub_h * (1 - 2 * (marginVerPercentage / 100)) - marginV;
+            }
+        }
+        const port_aspect = h / w;
+        const bounds_aspect = h_bounds / w_bounds;
+        const m_pr_pixel = bounds_aspect > port_aspect ? h_bounds / h : w_bounds / w;
+        let translate_x = 0;
+        if (ml > 0 && mr === 0) {
+            // left margin and no right margin
+            translate_x = 0.5 * ml * m_pr_pixel;
+        }
+        else if (ml === 0 && mr > 0) {
+            // no left margin but  right margin
+            translate_x = -0.5 * mr * m_pr_pixel;
+        }
+        let translate_y = 0;
+        if (mb > 0 && mt === 0) {
+            translate_y = 0.5 * mb * m_pr_pixel;
+        }
+        else if (mb === 0 && mt > 0) {
+            translate_y = -0.5 * mt * m_pr_pixel;
+        }
+        const fb = fitBounds({ width: w, height: h, bounds });
+        fb_target = [fb.x - translate_x, fb.y - translate_y, z];
+        fb_zoom = fb.zoom;
+    }
+    const target = (_c = (_b = views === null || views === void 0 ? void 0 : views.viewports) === null || _b === void 0 ? void 0 : _b[viewPortIndex]) === null || _c === void 0 ? void 0 : _c.target;
+    const zoom = (_e = (_d = views === null || views === void 0 ? void 0 : views.viewports) === null || _d === void 0 ? void 0 : _d[viewPortIndex]) === null || _e === void 0 ? void 0 : _e.zoom;
+    const target_ = target !== null && target !== void 0 ? target : fb_target;
+    const zoom_ = zoom !== null && zoom !== void 0 ? zoom : fb_zoom;
+    const view_state = {
+        target: target_,
+        zoom: zoom_,
+        rotationX: 90,
+        rotationOrbit: 0,
+    };
+    return view_state;
+}
+///////////////////////////////////////////////////////////////////////////////////////////
+// return viewstate with computed bounds to fit the data in viewport
+function getViewState3D(is3D, bounds, zoom, deck) {
+    const xMin = bounds[0];
+    const yMin = bounds[1];
+    const zMin = bounds[2];
+    const xMax = bounds[3];
+    const yMax = bounds[4];
+    const zMax = bounds[5];
+    let width = xMax - xMin;
+    let height = yMax - yMin;
+    if (deck) {
+        width = deck.width;
+        height = deck.height;
+    }
+    const target = [
+        xMin + (xMax - xMin) / 2,
+        yMin + (yMax - yMin) / 2,
+        is3D ? zMin + (zMax - zMin) / 2 : 0,
+    ];
+    const bounds2D = [xMin, yMin, xMax, yMax];
+    const fitted_bound = fitBounds({
+        width,
+        height,
+        bounds: bounds2D,
+    });
+    const view_state = {
+        target,
+        zoom: zoom !== null && zoom !== void 0 ? zoom : fitted_bound.zoom * 1.2,
+        rotationX: 45,
+        rotationOrbit: 0,
+    };
+    return view_state;
+}
+// construct views object for DeckGL component
+function createViews(views, scaleUpFunction, scaleDownFunction, deck) {
+    var _a;
+    // Use modified controller to handle key events.
+    class ZScaleOrbitController extends OrbitController {
+        handleEvent(event) {
+            if (event.type === "keydown" && event.key === "ArrowUp") {
+                scaleUpFunction();
+                return true;
+            }
+            else if (event.type === "keydown" && event.key === "ArrowDown") {
+                scaleDownFunction();
+                return true;
+            }
+            return super.handleEvent(event);
+        }
+    }
+    const deckgl_views = [];
+    const widthViewPort = deck === null || deck === void 0 ? void 0 : deck.width;
+    const heightViewPort = deck === null || deck === void 0 ? void 0 : deck.height;
+    const isDeckDefined = typeof widthViewPort !== "undefined" &&
+        typeof heightViewPort !== "undefined";
+    const mPixels = (_a = views === null || views === void 0 ? void 0 : views.marginPixels) !== null && _a !== void 0 ? _a : 0;
+    // if props for multiple viewport are not proper, return 2d view
+    if (!views || !views.viewports || !views.layout || !isDeckDefined) {
+        deckgl_views.push(new OrthographicView({
+            id: "main",
+            controller: { doubleClickZoom: false },
+            x: "0%",
+            y: "0%",
+            width: "100%",
+            height: "100%",
+            flipY: false,
+            far: +99999,
+            near: -99999,
+        }));
+    }
+    else {
+        let yPos = 0;
+        const [nY, nX] = views.layout;
+        const w = 99.5 / nX; // Using 99.5% of viewport to avoid flickering of deckgl canvas
+        const h = 99.5 / nY;
+        const singleView = nX === 1 && nY === 1;
+        const marginHorPercentage = singleView // percentage of sub view
+            ? 0
+            : 100 * 100 * (mPixels / (w * widthViewPort));
+        const marginVerPercentage = singleView
+            ? 0
+            : 100 * 100 * (mPixels / (h * heightViewPort));
+        for (let y = 1; y <= nY; y++) {
+            let xPos = 0;
+            for (let x = 1; x <= nX; x++) {
+                if (views.viewports == undefined ||
+                    deckgl_views.length >= views.viewports.length) {
+                    return deckgl_views;
+                }
+                const currentViewport = views.viewports[deckgl_views.length];
+                const ViewType = currentViewport.show3D
+                    ? OrbitView
+                    : currentViewport.id === "intersection_view"
+                        ? IntersectionView
+                        : OrthographicView;
+                const far = 9999;
+                const near = currentViewport.show3D ? 0.1 : -9999;
+                const Controller = currentViewport.show3D
+                    ? ZScaleOrbitController
+                    : OrthographicController;
+                const controller = {
+                    type: Controller,
+                    doubleClickZoom: false,
+                };
+                deckgl_views.push(new ViewType({
+                    id: currentViewport.id,
+                    controller: controller,
+                    x: xPos + marginHorPercentage / nX + "%",
+                    y: yPos + marginVerPercentage / nY + "%",
+                    width: w * (1 - 2 * (marginHorPercentage / 100)) + "%",
+                    height: h * (1 - 2 * (marginVerPercentage / 100)) + "%",
+                    flipY: false,
+                    far,
+                    near,
+                }));
+                xPos = xPos + w;
+            }
+            yPos = yPos + h;
+        }
+    }
+    return deckgl_views;
+}
+// construct views object for DeckGL component
+function getViews(views) {
+    const deckgl_views = [];
+    // if props for multiple viewport are not proper, return 2d view
+    if (!views || !views.viewports || !views.layout) {
+        deckgl_views.push({
+            id: "main",
+        });
+    }
+    else {
+        const [nY, nX] = views.layout;
+        for (let y = 1; y <= nY; y++) {
+            for (let x = 1; x <= nX; x++) {
+                if (views.viewports == undefined ||
+                    deckgl_views.length >= views.viewports.length)
+                    return deckgl_views;
+                const cur_viewport = views.viewports[deckgl_views.length];
+                deckgl_views.push({
+                    id: cur_viewport.id,
+                });
+            }
+        }
+    }
+    return deckgl_views;
+}
+function handleMouseEvent(type, infos, event) {
+    var _a;
+    const ev = {
+        type: type,
+        infos: infos,
+    };
+    if (ev.type === "click") {
+        if (event.rightButton)
+            ev.type = "contextmenu";
+    }
+    for (const info of infos) {
+        if (info.coordinate) {
+            ev.x = info.coordinate[0];
+            ev.y = info.coordinate[1];
+        }
+        if (info.layer && info.layer.id === "wells-layer") {
+            // info.object is Feature or WellLog;
+            {
+                // try to use Object info (see DeckGL getToolTip callback)
+                const feat = info.object;
+                const properties = feat === null || feat === void 0 ? void 0 : feat.properties;
+                if (properties) {
+                    ev.wellname = properties["name"];
+                    ev.wellcolor = properties["color"];
+                }
+            }
+            if (!ev.wellname)
+                if (info.object) {
+                    ev.wellname = (_a = info.object.header) === null || _a === void 0 ? void 0 : _a["well"]; // object is WellLog
+                }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (info.properties) {
+                for (const property of info.properties) {
+                    if (!ev.wellcolor)
+                        ev.wellcolor = property.color;
+                    let propname = property.name;
+                    if (propname) {
+                        const sep = propname.indexOf(" ");
+                        if (sep >= 0) {
+                            if (!ev.wellname) {
+                                ev.wellname = propname.substring(sep + 1);
+                            }
+                            propname = propname.substring(0, sep);
+                        }
+                    }
+                    const names_md = [
+                        "DEPTH",
+                        "DEPT",
+                        "MD" /*Measured Depth*/,
+                        "TDEP" /*"Tool DEPth"*/,
+                        "MD_RKB" /*Rotary Relly Bushing*/,
+                    ]; // aliases for MD
+                    const names_tvd = [
+                        "TVD" /*True Vertical Depth*/,
+                        "TVDSS" /*SubSea*/,
+                        "DVER" /*"VERtical Depth"*/,
+                        "TVD_MSL" /*below Mean Sea Level*/,
+                    ]; // aliases for MD
+                    if (names_md.find((name) => name == propname))
+                        ev.md = parseFloat(property.value);
+                    else if (names_tvd.find((name) => name == propname))
+                        ev.tvd = parseFloat(property.value);
+                    if (ev.md !== undefined &&
+                        ev.tvd !== undefined &&
+                        ev.wellname !== undefined)
+                        break;
+                }
+            }
+            break;
+        }
+    }
+    return ev;
+}
+//# sourceMappingURL=Map.js.map