@webviz/subsurface-viewer 0.0.1-alpha.1

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

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

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

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

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

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

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

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

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