@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/layers/BoxSelectionLayer/boxSelectionLayer.tsx

@@ -0,0 +1,136 @@
+import { CompositeLayer, PickingInfo, LayersList } from "@deck.gl/core/typed";
+import { FeatureCollection } from "@nebula.gl/edit-modes";
+import { SelectionLayer } from "@nebula.gl/layers";
+import { GeoJsonLayer } from "@deck.gl/layers/typed";
+import { ExtendedLayerProps } from "../utils/layerTools";
+import { getSize } from "../wells/wellsLayer";
+import { Color } from "@deck.gl/core/typed";
+import { Feature } from "geojson";
+
+// This should be fixed at some point
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type PickInfo = any;
+
+export interface BoxSelectionLayerProps<D> extends ExtendedLayerProps<D> {
+    mode: string; // One of modes in MODE_MAP
+    selectedFeatureIndexes: number[];
+    pickingInfos: PickingInfo[];
+    refine: boolean;
+    pointRadiusScale: number;
+    lineWidthScale: number;
+    lineStyle: LineStyleAccessor;
+    wellHeadStyle: WellHeadStyleAccessor;
+    handleSelection: (pickingInfos: PickInfo[]) => void;
+}
+
+const defaultProps = {
+    "@@type": "BoxSelectionLayer",
+    name: "boxSelection",
+    id: "boxSelection-layer",
+    pickable: true,
+    visible: true,
+
+    // Props used to get/set data in the box selection layer.
+    selectedFeatureIndexes: [] as number[],
+    data: {
+        type: "FeatureCollection",
+        features: [],
+    },
+};
+
+type StyleAccessorFunction = (
+    object: Feature,
+    objectInfo?: Record<string, unknown>
+) => StyleData;
+
+type NumberPair = [number, number];
+type DashAccessor = boolean | NumberPair | StyleAccessorFunction | undefined;
+type ColorAccessor = Color | StyleAccessorFunction | undefined;
+type SizeAccessor = number | StyleAccessorFunction | undefined;
+type StyleData = NumberPair | Color | number;
+
+type LineStyleAccessor = {
+    color?: ColorAccessor;
+    dash?: DashAccessor;
+    width?: SizeAccessor;
+};
+
+type WellHeadStyleAccessor = {
+    color?: ColorAccessor;
+    size?: SizeAccessor;
+};
+
+// Composite layer that contains an Selection Lyaer from nebula.gl
+// See https://nebula.gl/docs/api-reference/layers/selection-layer
+export default class BoxSelectionLayer extends CompositeLayer<
+    BoxSelectionLayerProps<FeatureCollection>
+> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setMultiSelection(pickingInfos: any[]): void {
+        if (this.internalState) {
+            const data = pickingInfos
+                .map((item) => item.object)
+                .filter((item) => item.type === "Feature");
+            this.setState({
+                pickingInfos: pickingInfos,
+                data: data,
+            });
+        }
+    }
+
+    renderLayers(): LayersList {
+        if (this.props.visible == false) {
+            return [];
+        }
+
+        const LINE = "line";
+        const POINT = "point";
+        const isOrthographic =
+            this.context.viewport.constructor.name === "OrthographicViewport";
+        const positionFormat = isOrthographic ? "XY" : "XYZ";
+        const geoJsonLayer = new GeoJsonLayer({
+            id: "geoJson",
+            data: this.state["data"],
+            pickable: false,
+            stroked: false,
+            positionFormat,
+            pointRadiusUnits: "pixels",
+            lineWidthUnits: "pixels",
+            pointRadiusScale: this.props.pointRadiusScale
+                ? this.props.pointRadiusScale
+                : 1,
+            lineWidthScale: this.props.lineWidthScale
+                ? this.props.lineWidthScale
+                : 1,
+            getLineWidth: getSize(LINE, this.props.lineStyle?.width, -1),
+            getPointRadius: getSize(POINT, this.props.wellHeadStyle?.size, 2),
+            getFillColor: [255, 140, 0],
+            getLineColor: [255, 140, 0],
+        });
+        const selectionLayer = new SelectionLayer(
+            // @ts-expect-error: EditableGeoJsonLayer from nebula.gl has no typing
+            this.getSubLayerProps({
+                id: "selection",
+                selectionType: "rectangle",
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onSelect: ({ pickingInfos }: any) => {
+                    this.setMultiSelection(pickingInfos);
+                    if (this.props.handleSelection) {
+                        this.props.handleSelection(pickingInfos);
+                    }
+                },
+                layerIds: ["wells-layer"],
+                getTentativeFillColor: () => [255, 0, 255, 100],
+                getTentativeLineColor: () => [0, 0, 255, 255],
+                getTentativeLineDashArray: () => [0, 0],
+                lineWidthMinPixels: 3,
+            })
+        );
+        // @ts-expect-error: EditableGeoJsonLayer from nebula.gl has no typing
+        return [selectionLayer, geoJsonLayer];
+    }
+}
+
+BoxSelectionLayer.layerName = "BoxSelectionLayer";
+BoxSelectionLayer.defaultProps =
+    defaultProps as unknown as BoxSelectionLayerProps<FeatureCollection>;

package/src/layers/axes/axes-fragment.glsl.ts

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

package/src/layers/axes/axesLayer.stories.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import DeckGL from "@deck.gl/react/typed";
+import { rgb } from "d3-color";
+import { Color, OrthographicView } from "@deck.gl/core/typed";
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import AxesLayer from "./axesLayer";
+
+export default {
+    component: DeckGL,
+    title: "SubsurfaceViewer / Axes",
+} as ComponentMeta<typeof DeckGL>;
+
+const layerProps = {
+    name: "axes",
+    bounds: [-100, -100, 0, 100, 100, 100] as [
+        number,
+        number,
+        number,
+        number,
+        number,
+        number
+    ],
+};
+
+function getRgba(color: string) {
+    const c = rgb(color);
+    return [c.r, c.g, c.b, c.opacity * 255];
+}
+
+export const Baseline: ComponentStory<typeof DeckGL> = (args) => {
+    args.layers = [new AxesLayer({ ...layerProps })];
+    args.views = [new OrthographicView({})];
+    return <DeckGL {...args} />;
+};
+
+function ColoredLabels(props: { labelColor: string; axisColor: string }) {
+    const layers = [
+        new AxesLayer({
+            ...layerProps,
+            labelColor: getRgba(props.labelColor) as Color,
+            axisColor: getRgba(props.axisColor) as Color,
+        }),
+    ];
+    const views = [new OrthographicView({})];
+    return <DeckGL layers={layers} views={views} />;
+}
+
+export const DarkMode: ComponentStory<typeof ColoredLabels> = (args) => {
+    return <ColoredLabels {...args} />;
+};
+
+DarkMode.args = {
+    labelColor: "white",
+    axisColor: "white",
+};
+
+DarkMode.parameters = {
+    backgrounds: { default: "dark" },
+};
+
+export const CustomLabel: ComponentStory<typeof CustomLabels> = (args) => {
+    return <CustomLabels {...args} />;
+};
+
+function CustomLabels(props: {
+    labelColor: string;
+    labelFontSize: number;
+    fontFamily: string;
+}) {
+    const layers = [
+        new AxesLayer({
+            ...layerProps,
+            labelColor: getRgba(props.labelColor) as Color,
+            labelFontSize: props.labelFontSize,
+            fontFamily: props.fontFamily,
+        }),
+    ];
+    const views = [new OrthographicView({})];
+    return <DeckGL layers={layers} views={views} />;
+}
+
+CustomLabel.args = {
+    labelColor: "blue",
+    labelFontSize: 10,
+    fontFamily: "math",
+};