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

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

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

@@ -1,58 +0,0 @@
-/* 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

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

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

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

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

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

@@ -1,95 +0,0 @@
-/* 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;