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

package/src/layers/points/pointsLayer.ts

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

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

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

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

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

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

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