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

package/src/layers/northarrow/northArrow3DLayer.ts

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

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

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

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

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

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

@@ -1,141 +0,0 @@
-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.",
-        },
-    },
-};