@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/components/settings/DrawModeSelector.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import "jest-styled-components";
+import "@testing-library/jest-dom";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { EmptyWrapper } from "../../test/TestWrapper";
+import DrawModeSelector from "./DrawModeSelector";
+
+describe("Test draw-mode menu", () => {
+    it("snapshot test", () => {
+        const { container } = render(
+            EmptyWrapper({
+                children: (
+                    <DrawModeSelector
+                        layerId="drawing-layer"
+                        label="Draw mode"
+                        value="drawLineString"
+                    />
+                ),
+            })
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it("select option to dispatch redux action", async () => {
+        render(
+            EmptyWrapper({
+                children: (
+                    <DrawModeSelector
+                        layerId="drawing-layer"
+                        label="Draw mode"
+                        value="drawLineString"
+                    />
+                ),
+            })
+        );
+        expect(screen.getByLabelText(/draw mode/i)).toBeVisible();
+        expect(
+            screen.getByRole("combobox", { name: /draw mode/i })
+        ).toHaveDisplayValue("Create polyline");
+        userEvent.selectOptions(
+            screen.getByRole("combobox", { name: /draw mode/i }),
+            "View"
+        );
+    });
+});

package/src/components/settings/DrawModeSelector.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */ // remove when ready to fix these.
+
+import { NativeSelect } from "@equinor/eds-core-react";
+import React, { useCallback } from "react";
+import { useDispatch } from "react-redux";
+import { updateDrawingMode } from "../../redux/actions";
+import { DrawMode, DrawModes } from "../../redux/types";
+
+interface Props {
+    /**
+     * It defines the mode that are available for a particular layer based on layer ID.
+     */
+    layerId: string;
+    /**
+     * Label for the component.
+     */
+    label: string;
+    /**
+     * Initial state of the component.
+     */
+    value: string;
+}
+
+const DrawModeSelector: React.FC<Props> = React.memo(
+    ({ layerId, label, value }: Props) => {
+        // Redux
+        const dispatch = useDispatch();
+
+        // handlers
+        const handleSelectedItemChange = useCallback(
+            (event: { target: { value: string } }) => {
+                const selection = DrawModes.find(
+                    (mode) => mode.displayName === event.target.value
+                );
+                dispatch(
+                    updateDrawingMode([layerId, selection?.id as DrawMode])
+                );
+            },
+            [dispatch]
+        );
+        const cur_selection = DrawModes.find((mode) => mode.id === value);
+        return (
+            <NativeSelect
+                id={`${layerId}-mode-selector`}
+                label={label}
+                value={cur_selection?.displayName}
+                onChange={handleSelectedItemChange}
+            >
+                {DrawModes.map((mode) => (
+                    <option key={mode.id}>{mode.displayName}</option>
+                ))}
+            </NativeSelect>
+        );
+    }
+);
+
+DrawModeSelector.displayName = "DrawModeSelector";
+export default DrawModeSelector;

package/src/components/settings/DrawModeSelector_performance.test.tsx

@@ -0,0 +1,35 @@
+import { render } from "@testing-library/react";
+import "jest-styled-components";
+import "@testing-library/jest-dom";
+import React, { Profiler } from "react";
+import { EmptyWrapper } from "../../test/TestWrapper";
+import DrawModeSelector from "./DrawModeSelector";
+import { obj } from "../../../../performanceUtility/onRenderFunction";
+import * as core from "@actions/core";
+import logTimes from "../../../../performanceUtility/onRenderFunction";
+
+describe("Test draw-mode menu", () => {
+    it("performance test", () => {
+        render(
+            EmptyWrapper({
+                children: (
+                    <Profiler id="Native Select" onRender={logTimes}>
+                        <DrawModeSelector
+                            layerId="drawing-layer"
+                            label="Draw mode"
+                            value="drawLineString"
+                        />
+                    </Profiler>
+                ),
+            })
+        );
+        if (obj.perf_metrics[0][2] > 100) {
+            core.warning(
+                "DrawModeSelector Component in '/components/SubsurfaceViewer/components/settings/' seems to have performance issues. Actual render time:" +
+                    obj.perf_metrics[0][2] +
+                    " Expected render time: 100"
+            );
+        }
+        // expect(obj.perf_metrics[0][2]).toBeLessThan(340);
+    });
+});

package/src/components/settings/LayerProperty.test.tsx

@@ -0,0 +1,35 @@
+import { render } from "@testing-library/react";
+import "jest-styled-components";
+import "@testing-library/jest-dom";
+import React from "react";
+import { EmptyWrapper } from "../../test/TestWrapper";
+import LayerProperty from "./LayerProperty";
+
+const drawingLayer = {
+    "@@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: [],
+    },
+};
+
+describe("Test Layer Property", () => {
+    it("snapshot test", () => {
+        const { container } = drawingLayer
+            ? render(
+                  EmptyWrapper({
+                      children: <LayerProperty layer={drawingLayer} />,
+                  })
+              )
+            : render(<div />);
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});

package/src/components/settings/LayerProperty.tsx

@@ -0,0 +1,153 @@
+import React, { ChangeEvent, FormEvent, useCallback } from "react";
+import { useDispatch } from "react-redux";
+import { updateLayerProp } from "../../redux/actions";
+import DrawModeSelector from "./DrawModeSelector";
+import NumericInput from "./NumericInput";
+import ToggleButton from "./ToggleButton";
+import SliderInput from "./SliderInput";
+import {
+    SliderTypeProps,
+    ToggleTypeProps,
+    MenuTypeProps,
+    NumericTypeProps,
+} from "../../redux/types";
+
+interface Props {
+    layer: Record<string, unknown>;
+}
+
+const LayerProperty: React.FC<Props> = React.memo(({ layer }: Props) => {
+    // Redux
+    const dispatch = useDispatch();
+
+    // handlers
+    const updateProp = useCallback(
+        (
+            layer_id: string,
+            prop_name: string,
+            state: string | number | boolean
+        ) => dispatch(updateLayerProp([layer_id, prop_name, state])),
+        [dispatch]
+    );
+
+    const isControlDisplayable = (
+        propId: string,
+        dependentOnProp?: string
+    ): boolean => {
+        if (!layer) return false;
+
+        return dependentOnProp
+            ? dependentOnProp in layer && propId in layer
+            : propId in layer;
+    };
+
+    return (
+        layer && (
+            <>
+                {
+                    // first render all boolean properties
+                    ToggleTypeProps.map(
+                        (prop) =>
+                            isControlDisplayable(
+                                prop.id,
+                                prop.dependentOnProp
+                            ) && (
+                                <ToggleButton
+                                    label={prop.displayName}
+                                    checked={layer[prop.id] as boolean}
+                                    onChange={(
+                                        e: ChangeEvent<HTMLInputElement>
+                                    ) => {
+                                        updateProp(
+                                            layer["id"] as string,
+                                            prop.id,
+                                            e.target.checked
+                                        );
+                                    }}
+                                    key={`prop-toggle-${layer["id"]}-${prop.id}`}
+                                />
+                            )
+                    )
+                }
+
+                {
+                    // then render all numeric properties
+                    NumericTypeProps.map(
+                        (prop) =>
+                            isControlDisplayable(
+                                prop.id,
+                                prop.dependentOnProp
+                            ) && (
+                                <NumericInput
+                                    label={prop.displayName}
+                                    value={layer[prop.id] as number}
+                                    step={prop.step}
+                                    onChange={(
+                                        e: ChangeEvent<HTMLInputElement>
+                                    ) => {
+                                        updateProp(
+                                            layer["id"] as string,
+                                            prop.id,
+                                            Number(e.target.value)
+                                        );
+                                    }}
+                                    key={`prop-numeric-input-${layer["id"]}-${prop.id}`}
+                                />
+                            )
+                    )
+                }
+
+                {
+                    // then render all slider properties
+                    SliderTypeProps.map(
+                        (prop) =>
+                            isControlDisplayable(
+                                prop.id,
+                                prop.dependentOnProp
+                            ) && (
+                                <SliderInput
+                                    label={prop.displayName}
+                                    min={prop.min}
+                                    max={prop.max}
+                                    step={prop.step}
+                                    value={layer[prop.id] as number}
+                                    onChange={(
+                                        _: FormEvent<HTMLDivElement>,
+                                        value: number | number[]
+                                    ) => {
+                                        updateProp(
+                                            layer["id"] as string,
+                                            prop.id,
+                                            (value as number) / 100
+                                        );
+                                    }}
+                                    key={`prop-slider-${layer["id"]}-${prop.id}`}
+                                />
+                            )
+                    )
+                }
+
+                {
+                    // lastly render all menu type properties
+                    MenuTypeProps.map(
+                        (prop) =>
+                            isControlDisplayable(
+                                prop.id,
+                                prop.dependentOnProp
+                            ) && (
+                                <DrawModeSelector
+                                    layerId={layer["id"] as string}
+                                    label={prop.displayName}
+                                    value={layer[prop.id] as string}
+                                    key={`prop-menu-${layer["id"]}-${prop.id}`}
+                                />
+                            )
+                    )
+                }
+            </>
+        )
+    );
+});
+
+LayerProperty.displayName = "LayerProperty";
+export default LayerProperty;

package/src/components/settings/LayerProperty_performance.test.tsx

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+import "jest-styled-components";
+import "@testing-library/jest-dom";
+import React, { Profiler } from "react";
+import { EmptyWrapper } from "../../test/TestWrapper";
+import LayerProperty from "./LayerProperty";
+import * as core from "@actions/core";
+import { obj } from "../../../../performanceUtility/onRenderFunction";
+import logTimes from "../../../../performanceUtility/onRenderFunction";
+
+import exampleData from "../../../../../demo/example-data/deckgl-map.json";
+
+const layers: Record<string, unknown>[] = exampleData[0].layers;
+
+describe("Test Layer Property", () => {
+    it("performance test", () => {
+        const drawing_layer = layers.find(
+            (item) => item["@@type"] === "DrawingLayer"
+        );
+        drawing_layer &&
+            render(
+                EmptyWrapper({
+                    children: (
+                        <Profiler id="Layer properties" onRender={logTimes}>
+                            <LayerProperty layer={drawing_layer} />
+                        </Profiler>
+                    ),
+                })
+            );
+        if (obj.perf_metrics[0][2] > 100) {
+            core.warning(
+                "Layer Property Component in '/components/SubsurfaceViewer/components/settings/' seems to have performance issues. Actual render time:" +
+                    obj.perf_metrics[0][2] +
+                    " Expected render time: 200"
+            );
+        }
+        // expect(obj.perf_metrics[0][2]).toBeLessThan(400);
+    });
+});

package/src/components/settings/LayerSettingsButton.test.tsx

@@ -0,0 +1,133 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import "jest-styled-components";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import { EmptyWrapper } from "../../test/TestWrapper";
+import LayerSettingsButton from "./LayerSettingsButton";
+
+const drawingLayer = {
+    "@@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: [],
+    },
+};
+
+const wellsLayer = {
+    "@@type": "WellsLayer",
+    name: "Wells",
+    id: "wells-layer",
+    autoHighlight: true,
+    opacity: 1,
+    lineWidthScale: 1,
+    pointRadiusScale: 1,
+    lineStyle: { dash: false },
+    outline: true,
+    logRadius: 10,
+    logCurves: true,
+    refine: true,
+    visible: true,
+    wellNameVisible: false,
+    wellNameAtTop: false,
+    wellNameSize: 14,
+    wellNameColor: [0, 0, 0, 255],
+    selectedWell: "@@#editedData.selectedWells", // used to get data from deckgl layer
+    depthTest: true,
+};
+
+const layers = [drawingLayer, wellsLayer];
+
+describe("test layers settings button", () => {
+    it("snapshot test", () => {
+        const { container } = drawingLayer
+            ? render(
+                  EmptyWrapper({
+                      children: <LayerSettingsButton layer={drawingLayer} />,
+                  })
+              )
+            : render(<div />);
+        expect(container.firstChild).toMatchSnapshot();
+    });
+
+    it("should close menu when clicked on backdrop", async () => {
+        drawingLayer &&
+            render(
+                EmptyWrapper({
+                    children: <LayerSettingsButton layer={drawingLayer} />,
+                })
+            );
+        userEvent.click(screen.getByRole("button"));
+        const layer_settings_menu = screen.getByRole("menu");
+        expect(layer_settings_menu).toBeInTheDocument();
+        userEvent.click(document.body);
+        await waitFor(() => expect(layer_settings_menu).not.toBeVisible());
+    });
+
+    it("should close menu when clicked twice on layers button", async () => {
+        drawingLayer &&
+            render(
+                EmptyWrapper({
+                    children: <LayerSettingsButton layer={drawingLayer} />,
+                })
+            );
+        userEvent.click(screen.getByRole("button"));
+        const layer_settings_menu = screen.getByRole("menu");
+        expect(layer_settings_menu).toBeInTheDocument();
+        userEvent.click(screen.getByRole("button"));
+        await waitFor(() => expect(layer_settings_menu).not.toBeVisible());
+    });
+
+    it("tests toggle button", async () => {
+        const wells_layer = layers.find(
+            (item) => item["@@type"] === "WellsLayer"
+        );
+        wells_layer &&
+            render(
+                EmptyWrapper({
+                    children: <LayerSettingsButton layer={wells_layer} />,
+                })
+            );
+        userEvent.click(screen.getByRole("button"));
+        const wells_layer_settings_menu = screen.getByRole("menu");
+        expect(wells_layer_settings_menu).toBeInTheDocument();
+    });
+
+    it("tests numeric input", async () => {
+        const wells_layer = layers.find(
+            (item) => item["@@type"] === "WellsLayer"
+        );
+        wells_layer &&
+            render(
+                EmptyWrapper({
+                    children: <LayerSettingsButton layer={wells_layer} />,
+                })
+            );
+        userEvent.click(screen.getByRole("button"));
+        const wells_layer_settings_menu = screen.getByRole("menu");
+        expect(wells_layer_settings_menu).toBeInTheDocument();
+    });
+
+    it("tests slider input", async () => {
+        const wells_layer = layers.find(
+            (item) => item["@@type"] === "WellsLayer"
+        );
+        wells_layer &&
+            render(
+                EmptyWrapper({
+                    children: <LayerSettingsButton layer={wells_layer} />,
+                })
+            );
+        userEvent.click(screen.getByRole("button"));
+        const wells_layer_settings_menu = screen.getByRole("menu");
+        expect(wells_layer_settings_menu).toBeInTheDocument();
+    });
+});

package/src/components/settings/LayerSettingsButton.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable react-hooks/exhaustive-deps */ // remove when ready to fix these.
+
+import { Icon, Menu, Tooltip } from "@equinor/eds-core-react";
+import { styled } from "@mui/material/styles";
+import { Fab } from "@mui/material";
+import React, { useCallback, useMemo } from "react";
+import { LayerIcons, LayerType } from "../../redux/types";
+import { getPropVisibility } from "../../utils/specExtractor";
+import LayerProperty from "./LayerProperty";
+import { useDispatch } from "react-redux";
+import { updateLayerProp } from "../../redux/actions";
+
+const PREFIX = "LayerSettingsButton";
+
+const classes = {
+    root: `${PREFIX}-root`,
+    menu: `${PREFIX}-menu`,
+};
+
+const Root = styled("div")(({ theme }) => ({
+    [`& .${classes.root}`]: {
+        marginBottom: theme.spacing(1),
+    },
+
+    [`& .${classes.menu}`]: {
+        display: "flex",
+        flexDirection: "column",
+    },
+}));
+
+interface Props {
+    layer: Record<string, unknown>;
+}
+
+const LayerSettingsButton: React.FC<Props> = React.memo(({ layer }: Props) => {
+    const dispatch = useDispatch();
+
+    // handlers
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const handleClick = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            // hack to disable click propagation on drawing layer
+            dispatch(updateLayerProp(["drawing-layer", "mode", "view"]));
+
+            setAnchorEl(anchorEl ? null : event.currentTarget);
+        },
+        [anchorEl]
+    );
+
+    const handleClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+
+    const propVisibility = useMemo(() => getPropVisibility(layer), [layer]);
+    if (
+        !LayerIcons[layer["@@type"] as LayerType] ||
+        !layer["visible"] ||
+        !propVisibility
+    )
+        return null;
+
+    return (
+        <Root>
+            <Fab
+                id={`${layer["id"]}-button`}
+                size="medium"
+                onClick={handleClick}
+                className={classes.root}
+            >
+                <Tooltip title={layer["name"] as string}>
+                    <Icon
+                        color="currentColor"
+                        name={LayerIcons[layer["@@type"] as LayerType]}
+                    />
+                </Tooltip>
+            </Fab>
+            <Menu
+                className={classes.menu}
+                anchorEl={anchorEl}
+                aria-labelledby={`${layer["id"]}-button`}
+                onClose={handleClose}
+                placement="left"
+                open={Boolean(anchorEl)}
+            >
+                <LayerProperty
+                    layer={layer}
+                    key={`layer-property-${layer["id"]}`}
+                />
+            </Menu>
+        </Root>
+    );
+});
+
+LayerSettingsButton.displayName = "LayerSettingsButton";
+export default LayerSettingsButton;