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

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

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

@@ -1,97 +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, { 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

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

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

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

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

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

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

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

@@ -1,124 +0,0 @@
-// 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>
-`;