@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/storybook/components/colorLegends/DiscreteLegend.stories.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { DiscreteColorLegend, colorTables } from "@emerson-eps/color-tables";
+
+export default {
+    component: DiscreteColorLegend,
+    title: "SubsurfaceViewer/Components/ColorLegends/DiscreteColorLegend",
+};
+
+const discreteData = {
+    Above_BCU: [[255, 13, 186, 255], 0],
+    ABOVE: [[255, 64, 53, 255], 1],
+    H12: [[247, 255, 164, 255], 2],
+    BELOW: [[73, 255, 35, 255], 14],
+    H3: [[255, 144, 1, 255], 11],
+};
+const colorName = "Stratigraphy";
+const dataObjectName = "Wells / ZONELOG";
+const position = [16, 10];
+const horizontal = false;
+
+const Template = (args) => {
+    return <DiscreteColorLegend {...args} />;
+};
+
+export const DiscreteTemplate = Template.bind({});
+DiscreteTemplate.args = {
+    discreteData,
+    dataObjectName,
+    position,
+    colorName,
+    colorTables,
+    horizontal,
+};

package/src/storybook/components/colorLegends/IndividualScaleForMap.stories.jsx

@@ -0,0 +1,99 @@
+import React from "react";
+import exampleData from "../../../../../../demo/example-data/deckgl-map.json";
+import SubsurfaceViewer from "../../../SubsurfaceViewer";
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer/Components/ColorLegends/IndividualScaleForMap",
+};
+
+// Template for when edited data needs to be captured.
+const EditDataTemplate = (args) => {
+    const [editedData, setEditedData] = React.useState(args.editedData);
+    React.useEffect(() => {
+        setEditedData(args.editedData);
+    }, [args.editedData]);
+    return (
+        <SubsurfaceViewer
+            {...args}
+            editedData={editedData}
+            setProps={(updatedProps) => {
+                setEditedData(updatedProps.editedData);
+            }}
+        />
+    );
+};
+
+// 4 maps with individual color scales for each map
+export const IndividualScaleForMap = EditDataTemplate.bind({});
+IndividualScaleForMap.args = {
+    ...exampleData[0],
+    legend: {
+        visible: true,
+    },
+    zoom: -5,
+    layers: [
+        exampleData[0].layers[0],
+        {
+            ...exampleData[0].layers[0],
+            colorMapRange: [3000, 3100],
+            valueRange: [3000, 3100],
+            id: "colormap-2-layer",
+            colorMapName: "Porosity",
+        },
+        {
+            ...exampleData[0].layers[0],
+            colorMapRange: [3000, 3100],
+            valueRange: [3000, 3100],
+            id: "colormap-3-layer",
+            colorMapName: "Permeability",
+        },
+        {
+            ...exampleData[0].layers[0],
+            colorMapRange: [3000, 3100],
+            valueRange: [3000, 3100],
+            id: "colormap-4-layer",
+            colorMapName: "Seismic",
+        },
+    ],
+    views: {
+        layout: [2, 2],
+        showLabel: true,
+        viewports: [
+            {
+                id: "view_1",
+                name: "Colormap 1 layer",
+                show3D: false,
+                layerIds: ["colormap-layer"],
+            },
+            {
+                id: "view_2",
+                name: "Colormap 2 layer",
+                show3D: false,
+                layerIds: ["colormap-2-layer"],
+            },
+            {
+                id: "view_3",
+                name: "Colormap 3 layer",
+                show3D: false,
+                layerIds: ["colormap-3-layer"],
+            },
+            {
+                id: "view_4",
+                name: "Colormap 4 layer",
+                show3D: false,
+                layerIds: ["colormap-4-layer"],
+            },
+        ],
+    },
+};
+
+IndividualScaleForMap.parameters = {
+    docs: {
+        description: {
+            story: "Four maps with individual color scales for each map",
+        },
+        inlineStories: false,
+        iframeHeight: 500,
+    },
+};

package/src/storybook/components/colorLegends/SingleScaleForMap.stories.jsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { ContinuousLegend, colorTables } from "@emerson-eps/color-tables";
+import SubsurfaceViewer from "../../../SubsurfaceViewer";
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer/Components/ColorLegends/SingleScaleForMap",
+};
+
+const defaultProps = {
+    id: "SubsurfaceViewer",
+    resources: {
+        propertyMap:
+            "https://raw.githubusercontent.com/equinor/webviz-subsurface-components/master/react/src/demo/example-data/propertyMap.png",
+    },
+    bounds: [432150, 6475800, 439400, 6481500],
+};
+
+const layers = [
+    {
+        "@@type": "ColormapLayer",
+        image: "@@#resources.propertyMap",
+        rotDeg: 0,
+        bounds: [432205, 6475078, 437720, 6481113],
+        valueRange: [2782, 3513],
+        colorMapRange: [2782, 3513],
+    },
+];
+
+// prop for legend
+const min = 0;
+const max = 0.35;
+const dataObjectName = "Legend";
+const position = [16, 10];
+const horizontal = true;
+const reverseRange = false;
+
+// 4 maps with same color scale for all maps
+const mapWithScaleTemplate = (args) => {
+    const updatedLayerData = [
+        {
+            ...args.layers[0],
+            colorMapName: args.colorName,
+        },
+    ];
+    return (
+        <div>
+            <div
+                style={{
+                    float: "right",
+                    zIndex: 999,
+                    opacity: 1,
+                    position: "relative",
+                }}
+            >
+                <ContinuousLegend {...args} />
+            </div>
+            <SubsurfaceViewer {...args} layers={updatedLayerData} />
+        </div>
+    );
+};
+
+export const SingleScaleForMap = mapWithScaleTemplate.bind({});
+
+SingleScaleForMap.args = {
+    min,
+    max,
+    dataObjectName,
+    position,
+    horizontal,
+    colorTables,
+    colorName: "Rainbow",
+    layers,
+    ...defaultProps,
+    legend: {
+        visible: false,
+    },
+    zoom: -5,
+    reverseRange,
+    views: {
+        layout: [2, 2],
+        showLabel: true,
+        viewports: [
+            {
+                id: "view_1",
+                name: "Colormap layer 1",
+                show3D: false,
+                layerIds: ["colormap-layer"],
+            },
+            {
+                id: "view_2",
+                name: "Colormap layer 2",
+                show3D: false,
+                layerIds: ["colormap-layer"],
+            },
+            {
+                id: "view_3",
+                name: "Colormap layer 3",
+                show3D: false,
+                layerIds: ["colormap-layer"],
+            },
+            {
+                id: "view_4",
+                name: "Colormap layer 4",
+                show3D: false,
+                layerIds: ["colormap-layer"],
+            },
+        ],
+    },
+};
+
+SingleScaleForMap.parameters = {
+    docs: {
+        description: {
+            story: "Four maps with same color scale for all maps",
+        },
+        inlineStories: false,
+        iframeHeight: 500,
+    },
+};

package/src/storybook/components/settings/LayerSettingsButton.stories.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import LayerSettingsButton from "../../../components/settings/LayerSettingsButton";
+
+export default {
+    component: LayerSettingsButton,
+    title: "SubsurfaceViewer/Components/Settings/LayerSettingsButton",
+};
+
+const Template = (args) => {
+    return <LayerSettingsButton layer={args.layer} />;
+};
+
+export const DrawingSettings = Template.bind({});
+DrawingSettings.args = {
+    layer: {
+        name: "Drawing",
+        "@@type": "DrawingLayer",
+        id: "drawing-layer",
+        visible: true,
+        mode: "drawLineString",
+    },
+};
+
+export const WellsSettings = Template.bind({});
+WellsSettings.args = {
+    layer: {
+        name: "Wells",
+        "@@type": "WellsLayer",
+        id: "wells-layer",
+        opacity: 1,
+        pointRadiusScale: 8,
+        visible: true,
+    },
+};

package/src/storybook/components/settings/NumericInput.stories.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import NumericInput from "../../../components/settings/NumericInput";
+
+export default {
+    component: NumericInput,
+    title: "SubsurfaceViewer/Components/Settings/NumericInput",
+};
+
+const Template = (args) => {
+    return <NumericInput {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    label: "test",
+    value: 5,
+};

package/src/storybook/components/settings/ToggleButton.stories.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import ToggleButton from "../../../components/settings/ToggleButton";
+
+export default {
+    component: ToggleButton,
+    title: "SubsurfaceViewer/Components/Settings/Switch",
+};
+
+const Template = (args) => {
+    return <ToggleButton {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    label: "test",
+};

package/src/storybook/schemaValidation/sampleData.js

@@ -0,0 +1,177 @@
+export const sampleLogData = [
+    {
+        header: {
+            name: "EcoScope Data",
+            well: "35/12-6S",
+            source: "Converted from LIS by Log Studio 4.87 - Petroware AS",
+            operator: "Logtek Petroleum",
+            startIndex: 2907,
+            endIndex: 2908,
+            step: 1,
+        },
+        curves: [
+            {
+                _wrongName: "MD",
+                description: "Measured depth",
+                quantity: "length",
+                unit: "m",
+                valueType: "float",
+                dimensions: 1,
+            },
+            {
+                name: "A40H",
+                description: "Attenuation resistivity 40 inch",
+                quantity: "electrical resistivity",
+                unit: "ohm.m",
+                valueType: "float",
+                dimensions: 1,
+            },
+        ],
+        data: [
+            [2907, 29.955],
+            [2908, 27.733],
+        ],
+    },
+];
+
+export const sampleWellsData = {
+    type: "FeatureCollection",
+    features: [
+        {
+            type: "Feature",
+            geometry: {
+                _wrongType: "GeometryCollection",
+                geometries: [
+                    {
+                        type: "Point",
+                        coordinates: [437506.854656, 6477887.47091],
+                    },
+                    {
+                        type: "LineString",
+                        coordinates: [
+                            [437506.85465554806, 6477887.47091465, 25.0],
+                            [
+                                437505.96268892975, 6477887.532817844,
+                                -83.9951103268622,
+                            ],
+                            [
+                                437505.8497621946, 6477887.5323076015,
+                                -97.94448791185415,
+                            ],
+                        ],
+                    },
+                ],
+            },
+            properties: {
+                name: "15/9-19 A",
+                color: [28, 255, 12, 255],
+                md: [[0.0, 109.0, 122.94999694824219]],
+            },
+        },
+    ],
+};
+
+export const samplePieData = {
+    pies: [
+        {
+            x: 433600,
+            y: 6477600,
+            R: 100,
+            fractions: [
+                { value: 99, idx: 0 },
+                { value: "65", idx: 1 },
+                { value: 67, idx: 2 },
+            ],
+        },
+    ],
+
+    properties: [
+        { color: [255, 0, 0], label: "oil" },
+        { color: [0, 0, 255], label: "water" },
+        { color: [0, 255, 0], label: "gas" },
+    ],
+};
+
+export const sampleGridData = [
+    {
+        i: 0,
+        j: 11,
+        z: 3306.64,
+        cs: [
+            [432156.53, 6477273.01, -3306.64],
+            [432206.44, 6477273.93, -3303.06],
+            [432205.61, 6477323.14, -3315.68],
+            [432156.53, 6477322.75, -3320.86],
+        ],
+        vs: [0.0, 1.0, 0.0],
+    },
+    {
+        i: 0,
+        j: 12,
+        z: 3320.86,
+        cs: [
+            [432156.53, 6477322.75, -3320.86],
+            [432205.61, 6477323.14, -3315.68],
+            [432205.27, 6477372.91, -3320.22],
+            [432156.53, 6477372.51, -3326.91],
+        ],
+        vs: 1.0,
+    },
+];
+
+export const sampleFaultPolygonsData = {
+    type: "FeatureCollection",
+    features: [
+        {
+            type: "Feature",
+            geometry: {
+                type: "Polygon",
+                coordinates: [
+                    [
+                        [434562, 6477595],
+                        [434562, 6478595],
+                        // [435062, 6478595],
+                        // [435062, 6477595],
+                        // [434562, 6477595],
+                    ],
+                ],
+            },
+            properties: {
+                name: "Top_Hugin:F_52",
+                color: [0, 0, 0, 255],
+            },
+        },
+    ],
+};
+
+export const sampleColorTable = [
+    {
+        name: "Physics",
+        discrete: false,
+        description: "Full options color table",
+        colorNaN: [255, 255, 255],
+        colorBelow: [255, 0.0, 0.0],
+        colorAbove: [0.0, 0.0, 255],
+        colors: [
+            [0.0, 255, 0.0, 0.0],
+            [0.5, 0.0, 255, 0.0],
+            [1.0, 0.0, 0.0, 255],
+        ],
+    },
+    {
+        name: "Rainbow",
+        discrete: "false",
+        colors: [
+            [0.0, 255, 0.0, 0.0],
+            [1.0, 182, 0.0, 182],
+        ],
+    },
+    {
+        name: "Colors_set_5",
+        discrete: true,
+        colors: [
+            [0, 244, 237, 255],
+            [1, 255, 171, 178],
+        ],
+    },
+];

package/src/storybook/schemaValidation/schemaValidation.stories.jsx

@@ -0,0 +1,91 @@
+import React from "react";
+import SubsurfaceViewer from "../../SubsurfaceViewer";
+import {
+    sampleLogData,
+    sampleWellsData,
+    samplePieData,
+    sampleGridData,
+    sampleColorTable,
+    sampleFaultPolygonsData,
+} from "./sampleData";
+import exampleData from "../../../../../demo/example-data/deckgl-map.json";
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer/SchemaValidation",
+};
+
+// Template for when edited data needs to be captured.
+const StoryTemplate = (args) => {
+    return <SubsurfaceViewer {...args} />;
+};
+
+export const WellsLayerValidation = StoryTemplate.bind();
+WellsLayerValidation.args = {
+    ...exampleData[0],
+    layers: [
+        {
+            ...exampleData[0].layers[4],
+            data: sampleWellsData,
+            logData: sampleLogData,
+        },
+        {
+            ...exampleData[0].layers[6],
+        },
+    ],
+    legend: {
+        visible: false,
+    },
+    checkDatafileSchema: true,
+};
+
+export const PieLayerValidation = StoryTemplate.bind();
+PieLayerValidation.args = {
+    ...exampleData[0],
+    layers: [
+        {
+            "@@type": "PieChartLayer",
+            data: samplePieData,
+        },
+    ],
+    checkDatafileSchema: true,
+};
+
+export const GridLayerValidation = StoryTemplate.bind();
+GridLayerValidation.args = {
+    ...exampleData[0],
+    layers: [
+        {
+            ...exampleData[0].layers[2],
+            data: sampleGridData,
+            visible: true,
+        },
+    ],
+    checkDatafileSchema: true,
+};
+
+export const FaultPolygonsValidation = StoryTemplate.bind();
+FaultPolygonsValidation.args = {
+    ...exampleData[0],
+    layers: [
+        {
+            "@@type": "FaultPolygonsLayer",
+            data: sampleFaultPolygonsData,
+        },
+    ],
+    checkDatafileSchema: true,
+};
+
+export const ColorTableValidation = StoryTemplate.bind();
+ColorTableValidation.args = {
+    ...exampleData[0],
+    layers: [
+        {
+            ...exampleData[0].layers[4],
+            logColor: "Colors_set_5",
+            logRadius: 15,
+        },
+    ],
+    colorTables: sampleColorTable,
+    checkDatafileSchema: true,
+};

package/src/test/TestWrapper.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Provider } from "react-redux";
+import { createStore } from "../redux/store";
+
+export const emptytestStore = createStore({});
+emptytestStore.dispatch = jest.fn() as never;
+export const EmptyWrapper = ({
+    children,
+}: {
+    children: JSX.Element;
+}): JSX.Element => {
+    return <Provider store={emptytestStore}>{children}</Provider>;
+};

package/src/utils/configuration.ts

@@ -0,0 +1,61 @@
+// This configuration object determines which deck.gl classes are accessible in the serialized json
+// See https://deck.gl/docs/api-reference/json/overview for more details.
+
+import {
+    COORDINATE_SYSTEM,
+    FirstPersonView,
+    MapView,
+    OrbitView,
+    OrthographicView,
+} from "@deck.gl/core/typed";
+
+import * as AggregationLayers from "@deck.gl/aggregation-layers/typed";
+import * as GeoLayers from "@deck.gl/geo-layers/typed";
+import * as Layers from "@deck.gl/layers/typed";
+import * as MeshLayers from "@deck.gl/mesh-layers/typed";
+import { EditableGeoJsonLayer } from "@nebula.gl/layers";
+
+import { registerLoaders } from "@loaders.gl/core";
+import GL from "@luma.gl/constants";
+
+import * as CustomLayers from "../layers";
+import * as CustomViews from "../views";
+
+// Note: deck already registers JSONLoader...
+registerLoaders([]);
+
+export default {
+    // Classes that should be instantiatable by JSON converter
+    classes: Object.assign(
+        // Support `@deck.gl/core` Views
+        {
+            FirstPersonView,
+            MapView,
+            OrbitView,
+            OrthographicView,
+            ...CustomViews,
+        },
+
+        // a map of all layers that should be exposes as JSONLayers
+        Layers,
+        AggregationLayers,
+        GeoLayers,
+        MeshLayers,
+        CustomLayers,
+        // Any non-standard views or layers
+        { EditableGeoJsonLayer }
+    ),
+
+    // Functions that should be executed by JSON converter
+    functions: {},
+
+    // Enumerations that should be available to JSON parser
+    // Will be resolved as `<enum-name>.<enum-value>`
+    enumerations: {
+        COORDINATE_SYSTEM,
+        GL,
+    },
+
+    // Constants that should be resolved with the provided values by JSON converter
+    constants: {},
+};