@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/layers/northarrow/northArrow3DLayer.ts

@@ -0,0 +1,204 @@
+import {
+    Layer,
+    Viewport,
+    LayerContext,
+    UpdateParameters,
+    project,
+    OrthographicViewport,
+} from "@deck.gl/core/typed";
+import GL from "@luma.gl/constants";
+import { Model, Geometry } from "@luma.gl/engine";
+import { Vector3 } from "@math.gl/core";
+import { Color } from "@deck.gl/core/typed";
+import vertexShader from "./northarrow-vertex.glsl";
+import fragmentShader from "./northarrow-fragment.glsl";
+import { ExtendedLayerProps } from "../utils/layerTools";
+
+export interface NorthArrow3DLayerProps<D> extends ExtendedLayerProps<D> {
+    color: Color;
+}
+
+const defaultProps = {
+    "@@type": "NorthArrow3DLayer",
+    name: "NorthArrow3D",
+    id: "north-arrow-layer",
+    visible: true,
+    color: [0, 0, 0, 1],
+};
+
+export default class NorthArrow3DLayer extends Layer<
+    NorthArrow3DLayerProps<unknown>
+> {
+    initializeState(context: LayerContext): void {
+        const { gl } = context;
+        this.setState(this._getModels(gl));
+    }
+
+    shouldUpdateState(): boolean {
+        return true;
+    }
+
+    updateState({ context }: UpdateParameters<this>): void {
+        if (context.gl) {
+            this.setState(this._getModels(context.gl));
+        }
+    }
+
+    // Signature from the base class, eslint doesn't like the any type.
+    // eslint-disable-next-line
+    draw({ moduleParameters, uniforms, context }: any): void {
+        const { gl } = context;
+        gl.disable(gl.DEPTH_TEST);
+        super.draw({ moduleParameters, uniforms, context });
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+    //eslint-disable-next-line
+    _getModels(gl: any) {
+        const model_lines = GetArrowLines();
+
+        const is_orthographic =
+            this.context.viewport.constructor === OrthographicViewport;
+
+        const view_at = new Vector3(this.unproject([100, 100, 0]));
+        let view_from = new Vector3(this.context.viewport.cameraPosition);
+
+        if (is_orthographic) {
+            const cam_pos_z = new Vector3(
+                (this.context.viewport as Viewport).cameraPosition
+            )[2];
+            view_from = new Vector3([view_at[0], view_at[1], cam_pos_z]);
+        }
+
+        const dir = new Vector3([
+            view_at[0] - view_from[0],
+            view_at[1] - view_from[1],
+            view_at[2] - view_from[2],
+        ]);
+        dir.normalize();
+        dir.scale(9999);
+
+        // pos: World coordinate for north arrow. Will be fixed relative to camera.
+        const pos = new Vector3([
+            view_from[0] + dir[0],
+            view_from[1] + dir[1],
+            view_from[2] + dir[2],
+        ]);
+
+        const lines: number[] = [];
+
+        const zoom = this.context.viewport.zoom;
+        const zoom_scale = Math.pow(2, zoom);
+        const scale = is_orthographic ? 15 / zoom_scale : 99;
+
+        for (let i = 0; i < model_lines.length / 3; i = i + 1) {
+            const x = model_lines[i * 3 + 0] * scale + pos[0];
+            const y = model_lines[i * 3 + 1] * scale + pos[1];
+            const z = model_lines[i * 3 + 2] * scale + pos[2];
+            lines.push(x, y, z);
+        }
+
+        const color = this.props.color.map((x?: number) => (x ?? 0) / 255);
+        color[3] = 1;
+
+        const grids = new Model(gl, {
+            id: `${this.props.id}-grids`,
+            vs: vertexShader,
+            fs: fragmentShader,
+            uniforms: { uColor: color },
+            geometry: new Geometry({
+                drawMode: GL.LINES,
+                attributes: {
+                    positions: new Float32Array(lines),
+                },
+                vertexCount: lines.length / 3,
+            }),
+
+            modules: [project],
+            isInstanced: false, // This only works when set to false.
+        });
+
+        return {
+            model: grids,
+            models: [grids].filter(Boolean),
+            modelsByName: { grids },
+        };
+    }
+}
+
+NorthArrow3DLayer.layerName = "NorthArrow3DLayer";
+NorthArrow3DLayer.defaultProps = defaultProps;
+
+//-- Local functions. --------------------------------------
+
+function GetArrowLines(): number[] {
+    const lines: number[][] = [];
+
+    let z = 0.5;
+    lines.push([-1, -2, z]);
+    lines.push([-1, 2, z]);
+
+    lines.push([-1, 2, z]);
+    lines.push([-1.5, 2, z]);
+
+    lines.push([-1.5, 2, z]);
+    lines.push([0, 4, z]);
+
+    lines.push([0, 4, z]);
+    lines.push([1.5, 2, z]);
+
+    lines.push([1.5, 2, z]);
+    lines.push([1, 2, z]);
+
+    lines.push([1, 2, z]);
+    lines.push([1, -2, z]);
+
+    lines.push([1, -2, z]);
+    lines.push([-1, -2, z]);
+
+    z = -0.5;
+    lines.push([-1, -2, z]);
+    lines.push([-1, 2, z]);
+
+    lines.push([-1, 2, z]);
+    lines.push([-1.5, 2, z]);
+
+    lines.push([-1.5, 2, z]);
+    lines.push([0, 4, z]);
+
+    lines.push([0, 4, z]);
+    lines.push([1.5, 2, z]);
+
+    lines.push([1.5, 2, z]);
+    lines.push([1, 2, z]);
+
+    lines.push([1, 2, z]);
+    lines.push([1, -2, z]);
+
+    lines.push([1, -2, z]);
+    lines.push([-1, -2, z]);
+
+    // stolper
+    lines.push([-1, -2, -0.5]);
+    lines.push([-1, -2, 0.5]);
+
+    lines.push([-1, 2, -0.5]);
+    lines.push([-1, 2, 0.5]);
+
+    lines.push([-1.5, 2, -0.5]);
+    lines.push([-1.5, 2, 0.5]);
+
+    lines.push([0, 4, -0.5]);
+    lines.push([0, 4, 0.5]);
+
+    lines.push([1.5, 2, -0.5]);
+    lines.push([1.5, 2, 0.5]);
+
+    lines.push([1, 2, -0.5]);
+    lines.push([1, 2, 0.5]);
+
+    lines.push([1, -2, -0.5]);
+    lines.push([1, -2, 0.5]);
+
+    return lines.flat();
+}

package/src/layers/northarrow/northarrow-fragment.glsl.js

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

package/src/layers/northarrow/northarrow-vertex.glsl.js

@@ -0,0 +1,13 @@
+export default `\
+#version 300 es
+#define SHADER_NAME graph-layer-axis-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/piechart/fragment.glsl.js

@@ -0,0 +1,42 @@
+export default `\
+#version 300 es
+#define SHADER_NAME graph-layer-fragment-shader
+
+precision highp float;
+
+flat in int pie_index_;
+
+out vec4 fragColor;
+
+in vec4 vColor;
+
+void main(void) {
+
+  //Picking pass.
+  if (picking_uActive) {
+     // Express triangle index in 255 system.
+     float r = 0.0;
+     float g = 0.0;
+     float b = 0.0;
+ 
+     int idx = pie_index_;
+ 
+     if (idx >= (256 * 256) - 1) {
+        r = floor(float(idx) / (256.0 * 256.0));
+        idx -= int(r * (256.0 * 256.0));
+     }
+ 
+     if (idx >= 256 - 1) {
+        g = floor(float(idx) / 256.0);
+        idx -= int(g * 256.0);
+     }
+ 
+     b = float(idx);
+ 
+     fragColor = vec4(r / 255.0, g / 255.0, b / 255.0,  1.0);
+     return;
+  }
+
+  fragColor = vColor;
+}
+`;

package/src/layers/piechart/pieChartLayer.ts

@@ -0,0 +1,246 @@
+import {
+    Layer,
+    PickingInfo,
+    picking,
+    Color,
+    UpdateParameters,
+    project,
+} from "@deck.gl/core/typed";
+import {
+    LayerPickInfo,
+    PropertyDataType,
+    createPropertyData,
+} from "../utils/layerTools";
+import { ExtendedLayerProps } from "../utils/layerTools";
+import { Vector2 } from "@math.gl/core";
+import vertexShader from "./vertex.glsl";
+import fragmentShader from "./fragment.glsl";
+import GL from "@luma.gl/constants";
+import { Model, Geometry } from "@luma.gl/engine";
+
+type PieProperties = [{ color: Color; label: string }];
+
+type PieData = {
+    x: number;
+    y: number;
+    R: number;
+    fractions: [{ value: number; idx: number }];
+};
+
+// These are the data PieChartLayer expects.
+interface PiesData {
+    pies: PieData[];
+    properties: PieProperties;
+}
+
+export interface PieChartLayerProps<D> extends ExtendedLayerProps<D> {
+    selectedPie: D;
+
+    // Enable/disable depth testing when rendering layer. Default true.
+    depthTest: boolean;
+}
+
+const defaultProps = {
+    "@@type": "PieChartLayer",
+    name: "Pie chart",
+    id: "pie-layer",
+    pickable: true,
+    visible: true,
+    selectedPie: "@@editedData.selectedPie", // used to get data from deckgl layer
+    depthTest: true,
+};
+
+export default class PieChartLayer extends Layer<PieChartLayerProps<PiesData>> {
+    initializeState(): void {
+        return;
+    }
+
+    shouldUpdateState(): boolean {
+        return true;
+    }
+
+    updateState({ context }: UpdateParameters<this>): void {
+        if (!this.state?.["model"]) {
+            const pieData = this.props.data as unknown as PiesData;
+            if (pieData?.pies) {
+                const { gl } = context;
+                this.setState(this.getModel(gl, pieData));
+            }
+        }
+    }
+
+    //eslint-disable-next-line
+    getModel(gl: any, pieData: PiesData) {
+        const vertexs: number[] = [];
+        const colors: number[] = [];
+        const mx: number[] = [];
+        const my: number[] = [];
+        const doScale: number[] = [];
+        const pieInfo: string[][] = [];
+        const pieInfoIndex: number[] = [];
+
+        const dA = 5; // delta angle
+
+        let infoIndex = 0;
+        for (const pie of pieData.pies) {
+            const x = pie.x;
+            const y = pie.y;
+            const R = pie.R;
+
+            // Normalize
+            let sum = 0;
+            for (const frac of pie.fractions) {
+                sum += frac.value;
+            }
+
+            if (sum === 0) {
+                continue;
+            }
+
+            let start_a = -90.0;
+            for (let i = 0; i < pie.fractions.length; i++) {
+                const frac = pie.fractions[i].value / sum;
+                const end_a = start_a + frac * 360.0;
+
+                const prop = pieData.properties[pie.fractions[i].idx];
+                let col: number[] = (prop?.color as number[]) ?? [
+                    255, 0, 255, 255,
+                ]; // magenta
+                col = col.map(
+                    (x) => (x ?? 0) / 255 // Normalize to [0,1] range.
+                );
+
+                const name = prop?.label ?? "no label";
+                const frac_string = (frac * 100).toFixed(1) + "%";
+                pieInfo.push([name, frac_string]);
+
+                // Make triangles for one pie pice.
+                for (let a = start_a; a < end_a; a += dA) {
+                    const a1 = a;
+                    const rad1 = (a1 * (2.0 * Math.PI)) / 360.0;
+                    const xx1 = R * Math.cos(rad1) + x;
+                    const yy1 = R * Math.sin(rad1) + y;
+
+                    const a2 = Math.min(a1 + dA, end_a);
+                    const rad2 = (a2 * (2.0 * Math.PI)) / 360.0;
+                    const xx2 = R * Math.cos(rad2) + x;
+                    const yy2 = R * Math.sin(rad2) + y;
+
+                    vertexs.push(x, y, 0);
+                    mx.push(x);
+                    my.push(y);
+                    colors.push(...col);
+                    pieInfoIndex.push(infoIndex);
+                    doScale.push(0);
+
+                    vertexs.push(xx1, yy1, 0);
+                    mx.push(x);
+                    my.push(y);
+                    colors.push(...col);
+                    pieInfoIndex.push(infoIndex);
+                    doScale.push(1);
+
+                    vertexs.push(xx2, yy2, 0);
+                    mx.push(x);
+                    my.push(y);
+                    colors.push(...col);
+                    pieInfoIndex.push(infoIndex);
+                    doScale.push(1);
+                }
+
+                infoIndex++;
+
+                start_a = end_a;
+            }
+        }
+
+        const model = new Model(gl, {
+            id: `${this.props.id}-pie`,
+            vs: vertexShader,
+            fs: fragmentShader,
+            geometry: new Geometry({
+                drawMode: GL.TRIANGLES,
+                attributes: {
+                    positions: { value: new Float32Array(vertexs), size: 3 },
+                    colors: { value: new Float32Array(colors), size: 3 },
+                    pie_index: { value: new Int32Array(pieInfoIndex), size: 1 },
+                    mx: { value: new Float32Array(mx), size: 1 },
+                    my: { value: new Float32Array(my), size: 1 },
+                    do_scale: { value: new Float32Array(doScale), size: 1 },
+                },
+                vertexCount: vertexs.length / 3,
+            }),
+
+            modules: [project, picking],
+            isInstanced: false, // This only works when set to false.
+        });
+
+        return { model, pieInfo };
+    }
+
+    // Signature from the base class, eslint doesn't like the any type.
+    // eslint-disable-next-line
+    draw(args: any): void {
+        if (!this.state?.["model"]) {
+            return;
+        }
+
+        const { context } = args;
+        const { gl } = context;
+
+        const npixels = 100;
+        const p1 = [0, 0];
+        const p2 = [npixels, 0];
+
+        const p1_unproj = this.context.viewport.unproject(p1);
+        const p2_unproj = this.context.viewport.unproject(p2);
+
+        const v1 = new Vector2(p1_unproj[0], p1_unproj[1]);
+        const v2 = new Vector2(p2_unproj[0], p2_unproj[1]);
+        const d = v1.distance(v2);
+
+        // Factor to convert a length in pixels to a length in world space.
+        const pixels2world = d / npixels;
+        const scale = pixels2world;
+
+        const model = this.state["model"];
+
+        if (!this.props.depthTest) {
+            gl.disable(GL.DEPTH_TEST);
+        }
+
+        model.setUniforms({ scale }).draw();
+
+        if (!this.props.depthTest) {
+            gl.enable(GL.DEPTH_TEST);
+        }
+    }
+
+    decodePickingColor(): number {
+        return this.nullPickingColor() as unknown as number;
+    }
+
+    getPickingInfo({ info }: { info: PickingInfo }): LayerPickInfo {
+        if (!info.color) {
+            return info;
+        }
+        // Note these colors are in the  0-255 range.
+        const r = info.color[0];
+        const g = info.color[1];
+        const b = info.color[2];
+
+        const pieIndex = 256 * 256 * r + 256 * g + b;
+
+        const [pie_label, pie_frac] = this.state["pieInfo"][pieIndex];
+        const layer_properties: PropertyDataType[] = [];
+        layer_properties.push(createPropertyData(pie_label, pie_frac));
+
+        return {
+            ...info,
+            properties: layer_properties,
+        };
+    }
+}
+
+PieChartLayer.layerName = "PieChartLayer";
+PieChartLayer.defaultProps = defaultProps;

package/src/layers/piechart/vertex.glsl.js

@@ -0,0 +1,42 @@
+export default `\
+#version 300 es
+#define SHADER_NAME graph-layer-axis-vertex-shader
+
+precision highp float;
+
+in vec3 positions;
+in vec3 colors;
+in float do_scale;
+in float mx;
+in float my;
+in int pie_index;
+
+flat out int pie_index_;
+
+uniform float scale;
+
+out vec4 vColor;
+
+void main(void) {
+
+   vec3 v = positions;
+
+   if (do_scale == 1.0) {
+      // Triangle vertex' are (mx,my) and two more. The
+      // latter two will be scaled so that the triangle (or the pie piece its part of) will
+      // have constant size depending on zoom.
+      float x = scale * (positions.x - mx);
+      float y = scale * (positions.y - my);
+
+      v = vec3(x + mx, y + my, 0.0);
+   }
+
+   vec3 position_commonspace = project_position(v);
+
+   vColor = vec4(colors.rgb, 1.0);
+
+   pie_index_ = pie_index;
+
+   gl_Position = project_common_position_to_clipspace(vec4(position_commonspace, 0.0));
+}
+`;

package/src/layers/points/pointsLayer.stories.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { create, all } from "mathjs";
+
+import SubsurfaceViewer from "../../SubsurfaceViewer";
+import { default as PointsLayer } from "./pointsLayer";
+import { default as AxesLayer } from "../axes/axesLayer";
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer / Points Layer",
+} as ComponentMeta<typeof SubsurfaceViewer>;
+
+const defaultParameters = {
+    docs: {
+        inlineStories: false,
+        iframeHeight: 500,
+    },
+};
+
+// Small example using PointsLayer.
+const smallPointsLayer = new PointsLayer({
+    id: "small_points_layer",
+    /*eslint-disable */
+    pointsData:   [  0,  0,  5,  // Vertex 1, x, y, z
+                    10,  0,  5,  // Vertex 2, x, y, z
+                    10, 10,  5,  // ...
+                     0, 10,  0,
+                     5, -5, 10,
+                    11, -4,  6,
+                    11,  0,  7,
+                    17,  0,  8
+                    ],    
+    /*eslint-enable */
+    color: [255, 100, 100],
+    pointRadius: 10,
+    radiusUnits: "pixels",
+    ZIncreasingDownwards: true,
+});
+
+const smallAxesLayer = new AxesLayer({
+    id: "small_axes_layer",
+    bounds: [-10, -10, 0, 20, 10, 10],
+});
+
+export const SmallPointsLayer: ComponentStory<typeof SubsurfaceViewer> = (
+    args
+) => {
+    return <SubsurfaceViewer {...args} />;
+};
+
+SmallPointsLayer.args = {
+    id: "map",
+    layers: [smallAxesLayer, smallPointsLayer],
+    bounds: [-10, -10, 17, 10],
+    views: {
+        layout: [1, 1],
+        viewports: [
+            {
+                id: "view_1",
+                show3D: true,
+            },
+        ],
+    },
+};
+
+SmallPointsLayer.parameters = {
+    docs: {
+        ...defaultParameters.docs,
+        description: {
+            story: "Point coordinates are given as native javascript array.",
+        },
+    },
+};
+
+// Huge example using PointsLayer.
+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 hugePointsLayer = new PointsLayer({
+    id: "huge_points_layer",
+    pointsData: Array(pointsCount * 3)
+        .fill(0)
+        .map(() => randomFunc()),
+    color: [255, 100, 100],
+    pointRadius: 1,
+    radiusUnits: "pixels",
+    ZIncreasingDownwards: true,
+});
+
+const hugeAxesLayer = new AxesLayer({
+    id: "huge_axes_layer",
+    bounds: [0, 0, 0, sideSize, sideSize, sideSize],
+});
+
+export const HugePointsLayer: ComponentStory<typeof SubsurfaceViewer> = (
+    args
+) => {
+    return <SubsurfaceViewer {...args} />;
+};
+
+HugePointsLayer.args = {
+    id: "map",
+    layers: [hugeAxesLayer, hugePointsLayer],
+    bounds: [0, 0, sideSize, sideSize],
+    coords: {
+        visible: false,
+    },
+    views: {
+        layout: [1, 1],
+        viewports: [
+            {
+                id: "view_1",
+                show3D: true,
+            },
+        ],
+    },
+};
+
+HugePointsLayer.parameters = {
+    docs: {
+        ...defaultParameters.docs,
+        description: {
+            story: "Point coordinates are randomly generated in runtime and given as native javascript array.",
+        },
+    },
+};