@webviz/subsurface-viewer 0.0.1-alpha.1

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

@@ -0,0 +1,102 @@
+import { layers } from "@equinor/eds-icons";
+import { Icon } from "@equinor/eds-core-react";
+import { render, screen, waitFor } 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 LayersButton from "./LayersButton";
+
+import exampleData from "../../../../../demo/example-data/deckgl-map.json";
+
+const testLayers: Record<string, unknown>[] = exampleData[0].layers;
+
+describe("test 'layers' button", () => {
+    it("snapshot test", () => {
+        Icon.add({ layers });
+        const { container } = render(
+            EmptyWrapper({
+                children: (
+                    <LayersButton
+                        id={"layers-button-view_1"}
+                        layers={testLayers}
+                    />
+                ),
+            })
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it("click to dispatch redux action", async () => {
+        Icon.add({ layers });
+        render(
+            EmptyWrapper({
+                children: (
+                    <LayersButton
+                        id={"layers-button-view_1"}
+                        layers={testLayers}
+                    />
+                ),
+            })
+        );
+        userEvent.click(screen.getByRole("button"));
+        expect(screen.getByRole("menu")).toBeInTheDocument();
+    });
+    it("should close menu when clicked on backdrop", async () => {
+        render(
+            EmptyWrapper({
+                children: (
+                    <LayersButton
+                        id={"layers-button-view_1"}
+                        layers={testLayers}
+                    />
+                ),
+            })
+        );
+        userEvent.click(screen.getByRole("button"));
+        const layers_menu = screen.getByRole("menu");
+        expect(layers_menu).toBeInTheDocument();
+        userEvent.click(document.body);
+        await waitFor(() => expect(layers_menu).not.toBeVisible());
+    });
+    it("should close menu when clicked twice on layers button", async () => {
+        render(
+            EmptyWrapper({
+                children: (
+                    <LayersButton
+                        id={"layers-button-view_1"}
+                        layers={testLayers}
+                    />
+                ),
+            })
+        );
+        userEvent.click(screen.getByRole("button"));
+        const layers_menu = screen.getByRole("menu");
+        expect(layers_menu).toBeInTheDocument();
+        userEvent.click(screen.getByRole("button"));
+        await waitFor(() => expect(layers_menu).not.toBeVisible());
+    });
+    it("test empty MapState/specbase", () => {
+        const { container } = render(
+            EmptyWrapper({
+                children: (
+                    <LayersButton
+                        id={"layers-button-view_1"}
+                        layers={testLayers}
+                    />
+                ),
+            })
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it("test with no layers present", () => {
+        const { container } = render(
+            EmptyWrapper({
+                children: (
+                    <LayersButton id={"layers-button-view_1"} layers={[]} />
+                ),
+            })
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});

package/src/components/settings/LayersButton.tsx

@@ -0,0 +1,97 @@
+/* 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, { ChangeEvent, useCallback } from "react";
+import { useDispatch } from "react-redux";
+import { updateLayerProp, updateVisibleLayers } from "../../redux/actions";
+import ToggleButton from "./ToggleButton";
+
+const PREFIX = "LayersButton";
+
+const classes = {
+    root: `${PREFIX}-root`,
+};
+
+const Root = styled("div")(() => ({
+    [`& .${classes.root}`]: {
+        flexDirection: "column",
+        display: "flex",
+    },
+}));
+
+export interface LayersButtonProps {
+    id: string;
+    layers: Record<string, unknown>[];
+}
+
+const LayersButton: React.FC<LayersButtonProps> = React.memo(
+    ({ id, layers }: LayersButtonProps) => {
+        // Redux
+        const dispatch = useDispatch();
+        const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(
+            null
+        );
+
+        // handlers
+        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 updateChecked = useCallback(
+            (layer: string, checked: boolean) =>
+                dispatch(updateVisibleLayers([layer, checked])),
+            [dispatch]
+        );
+
+        if (!layers.length) return null;
+        return (
+            <Root id={id}>
+                <Fab id="layers-selector-button" onClick={handleClick}>
+                    <Tooltip title="Layers">
+                        <Icon color="currentColor" name="layers" />
+                    </Tooltip>
+                </Fab>
+                <Menu
+                    anchorEl={anchorEl}
+                    aria-labelledby="layers-selector-button"
+                    id="layers-selector"
+                    onClose={handleClose}
+                    placement="left"
+                    open={Boolean(anchorEl)}
+                    className={classes.root}
+                >
+                    {(
+                        layers.slice().reverse() as Record<string, unknown>[]
+                    ).map((layer) => (
+                        <ToggleButton
+                            label={layer["name"] as string}
+                            checked={layer["visible"] as boolean}
+                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                                updateChecked(
+                                    layer["id"] as string,
+                                    e.target.checked
+                                );
+                            }}
+                            key={`layer-toggle-${layer["id"]}`}
+                        />
+                    ))}
+                </Menu>
+            </Root>
+        );
+    }
+);
+
+LayersButton.displayName = "LayersButton";
+export default LayersButton;

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

@@ -0,0 +1,25 @@
+import { render } from "@testing-library/react";
+import "jest-styled-components";
+import "@testing-library/jest-dom";
+import React, { ChangeEvent } from "react";
+import { EmptyWrapper } from "../../test/TestWrapper";
+import NumericInput from "./NumericInput";
+
+describe("Test Numeric Input", () => {
+    it("snapshot test", () => {
+        const { container } = render(
+            EmptyWrapper({
+                children: (
+                    <NumericInput
+                        label="Trajectory thickness"
+                        value={15}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                            e;
+                        }}
+                    />
+                ),
+            })
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});

package/src/components/settings/NumericInput.tsx

@@ -0,0 +1,67 @@
+import React, { ChangeEvent } from "react";
+import { Label, Input } from "@equinor/eds-core-react";
+
+interface Props {
+    /**
+     * Label for the component.
+     */
+    label: string;
+    /**
+     * Initial state of the component.
+     */
+    value: number;
+
+    min?: number;
+    max?: number;
+    step?: number;
+
+    /**
+     * Callback to update the state of the component.
+     */
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const NumericInput: React.FC<Props> = React.memo(
+    ({ label, value, min, max, step, onChange }: Props) => {
+        return (
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                }}
+            >
+                <Label
+                    label={label}
+                    id={`${label}-input-label`}
+                    style={{
+                        paddingTop: 5,
+                        paddingBottom: 5,
+                        fontSize: 15,
+                    }}
+                />
+                <Input
+                    id={`${label}-input`}
+                    type={"number"}
+                    value={value}
+                    onChange={onChange}
+                    min={min}
+                    max={max}
+                    step={step}
+                    style={{
+                        fontSize: 15,
+                        textAlign: "right",
+                        width: "3rem",
+                    }}
+                />
+            </div>
+        );
+    }
+);
+
+NumericInput.defaultProps = {
+    min: 0,
+    step: 1,
+};
+
+NumericInput.displayName = "NumericInput";
+export default NumericInput;

package/src/components/settings/Settings.tsx

@@ -0,0 +1,71 @@
+import { Icon } from "@equinor/eds-core-react";
+import { styled } from "@mui/material/styles";
+import { layers } from "@equinor/eds-icons";
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { MapState } from "../../redux/store";
+import LayersButton from "./LayersButton";
+import LayerSettingsButton from "./LayerSettingsButton";
+import { getLayersInViewport } from "../../layers/utils/layerTools";
+
+const PREFIX = "Settings";
+
+const classes = {
+    root: `${PREFIX}-root`,
+};
+
+const Root = styled("div")(({ theme }) => ({
+    [`&.${classes.root}`]: {
+        position: "absolute",
+        bottom: theme.spacing(4),
+        right: theme.spacing(2),
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+    },
+}));
+
+Icon.add({ layers }); // (this needs only be done once)
+
+export interface SettingsProps {
+    viewportId?: string;
+    layerIds?: string[];
+}
+
+const Settings: React.FC<SettingsProps> = React.memo(
+    ({ viewportId, layerIds }: SettingsProps) => {
+        const spec = useSelector((st: MapState) => st.spec);
+        const [layersInView, setLayersInView] = useState<
+            Record<string, unknown>[]
+        >([]);
+        useEffect(() => {
+            const layers_in_viewport = getLayersInViewport(
+                spec["layers"] as Record<string, unknown>[],
+                layerIds
+            ) as Record<string, unknown>[];
+            setLayersInView(layers_in_viewport);
+        }, [spec, layerIds]);
+
+        if (!layersInView?.length) return null;
+        return (
+            <Root className={classes.root}>
+                {layersInView.map(
+                    (layer) =>
+                        layer && (
+                            <LayerSettingsButton
+                                layer={layer}
+                                key={`layer-settings-button-${layer["id"]}-${viewportId}`}
+                            />
+                        )
+                )}
+                <LayersButton
+                    id={`layers-button-${viewportId}`}
+                    layers={layersInView}
+                />
+            </Root>
+        );
+    }
+);
+
+Settings.displayName = "Settings";
+export default Settings;

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

@@ -0,0 +1,28 @@
+import { render } from "@testing-library/react";
+import "jest-styled-components";
+import "@testing-library/jest-dom";
+import React, { FormEvent } from "react";
+import { EmptyWrapper } from "../../test/TestWrapper";
+import SliderInput from "./SliderInput";
+
+describe("Test Slider Input", () => {
+    it("snapshot test", () => {
+        const { container } = render(
+            EmptyWrapper({
+                children: (
+                    <SliderInput
+                        label="Opacity"
+                        value={50}
+                        min={0}
+                        max={100}
+                        step={2}
+                        onChange={(e: FormEvent<HTMLDivElement>) => {
+                            e;
+                        }}
+                    />
+                ),
+            })
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});

package/src/components/settings/SliderInput.tsx

@@ -0,0 +1,71 @@
+import React, { FormEvent } from "react";
+import { Label, Slider } from "@equinor/eds-core-react";
+
+interface Props {
+    /**
+     * Label for the component.
+     */
+    label: string;
+    /**
+     * Initial state of the component.
+     */
+    value: number;
+    /**
+     * Min value.
+     */
+    min?: number;
+    /**
+     * Max value.
+     */
+    max?: number;
+    /**
+     * Stepping interval.
+     */
+    step?: number;
+    /**
+     * Callback to update the state of the component.
+     */
+    onChange: (e: FormEvent<HTMLDivElement>, value: number | number[]) => void;
+}
+
+const SliderInput: React.FC<Props> = React.memo(
+    ({ label, value, min, max, step, onChange }: Props) => {
+        return (
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                }}
+            >
+                <Label
+                    id={`${label}-slider-label`}
+                    label={label}
+                    style={{
+                        paddingTop: 5,
+                        fontSize: 15,
+                    }}
+                />
+                <Slider
+                    ariaLabelledby={`${label}-slider-label`}
+                    id={`${label}-slider`}
+                    value={value * 100}
+                    min={min}
+                    max={max}
+                    step={step}
+                    minMaxDots={false}
+                    minMaxValues={false}
+                    onChange={onChange}
+                    style={{
+                        paddingTop: 5,
+                        paddingRight: 10,
+                        paddingBottom: 25,
+                        width: "3rem",
+                    }}
+                />
+            </div>
+        );
+    }
+);
+
+SliderInput.displayName = "SliderInput";
+export default SliderInput;

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

@@ -0,0 +1,25 @@
+import { render } from "@testing-library/react";
+import "jest-styled-components";
+import "@testing-library/jest-dom";
+import React, { ChangeEvent } from "react";
+import { EmptyWrapper } from "../../test/TestWrapper";
+import ToggleButton from "./ToggleButton";
+
+describe("Test Toggle Input", () => {
+    it("snapshot test", () => {
+        const { container } = render(
+            EmptyWrapper({
+                children: (
+                    <ToggleButton
+                        label="Log curves"
+                        checked={false}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                            e;
+                        }}
+                    />
+                ),
+            })
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});

package/src/components/settings/ToggleButton.tsx

@@ -0,0 +1,53 @@
+import React, { ChangeEvent } from "react";
+import { Label, Switch } from "@equinor/eds-core-react";
+
+interface Props {
+    /**
+     * Label for the component.
+     */
+    label: string;
+    /**
+     * Initial state of the component.
+     */
+    checked: boolean;
+    /**
+     * Callback to update the state of the component.
+     */
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const ToggleButton: React.FC<Props> = React.memo(
+    ({ label, checked, onChange }: Props) => {
+        return (
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                }}
+            >
+                <Label
+                    label={label}
+                    id={`${label}-switch-label`}
+                    style={{
+                        paddingTop: 15,
+                        fontSize: 15,
+                    }}
+                />
+                <Switch
+                    id={`${label}-switch`}
+                    aria-label={label}
+                    label={""}
+                    onChange={onChange}
+                    checked={checked}
+                    style={{
+                        paddingRight: 10,
+                        width: "3rem",
+                    }}
+                />
+            </div>
+        );
+    }
+);
+
+ToggleButton.displayName = "ToggleButton";
+export default ToggleButton;

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

@@ -0,0 +1,124 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test draw-mode menu snapshot test 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  margin: 0;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  font-family: Equinor;
+  font-size: 0.750rem;
+  font-weight: 500;
+  line-height: 1.333em;
+  text-align: left;
+  margin-left: 8px;
+  margin-right: 8px;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c2 {
+  margin: 0;
+}
+
+.c3 {
+  border: none;
+  border-radius: 0;
+  box-shadow: inset 0 -1px 0 0 var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
+  margin: 0;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  font-family: Equinor;
+  font-size: 1.000rem;
+  font-weight: 400;
+  line-height: 1.500em;
+  -webkit-letter-spacing: 0.025em;
+  -moz-letter-spacing: 0.025em;
+  -ms-letter-spacing: 0.025em;
+  letter-spacing: 0.025em;
+  text-align: left;
+  padding-right: calc(8px *2 + 24px);
+  display: block;
+  margin: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"), linear-gradient( to bottom, var(--eds_ui_background__light,rgba(247,247,247,1)) 0%, var(--eds_ui_background__light,rgba(247,247,247,1)) 100% );
+  background-repeat: no-repeat,repeat;
+  background-position: right 8px top 50%;
+  width: 100%;
+}
+
+.c3:active,
+.c3:focus {
+  box-shadow: none;
+  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
+  outline-offset: 0px;
+}
+
+.c3:disabled {
+  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"), linear-gradient( to bottom, var(--eds_ui_background__light,rgba(247,247,247,1)) 0%, var(--eds_ui_background__light,rgba(247,247,247,1)) 100% );
+  cursor: not-allowed;
+  box-shadow: none;
+  outline: none;
+}
+
+.c3:disabled .arrow-icon {
+  fill: red;
+}
+
+.c3:disabled:focus,
+.c3:disabled:active {
+  outline: none;
+}
+
+.c0 {
+  min-width: 100px;
+  width: 100%;
+}
+
+<div
+  class="c0"
+>
+  <label
+    class="c1"
+    for="drawing-layer-mode-selector"
+  >
+    <span
+      class="c2"
+    >
+      Draw mode
+    </span>
+  </label>
+  <select
+    class="c3"
+    id="drawing-layer-mode-selector"
+  >
+    <option>
+      View
+    </option>
+    <option>
+      Edit
+    </option>
+    <option>
+      Create point
+    </option>
+    <option>
+      Create polyline
+    </option>
+    <option>
+      Create polygon
+    </option>
+  </select>
+</div>
+`;