@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/assets/glTF/north_arrow/scene.gltf

@@ -0,0 +1,315 @@
+{
+  "accessors": [
+    {
+      "bufferView": 2,
+      "componentType": 5126,
+      "count": 108,
+      "max": [
+        6.058886528015137,
+        0.5000003576278687,
+        2.348930835723877
+      ],
+      "min": [
+        -6.058886528015137,
+        -0.5000004172325134,
+        -2.348930835723877
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 1296,
+      "componentType": 5126,
+      "count": 108,
+      "max": [
+        0.9308037757873535,
+        1.0,
+        0.9998587369918823
+      ],
+      "min": [
+        -1.0,
+        -1.0,
+        -0.9998587369918823
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 3,
+      "componentType": 5126,
+      "count": 108,
+      "max": [
+        1.0,
+        3.387607421245775e-07,
+        1.0,
+        1.0
+      ],
+      "min": [
+        -1.0,
+        -4.178712970315246e-06,
+        -0.9308037757873535,
+        1.0
+      ],
+      "type": "VEC4"
+    },
+    {
+      "bufferView": 1,
+      "componentType": 5126,
+      "count": 108,
+      "max": [
+        0.9870268106460571,
+        0.9908186793327332
+      ],
+      "min": [
+        0.006224204320460558,
+        0.010728782042860985
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 864,
+      "componentType": 5126,
+      "count": 108,
+      "max": [
+        0.9870268106460571,
+        0.9908186793327332
+      ],
+      "min": [
+        0.006224204320460558,
+        0.010728782042860985
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 1728,
+      "componentType": 5126,
+      "count": 108,
+      "max": [
+        0.9870268106460571,
+        0.9908186793327332
+      ],
+      "min": [
+        0.006224204320460558,
+        0.010728782042860985
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "componentType": 5125,
+      "count": 324,
+      "type": "SCALAR"
+    }
+  ],
+  "asset": {
+    "extras": {
+      "author": "plaggy (https://sketchfab.com/plaggy)",
+      "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
+      "source": "https://sketchfab.com/3d-models/cc0-arrow-5-f38febed165240b9aea5289c215c6b65",
+      "title": "CC0 - Arrow 5"
+    },
+    "generator": "Sketchfab-10.50.0",
+    "version": "2.0"
+  },
+  "bufferViews": [
+    {
+      "buffer": 0,
+      "byteLength": 1296,
+      "name": "floatBufferViews",
+      "target": 34963
+    },
+    {
+      "buffer": 0,
+      "byteLength": 2592,
+      "byteOffset": 1296,
+      "byteStride": 8,
+      "name": "floatBufferViews",
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteLength": 2592,
+      "byteOffset": 3888,
+      "byteStride": 12,
+      "name": "floatBufferViews",
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteLength": 1728,
+      "byteOffset": 6480,
+      "byteStride": 16,
+      "name": "floatBufferViews",
+      "target": 34962
+    }
+  ],
+  "buffers": [
+    {
+      "byteLength": 8208,
+      "uri": "scene.bin"
+    }
+  ],
+  "images": [
+    {
+      "uri": "textures/Arrow5_baseColor.png"
+    },
+    {
+      "uri": "textures/Arrow5_metallicRoughness.png"
+    },
+    {
+      "uri": "textures/Arrow5_normal.png"
+    }
+  ],
+  "materials": [
+    {
+      "name": "Arrow5",
+      "normalTexture": {
+        "index": 2
+      },
+      "pbrMetallicRoughness": {
+        "baseColorTexture": {
+          "index": 0
+        },
+        "metallicRoughnessTexture": {
+          "index": 1
+        }
+      }
+    }
+  ],
+  "meshes": [
+    {
+      "name": "Arrow5_Arrow5_0",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 1,
+            "POSITION": 0,
+            "TANGENT": 2,
+            "TEXCOORD_0": 3,
+            "TEXCOORD_1": 4,
+            "TEXCOORD_2": 5
+          },
+          "indices": 6,
+          "material": 0,
+          "mode": 4
+        }
+      ]
+    }
+  ],
+  "nodes": [
+    {
+      "children": [
+        1
+      ],
+      "matrix": [
+        1.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        2.220446049250313e-16,
+        -1.0,
+        0.0,
+        0.0,
+        1.0,
+        2.220446049250313e-16,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        1.0
+      ],
+      "name": "Sketchfab_model"
+    },
+    {
+      "children": [
+        2
+      ],
+      "matrix": [
+        1.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        1.0,
+        0.0,
+        0.0,
+        -1.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        1.0
+      ],
+      "name": "1095acfb6b0747db8a7aadff5b388720.fbx"
+    },
+    {
+      "children": [
+        3
+      ],
+      "name": "RootNode"
+    },
+    {
+      "children": [
+        4
+      ],
+      "matrix": [
+        0.02539999969303608,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        5.639932896936113e-18,
+        -0.02539999969303608,
+        0.0,
+        0.0,
+        0.02539999969303608,
+        5.639932896936113e-18,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        1.0
+      ],
+      "name": "Arrow5"
+    },
+    {
+      "mesh": 0,
+      "name": "Arrow5_Arrow5_0"
+    }
+  ],
+  "samplers": [
+    {
+      "magFilter": 9729,
+      "minFilter": 9987,
+      "wrapS": 10497,
+      "wrapT": 10497
+    }
+  ],
+  "scene": 0,
+  "scenes": [
+    {
+      "name": "Sketchfab_Scene",
+      "nodes": [
+        0
+      ]
+    }
+  ],
+  "textures": [
+    {
+      "sampler": 0,
+      "source": 0
+    },
+    {
+      "sampler": 0,
+      "source": 1
+    },
+    {
+      "sampler": 0,
+      "source": 2
+    }
+  ]
+}

package/src/components/ColorLegend.test.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { render } from "@testing-library/react";
+import "jest-styled-components";
+import "@testing-library/jest-dom";
+import React from "react";
+import ColorLegend from "./ColorLegend";
+import { ExtendedLayer } from "../layers/utils/layerTools";
+import { colorTables } from "@emerson-eps/color-tables";
+
+describe("Test Color Legend component", () => {
+    xit("snapshot test", () => {
+        const { container } = render(
+            <ColorLegend
+                layer={
+                    {
+                        "@@type": "ColormapLayer",
+                        image: "@@#resources.propertyMap",
+                        rotDeg: 0,
+                        bounds: [432205, 6475078, 437720, 6481113],
+                        colorMapName: "Rainbow",
+                        valueRange: [2782, 3513],
+                        colorMapRange: [2782, 3513],
+                    } as unknown as ExtendedLayer<unknown>
+                }
+                colorTables={colorTables}
+                horizontal={false}
+                reverseRange={false}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});

package/src/components/ColorLegend.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable react-hooks/exhaustive-deps */ // remove when ready to fix these.
+
+import React from "react";
+import {
+    DiscreteColorLegend,
+    ContinuousLegend,
+} from "@emerson-eps/color-tables";
+import { ExtendedLayer } from "../layers/utils/layerTools";
+import { Color } from "@deck.gl/core/typed";
+import { colorTablesArray } from "@emerson-eps/color-tables/";
+import { colorMapFunctionType } from "../layers/utils/layerTools";
+
+interface LegendBaseData {
+    title: string;
+    colorName: string;
+    discrete: boolean;
+    colorMapFunction?: colorMapFunctionType;
+}
+export interface DiscreteLegendDataType extends LegendBaseData {
+    metadata: Record<string, [Color, number]>;
+}
+
+export interface ContinuousLegendDataType extends LegendBaseData {
+    valueRange: [number, number];
+}
+
+interface ColorLegendProps {
+    horizontal?: boolean | null;
+    layer: ExtendedLayer<unknown>;
+    colorTables: colorTablesArray | string | undefined;
+    reverseRange?: boolean;
+}
+
+const ColorLegend: React.FC<ColorLegendProps> = ({
+    horizontal,
+    layer,
+    colorTables,
+    reverseRange,
+}: ColorLegendProps) => {
+    const [legendData, setLegendData] = React.useState<
+        DiscreteLegendDataType | ContinuousLegendDataType
+    >();
+    React.useEffect(() => {
+        const legend_data = layer.getLegendData?.() ?? layer.state?.["legend"];
+        setLegendData(legend_data);
+    }, [layer.props, layer.state?.["legend"]]);
+
+    if (!legendData || !layer.props.visible) return null;
+
+    return (
+        <div style={{ marginTop: 30 }}>
+            {legendData.discrete && (
+                <DiscreteColorLegend
+                    discreteData={
+                        (legendData as DiscreteLegendDataType).metadata
+                    }
+                    dataObjectName={legendData.title}
+                    colorName={legendData.colorName}
+                    horizontal={horizontal}
+                    colorTables={colorTables}
+                />
+            )}
+            {!legendData.discrete && (
+                <ContinuousLegend
+                    min={(legendData as ContinuousLegendDataType).valueRange[0]}
+                    max={(legendData as ContinuousLegendDataType).valueRange[1]}
+                    dataObjectName={legendData.title}
+                    colorName={legendData.colorName}
+                    horizontal={horizontal}
+                    id={layer.props.id}
+                    colorTables={colorTables}
+                    colorMapFunction={legendData.colorMapFunction}
+                    reverseRange={reverseRange}
+                />
+            )}
+        </div>
+    );
+};
+
+export default ColorLegend;

package/src/components/ColorLegends.test.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { render } from "@testing-library/react";
+import "jest-styled-components";
+import "@testing-library/jest-dom";
+import React from "react";
+import ColorLegends from "./ColorLegends";
+import { Layer } from "@deck.gl/core/typed";
+import { getLayersInViewport } from "../layers/utils/layerTools";
+
+import { colorTables } from "@emerson-eps/color-tables";
+
+const colormapLayer = {
+    "@@type": "ColormapLayer",
+    name: "Property map",
+    id: "colormap-layer",
+    pickable: true,
+    visible: true,
+    valueRange: { type: "array", value: [0, 1] },
+    colorMapRange: { type: "array" },
+    valueDecoder: {
+        rgbScaler: [1, 1, 1],
+        // By default, scale the [0, 256*256*256-1] decoded values to [0, 1]
+        floatScaler: 1.0 / (256.0 * 256.0 * 256.0 - 1.0),
+        offset: 0,
+        step: 0,
+    },
+    rotDeg: 0,
+    colorMapName: "Rainbow",
+};
+
+const wellsLayer = {
+    "@@type": "WellsLayer",
+    name: "Wells",
+    id: "wells-layer",
+    autoHighlight: true,
+    opacity: 1,
+    lineWidthScale: 1,
+    pointRadiusScale: 1,
+    lineStyle: { dash: false },
+    outline: true,
+    logRadius: 10,
+    logCurves: true,
+    refine: true,
+    visible: true,
+    wellNameVisible: false,
+    wellNameAtTop: false,
+    wellNameSize: 14,
+    wellNameColor: [0, 0, 0, 255],
+    selectedWell: "@@#editedData.selectedWells", // used to get data from deckgl layer
+    depthTest: true,
+};
+
+const layers = [colormapLayer, wellsLayer];
+
+describe("Test Color Legend", () => {
+    it("snapshot test", () => {
+        const { container } = render(
+            <ColorLegends
+                layers={
+                    getLayersInViewport(layers, [
+                        "colormap-layer",
+                        "wells-layer",
+                    ]) as Layer<unknown>[]
+                }
+                colorTables={colorTables}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it("snapshot test with props", () => {
+        const { container } = render(
+            <ColorLegends
+                layers={
+                    getLayersInViewport(layers, [
+                        "colormap-layer",
+                        "wells-layer",
+                    ]) as Layer<unknown>[]
+                }
+                horizontal={true}
+                colorTables={colorTables}
+                reverseRange={true}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it("snapshot test if layers=0", () => {
+        const { container } = render(
+            <ColorLegends
+                layers={[]}
+                horizontal={true}
+                colorTables={colorTables}
+                reverseRange={true}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});

package/src/components/ColorLegends.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { ExtendedLayer } from "../layers/utils/layerTools";
+import ColorLegend from "./ColorLegend";
+import { colorTablesArray } from "@emerson-eps/color-tables/";
+
+interface ColorLegendsProps {
+    // Pass additional css style to the parent color legend container
+    cssStyle?: Record<string, unknown> | null;
+    horizontal?: boolean | null;
+    layers: ExtendedLayer<unknown>[];
+    colorTables: colorTablesArray | string | undefined;
+    reverseRange?: boolean;
+}
+
+// Todo: Adapt it for other layers too
+const ColorLegends: React.FC<ColorLegendsProps> = ({
+    cssStyle,
+    horizontal,
+    layers,
+    colorTables,
+    reverseRange,
+}: ColorLegendsProps) => {
+    if (layers.length == 0) return null;
+    return (
+        <div
+            style={{
+                position: "absolute",
+                display: "flex",
+                zIndex: 999,
+                ...cssStyle,
+            }}
+        >
+            {layers.map((layer, index) => (
+                <ColorLegend
+                    layer={layer}
+                    horizontal={horizontal}
+                    key={index}
+                    colorTables={colorTables}
+                    reverseRange={reverseRange}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default ColorLegends;

package/src/components/DistanceScale.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import DistanceScale from "./DistanceScale";
+
+export default {
+    component: DistanceScale,
+    title: "SubsurfaceViewer / Components / DistanceScale",
+} as ComponentMeta<typeof DistanceScale>;
+
+const darkModeStyle = {
+    color: "white",
+};
+
+const Template: ComponentStory<typeof DistanceScale> = (args) => (
+    <DistanceScale {...args} />
+);
+
+export const Baseline = Template.bind({});
+
+export const DarkMode = Template.bind({});
+
+DarkMode.args = {
+    style: darkModeStyle,
+};
+
+DarkMode.parameters = {
+    backgrounds: { default: "dark" },
+};

package/src/components/DistanceScale.test.tsx

@@ -0,0 +1,36 @@
+import { render } from "@testing-library/react";
+import "jest-styled-components";
+import "@testing-library/jest-dom";
+import React from "react";
+import DistanceScale from "./DistanceScale";
+
+describe("Test Color Legend", () => {
+    it("snapshot test with default props", () => {
+        const { container } = render(<DistanceScale />);
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it("snapshot test with invalid props", () => {
+        const { container } = render(
+            <DistanceScale
+                zoom={0}
+                incrementValue={0}
+                widthPerUnit={0}
+                style={{ top: 0, left: 0 }}
+                scaleUnit="m"
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it("snapshot test with higher zoom", () => {
+        const { container } = render(
+            <DistanceScale
+                zoom={1}
+                incrementValue={100}
+                widthPerUnit={100}
+                style={{ top: 10, left: 10 }}
+                scaleUnit="m"
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});