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

package/src/layers/axes2d/label-fragment.glsl.js

@@ -1,37 +0,0 @@
-export default `\
-#version 300 es
-#define SHADER_NAME graph-layer-fragment-shader
-
-precision highp float;
-
-out vec4 fragColor;
-
-uniform sampler2D fontTexture;
-
-uniform vec4 uAxisColor;
-uniform vec4 uBackGroundColor;
-
-in vec2 _vTexCoord;
-
-void main(void) {
-  vec4 color = texture(fontTexture, _vTexCoord);
-  
-  float x = 1.0 - (color.r + color.g + color.b) / 3.0;  // intensity of text color
-  x = smoothstep(0.0, 0.2, x);  
-
-  float text_r = uAxisColor.r;
-  float text_g = uAxisColor.g;
-  float text_b = uAxisColor.b;
-
-  float bg_r = uBackGroundColor.r;
-  float bg_g = uBackGroundColor.g;
-  float bg_b = uBackGroundColor.b;
-  
-  float r = x * text_r + (1.0 - x) * bg_r;
-  float g = x * text_g + (1.0 - x) * bg_g;
-  float b = x * text_b + (1.0 - x) * bg_b;
-
-  fragColor = vec4(r, g, b, 1.0);
-  return;
-}
-`;

package/src/layers/axes2d/label-vertex.glsl.js

@@ -1,20 +0,0 @@
-export default `\
-#version 300 es
-#define SHADER_NAME graph-layer-axis-vertex-shader
-
-precision highp float;
-
-in  vec3 positions;
-
-in vec2 vTexCoord;
-out vec2 _vTexCoord;
-
-uniform mat4 projectionMatrix;
-
-void main(void) {
-   _vTexCoord = vTexCoord;
-
-   vec3 position_commonspace = positions; // These positions are in view space.
-   gl_Position = projectionMatrix * vec4(position_commonspace, 1.0); // From viewspace to clip
-}
-`;

package/src/layers/axes2d/line-fragment.glsl.js

@@ -1,14 +0,0 @@
-export default `\
-#version 300 es
-#define SHADER_NAME axes2d-layer-fragment-shader
-
-precision highp float;
-
-uniform vec4 uColor;
-
-out vec4 fragColor;
-
-void main(void) {
-  fragColor = uColor;
-}
-`;

package/src/layers/axes2d/line-vertex.glsl.js

@@ -1,13 +0,0 @@
-export default `\
-#version 300 es
-#define SHADER_NAME axes2d-layer-vertex-shader
-
-precision highp float;
-
-in vec3 positions;
-
-void main(void) {
-   vec3 position_commonspace = project_position(positions);
-   gl_Position = project_common_position_to_clipspace(vec4(position_commonspace, 0.0));
-}
-`;

package/src/layers/colormap/colormap.fs.glsl.ts

@@ -1,42 +0,0 @@
-const fsColormap = `#define SHADER_NAME colormap-shader
-
-#ifdef GL_ES
-precision highp float;
-#endif
-
-varying vec2 vTexCoord;
-
-uniform sampler2D bitmapTexture; // Property map
-uniform sampler2D colormap;
-
-uniform float opacity;
-
-void main(void) {
-  vec4 bitmapColor = texture2D(bitmapTexture, vTexCoord);
-
-  // If it's a picking pass, we just return the raw property map value.
-  if (picking_uActive) {
-    gl_FragColor = bitmapColor;
-    return;
-  }
-
-  // Decode the RGB value into a float. See decoder.fs.glsl for more details.
-  float val = decode_rgb2float(bitmapColor.rgb);
-  // The resulting val will be in [0, 1] interval, so we can use it directly as a texture coord
-  // to sample from the colormap.
-  // 0 => Leftmost color in the colormap, 1 => rightmost color, linearly interpolated in between.
-  vec4 color = texture2D(colormap, vec2(val, 0.5));
-
-  // The final pixel opacity is the combination of the user provided image-wide opacity,
-  // the colormap opacity at the sampled pixel and the property map opacity of the sampled pixel.
-  gl_FragColor = vec4(color.rgb, color.a * bitmapColor.a * opacity);
-
-  // Support for existing functionality that comes from the BitmapLayer, such as desaturate, tintColor etc.
-  // See https://deck.gl/docs/api-reference/layers/bitmap-layer#render-options for more details.
-  geometry.uv = vTexCoord;
-  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
-
-}
-`;
-
-export default fsColormap;

package/src/layers/colormap/colormapLayer.ts

@@ -1,247 +0,0 @@
-import { BitmapLayer, BitmapLayerProps } from "@deck.gl/layers/typed";
-import { PickingInfo } from "@deck.gl/core/typed";
-import GL from "@luma.gl/constants";
-import { Texture2D } from "@luma.gl/webgl";
-
-import { LayerPickInfo } from "../../layers/utils/layerTools";
-import { decoder } from "../shader_modules";
-import { decodeRGB, ValueDecoder } from "../utils/propertyMapTools";
-import { getModelMatrix, colorMapFunctionType } from "../utils/layerTools";
-import fsColormap from "./colormap.fs.glsl";
-import { DeckGLLayerContext } from "../../components/Map";
-import { colorTablesArray } from "@emerson-eps/color-tables/";
-import { getRgbData } from "@emerson-eps/color-tables";
-import { ContinuousLegendDataType } from "../../components/ColorLegend";
-
-const DEFAULT_TEXTURE_PARAMETERS = {
-    [GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR,
-    [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
-    [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
-    [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE,
-};
-
-function getImageData(
-    colorMapName: string,
-    colorTables: colorTablesArray,
-    colorMapFunction?: colorMapFunctionType
-) {
-    const isColorMapFunctionDefined = typeof colorMapFunction !== "undefined";
-
-    const data = new Uint8Array(256 * 3);
-
-    for (let i = 0; i < 256; i++) {
-        const value = i / 255.0;
-        const rgb = isColorMapFunctionDefined
-            ? (colorMapFunction as colorMapFunctionType)(i / 255)
-            : getRgbData(value, colorMapName, colorTables);
-        let color: number[] = [];
-        if (rgb != undefined) {
-            if (Array.isArray(rgb)) {
-                color = rgb;
-            } else {
-                color = [rgb.r, rgb.g, rgb.b];
-            }
-        }
-
-        data[3 * i + 0] = color[0];
-        data[3 * i + 1] = color[1];
-        data[3 * i + 2] = color[2];
-    }
-
-    return data;
-}
-
-// 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.
-// The same approach is used in DeckGL's TerrainLayer: https://deck.gl/docs/api-reference/geo-layers/terrain-layer
-//
-// The image format is based on Tizen's terrain format and Mapbox's TerrainRGB:
-// https://github.com/tilezen/joerd/blob/master/docs/formats.md
-// https://docs.mapbox.com/help/troubleshooting/access-elevation-data/
-//
-// The main idea is that property values (floats) are encoded in the R G and B channels of an image.
-// We parametrize decoding, so we can support both Tizen and Mapbox terrains by adapting
-// the valueDecoder for each format.
-// We also support and use by default a format that optimizes for precision.
-// By default, the value decoder will map RGB(0, 0, 0) to the minimum value in valueRange
-// and RGB(255, 255, 255) to the maximum value in valueRange, thus giving us the full
-// > 16mil possible values for any property value range.
-// We also support property maps with an alpha channel. See colormap.fs.glsl for more details.
-export interface ColormapLayerProps extends BitmapLayerProps {
-    // Name of color map.
-    colorMapName: string;
-
-    // Optional function property.
-    // If defined this function will override the color map.
-    // Takes a value in the range [0,1] and returns a color.
-    colorMapFunction?: colorMapFunctionType;
-
-    // Min and max property values.
-    valueRange: [number, number];
-
-    // Use color map in this range.
-    colorMapRange: [number, number];
-
-    // See ValueDecoder in propertyMapTools.ts
-    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": "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",
-};
-
-export default class ColormapLayer extends BitmapLayer<ColormapLayerProps> {
-    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, context }: 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);
-            }
-        }
-
-        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;
-
-        // If specified color map will extend from colorMapRangeMin to colorMapRangeMax.
-        // Otherwise it will extend from valueRangeMin to valueRangeMax.
-        const colorMapRangeMin = this.props.colorMapRange?.[0] ?? valueRangeMin;
-        const colorMapRangeMax = this.props.colorMapRange?.[1] ?? valueRangeMax;
-
-        super.draw({
-            uniforms: {
-                ...uniforms,
-                // Send the colormap texture to the shader.
-                colormap: new Texture2D(context.gl, {
-                    width: 256,
-                    height: 1,
-                    format: GL.RGB,
-                    data: getImageData(
-                        this.props.colorMapName,
-                        (this.context as DeckGLLayerContext).userData
-                            .colorTables,
-                        this.props.colorMapFunction
-                    ),
-                    parameters: DEFAULT_TEXTURE_PARAMETERS,
-                }),
-                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 colormapping.
-        parentShaders.fs = fsColormap;
-        // 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 colormapping.
-        // 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,
-        };
-    }
-
-    getLegendData(): ContinuousLegendDataType {
-        const valueRangeMin = this.props.valueRange[0] ?? 0.0;
-        const valueRangeMax = this.props.valueRange[1] ?? 1.0;
-
-        // If specified color map will extend from colorMapRangeMin to colorMapRangeMax.
-        // Otherwise it will extend from valueRangeMin to valueRangeMax.
-        const min = this.props.colorMapRange?.[0] ?? valueRangeMin;
-        const max = this.props.colorMapRange?.[1] ?? valueRangeMax;
-
-        return {
-            discrete: false,
-            valueRange: [min, max],
-            colorName: this.props.colorMapName,
-            title: "PropertyMapLayer",
-            colorMapFunction: this.props.colorMapFunction,
-        };
-    }
-}
-
-ColormapLayer.layerName = "ColormapLayer";
-ColormapLayer.defaultProps = defaultProps;

package/src/layers/drawing/drawingLayer.tsx

@@ -1,256 +0,0 @@
-import {
-    COORDINATE_SYSTEM,
-    Color,
-    CompositeLayer,
-    PickingInfo,
-    LayerContext,
-    LayersList,
-} from "@deck.gl/core/typed";
-import { ExtendedLayerProps, LayerPickInfo } from "../utils/layerTools";
-import {
-    DrawLineStringMode,
-    DrawPointMode,
-    DrawPolygonMode,
-    EditAction,
-    Feature,
-    FeatureCollection,
-    GeoJsonEditMode,
-    ImmutableFeatureCollection,
-    ModeProps,
-    ModifyMode,
-    TransformMode,
-    ViewMode,
-} from "@nebula.gl/edit-modes";
-import { EditableGeoJsonLayer } from "@nebula.gl/layers";
-import { DeckGLLayerContext } from "../../components/Map";
-import { area, length } from "../../utils/measurement";
-
-// Custom drawing mode that deletes the selected GeoJson feature when releasing the Delete key.
-class CustomModifyMode extends ModifyMode {
-    handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>) {
-        super.handleKeyUp(event, props);
-
-        if (event.key === "Delete") {
-            const updatedData = new ImmutableFeatureCollection(props.data)
-                .deleteFeatures(props.selectedIndexes)
-                .getObject();
-
-            if (updatedData) {
-                props.onEdit({
-                    updatedData,
-                    editType: "removeFeature",
-                    editContext: {
-                        featureIndexes: props.selectedIndexes,
-                    },
-                });
-            }
-        }
-    }
-}
-
-function deleteEscapeKeyHandler(
-    drawMode: GeoJsonEditMode,
-    event: KeyboardEvent,
-    props: ModeProps<FeatureCollection>
-) {
-    if (event.key === "Escape") drawMode.getClickSequence().pop();
-    else if (event.key === "Delete") drawMode.resetClickSequence();
-    else return;
-
-    // used to set state so layer can be rerendered
-    const updatedData = new ImmutableFeatureCollection(props.data).getObject();
-    if (updatedData) {
-        props.onEdit({
-            updatedData,
-            editType: "undoDrawing",
-            editContext: {
-                featureIndexes: props.selectedIndexes,
-            },
-        });
-    }
-}
-
-class CustomDrawLineStringMode extends DrawLineStringMode {
-    handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>) {
-        super.handleKeyUp(event, props);
-        deleteEscapeKeyHandler(this, event, props);
-    }
-}
-
-class CustomDrawPolygonMode extends DrawPolygonMode {
-    handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>) {
-        super.handleKeyUp(event, props);
-        deleteEscapeKeyHandler(this, event, props);
-    }
-}
-
-// Mapping of mode name to mode class
-const MODE_MAP = {
-    view: ViewMode,
-    modify: CustomModifyMode,
-    transform: TransformMode,
-    drawPoint: DrawPointMode,
-    drawLineString: CustomDrawLineStringMode,
-    drawPolygon: CustomDrawPolygonMode,
-};
-
-const UNSELECTED_LINE_COLOR: Color = [0x50, 0x50, 0x50, 0xcc];
-const SELECTED_LINE_COLOR: Color = [0x0, 0x0, 0x0, 0xff];
-
-export interface DrawingLayerProps<D> extends ExtendedLayerProps<D> {
-    mode: string; // One of modes in MODE_MAP
-    selectedFeatureIndexes: number[];
-}
-
-const defaultProps = {
-    "@@type": "DrawingLayer",
-    name: "Drawing",
-    id: "drawing-layer",
-    pickable: true,
-    visible: true,
-    mode: "drawLineString",
-
-    // Props used to get/set data in the drawing layer.
-    selectedFeatureIndexes: [] as number[],
-    data: {
-        type: "FeatureCollection",
-        features: [],
-    },
-};
-
-// Composite layer that contains an EditableGeoJsonLayer from nebula.gl
-// See https://nebula.gl/docs/api-reference/layers/editable-geojson-layer
-export default class DrawingLayer extends CompositeLayer<
-    DrawingLayerProps<FeatureCollection>
-> {
-    initializeState(context: LayerContext): void {
-        super.initializeState(context);
-
-        this.setState({
-            data: this.props.data,
-            selectedFeatureIndexes: this.props.selectedFeatureIndexes,
-        });
-    }
-
-    // Select features when clicking on them if in view or modify modes.
-    // The selection is used to set current selected drawing, and
-    // is sent to the map component parent via setEditedData.
-    onClick(info: PickingInfo): boolean {
-        if (this.props.mode === "view" || this.props.mode === "modify") {
-            this.setState({
-                selectedFeatureIndexes: [info.index],
-            });
-            (this.context as DeckGLLayerContext).userData.setEditedData({
-                selectedFeatureIndexes: [info.index],
-            });
-            return true;
-        }
-
-        return false;
-    }
-
-    // For now, use `any` for the picking types because this function should
-    // recieve PickInfo<FeatureCollection>, but it recieves PickInfo<Feature>.
-    getPickingInfo({ info }: { info: PickingInfo }): LayerPickInfo {
-        if (!info.object) return info;
-        const feature = info.object;
-        let measurement;
-        if (feature.geometry.type === "LineString") {
-            measurement = length(feature);
-        } else if (feature.geometry.type === "Polygon") {
-            measurement = area(feature);
-        } else return info;
-        return {
-            ...info,
-            propertyValue: measurement,
-        };
-    }
-
-    // Callback for various editing events. Most events will update this component
-    // through patches sent to the map parent. See patchLayerPropsin layerTools.ts.
-    _onEdit(editAction: EditAction<FeatureCollection>): void {
-        switch (editAction.editType) {
-            case "addFeature":
-                this.setState({
-                    data: editAction.updatedData,
-                    selectedFeatureIndexes:
-                        editAction.editContext.featureIndexes,
-                });
-                (this.context as DeckGLLayerContext).userData.setEditedData({
-                    data: editAction.updatedData,
-                    selectedFeatureIndexes:
-                        editAction.editContext.featureIndexes,
-                });
-                break;
-            case "removeFeature":
-                this.setState({
-                    data: editAction.updatedData,
-                    selectedFeatureIndexes: [],
-                });
-                (this.context as DeckGLLayerContext).userData.setEditedData({
-                    data: editAction.updatedData,
-                    selectedFeatureIndexes: [] as number[],
-                });
-                break;
-            case "removePosition":
-            case "finishMovePosition":
-                this.setState({
-                    data: editAction.updatedData,
-                });
-                (this.context as DeckGLLayerContext).userData.setEditedData({
-                    data: editAction.updatedData,
-                });
-                break;
-            case "movePosition":
-            case "undoDrawing":
-                // Don't use setEditedData to avoid an expensive roundtrip,
-                // since this is done on every mouse move when editing.
-                this.setState({ data: editAction.updatedData });
-                break;
-        }
-    }
-
-    // Return the line color based on the selection status.
-    // The same can be done for other features (polygons, points etc).
-    _getLineColor(feature: Feature): Color {
-        const is_feature_selected = this.state["selectedFeatureIndexes"].some(
-            (i: number) => this.state["data"].features[i] === feature
-        );
-        if (is_feature_selected) {
-            return SELECTED_LINE_COLOR;
-        } else {
-            return UNSELECTED_LINE_COLOR;
-        }
-    }
-
-    renderLayers(): LayersList {
-        if (this.props.visible == false) {
-            return [];
-        }
-        const sub_layer_props = this.getSubLayerProps({
-            data: this.state["data"],
-            mode: MODE_MAP[this.props.mode as keyof typeof MODE_MAP],
-            modeConfig: {
-                viewport: this.context.viewport,
-            },
-            selectedFeatureIndexes: this.state["selectedFeatureIndexes"],
-            coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
-            onEdit: (editAction: EditAction<FeatureCollection>) =>
-                this._onEdit(editAction),
-            _subLayerProps: {
-                geojson: {
-                    autoHighlight: true,
-                    getLineColor: (feature: Feature) =>
-                        this._getLineColor(feature),
-                },
-            },
-        });
-
-        // @ts-expect-error: EditableGeoJsonLayer from nebula.gl has no typing
-        return [new EditableGeoJsonLayer(sub_layer_props)];
-    }
-}
-
-DrawingLayer.layerName = "DrawingLayer";
-DrawingLayer.defaultProps =
-    defaultProps as unknown as DrawingLayerProps<FeatureCollection>;

package/src/layers/fault_polygons/faultPolygonsLayer.ts

@@ -1,54 +0,0 @@
-import { COORDINATE_SYSTEM, Color, CompositeLayer } from "@deck.gl/core/typed";
-import { GeoJsonLayer, GeoJsonLayerProps } from "@deck.gl/layers/typed";
-import { Feature } from "geojson";
-import GL from "@luma.gl/constants";
-
-const getColor = (d: Feature): Color => {
-    const c: Color = d?.properties?.["color"];
-    const r = c[0] ?? 0;
-    const g = c[1] ?? 0;
-    const b = c[2] ?? 0;
-    return [r, g, b, 30]; // make fill color transparent
-};
-
-export interface FaultPolygonsLayerProps extends GeoJsonLayerProps {
-    // Enable/disable depth testing when rendering layer. Default true.
-    depthTest: boolean;
-}
-
-const defaultProps = {
-    "@@type": "FaultPolygonsLayer",
-    name: "Fault polygons",
-    id: "fault-polygons-layer",
-    pickable: true,
-    visible: true,
-    filled: true,
-    lineWidthMinPixels: 2,
-    depthTest: true,
-};
-
-export default class FaultPolygonsLayer extends CompositeLayer<FaultPolygonsLayerProps> {
-    renderLayers(): GeoJsonLayer<Feature>[] {
-        const layer = new GeoJsonLayer<Feature>(
-            this.getSubLayerProps({
-                id: this.props.id,
-                data: this.props.data,
-                pickable: this.props.pickable,
-                visible: this.props.visible,
-                filled: this.props.filled,
-                lineWidthMinPixels: this.props.lineWidthMinPixels,
-                coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
-                getLineColor: (d: Feature) =>
-                    d?.properties?.["color"] ?? [0, 0, 0, 255],
-                getFillColor: getColor,
-                parameters: {
-                    [GL.DEPTH_TEST]: this.props.depthTest,
-                },
-            })
-        );
-        return [layer];
-    }
-}
-
-FaultPolygonsLayer.layerName = "FaultPolygonsLayer";
-FaultPolygonsLayer.defaultProps = defaultProps;