@webviz/subsurface-viewer 0.0.1-alpha.1 → 0.0.2-alpha.1

package/src/layers/hillshading2d/hillshading2dLayer.ts

@@ -1,172 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,294 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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";