@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/inputSchema/WellLogTemplate.json

@@ -0,0 +1,136 @@
+{
+    "type": "object",
+    "properties": {
+        "name": { "type": "string" },
+        "scale": {
+            "type": "object",
+            "properties": {
+                "primary": { "type": "string" },
+                "allowSecondary": { "type": "boolean" }
+            },
+            "required": ["primary"]
+        },
+        "tracks": {
+            "type": "array",
+            "items": { "$ref": "#/definitions/track" }
+        },
+        "styles": {
+            "type": "array",
+            "items": { "$ref": "#/definitions/style" }
+        }
+    },
+    "required": ["tracks"],
+    "definitions": {
+        "domain": {
+            "type": "array",
+            "minItems": 2,
+            "maxItems": 2,
+            "items": { "type": "number" }
+        },
+        "css_color": {
+            "type": "string",
+            "description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors)",
+            "examples": [
+                "green",
+                "#ff8000",
+                "rgb(128,33,23)",
+                "rgba(128,33,23,0.6)"
+            ]
+        },
+        "plot_type": {
+            "enum": [
+                "line",
+                "linestep",
+                "dot",
+                "area",
+                "differential",
+                "gradientfill",
+                "stacked"
+            ],
+            "default": "line"
+        },
+        "scale_type": {
+            "enum": ["log", "linear"],
+            "default": "linear"
+        },
+        "plot_prop": {
+            "type": "object",
+            "properties": {
+                "scale": { "$ref": "#/definitions/scale_type" },
+                "type": { "$ref": "#/definitions/plot_type" },
+
+                "color": { "$ref": "#/definitions/css_color" },
+                "inverseColor": { "$ref": "#/definitions/css_color" },
+
+                "fill": { "$ref": "#/definitions/css_color" },
+                "fillOpacity": {
+                    "type": "number",
+                    "minimum": 0.0,
+                    "maximum": 1.0,
+                    "default": 0.25,
+                    "description": "for 'area' and 'gradientfill' plots"
+                },
+
+                "colorTable": {
+                    "type": "string",
+                    "description": "table id (name) for 'gradientfill' plot"
+                },
+                "inverseColorTable": {
+                    "type": "string",
+                    "description": "table id (name) for 'gradientfill' plot"
+                },
+
+                "colorScale": {
+                    "$ref": "#/definitions/scale_type",
+                    "description": "table id (name) for 'gradientfill' plot"
+                },
+                "inverseColorScale": {
+                    "$ref": "#/definitions/scale_type",
+                    "description": "table id (name) for 'gradientfill' plot"
+                },
+
+                "color2": {
+                    "$ref": "#/definitions/css_color",
+                    "description": "for 'differetial' plot"
+                },
+                "fill2": {
+                    "$ref": "#/definitions/css_color",
+                    "description": "for 'differetial' plot"
+                }
+            }
+        },
+        "plot": {
+            "allOf": [{ "$ref": "#/definitions/plot_prop" }],
+            "type": "object",
+            "properties": {
+                "name": { "type": "string" },
+                "style": { "type": "string" },
+                "scale": { "$ref": "#/definitions/scale_type" },
+                "name2": { "type": "string" }
+            },
+            "required": ["name"]
+        },
+        "style": {
+            "allOf": [{ "$ref": "#/definitions/plot_prop" }],
+            "type": "object",
+            "properties": {
+                "name": { "type": "string" }
+            },
+            "required": ["name"]
+        },
+        "track": {
+            "type": "object",
+            "properties": {
+                "title": { "type": "string" },
+                "required": { "type": "boolean" },
+                "scale": { "$ref": "#/definitions/scale_type" },
+                "domain": { "$ref": "#/definitions/domain" },
+                "plots": {
+                    "type": "array",
+                    "items": { "$ref": "#/definitions/plot" }
+                }
+            },
+            "required": ["plots"]
+        }
+    }
+}

package/src/inputSchema/WellLogs.json

@@ -0,0 +1,5 @@
+{
+    "$id": "inputSchema/WellLogs.json",
+    "type": "array",
+    "items": { "$ref": "./WellLog.json#" }
+}

package/src/inputSchema/Wells.json

@@ -0,0 +1,106 @@
+{
+    "$comment": "Inspired from https://github.com/geojson/schema",
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "$id": "inputSchema/Wells.json",
+    "title": "GeoJSON FeatureCollection",
+    "type": "object",
+    "required": ["type", "features"],
+    "properties": {
+        "type": {
+            "type": "string",
+            "enum": ["FeatureCollection"]
+        },
+        "features": {
+            "type": "array",
+            "items": {
+                "title": "GeoJSON Feature",
+                "type": "object",
+                "required": ["type", "properties", "geometry"],
+                "properties": {
+                    "type": {
+                        "type": "string",
+                        "enum": ["Feature"]
+                    },
+                    "id": {
+                        "oneOf": [
+                            {
+                                "type": "number"
+                            },
+                            {
+                                "type": "string"
+                            }
+                        ]
+                    },
+                    "properties": {
+                        "oneOf": [
+                            {
+                                "type": "null"
+                            },
+                            {
+                                "type": "object"
+                            }
+                        ]
+                    },
+                    "geometry": {
+                        "title": "GeoJSON GeometryCollection",
+                        "type": "object",
+                        "required": ["type", "geometries"],
+                        "properties": {
+                            "type": {
+                                "type": "string",
+                                "enum": ["GeometryCollection"]
+                            },
+                            "geometries": {
+                                "type": "array",
+                                "items": {
+                                    "oneOf": [
+                                        {
+                                            "title": "GeoJSON Point",
+                                            "type": "object",
+                                            "required": ["type", "coordinates"],
+                                            "properties": {
+                                                "type": {
+                                                    "type": "string",
+                                                    "enum": ["Point"]
+                                                },
+                                                "coordinates": {
+                                                    "type": "array",
+                                                    "minItems": 2,
+                                                    "items": {
+                                                        "type": "number"
+                                                    }
+                                                }
+                                            }
+                                        },
+                                        {
+                                            "title": "GeoJSON LineString",
+                                            "type": "object",
+                                            "required": ["type", "coordinates"],
+                                            "properties": {
+                                                "type": {
+                                                    "type": "string",
+                                                    "enum": ["LineString"]
+                                                },
+                                                "coordinates": {
+                                                    "type": "array",
+                                                    "minItems": 2,
+                                                    "items": {
+                                                        "type": "array",
+                                                        "minItems": 2,
+                                                        "items": {
+                                                            "type": "number"
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    ]
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/src/inputSchema/schemaValidationUtil.tsx

@@ -0,0 +1,55 @@
+import { validateSchema } from "./validator";
+import { Layer } from "@deck.gl/core/typed";
+import { colorTablesArray } from "@emerson-eps/color-tables/";
+
+export function validateColorTables(colorTables: colorTablesArray): void {
+    validateSchema(colorTables, "ColorTables");
+}
+
+export function validateLayers(layers: Layer[]): void {
+    layers.forEach((layer) => {
+        if (layer.isLoaded) {
+            validateLayer(layer);
+            try {
+                layer.validateProps();
+            } catch (e) {
+                throw `${layer.id}- ${String(e)}`;
+            }
+        }
+    });
+}
+
+export function validateLayer(layer: Layer): void {
+    switch (layer.id) {
+        case "wells-layer":
+            validateWellsLayer(layer);
+            break;
+        case "pie-layer":
+            validateSchema(layer.props.data, "PieChart");
+            break;
+        case "grid-layer":
+            validateSchema(layer.props.data, "Grid");
+            break;
+        case "fault-polygons-layer":
+            validateSchema(layer.props.data, "FaultPolygons");
+            break;
+        default:
+            return;
+    }
+}
+
+function validateWellsLayer(wellsLayer: Layer): void {
+    const wells_data = wellsLayer.props.data;
+    validateSchema(wells_data, "Wells");
+
+    const logs_data = getLogData(wellsLayer);
+    validateSchema(logs_data, "WellLogs");
+}
+
+function getLogData(wellsLayer: Layer) {
+    const sub_layers = wellsLayer.internalState?.subLayers;
+    const log_layer = sub_layers?.find(
+        (layer) => layer.id === "wells-layer-log_curve"
+    );
+    return log_layer?.props.data;
+}

package/src/inputSchema/validator.tsx

@@ -0,0 +1,72 @@
+import Ajv from "ajv";
+import { ErrorObject, ValidateFunction } from "ajv/dist/types/index";
+
+// schema definations
+import wellsSchema from "./Wells.json";
+import wellLogSchema from "./WellLog.json";
+import wellLogsSchema from "./WellLogs.json";
+import wellLogTemplateSchema from "./WellLogTemplate.json";
+import pieChartSchema from "./PieChart.json";
+import gridSchema from "./Grid.json";
+import faultPolygonsSchema from "./FaultPolygons.json";
+import colorTablesSchema from "./ColorTables.json";
+
+// Validator function accepts parameter data and schema type to be validated against.
+// Throws error message of failure.
+export function validateSchema(data: unknown, schema_type: string): void {
+    let validator: ValidateFunction<unknown> | null = null;
+
+    try {
+        validator = createSchemaValidator(schema_type);
+    } catch (e) {
+        throw "Wrong JSON schema for " + schema_type + ". " + String(e);
+    }
+
+    if (!validator) throw "Wrong schema type.";
+
+    validator(data);
+    if (validator.errors) {
+        throw formatSchemaError(schema_type, validator.errors);
+    }
+}
+
+function createSchemaValidator(
+    schema_type: string
+): ValidateFunction<unknown> | null {
+    const ajv = new Ajv({
+        schemas: [wellLogSchema], // add list of dependent schemas
+    });
+
+    switch (schema_type) {
+        case "Wells":
+            return ajv.compile(wellsSchema);
+        case "WellLog":
+            return ajv.compile(wellLogSchema);
+        case "WellLogs":
+            return ajv.compile(wellLogsSchema);
+        case "WellLogTemplate":
+            return ajv.compile(wellLogTemplateSchema);
+        case "PieChart":
+            return ajv.compile(pieChartSchema);
+        case "Grid":
+            return ajv.compile(gridSchema);
+        case "FaultPolygons":
+            return ajv.compile(faultPolygonsSchema);
+        case "ColorTables":
+            return ajv.compile(colorTablesSchema);
+        default:
+            return null;
+    }
+}
+
+function formatSchemaError(schema_type: string, errors: ErrorObject[]): string {
+    let error_text = "";
+
+    if (errors[0]) {
+        error_text =
+            (errors[0].dataPath ? errors[0].dataPath + ": " : "") +
+            errors[0].message;
+    } else error_text = "JSON schema validation failed";
+
+    return `${schema_type}: ${error_text}.`;
+}

package/src/inputSchema/wellCompletions.json

@@ -0,0 +1,108 @@
+{
+    "definitions": {
+        "zone": {
+            "type": "object",
+            "properties": {
+                "name": {
+                    "type": "string",
+                    "minLength": 1
+                },
+                "color": {
+                    "type": "string",
+                    "pattern": "^#[0-9a-fA-F]{6}$"
+                },
+                "subzones": {
+                    "type": "array",
+                    "items": { "$ref": "#/definitions/zone" }
+                }
+            },
+            "required": ["name", "color"]
+        }
+    },
+    "type": "object",
+    "properties": {
+        "version": { "type": "string", "minLength": 1 },
+        "units": {
+            "type": "object",
+            "properties": {
+                "kh": {
+                    "type": "object",
+                    "properties": {
+                        "unit": {
+                            "type": "string"
+                        },
+                        "decimalPlaces": { "type": "number" }
+                    }
+                }
+            }
+        },
+        "stratigraphy": {
+            "type": "array",
+            "items": { "$ref": "#/definitions/zone" }
+        },
+        "timeSteps": {
+            "type": "array",
+            "items": { "type": "string", "minLength": 1 }
+        },
+        "wells": {
+            "type": "array",
+            "items": {
+                "type": "object",
+                "properties": {
+                    "name": {
+                        "type": "string",
+                        "minLength": 1
+                    },
+                    "completions": {
+                        "type": "object",
+                        "patternProperties": {
+                            ".+": {
+                                "type": "object",
+                                "properties": {
+                                    "t": {
+                                        "type": "array",
+                                        "items": { "type": "number" }
+                                    },
+                                    "open": {
+                                        "type": "array",
+                                        "items": { "type": "number" }
+                                    },
+                                    "shut": {
+                                        "type": "array",
+                                        "items": { "type": "number" }
+                                    },
+                                    "khMean": {
+                                        "type": "array",
+                                        "items": { "type": "number" }
+                                    },
+                                    "khMin": {
+                                        "type": "array",
+                                        "items": { "type": "number" }
+                                    },
+                                    "khMax": {
+                                        "type": "array",
+                                        "items": { "type": "number" }
+                                    }
+                                },
+                                "required": [
+                                    "t",
+                                    "open",
+                                    "shut",
+                                    "khMean",
+                                    "khMin",
+                                    "khMax"
+                                ]
+                            }
+                        },
+                        "additionalProperties": false
+                    },
+                    "attributes": {
+                        "type": "object"
+                    }
+                },
+                "required": ["name", "completions", "attributes"]
+            }
+        }
+    },
+    "required": ["stratigraphy", "timeSteps", "wells"]
+}

package/src/layers/BoxSelectionLayer/boxSelectionLayer.stories.tsx

@@ -0,0 +1,172 @@
+/* eslint-disable react-hooks/exhaustive-deps */ // remove when ready to fix these.
+/* eslint-disable react-hooks/rules-of-hooks  */ // remove when ready to fix these.
+
+import { FormControlLabel, Switch } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import SubsurfaceViewer from "../../SubsurfaceViewer";
+
+const PREFIX = "boxSelectionLayer";
+
+// This should be fixed at some point
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type PickInfo = any;
+
+const classes = {
+    main: `${PREFIX}-main`,
+    legend: `${PREFIX}-legend`,
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")({
+    [`& .${classes.main}`]: {
+        height: 500,
+        border: "1px solid black",
+        position: "relative",
+    },
+    [`& .${classes.legend}`]: {
+        width: 100,
+        position: "absolute",
+        top: "0",
+        right: "0",
+    },
+});
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer / Box Selection Layer",
+} as ComponentMeta<typeof SubsurfaceViewer>;
+
+export const boxSelection: ComponentStory<typeof SubsurfaceViewer> = () => {
+    const [argsState, setArgsState] =
+        React.useState<Record<string, unknown>>(enableLassoArgs);
+    const [state, setState] = React.useState<boolean>(true);
+
+    const handleChange = React.useCallback(() => {
+        const boxSelectionLayer = enableLassoArgs.layers.filter(
+            (item) => item["@@type"] === "BoxSelectionLayer"
+        );
+        if (boxSelectionLayer[0].visible !== undefined) {
+            boxSelectionLayer[0].visible = !boxSelectionLayer[0].visible;
+        }
+        if (boxSelectionLayer[0].visible) {
+            setArgsState(enableLassoArgs);
+        } else {
+            setArgsState(disableLassoArgs);
+        }
+        setState(!state);
+    }, [state]);
+
+    return (
+        <Root>
+            <div className={classes.main}>
+                <SubsurfaceViewer id={"DeckGL-Map"} {...argsState} />
+            </div>
+            <div style={{ textAlign: "center" }}>
+                <FormControlLabel
+                    control={
+                        <Switch
+                            checked={state}
+                            onChange={handleChange}
+                            color="primary"
+                            name="checkedB"
+                            inputProps={{ "aria-label": "primary checkbox" }}
+                        />
+                    }
+                    label="Display Lasso Selection"
+                />
+            </div>
+        </Root>
+    );
+};
+
+const disableLassoArgs = {
+    id: "DeckGL-Map",
+    resources: {
+        wellsData: "./volve_wells.json",
+    },
+    bounds: [432205, 6475078, 437720, 6481113],
+    layers: [
+        {
+            "@@type": "WellsLayer",
+            data: "@@#resources.wellsData",
+        },
+        {
+            "@@type": "BoxSelectionLayer",
+            visible: false,
+        },
+    ],
+    editedData: {},
+    views: {
+        layout: [1, 1],
+        showLabel: false,
+        viewports: [
+            {
+                id: "view_1",
+                show3D: false,
+                layerIds: [],
+            },
+        ],
+    },
+};
+
+const enableLassoArgs = {
+    ...disableLassoArgs,
+    layers: [
+        {
+            "@@type": "WellsLayer",
+            data: "@@#resources.wellsData",
+        },
+        {
+            "@@type": "BoxSelectionLayer",
+            visible: true,
+        },
+    ],
+};
+
+export const boxSelectionWithCallback: ComponentStory<
+    typeof SubsurfaceViewer
+> = () => {
+    const [data, setData] = React.useState<string[]>([]);
+    const getSelectedWellsDataCallBack = React.useCallback(
+        (pickingInfos: PickInfo[]) => {
+            const selectedWells = pickingInfos
+                .map((item) => item.object)
+                .filter((item) => item.type === "Feature")
+                .map((item) => item.properties["name"]) as string[];
+            setData(selectedWells);
+        },
+        []
+    );
+    const lassoArgsWithSelectedWellsDataCallback: Record<string, unknown> = {
+        ...disableLassoArgs,
+        layers: [
+            {
+                "@@type": "WellsLayer",
+                data: "@@#resources.wellsData",
+            },
+            {
+                "@@type": "BoxSelectionLayer",
+                visible: true,
+                handleSelection: getSelectedWellsDataCallBack,
+            },
+        ],
+    };
+    return (
+        <Root>
+            <div className={classes.main}>
+                <SubsurfaceViewer
+                    id={"DeckGL-Map"}
+                    {...lassoArgsWithSelectedWellsDataCallback}
+                />
+            </div>
+            <div>
+                <div>Selected Wells:</div>
+                {data.map((item) => (
+                    <div key={item}>{item}</div>
+                ))}
+            </div>
+        </Root>
+    );
+};