@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/layers/hillshading2d/hillshading2dLayer.ts

@@ -0,0 +1,172 @@
+import { BitmapLayer, BitmapLayerProps } from "@deck.gl/layers/typed";
+import { PickingInfo, Texture } from "@deck.gl/core/typed";
+
+import { decoder } from "../shader_modules";
+import { decodeRGB, ValueDecoder } from "../utils/propertyMapTools";
+import { getModelMatrix } from "../utils/layerTools";
+import { LayerPickInfo } from "../../layers/utils/layerTools";
+
+import fsHillshading from "./hillshading2d.fs.glsl";
+
+// Most props are inherited from DeckGL's BitmapLayer. For a full list, see
+// https://deck.gl/docs/api-reference/layers/bitmap-layer
+//
+// The property map is encoded in an image and sent in the `image` prop of the BitmapLayer.
+// For more details on the property map encoding, see colormapLayer.ts
+export interface Hillshading2DProps extends BitmapLayerProps {
+    // Min and max property values.
+    valueRange: [number, number];
+
+    // Direction the light comes from.
+    lightDirection: [number, number, number];
+    // Intensity of light that is applied to the whole map uniformly.
+    ambientLightIntensity: number;
+    // Intensity of light that is applied to the lightened potions of the map.
+    diffuseLightIntensity: number;
+
+    // Use color map in this range
+    colorMapRange: [number, number];
+
+    // By default, scale the [0, 256*256*256-1] decoded values to [0, 1]
+    valueDecoder: ValueDecoder;
+
+    // Rotates image around bounds upper left corner counterclockwise in degrees.
+    rotDeg: number;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setReportedBoundingBox?: any;
+}
+
+const defaultProps = {
+    "@@type": "Hillshading2DLayer",
+    name: "Hill shading",
+    id: "hillshading-layer",
+    opacity: 1.0,
+    pickable: true,
+    visible: true,
+    rotDeg: 0,
+    valueRange: { type: "array", value: [0, 1] },
+    lightDirection: [1, 1, 1],
+    ambientLightIntensity: 0.5,
+    diffuseLightIntensity: 0.5,
+    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,
+    },
+};
+
+export default class Hillshading2DLayer extends BitmapLayer<Hillshading2DProps> {
+    initializeState(): void {
+        this.setState({
+            isLoaded: false,
+        });
+        super.initializeState();
+    }
+
+    // Signature from the base class, eslint doesn't like the any type.
+    // eslint-disable-next-line
+    draw({ moduleParameters, uniforms }: any): void {
+        if (!this.state["isLoaded"]) {
+            this.setState({
+                isLoaded: true,
+            });
+
+            if (typeof this.props.setReportedBoundingBox !== "undefined") {
+                const xMin = this.props.bounds[0];
+                const yMin = this.props.bounds[1];
+                const zMin = 1;
+                const xMax = this.props.bounds[2];
+                const yMax = this.props.bounds[3];
+                const zMax = -1;
+                const bbox = [xMin, yMin, zMin, xMax, yMax, zMax];
+
+                this.props.setReportedBoundingBox(bbox);
+            }
+        }
+
+        if (this.props.image) {
+            const mergedModuleParams = {
+                ...moduleParameters,
+                valueDecoder: {
+                    // The prop objects are not merged with the defaultProps by default.
+                    // See https://github.com/facebook/react/issues/2568
+                    ...defaultProps.valueDecoder,
+                    ...moduleParameters.valueDecoder,
+                },
+                modelMatrix: getModelMatrix(
+                    this.props.rotDeg,
+                    this.props.bounds[0] as number, // Rotate around upper left corner of bounds
+                    this.props.bounds[3] as number
+                ),
+            };
+            super.setModuleParameters(mergedModuleParams);
+
+            const valueRangeMin = this.props.valueRange[0] ?? 0.0;
+            const valueRangeMax = this.props.valueRange[1] ?? 1.0;
+            const colorMapRangeMin =
+                this.props.colorMapRange?.[0] ?? valueRangeMin;
+            const colorMapRangeMax =
+                this.props.colorMapRange?.[1] ?? valueRangeMax;
+
+            const [minVal, maxVal] = this.props.valueRange;
+            super.draw({
+                uniforms: {
+                    ...uniforms,
+                    // Send extra uniforms to the shader.
+                    bitmapResolution: [
+                        (this.props.image as Texture).width,
+                        (this.props.image as Texture).height,
+                    ],
+                    valueRangeSize: maxVal - minVal,
+                    lightDirection: this.props.lightDirection,
+                    ambientLightIntensity: this.props.ambientLightIntensity,
+                    diffuseLightIntensity: this.props.diffuseLightIntensity,
+                    valueRangeMin,
+                    valueRangeMax,
+                    colorMapRangeMin,
+                    colorMapRangeMax,
+                },
+                moduleParameters: mergedModuleParams,
+            });
+        }
+    }
+
+    // Signature from the base class, eslint doesn't like the any type.
+    // eslint-disable-next-line
+    getShaders(): any {
+        const parentShaders = super.getShaders();
+        // Overwrite the BitmapLayer's default fragment shader with ours, that does hillshading.
+        parentShaders.fs = fsHillshading;
+        // Add the decoder shader module to our colormap shader, so we can use the decoder function from our shader.
+        parentShaders.modules.push(decoder);
+        return parentShaders;
+    }
+
+    getPickingInfo({ info }: { info: PickingInfo }): LayerPickInfo {
+        if (this.state["pickingDisabled"] || !info.color) {
+            return info;
+        }
+
+        const mergedDecoder = {
+            ...defaultProps.valueDecoder,
+            ...this.props.valueDecoder,
+        };
+        // The picked color is the one in raw image, not the one after hillshading.
+        // We just need to decode that RGB color into a property float value.
+        const val = decodeRGB(info.color, mergedDecoder, this.props.valueRange);
+
+        return {
+            ...info,
+            // Picking color doesn't represent object index in this layer.
+            // For more details, see https://deck.gl/docs/developer-guide/custom-layers/picking
+            index: 0,
+            propertyValue: val,
+        };
+    }
+}
+
+Hillshading2DLayer.layerName = "Hillshading2DLayer";
+Hillshading2DLayer.defaultProps = defaultProps;

package/src/layers/index.ts

@@ -0,0 +1,35 @@
+export { default as ColormapLayer } from "./colormap/colormapLayer";
+export { default as MapLayer } from "./map/mapLayer";
+export { default as TriangleLayer } from "./triangle/triangleLayer";
+export { default as PointsLayer } from "./points/pointsLayer";
+export { default as PolylinesLayer } from "./polylines/polylinesLayer";
+export { default as Map3DLayer } from "./terrain/map3DLayer";
+export { default as DrawingLayer } from "./drawing/drawingLayer";
+export { default as Hillshading2DLayer } from "./hillshading2d/hillshading2dLayer";
+export { default as WellsLayer } from "./wells/wellsLayer";
+export { default as PieChartLayer } from "./piechart/pieChartLayer";
+export { default as FaultPolygonsLayer } from "./fault_polygons/faultPolygonsLayer";
+export { default as AxesLayer } from "./axes/axesLayer";
+export { default as Axes2DLayer } from "./axes2d/axes2DLayer";
+export { default as SelectableGeoJsonLayer } from "./selectable_geojson/selectableGeoJsonLayer";
+export { default as NorthArrow3DLayer } from "./northarrow/northArrow3DLayer";
+export { default as UnfoldedGeoJsonLayer } from "./intersection/unfoldedGeoJsonLayer";
+export { default as Grid3DLayer } from "./grid3d/grid3dLayer";
+export { default as BoxSelectionLayer } from "./BoxSelectionLayer/boxSelectionLayer";
+
+export { AxesLayerProps } from "./axes/axesLayer";
+export { Axes2DLayerProps } from "./axes2d/axes2DLayer";
+export { ColormapLayerProps } from "./colormap/colormapLayer";
+export { DrawingLayerProps } from "./drawing/drawingLayer";
+export { FaultPolygonsLayerProps } from "./fault_polygons/faultPolygonsLayer";
+export { Hillshading2DProps } from "./hillshading2d/hillshading2dLayer";
+export { MapLayerProps } from "./map/mapLayer";
+export { TriangleLayerProps } from "./triangle/triangleLayer";
+export { PointsLayerProps } from "./points/pointsLayer";
+export { PolylinesLayerProps } from "./polylines/polylinesLayer";
+export { NorthArrow3DLayerProps } from "./northarrow/northArrow3DLayer";
+export { PieChartLayerProps } from "./piechart/pieChartLayer";
+export { Map3DLayerProps } from "./terrain/map3DLayer";
+export { WellsLayerProps } from "./wells/wellsLayer";
+export { Grid3DLayerProps } from "./grid3d/grid3dLayer";
+export { BoxSelectionLayerProps } from "./BoxSelectionLayer/boxSelectionLayer";

package/src/layers/intersection/intersectionView.stories.tsx

@@ -0,0 +1,294 @@
+import React from "react";
+import SubsurfaceViewer from "../../SubsurfaceViewer";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Feature } from "geojson";
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer / Experimental Intersection View",
+} as ComponentMeta<typeof SubsurfaceViewer>;
+
+const StoryTemplate: ComponentStory<typeof SubsurfaceViewer> = (args) => {
+    return <SubsurfaceViewer {...args} />;
+};
+
+const defaultProps = {
+    id: "SubsurfaceViewer",
+    views: {
+        layout: [1, 2] as [number, number],
+        showLabel: true,
+        viewports: [
+            {
+                id: "orbit_view",
+                name: "3d view",
+                show3D: true,
+                isSync: false,
+            },
+            {
+                id: "intersection_view",
+                name: "Intersection view",
+                show3D: false,
+                layerIds: ["enhanced-path-layer", "wells-layer"],
+                isSync: false,
+            },
+        ],
+    },
+};
+
+const polyline_data = {
+    type: "FeatureCollection",
+    features: [
+        {
+            type: "Feature",
+            geometry: {
+                type: "GeometryCollection",
+                geometries: [
+                    {
+                        type: "LineString",
+                        coordinates: [
+                            [500, 2000, -400],
+                            [1500, 2000, -600],
+                            [1700, 2500, -400],
+                        ],
+                    },
+                ],
+            },
+        },
+    ],
+};
+
+// Intersection view example with sample polyline data
+export const WithSamplePolylineData = StoryTemplate.bind({});
+WithSamplePolylineData.args = {
+    ...defaultProps,
+    bounds: [0, 0, 2000, 3000] as [number, number, number, number],
+    layers: [
+        {
+            "@@type": "UnfoldedGeoJsonLayer",
+            id: "enhanced-path-layer",
+            data: polyline_data,
+            lineWidthScale: 20,
+            lineBillboard: true,
+        },
+        {
+            "@@type": "AxesLayer",
+            id: "axes-layer",
+            bounds: [0, 0, 0, 2000, 3000, 1000],
+        },
+    ],
+};
+
+// Intersection view example with wells data
+export const WithWellsData = StoryTemplate.bind({});
+WithWellsData.args = {
+    ...defaultProps,
+    bounds: [432205, 6475078, 437720, 6481113] as [
+        number,
+        number,
+        number,
+        number
+    ],
+    resources: {
+        wellsData: "./volve_wells.json",
+    },
+    layers: [
+        {
+            "@@type": "AxesLayer",
+            id: "axes-layer",
+            bounds: [432205, 6475078, 0, 437720, 6481113, 3500],
+        },
+        {
+            "@@type": "WellsLayer",
+            data: "@@#resources.wellsData",
+            lineStyle: {
+                width: (object: Record<string, Record<string, unknown>>) => {
+                    if (object["properties"]["name"] === "15/9-F-4") return 6;
+                    return 0;
+                },
+            },
+            wellHeadStyle: {
+                size: (object: Record<string, Record<string, unknown>>) => {
+                    if (object["properties"]["name"] === "15/9-F-4") return 8;
+                    return 0;
+                },
+            },
+        },
+    ],
+};
+
+const FencePolygonData = {
+    type: "FeatureCollection",
+    features: [
+        {
+            type: "Feature",
+            geometry: {
+                type: "GeometryCollection",
+                geometries: [
+                    {
+                        type: "Polygon",
+                        coordinates: [
+                            [
+                                [500, 1000, -400],
+                                [800, 1200, -400],
+                                [1000, 1100, -400],
+                                [1000, 1100, -600],
+                                [800, 1200, -600],
+                                [500, 1000, -600],
+                                [500, 1000, -400],
+                            ],
+                        ],
+                    },
+                ],
+            },
+        },
+    ],
+};
+
+// With fence polygon data
+export const FencePolygon = StoryTemplate.bind({});
+FencePolygon.args = {
+    ...defaultProps,
+    bounds: [500, 1000, 1200, 1500] as [number, number, number, number],
+    layers: [
+        {
+            "@@type": "AxesLayer",
+            id: "axes-layer",
+            bounds: [300, 800, 400, 1300, 1600, 600],
+        },
+        {
+            "@@type": "UnfoldedGeoJsonLayer",
+            id: "enhanced-path-layer",
+            data: FencePolygonData,
+            lineWidthScale: 2,
+            lineBillboard: true,
+            stroked: true,
+        },
+    ],
+};
+
+const IntersectionViewData = {
+    type: "FeatureCollection",
+    features: [
+        {
+            type: "Feature",
+            geometry: {
+                type: "GeometryCollection",
+                geometries: [
+                    {
+                        type: "Polygon",
+                        coordinates: [
+                            [
+                                [500, 1000, -400],
+                                [800, 1200, -400],
+                                [1000, 1100, -400],
+                                [1000, 1100, -600],
+                                [800, 1200, -600],
+                                [500, 1000, -600],
+                                [500, 1000, -400],
+                            ],
+                        ],
+                    },
+                ],
+            },
+            properties: {
+                name: "Fence",
+                color: [235, 107, 52, 255],
+            },
+        },
+        {
+            type: "Feature",
+            geometry: {
+                type: "GeometryCollection",
+                geometries: [
+                    {
+                        type: "Point",
+                        coordinates: [500, 1000, -400],
+                    },
+                    {
+                        type: "LineString",
+                        coordinates: [
+                            [500, 1000, -400],
+                            [575, 1050, -450],
+                            [650, 1100, -450],
+                            [725, 1150, -500],
+                            [800, 1200, -500],
+                            [900, 1150, -550],
+                            [950, 1125, -550],
+                            [1000, 1100, -550],
+                        ],
+                    },
+                ],
+            },
+            properties: {
+                name: "Well",
+                color: [52, 125, 235, 255],
+            },
+        },
+        {
+            type: "Feature",
+            geometry: {
+                type: "GeometryCollection",
+                geometries: [
+                    {
+                        type: "LineString",
+                        coordinates: [
+                            [500, 1000, -475],
+                            [800, 1200, -475],
+                            [1000, 1100, -475],
+                        ],
+                    },
+                ],
+            },
+            properties: {
+                name: "Surface 1",
+                color: [52, 235, 211, 255],
+            },
+        },
+        {
+            type: "Feature",
+            geometry: {
+                type: "GeometryCollection",
+                geometries: [
+                    {
+                        type: "LineString",
+                        coordinates: [
+                            [500, 1000, -525],
+                            [800, 1200, -525],
+                            [1000, 1100, -525],
+                        ],
+                    },
+                ],
+            },
+            properties: {
+                name: "Surface 2",
+                color: [32, 252, 3, 255],
+            },
+        },
+    ],
+};
+
+// An intersection view example with sample surface, wells data laong with fence.
+export const IntersectionViewExample = StoryTemplate.bind({});
+IntersectionViewExample.args = {
+    ...defaultProps,
+    bounds: [500, 1000, 1200, 1500] as [number, number, number, number],
+    layers: [
+        {
+            "@@type": "AxesLayer",
+            id: "axes-layer",
+            bounds: [300, 800, 400, 1300, 1600, 600],
+        },
+        {
+            "@@type": "UnfoldedGeoJsonLayer",
+            id: "enhanced-path-layer",
+            data: IntersectionViewData,
+            lineWidthScale: 1,
+            lineBillboard: true,
+            pointBillboard: true,
+            stroked: true,
+            getPointRadius: 3,
+            getLineColor: (d: Feature) => d.properties?.["color"],
+            getFillColor: (d: Feature) => d.properties?.["color"],
+        },
+    ],
+};

package/src/layers/intersection/unfoldedGeoJsonLayer.ts

@@ -0,0 +1,92 @@
+import { Layer, Position, Viewport } from "@deck.gl/core/typed";
+import { GeoJsonLayer } from "@deck.gl/layers/typed";
+import { Feature } from "geojson";
+import { LineString } from "geojson";
+import { isEqual, zip } from "lodash";
+import { distance } from "mathjs";
+import IntersectionViewport from "../../viewports/intersectionViewport";
+
+const planeY = 2000;
+
+function computeUnfoldedPath(worldCoordinates: Position[]): Position[] {
+    const z = worldCoordinates.map((v) => v[2]);
+    const delta = worldCoordinates.map((v, i, coordinates) => {
+        const prev = coordinates[i - 1] || v;
+        return distance([prev[0], prev[1]], [v[0], v[1]]);
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const a: any[] = [];
+    delta.forEach((d) => {
+        const prev = a.at(-1) || 0;
+        a.push(d + prev);
+    });
+    const vAbscissa = zip(a, [...a].fill(planeY), z);
+
+    return vAbscissa as Position[];
+}
+
+function computeUnfoldedPolygon(coordinates: Position[]): Position[] {
+    const half = Math.floor(coordinates.length / 2);
+    const upper_line = coordinates.splice(0, half);
+    const lower_line = coordinates.splice(0, half);
+    const uul = computeUnfoldedPath(upper_line);
+    const ull = computeUnfoldedPath(lower_line.reverse());
+    const unfolded_coordinates = uul.concat(ull.reverse());
+    unfolded_coordinates.push(uul[0]);
+
+    return unfolded_coordinates;
+}
+
+function getUnfoldedPath(object: Feature): Position[] {
+    const worldCoordinates = (object.geometry as LineString)
+        .coordinates as Position[];
+
+    // check if the path is polygon i.e. closed
+    const is_closed = isEqual(worldCoordinates[0], worldCoordinates.at(-1));
+    if (is_closed) {
+        return computeUnfoldedPolygon(worldCoordinates);
+    } else {
+        return computeUnfoldedPath(worldCoordinates);
+    }
+}
+
+export default class UnfoldedGeoJsonLayer<
+    D extends Feature = Feature
+> extends GeoJsonLayer<D> {
+    renderLayers(): Layer[] {
+        const layers = super.renderLayers() as Layer[];
+
+        const path_layers = layers
+            .flat()
+            .filter((layer) => layer?.constructor.name === "PathLayer");
+
+        path_layers.forEach((layer) => {
+            const unfolded_layer = layer.clone(
+                this.getSubLayerProps({
+                    ...layer,
+                    id: layer.id + "-for-intersection-view",
+                    getPath: (object: Feature): Position[] =>
+                        getUnfoldedPath(object),
+                })
+            );
+            if (unfolded_layer) layers.push(unfolded_layer);
+        });
+
+        return layers;
+    }
+
+    filterSubLayer({
+        layer,
+        viewport,
+    }: {
+        layer: Layer;
+        viewport: Viewport;
+    }): boolean {
+        if (viewport.constructor === IntersectionViewport) {
+            return layer.id.search("-for-intersection-view") != -1;
+        }
+        return layer.id.search("-for-intersection-view") == -1;
+    }
+}
+
+UnfoldedGeoJsonLayer.layerName = "UnfoldedGeoJsonLayer";