@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/layers/points/pointsLayer.ts

@@ -0,0 +1,143 @@
+import { CompositeLayer, UpdateParameters } from "@deck.gl/core/typed";
+import { ScatterplotLayer } from "@deck.gl/layers/typed";
+import { isEqual } from "lodash";
+
+import {
+    ExtendedLayerProps,
+    invertZCoordinate,
+    defineBoundingBox,
+} from "../utils/layerTools";
+
+export interface PointsLayerProps<D> extends ExtendedLayerProps<D> {
+    /**
+     * Point positions as [x, y, z, x, y, z....].
+     */
+    pointsData: number[];
+
+    /**
+     * Point color defined as RGB or RGBA array. Each component is in 0-255 range.
+     */
+    color: [number, number, number] | [number, number, number, number];
+
+    /**
+     * The units of the point radius, one of `'meters'`, `'common'`, and `'pixels'`.
+     */
+    radiusUnits: "meters" | "common" | "pixels";
+
+    /**
+     * Point radius defined in radius units.
+     */
+    pointRadius: number;
+
+    /**  If true means that input z values are interpreted as depths.
+     * For example depth of z = 1000 corresponds to -1000 on the z axis. Default true.
+     */
+    ZIncreasingDownwards: boolean;
+
+    // Non public properties:
+    setReportedBoundingBox?: React.Dispatch<
+        React.SetStateAction<[number, number, number, number, number, number]>
+    >;
+}
+
+const defaultProps = {
+    "@@type": "PointsLayer",
+    name: "PointsLayer",
+    id: "points-layer",
+    color: [125, 0, 0, 255],
+    radiusUnits: "pixels",
+    pointRadius: 5,
+    pickable: true,
+    visible: true,
+    ZIncreasingDownwards: true,
+};
+
+interface IDataAttributes {
+    length: number;
+    attributes: {
+        getPosition: {
+            value: Float32Array;
+            size: number;
+        };
+    };
+}
+
+export default class PointsLayer extends CompositeLayer<
+    PointsLayerProps<unknown>
+> {
+    renderLayers(): [ScatterplotLayer?] {
+        const layer = new ScatterplotLayer(
+            this.getSubLayerProps({
+                id: "points-layer",
+                pickable: this.props.pickable,
+                billboard: true,
+                data: this.state["dataAttributes"],
+                _pathType: "open",
+                getFillColor: () => this.props.color,
+                getRadius: () => this.props.pointRadius,
+                radiusUnits: this.props.radiusUnits,
+
+                updateTriggers: {
+                    getFillColor: [this.props.color],
+                    getRadius: [this.props.pointRadius],
+                },
+            })
+        );
+        return [layer];
+    }
+
+    initializeState(): void {
+        const dataAttributes = this.rebuildDataAttributes(true);
+        this.setState({ dataAttributes });
+    }
+
+    updateState({ props, oldProps }: UpdateParameters<PointsLayer>): void {
+        const needs_reload =
+            !isEqual(props.pointsData, oldProps.pointsData) ||
+            !isEqual(props.ZIncreasingDownwards, oldProps.ZIncreasingDownwards);
+
+        if (needs_reload) {
+            const dataAttributes = this.rebuildDataAttributes(false);
+            this.setState({ dataAttributes });
+        }
+    }
+
+    private rebuildDataAttributes(
+        reportBoundingBox: boolean
+    ): IDataAttributes | null {
+        const dataArray = this.loadData();
+        if (!dataArray) {
+            return null;
+        }
+        if (this.props.ZIncreasingDownwards) {
+            invertZCoordinate(dataArray);
+        }
+        if (
+            typeof this.props.setReportedBoundingBox === "function" &&
+            reportBoundingBox
+        ) {
+            const boundingBox = defineBoundingBox(dataArray);
+            this.props.setReportedBoundingBox(boundingBox);
+        }
+
+        return {
+            length: dataArray.length / 3,
+            attributes: {
+                getPosition: {
+                    value: dataArray,
+                    size: 3,
+                },
+            },
+        };
+    }
+
+    private loadData(): Float32Array | null {
+        if (Array.isArray(this.props.pointsData)) {
+            return new Float32Array(this.props.pointsData);
+        }
+        return new Float32Array();
+    }
+}
+
+PointsLayer.layerName = "PointsLayer";
+PointsLayer.defaultProps = defaultProps;

package/src/layers/polylines/polylinesLayer.stories.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { create, all } from "mathjs";
+
+import SubsurfaceViewer from "../../SubsurfaceViewer";
+import { default as PolylinesLayer } from "./polylinesLayer";
+import { default as AxesLayer } from "../axes/axesLayer";
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer / Polylines Layer",
+} as ComponentMeta<typeof SubsurfaceViewer>;
+
+const defaultParameters = {
+    docs: {
+        inlineStories: false,
+        iframeHeight: 500,
+    },
+};
+
+// Small example using polylinesLayer.
+const smallPolylinesLayer = new PolylinesLayer({
+    id: "small_polylines_layer",
+    /* eslint-disable */
+    polylinePoints: [0, 0, 0, 
+                    10, 0,  0,
+                    10, 0, 10,    
+                    
+                    -5, -5, 4,
+                    0, -8, 6,
+                    5, 10, 8
+
+                    ],
+    /* eslint-enable */
+    startIndices: [0, 3],
+    polylinesClosed: [true, false],
+    color: [0, 200, 100],
+
+    widthUnits: "pixels",
+    linesWidth: 10,
+    ZIncreasingDownwards: true,
+});
+
+const smallAxesLayer = new AxesLayer({
+    id: "small_axes_layer",
+    bounds: [-10, -10, 0, 20, 10, 10],
+});
+
+export const SmallPolylinesLayer: ComponentStory<typeof SubsurfaceViewer> = (
+    args
+) => {
+    return <SubsurfaceViewer {...args} />;
+};
+
+SmallPolylinesLayer.args = {
+    id: "map",
+    layers: [smallAxesLayer, smallPolylinesLayer],
+    bounds: [-10, -10, 17, 10],
+    views: {
+        layout: [1, 1],
+        viewports: [
+            {
+                id: "view_1",
+                show3D: true,
+            },
+        ],
+    },
+};
+
+SmallPolylinesLayer.parameters = {
+    docs: {
+        ...defaultParameters.docs,
+        description: {
+            story: "Polyline nodes are given as native javascript array.",
+        },
+    },
+};
+
+const sideSize = 10000;
+const pointsCount = 100000;
+
+const math = create(all, { randomSeed: "1234" });
+
+type TRandomNumberFunc = () => number;
+
+const randomFunc = ((): TRandomNumberFunc => {
+    if (math.random) {
+        return () => {
+            const val = math.random?.(sideSize);
+            return val ? val : 0.0;
+        };
+    }
+    return () => Math.random() * sideSize;
+})();
+
+const hugePolylinesLayer = new PolylinesLayer({
+    id: "huge_polylines-layer",
+
+    polylinePoints: Array(pointsCount * 3)
+        .fill(0)
+        .map(() => randomFunc()),
+    startIndices: [0],
+    color: [0, 100, 100, 40],
+
+    widthUnits: "pixels",
+    linesWidth: 1,
+
+    ZIncreasingDownwards: true,
+});
+
+const hugeAxesLayer = new AxesLayer({
+    id: "huge_axes_layer",
+    bounds: [0, 0, 0, sideSize, sideSize, sideSize],
+});
+
+export const HugePolylinesLayer: ComponentStory<typeof SubsurfaceViewer> = (
+    args
+) => {
+    return <SubsurfaceViewer {...args} />;
+};
+
+HugePolylinesLayer.args = {
+    id: "map",
+    layers: [hugeAxesLayer, hugePolylinesLayer],
+    bounds: [0, 0, sideSize, sideSize],
+    views: {
+        layout: [1, 1],
+        viewports: [
+            {
+                id: "view_1",
+                show3D: true,
+            },
+        ],
+    },
+};
+
+HugePolylinesLayer.parameters = {
+    docs: {
+        ...defaultParameters.docs,
+        description: {
+            story: "Polyline nodes are randomly generated in runtime and given as native javascript array.",
+        },
+    },
+};

package/src/layers/polylines/polylinesLayer.ts

@@ -0,0 +1,263 @@
+import { CompositeLayer, UpdateParameters } from "@deck.gl/core/typed";
+import { PathLayer } from "@deck.gl/layers/typed";
+import { isEqual } from "lodash";
+
+import {
+    ExtendedLayerProps,
+    invertZCoordinate,
+    defineBoundingBox,
+} from "../utils/layerTools";
+
+type IsPolylineClosedFunc = (index: number) => boolean;
+
+/**
+ * _pathType is Deck.GL PathLayer prop. If all the polylines are "open" or are "loop" some checks are skipped for better performance.
+ * If this prop is not set or null PathLayer checks closeness by comparing coordinates and decides how to draw the polylines.
+ */
+type PathType = "open" | "loop" | null;
+
+export interface PolylinesLayerProps<D> extends ExtendedLayerProps<D> {
+    /**
+     * Polyline vertices as [x, y, z, x, y, z....].
+     */
+    polylinePoints: number[];
+
+    /**
+      Start indices of the polylines counted in vertex indices.
+      For example, if there are 3 paths of 2, 3, and 4 vertices each, startIndices should be [0, 2, 5].
+     */
+    startIndices: number[];
+
+    /** Array of boolean flags or a single value indicating whether the polylines are closed.
+     *  The polylines are considered to be open if not set.
+     */
+    polylinesClosed?: boolean | boolean[];
+    /**
+     * Line color defined as RGB or RGBA array. Each component is in 0-255 range.
+     */
+    color: [number, number, number] | [number, number, number, number];
+
+    /**
+     * The units of the line width, one of `'meters'`, `'common'`, and `'pixels'`.
+     */
+    widthUnits: "meters" | "common" | "pixels";
+
+    /**
+     * Line width defined in width units.
+     */
+    linesWidth: number;
+
+    /**
+     * If true means that input z values are interpreted as depths.
+     * For example depth of z = 1000 corresponds to -1000 on the z axis. Default true.
+     */
+    ZIncreasingDownwards: boolean;
+
+    // Non public properties:
+    setReportedBoundingBox?: React.Dispatch<
+        React.SetStateAction<[number, number, number, number, number, number]>
+    >;
+}
+
+const defaultProps = {
+    "@@type": "PolylinesLayer",
+    name: "PolylinesLayer",
+    id: "polylines-layer",
+    widthUnits: "pixels",
+    linesWidth: 5,
+    color: [0, 0, 200, 255],
+    pickable: true,
+    visible: true,
+    ZIncreasingDownwards: true,
+};
+
+interface IDataAttributes {
+    length: number;
+    startIndices: Uint32Array;
+    attributes: {
+        getPath: {
+            value: Float32Array;
+            size: number;
+        };
+    };
+    pathType: PathType;
+}
+
+export default class PolylinesLayer extends CompositeLayer<
+    PolylinesLayerProps<unknown>
+> {
+    renderLayers(): [PathLayer?] {
+        const layer = new PathLayer(
+            this.getSubLayerProps({
+                id: "polylines-layer",
+                widthUnits: this.props.widthUnits,
+                pickable: this.props.pickable,
+                billboard: true,
+                jointRounded: true,
+                capRounded: true,
+                data: this.state["dataAttributes"],
+                _pathType: this.state["dataAttributes"].pathType,
+                getColor: () => this.props.color,
+                getWidth: () => this.props.linesWidth,
+
+                updateTriggers: {
+                    getColor: [this.props.color],
+                    getWidth: [this.props.linesWidth],
+                },
+            })
+        );
+        return [layer];
+    }
+
+    initializeState(): void {
+        const dataAttributes = this.rebuildDataAttributes(true);
+        this.setState({ dataAttributes });
+    }
+
+    updateState({ props, oldProps }: UpdateParameters<PolylinesLayer>): void {
+        const needs_reload =
+            !isEqual(props.polylinePoints, oldProps.polylinePoints) ||
+            !isEqual(props.startIndices, oldProps.startIndices) ||
+            !isEqual(props.polylinesClosed, oldProps.polylinesClosed) ||
+            !isEqual(props.ZIncreasingDownwards, oldProps.ZIncreasingDownwards);
+
+        if (needs_reload) {
+            const dataAttributes = this.rebuildDataAttributes(false);
+            this.setState({ dataAttributes });
+        }
+    }
+
+    private rebuildDataAttributes(
+        reportBoundingBox: boolean
+    ): IDataAttributes | null {
+        const dataArrays = this.loadData();
+        if (this.props.ZIncreasingDownwards) {
+            invertZCoordinate(dataArrays.positions);
+        }
+        if (
+            typeof this.props.setReportedBoundingBox === "function" &&
+            reportBoundingBox
+        ) {
+            const boundingBox = defineBoundingBox(dataArrays.positions);
+            this.props.setReportedBoundingBox(boundingBox);
+        }
+
+        return {
+            length: dataArrays.linesCount,
+            startIndices: dataArrays.startIndices,
+            attributes: {
+                getPath: {
+                    value: dataArrays.positions,
+                    size: 3,
+                },
+            },
+            pathType: dataArrays.pathType,
+        };
+    }
+
+    private loadData(): {
+        linesCount: number;
+        startIndices: Uint32Array;
+        positions: Float32Array;
+        pathType: PathType;
+    } {
+        this.normalizeStartIndices();
+        const data = this.closePolylines();
+
+        return {
+            linesCount: data.startIndices.length,
+            positions: new Float32Array(data.polylinePoints),
+            startIndices: new Uint32Array(data.startIndices),
+            pathType: data.pathType,
+        };
+    }
+
+    private closePolylines(): {
+        polylinePoints: number[];
+        startIndices: number[];
+        pathType: PathType;
+    } {
+        const isClosedFunc = this.createIsClosedFunc();
+        if (!isClosedFunc.func) {
+            return {
+                polylinePoints: this.props.polylinePoints,
+                startIndices: this.props.startIndices,
+                pathType: isClosedFunc.pathType,
+            };
+        }
+        let startIndexShift = 0;
+        const closedPoints: number[] = [];
+        const closedStartIndices: number[] = [];
+        const linesCount = this.props.startIndices.length - 1;
+        for (let i = 0; i < linesCount; ++i) {
+            const isClosed = isClosedFunc.func(i);
+            closedStartIndices.push(
+                this.props.startIndices[i] + startIndexShift
+            );
+            if (isClosed) {
+                this.closePolyline(i, closedPoints);
+                ++startIndexShift;
+            } else {
+                this.copyPolyline(i, closedPoints);
+            }
+        }
+        return {
+            polylinePoints: closedPoints,
+            startIndices: closedStartIndices,
+            pathType: isClosedFunc.pathType,
+        };
+    }
+
+    private normalizeStartIndices() {
+        const lastIndex = this.props.startIndices.slice(-1)[0];
+        const totalPointsCount = this.props.polylinePoints.length / 3;
+        if (lastIndex < totalPointsCount) {
+            this.props.startIndices.push(totalPointsCount);
+        }
+    }
+
+    private copyPolyline(lineIndex: number, outPoints: number[]) {
+        const startPoint = this.props.startIndices[lineIndex];
+        const endPoint = this.props.startIndices[lineIndex + 1];
+        for (let idx = startPoint; idx < endPoint; ++idx) {
+            outPoints.push(...this.getPolylinePoint(idx));
+        }
+    }
+
+    private closePolyline(lineIndex: number, outPoints: number[]) {
+        this.copyPolyline(lineIndex, outPoints);
+        const startPoint = this.props.startIndices[lineIndex];
+        outPoints.push(...this.getPolylinePoint(startPoint));
+    }
+
+    private getPolylinePoint(index: number): number[] {
+        return this.props.polylinePoints.slice(3 * index, 3 * (index + 1));
+    }
+
+    private createIsClosedFunc(): {
+        func: IsPolylineClosedFunc | null;
+        pathType: PathType;
+    } {
+        if (this.props.polylinesClosed === true) {
+            return {
+                func: () => true,
+                pathType: "loop",
+            };
+        }
+        if (Array.isArray(this.props.polylinesClosed)) {
+            return {
+                func: (lineIndex: number) => {
+                    return (this.props.polylinesClosed as boolean[])[lineIndex];
+                },
+                pathType: null,
+            };
+        }
+        return {
+            func: null,
+            pathType: "open",
+        };
+    }
+}
+
+PolylinesLayer.layerName = "PolylinesLayer";
+PolylinesLayer.defaultProps = defaultProps;

package/src/layers/selectable_geojson/selectableGeoJsonLayer.ts

@@ -0,0 +1,25 @@
+import { GeoJsonLayer } from "@deck.gl/layers/typed";
+import { Feature } from "geojson";
+import { PickingInfo } from "@deck.gl/core/typed";
+import { DeckGLLayerContext } from "../../components/Map";
+import { isDrawingEnabled } from "../utils/layerTools";
+
+export default class SelectableGeoJsonLayer extends GeoJsonLayer<Feature> {
+    onClick(info: PickingInfo): boolean {
+        // Make selection only when drawing is disabled
+        if (isDrawingEnabled(this.context.layerManager)) {
+            return false;
+        } else {
+            (this.context as DeckGLLayerContext).userData.setEditedData({
+                selectedGeoJsonFeature: info.object,
+            });
+            return true;
+        }
+    }
+}
+
+SelectableGeoJsonLayer.layerName = "SelectableGeoJsonLayer";
+SelectableGeoJsonLayer.defaultProps = {
+    visible: true,
+    pickable: true,
+};

package/src/layers/shader_modules/decoder.fs.glsl.ts

@@ -0,0 +1,41 @@
+// RGB to float decoder parameters.
+
+const fs = `struct Decoder
+{
+  vec3 rgbScaler; // r, g and b multipliers
+  float floatScaler; // value multiplier
+  float offset; // translation of the r, g, b sum
+  float step; // discretize the value in a number of steps
+};
+
+uniform Decoder decoder;
+
+uniform float valueRangeMin;
+uniform float valueRangeMax;
+uniform float colorMapRangeMin;
+uniform float colorMapRangeMax;
+
+// Decode the RGB value using the decoder parameter.
+float decode_rgb2float(vec3 rgb, Decoder dec) {
+  rgb *= dec.rgbScaler * vec3(16711680.0, 65280.0, 255.0); //255*256*256, 255*256, 255
+  float value = (rgb.r + rgb.g + rgb.b + dec.offset) * dec.floatScaler;
+
+  // Value must be in [0, 1] and step in (0, 1]
+  value = floor(value / dec.step + 0.5) * dec.step;
+
+  // If colorMapRangeMin/Max specified, color map will span this interval.
+  float x  = value * (valueRangeMax - valueRangeMin) + valueRangeMin;
+  x = (x - colorMapRangeMin) / (colorMapRangeMax - colorMapRangeMin);
+  x = max(0.0, x);
+  x = min(1.0, x);
+
+  return x;
+}
+
+// Decode the RGB value using the decoder uniform.
+float decode_rgb2float(vec3 rgb) {
+  return decode_rgb2float(rgb, decoder);
+}
+`;
+
+export default fs;

package/src/layers/shader_modules/decoder.ts

@@ -0,0 +1,46 @@
+import { ValueDecoder } from "../utils/propertyMapTools";
+import fs from "./decoder.fs.glsl";
+
+// Shader module for the property map value decoder.
+// See https://luma.gl/docs/developer-guide/shader-modules
+
+const DEFAULT_DECODER: ValueDecoder = {
+    rgbScaler: [1, 1, 1],
+    floatScaler: 1,
+    offset: 0,
+    step: 0,
+};
+
+interface DecoderUniforms {
+    "decoder.rgbScaler": typeof DEFAULT_DECODER.rgbScaler;
+    "decoder.floatScaler": typeof DEFAULT_DECODER.floatScaler;
+    "decoder.offset": typeof DEFAULT_DECODER.offset;
+    "decoder.step": typeof DEFAULT_DECODER.step;
+}
+
+// Disable complaint about `any`
+// eslint-disable-next-line
+function getUniforms(opts: any): DecoderUniforms | {} {
+    if (opts && opts.valueDecoder) {
+        const {
+            rgbScaler = DEFAULT_DECODER.rgbScaler,
+            floatScaler = DEFAULT_DECODER.floatScaler,
+            offset = DEFAULT_DECODER.offset,
+            step = DEFAULT_DECODER.step,
+        } = opts.valueDecoder;
+        return {
+            "decoder.rgbScaler": rgbScaler,
+            "decoder.floatScaler": floatScaler,
+            "decoder.offset": offset,
+            "decoder.step": Math.max(step, 0.0000001), // singularity at 0
+        };
+    }
+
+    return {};
+}
+
+export default {
+    name: "decoder",
+    fs,
+    getUniforms,
+};

package/src/layers/shader_modules/index.ts

@@ -0,0 +1 @@
+export { default as decoder } from "./decoder";