@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/SubsurfaceViewer.tsx

@@ -0,0 +1,356 @@
+import { LayersList, Layer } from "@deck.gl/core/typed";
+import Map, {
+    ViewsType,
+    TooltipCallback,
+    ViewStateType,
+    BoundsAccessor,
+} from "./components/Map";
+import { MapMouseEvent, jsonToObject } from "./components/Map";
+import React from "react";
+import PropTypes from "prop-types";
+import { colorTablesArray } from "@emerson-eps/color-tables/";
+import convert, { Unit } from "convert-units";
+
+export interface SubsurfaceViewerProps {
+    id: string;
+    resources?: Record<string, unknown>;
+    layers?: Record<string, unknown>[] | LayersList;
+    bounds?: [number, number, number, number] | BoundsAccessor;
+    views?: ViewsType;
+    coords?: {
+        visible?: boolean | null;
+        multiPicking?: boolean | null;
+        pickDepth?: number | null;
+    };
+    scale?: {
+        visible?: boolean | null;
+        incrementValue?: number | null;
+        widthPerUnit?: number | null;
+        cssStyle?: Record<string, unknown> | null;
+    };
+    coordinateUnit?: Unit;
+    toolbar?: {
+        visible?: boolean | null;
+    };
+    legend?: {
+        visible?: boolean | null;
+        cssStyle?: Record<string, unknown> | null;
+        horizontal?: boolean | null;
+    };
+    colorTables?: colorTablesArray;
+    editedData?: Record<string, unknown>;
+    setProps?: (data: Record<string, unknown>) => void;
+
+    /**
+     * Validate JSON datafile against schema
+     */
+    checkDatafileSchema?: boolean;
+
+    /**
+     * For get mouse events
+     */
+    onMouseEvent?: (event: MapMouseEvent) => void;
+
+    getCameraPosition?: (input: ViewStateType) => void;
+
+    /**
+     * If changed will reset camera to default position.
+     */
+    triggerHome?: number;
+    triggerResetMultipleWells?: number;
+    /**
+     * Range selection of the current well
+     */
+    selection?: {
+        well: string | undefined;
+        selection: [number | undefined, number | undefined] | undefined;
+    };
+
+    /**
+     * Override default tooltip with a callback.
+     */
+    getTooltip?: TooltipCallback;
+    cameraPosition?: ViewStateType | undefined;
+
+    children?: React.ReactNode;
+}
+
+const SubsurfaceViewer: React.FC<SubsurfaceViewerProps> = ({
+    id,
+    resources,
+    layers,
+    bounds,
+    views,
+    coords,
+    scale,
+    coordinateUnit,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    legend,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    toolbar,
+    colorTables,
+    editedData,
+    setProps,
+    checkDatafileSchema,
+    onMouseEvent,
+    selection,
+    getTooltip,
+    cameraPosition,
+    getCameraPosition,
+    triggerHome,
+    triggerResetMultipleWells,
+    children,
+}: SubsurfaceViewerProps) => {
+    // Contains layers data received from map layers by user interaction
+    const [layerEditedData, setLayerEditedData] = React.useState(editedData);
+
+    const [layerInstances, setLayerInstances] = React.useState<LayersList>([]);
+
+    React.useEffect(() => {
+        if (!layers) {
+            setLayerInstances([]);
+            return;
+        }
+
+        if (layers?.[0] instanceof Layer) {
+            setLayerInstances(layers as LayersList);
+            return;
+        }
+
+        const enumerations: Record<string, unknown>[] = [];
+        if (resources) enumerations.push({ resources: resources });
+        if (editedData) enumerations.push({ editedData: editedData });
+        else enumerations.push({ editedData: {} });
+        const layersList = jsonToObject(
+            layers as Record<string, unknown>[],
+            enumerations
+        ) as LayersList;
+        setLayerInstances(layersList);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [layers]); // Note. Fixing this dependency list may cause infinite recursion.
+    React.useEffect(() => {
+        if (!editedData) return;
+
+        setLayerEditedData({
+            ...layerEditedData,
+            ...editedData,
+        });
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editedData]); // Note. Fixing this dependency list may cause infinite recursion.
+
+    // This callback is used as a mechanism to update the component from the layers or toolbar.
+    // The changes done in a layer, for example, are bundled into a patch
+    // and sent to the parent component via setProps. (See layers/utils/layerTools.ts)
+    const setEditedData = React.useCallback(
+        (data: Record<string, unknown>) => {
+            if (setProps == undefined) return;
+            setProps({
+                editedData: {
+                    ...layerEditedData,
+                    ...data,
+                },
+            });
+        },
+        [setProps, layerEditedData]
+    );
+
+    if (coordinateUnit && !convert().possibilities().includes(coordinateUnit)) {
+        console.error(
+            `Invalid coordinate unit: '${coordinateUnit}'. Valid units are: ${convert().possibilities()}`
+        );
+        coordinateUnit = undefined;
+    }
+
+    return (
+        <Map
+            id={id}
+            layers={layerInstances}
+            bounds={bounds}
+            views={views}
+            coords={coords}
+            scale={scale}
+            coordinateUnit={coordinateUnit as Unit}
+            colorTables={colorTables}
+            setEditedData={setEditedData}
+            checkDatafileSchema={checkDatafileSchema}
+            onMouseEvent={onMouseEvent}
+            selection={selection}
+            getTooltip={getTooltip}
+            cameraPosition={cameraPosition}
+            getCameraPosition={getCameraPosition}
+            triggerHome={triggerHome}
+            triggerResetMultipleWells={triggerResetMultipleWells}
+        >
+            {children}
+        </Map>
+    );
+};
+
+SubsurfaceViewer.defaultProps = {
+    views: {
+        layout: [1, 1],
+        marginPixels: 0,
+        showLabel: false,
+        viewports: [{ id: "main-view", show3D: false, layerIds: [] }],
+    },
+    checkDatafileSchema: false,
+};
+
+SubsurfaceViewer.propTypes = {
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id: PropTypes.string.isRequired,
+
+    /**
+     * Resource dictionary made available in the DeckGL specification as an enum.
+     * The values can be accessed like this: `"@@#resources.resourceId"`, where
+     * `resourceId` is the key in the `resources` dict. For more information,
+     * see the DeckGL documentation on enums in the json spec:
+     * https://deck.gl/docs/api-reference/json/conversion-reference#enumerations-and-using-the--prefix
+     */
+    resources: PropTypes.objectOf(PropTypes.any),
+
+    /* List of JSON object containing layer specific data.
+     * Each JSON object will consist of layer type with key as "@@type" and
+     * layer specific data, if any.
+     */
+    layers: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any).isRequired),
+
+    /**
+     * Coordinate boundary for the view defined as [left, bottom, right, top].
+     * It can be either an array or a callback returning [number, number, number, number].
+     */
+    bounds: PropTypes.any,
+
+    /**
+     * Views configuration for map. If not specified, all the layers will be
+     * displayed in a single 2D viewport.
+     * Example:
+     *      views = {
+     *          "layout": [1, 1],
+     *          "showLabel": false,
+     *          "viewports": [
+     *              {
+     *                  "id": "view_1",
+     *                  "name"?: "View 1"
+     *                  "show3D"?: false,
+     *                  "layerIds": ["layer-ids"],
+     *                  "isSync?": true,
+     *              }
+     *          ]
+     *      }
+     */
+    // TODO - define proper type for views prop
+    views: PropTypes.any,
+
+    /**
+     * Parameters for the InfoCard component
+     */
+    coords: PropTypes.shape({
+        /**
+         * Toggle component visibility.
+         */
+        visible: PropTypes.bool,
+        /**
+         * Enable or disable multi picking. Might have a performance penalty.
+         * See https://deck.gl/docs/api-reference/core/deck#pickmultipleobjects
+         */
+        multiPicking: PropTypes.bool,
+        /**
+         * Number of objects to pick. The more objects picked, the more picking operations will be done.
+         * See https://deck.gl/docs/api-reference/core/deck#pickmultipleobjects
+         */
+        pickDepth: PropTypes.number,
+    }),
+
+    /**
+     * Parameters for the Distance Scale component
+     */
+    scale: PropTypes.shape({
+        /**
+         * Toggle component visibility.
+         */
+        visible: PropTypes.bool,
+        /**
+         * Increment value for the scale.
+         */
+        incrementValue: PropTypes.number,
+        /**
+         * Scale bar width in pixels per unit value.
+         */
+        widthPerUnit: PropTypes.number,
+        /**
+         * Scale bar css style can be used for positioning.
+         */
+        cssStyle: PropTypes.objectOf(PropTypes.any),
+    }),
+
+    /**
+     * Parameters for the Distance Scale component
+     * Unit for the scale ruler
+     */
+    coordinateUnit: PropTypes.oneOf(convert().possibilities()),
+
+    /**
+     * @obsolete Toolbar should be added as annotation. This prop has no function.
+     */
+    toolbar: PropTypes.shape({
+        /**
+         * Toggle toolbar visibility
+         */
+        visible: PropTypes.bool,
+    }),
+
+    /**
+     * @obsolete Legends should be added as annotations. This prop has no function.
+     */
+    legend: PropTypes.shape({
+        /**
+         * Toggle component visibility.
+         */
+        visible: PropTypes.bool,
+        /**
+         * Legend css style can be used for positioning.
+         */
+        cssStyle: PropTypes.objectOf(PropTypes.any),
+        /**
+         * Orientation of color legend
+         */
+        horizontal: PropTypes.bool,
+    }),
+
+    /**
+     * Prop containing color table data
+     */
+    colorTables: PropTypes.array,
+
+    /**
+     * Prop containing edited data from layers
+     */
+    editedData: PropTypes.objectOf(PropTypes.any),
+
+    /**
+     * For reacting to prop changes
+     */
+    setProps: PropTypes.func,
+
+    /**
+     * Validate JSON datafile against schema
+     */
+    checkDatafileSchema: PropTypes.bool,
+
+    /**
+     * For get mouse events
+     */
+    onMouseEvent: PropTypes.func,
+};
+
+export default SubsurfaceViewer;

package/src/__snapshots__/SubsurfaceViewer.test.tsx.snap

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Map component snapshot test 1`] = `
+.c0 {
+  display: inline-block;
+  -webkit-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+
+<div>
+  <div
+    id="DeckGL-Map-wrapper"
+    style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%;"
+  >
+    <canvas
+      id="DeckGL-Map"
+      style="left: 0px; top: 0px; width: 100%; position: absolute; height: 100%;"
+    />
+  </div>
+  <div>
+    <svg
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="0"
+      class="c0"
+      height="48"
+      preserveAspectRatio="xMidYMid meet"
+      role="progressbar"
+      viewBox="24 24 48 48"
+      width="48"
+    >
+      <circle
+        class=""
+        cx="48"
+        cy="48"
+        fill="none"
+        r="22"
+        stroke="var(--eds_infographic_primary__moss_green_13, rgba(222, 237, 238, 1))"
+        stroke-width="4"
+        style="stroke: 138.230; stroke-dashoffset: 138.230px;"
+      />
+      <circle
+        class=""
+        cx="48"
+        cy="48"
+        fill="none"
+        r="22"
+        stroke="var(--eds_infographic_primary__moss_green_100, rgba(0, 112, 121, 1))"
+        stroke-dasharray="138.23007675795088"
+        stroke-linecap="round"
+        stroke-width="4"
+        style="stroke: 138.230; stroke-dashoffset: 138.230px;"
+      />
+    </svg>
+    <br />
+    Loading assets...
+  </div>
+</div>
+`;
+
+exports[`Test Map component snapshot test with edited data 1`] = `
+.c0 {
+  display: inline-block;
+  -webkit-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+
+<div>
+  <div
+    id="DeckGL-Map-wrapper"
+    style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%;"
+  >
+    <canvas
+      id="DeckGL-Map"
+      style="left: 0px; top: 0px; width: 100%; position: absolute; height: 100%;"
+    />
+  </div>
+  <div>
+    <svg
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="0"
+      class="c0"
+      height="48"
+      preserveAspectRatio="xMidYMid meet"
+      role="progressbar"
+      viewBox="24 24 48 48"
+      width="48"
+    >
+      <circle
+        class=""
+        cx="48"
+        cy="48"
+        fill="none"
+        r="22"
+        stroke="var(--eds_infographic_primary__moss_green_13, rgba(222, 237, 238, 1))"
+        stroke-width="4"
+        style="stroke: 138.230; stroke-dashoffset: 138.230px;"
+      />
+      <circle
+        class=""
+        cx="48"
+        cy="48"
+        fill="none"
+        r="22"
+        stroke="var(--eds_infographic_primary__moss_green_100, rgba(0, 112, 121, 1))"
+        stroke-dasharray="138.23007675795088"
+        stroke-linecap="round"
+        stroke-width="4"
+        style="stroke: 138.230; stroke-dashoffset: 138.230px;"
+      />
+    </svg>
+    <br />
+    Loading assets...
+  </div>
+</div>
+`;
+
+exports[`Test Map component snapshot test with invalid array length 1`] = `
+.c0 {
+  display: inline-block;
+  -webkit-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+
+<div>
+  <div
+    id="DeckGL-Map-wrapper"
+    style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%;"
+  >
+    <canvas
+      id="DeckGL-Map"
+      style="left: 0px; top: 0px; width: 100%; position: absolute; height: 100%;"
+    />
+  </div>
+  <div>
+    <svg
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="0"
+      class="c0"
+      height="48"
+      preserveAspectRatio="xMidYMid meet"
+      role="progressbar"
+      viewBox="24 24 48 48"
+      width="48"
+    >
+      <circle
+        class=""
+        cx="48"
+        cy="48"
+        fill="none"
+        r="22"
+        stroke="var(--eds_infographic_primary__moss_green_13, rgba(222, 237, 238, 1))"
+        stroke-width="4"
+        style="stroke: 138.230; stroke-dashoffset: 138.230px;"
+      />
+      <circle
+        class=""
+        cx="48"
+        cy="48"
+        fill="none"
+        r="22"
+        stroke="var(--eds_infographic_primary__moss_green_100, rgba(0, 112, 121, 1))"
+        stroke-dasharray="138.23007675795088"
+        stroke-linecap="round"
+        stroke-width="4"
+        style="stroke: 138.230; stroke-dashoffset: 138.230px;"
+      />
+    </svg>
+    <br />
+    Loading assets...
+  </div>
+</div>
+`;