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

package/src/components/DistanceScale.tsx

@@ -1,84 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */ // remove when ready to fix these.
-
-import React from "react";
-import convert, { Unit } from "convert-units";
-
-export interface ScaleProps {
-    // Needed the zoom value to calculate width in units
-    zoom?: number;
-    // Scale increment value
-    incrementValue?: number | null;
-    // Scale bar width in pixels per unit value
-    widthPerUnit?: number | null;
-    // additional css style to position the component
-    style?: Record<string, unknown>;
-    // default unit for the scale ruler
-    scaleUnit?: Unit;
-}
-
-const roundToStep = function (num: number, step: number) {
-    return Math.floor(num / step + 0.5) * step;
-};
-
-const DistanceScale: React.FC<ScaleProps> = ({
-    zoom,
-    incrementValue,
-    widthPerUnit,
-    style,
-    scaleUnit,
-}: ScaleProps) => {
-    if (!zoom || !widthPerUnit || !incrementValue || !scaleUnit) return null;
-
-    if (!convert().possibilities().includes(scaleUnit)) {
-        return null;
-    }
-
-    const widthInUnits = widthPerUnit / Math.pow(2, zoom);
-
-    const scaleValue =
-        widthInUnits < incrementValue
-            ? Math.round(widthInUnits)
-            : roundToStep(widthInUnits, incrementValue);
-
-    const convertedUnit = convert(scaleValue)
-        .from(scaleUnit as convert.Unit)
-        .toBest().unit;
-    const convertedValue = convert(scaleValue)
-        .from(scaleUnit as convert.Unit)
-        .toBest().val;
-
-    const rulerWidth = scaleValue * Math.pow(2, zoom);
-
-    const scaleRulerStyle: React.CSSProperties = {
-        width: rulerWidth,
-        height: "4px",
-        border: "2px solid",
-        borderTop: "none",
-        display: "inline-block",
-        marginLeft: "3px",
-    };
-
-    return (
-        <div
-            style={{
-                position: "absolute",
-                ...style,
-            }}
-        >
-            <label style={{ ...style }}>
-                {convertedValue.toFixed(0)}
-                {convertedUnit}
-            </label>
-            <div style={scaleRulerStyle}></div>
-        </div>
-    );
-};
-
-DistanceScale.defaultProps = {
-    zoom: -3,
-    incrementValue: 100,
-    widthPerUnit: 100,
-    scaleUnit: "m",
-};
-
-export default DistanceScale;

package/src/components/InfoCard.test.tsx

@@ -1,110 +0,0 @@
-import {
-    render,
-    screen,
-    waitForElementToBeRemoved,
-} from "@testing-library/react";
-import "jest-styled-components";
-import "@testing-library/jest-dom";
-import React from "react";
-import InfoCard from "./InfoCard";
-import userEvent from "@testing-library/user-event";
-import { Layer } from "@deck.gl/core/typed";
-import { LayerPickInfo } from "../layers/utils/layerTools";
-
-describe("Test Info Card", () => {
-    it("snapshot test with no props", () => {
-        const { container } = render(
-            <InfoCard
-                pickInfos={[
-                    {
-                        x: 152,
-                        y: 254,
-                        radius: 1,
-                        depth: 638,
-                        coordinate: [111, 222],
-                    } as unknown as LayerPickInfo,
-                    {
-                        layer: { id: "wells-layer" } as Layer,
-                        property: [
-                            {
-                                name: "Poro WellA",
-                                value: 123,
-                            },
-                        ],
-                    } as unknown as LayerPickInfo,
-                ]}
-            />
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-    it("collapse infocard", async () => {
-        render(
-            <InfoCard
-                pickInfos={[
-                    {
-                        x: 152,
-                        y: 254,
-                        radius: 1,
-                        depth: 638,
-                        coordinate: [111, 222],
-                    } as unknown as LayerPickInfo,
-                ]}
-            />
-        );
-        const collapse_button = screen.getByRole("button", { name: "" });
-        expect(screen.getByText("111.00 m")).toBeVisible();
-        userEvent.click(collapse_button);
-        await waitForElementToBeRemoved(() => screen.getByText("111.00 m"));
-    });
-    it("undefined coordinates", async () => {
-        const { container } = render(
-            <InfoCard
-                pickInfos={[
-                    {
-                        x: 152,
-                        y: 254,
-                        radius: 1,
-                        depth: 638,
-                        coordinate: undefined,
-                    } as unknown as LayerPickInfo,
-                ]}
-            />
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-
-    it("snapshot test when property value provided", async () => {
-        const { container } = render(
-            <InfoCard
-                pickInfos={[
-                    {
-                        x: 152,
-                        y: 254,
-                        radius: 1,
-                        depth: 638,
-                        coordinate: [111, 222],
-                    } as unknown as LayerPickInfo,
-                    {
-                        layer: {
-                            id: "wells-layer",
-                            props: { name: "Wells layer" },
-                        },
-                        properties: [
-                            { name: "Poro", value: 123 },
-                            { name: "Perm", value: 456 },
-                        ],
-                        logName: "LogCurve1",
-                    } as unknown as LayerPickInfo,
-                    {
-                        layer: {
-                            id: "hillshading-layer",
-                            props: { name: "Hill shading" },
-                        },
-                        propertyValue: 3152.02,
-                    } as unknown as LayerPickInfo,
-                ]}
-            />
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});

package/src/components/InfoCard.tsx

@@ -1,263 +0,0 @@
-import React from "react";
-import {
-    Collapse,
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableRow,
-} from "@mui/material";
-import { Button, Icon } from "@equinor/eds-core-react";
-import { arrow_drop_up, arrow_drop_down } from "@equinor/eds-icons";
-import { styled } from "@mui/system";
-
-import {
-    ExtendedLayerProps,
-    LayerPickInfo,
-    PropertyDataType,
-} from "../layers/utils/layerTools";
-import { rgb } from "d3-color";
-import { FeatureCollection } from "geojson";
-
-Icon.add({ arrow_drop_up, arrow_drop_down });
-
-interface InfoCardDataType {
-    layerName: string;
-    properties?: PropertyDataType[];
-}
-
-export interface InfoCardProps {
-    /**
-     * List of JSON object describing picking information of layers
-     * that are under the cursor.
-     */
-    pickInfos: LayerPickInfo[];
-}
-
-const roundToSignificant = function (num: number) {
-    // Returns two significant figures (non-zero) for numbers with an absolute value less
-    // than 1, and two decimal places for numbers with an absolute value greater
-    // than 1.
-    return parseFloat(
-        num.toExponential(Math.max(1, 2 + Math.log10(Math.abs(num))))
-    );
-};
-
-const StyledTable = styled(Table)({
-    "& > *": {
-        backgroundColor: "#ffffffcc",
-        color: "#000000ff",
-        border: "2px solid #ccc",
-        padding: "0px",
-        borderRadius: "5px",
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        marginLeft: "3px",
-        marginBottom: "3px",
-    },
-});
-
-const StyledTableCell = styled(TableCell)({
-    border: "none",
-    padding: 0,
-    width: "20px",
-});
-
-const StyledTableRow = styled(TableRow)({
-    "& > *": {
-        padding: 0,
-    },
-});
-
-function Row(props: { layer_data: InfoCardDataType }) {
-    const { layer_data } = props;
-    const [open, setOpen] = React.useState(true);
-
-    if (layer_data.properties?.length == 0) return null;
-    return (
-        <React.Fragment>
-            <StyledTableRow>
-                <StyledTableCell>
-                    <Button
-                        style={{ padding: 0 }}
-                        variant="ghost"
-                        onClick={() => setOpen(!open)}
-                    >
-                        {open ? (
-                            <Icon color="currentColor" name="arrow_drop_up" />
-                        ) : (
-                            <Icon color="currentColor" name="arrow_drop_down" />
-                        )}
-                    </Button>
-                </StyledTableCell>
-                <TableCell> {layer_data.layerName} </TableCell>
-            </StyledTableRow>
-            <StyledTableRow>
-                <TableCell
-                    style={{ paddingBottom: 0, paddingTop: 0 }}
-                    colSpan={2}
-                >
-                    <Collapse in={open} timeout="auto" unmountOnExit>
-                        <Table size="small" aria-label="properties">
-                            <TableBody>
-                                {layer_data.properties?.map((propertyRow) => (
-                                    <StyledTableRow key={propertyRow.name}>
-                                        <TableCell
-                                            style={{
-                                                border: "none",
-                                                paddingLeft: 10,
-                                                paddingRight: 10,
-                                            }}
-                                        >
-                                            {propertyRow.color && (
-                                                <span
-                                                    style={{
-                                                        color: rgb(
-                                                            ...(propertyRow.color as [
-                                                                number,
-                                                                number,
-                                                                number,
-                                                                number?
-                                                            ])
-                                                        ).toString(),
-                                                    }}
-                                                >
-                                                    {"\u2B24"}
-                                                </span>
-                                            )}
-                                            {propertyRow.name}
-                                        </TableCell>
-                                        <TableCell
-                                            style={{
-                                                border: "none",
-                                                textAlign: "right",
-                                            }}
-                                        >
-                                            {typeof propertyRow.value ==
-                                            "number"
-                                                ? roundToSignificant(
-                                                      propertyRow.value
-                                                  )
-                                                : propertyRow.value}
-                                        </TableCell>
-                                    </StyledTableRow>
-                                ))}
-                            </TableBody>
-                        </Table>
-                    </Collapse>
-                </TableCell>
-            </StyledTableRow>
-        </React.Fragment>
-    );
-}
-
-const InfoCard: React.FC<InfoCardProps> = (props: InfoCardProps) => {
-    const [infoCardData, setInfoCardData] = React.useState<
-        InfoCardDataType[] | null
-    >(null);
-
-    React.useEffect(() => {
-        if (props.pickInfos.length === 0) {
-            setInfoCardData(null);
-            return;
-        }
-        const topObject = props.pickInfos[0];
-        if (
-            topObject.coordinate === undefined ||
-            topObject.coordinate.length < 2
-        ) {
-            return;
-        }
-
-        const xy_properties: PropertyDataType[] = [];
-        xy_properties.push({
-            name: "x",
-            value: Number(topObject.coordinate[0]).toFixed(2).toString() + " m",
-        });
-        xy_properties.push({
-            name: "y",
-            value: Number(topObject.coordinate[1]).toFixed(2).toString() + " m",
-        });
-
-        const info_card_data: InfoCardDataType[] = [];
-        info_card_data.push({
-            layerName: "Position",
-            properties: xy_properties,
-        });
-
-        props.pickInfos.forEach((info) => {
-            const layer_properties = info.properties;
-            const layer_name = (
-                info.layer
-                    ?.props as unknown as ExtendedLayerProps<FeatureCollection>
-            )?.name;
-
-            // pick info can have 2 types of properties that can be displayed on the info card
-            // 1. defined as propertyValue, used for general layer info (now using for positional data)
-            // 2. Another defined as array of property object described by type PropertyDataType
-
-            // collecting card data for 1st type
-            const zValue = (info as LayerPickInfo).propertyValue;
-            if (typeof zValue !== "undefined") {
-                const property = xy_properties.find(
-                    (item) => item.name === layer_name
-                );
-                if (property) {
-                    property.value = zValue;
-                } else {
-                    xy_properties.push({
-                        name: layer_name,
-                        value: zValue,
-                    });
-                }
-            }
-
-            // collecting card data for 2nd type
-            const layer = info_card_data.find(
-                (item) => item.layerName === layer_name
-            );
-            if (layer) {
-                layer_properties?.forEach((layer_prop) => {
-                    const property = layer.properties?.find(
-                        (item) => item.name === layer_prop.name
-                    );
-                    if (property) {
-                        property.value = layer_prop.value;
-                    } else {
-                        layer.properties?.push(layer_prop);
-                    }
-                });
-            } else {
-                info_card_data.push({
-                    layerName: layer_name || "unknown-layer",
-                    properties: layer_properties,
-                });
-            }
-        });
-
-        setInfoCardData(info_card_data);
-    }, [props.pickInfos]);
-
-    return (
-        infoCardData && (
-            <TableContainer>
-                <StyledTable aria-label="info-card">
-                    <TableBody>
-                        {infoCardData.map(
-                            (card_data) =>
-                                card_data.properties && (
-                                    <Row
-                                        key={card_data.layerName}
-                                        layer_data={card_data}
-                                    />
-                                )
-                        )}
-                    </TableBody>
-                </StyledTable>
-            </TableContainer>
-        )
-    );
-};
-
-export default InfoCard;

package/src/components/Map.test.tsx

@@ -1,142 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import "@testing-library/jest-dom/extend-expect";
-import { render } from "@testing-library/react";
-import "jest-styled-components";
-import "@testing-library/jest-dom";
-import React from "react";
-import { LayersList } from "@deck.gl/core/typed";
-import Map from "./Map";
-import { EmptyWrapper } from "../../SubsurfaceViewer/test/TestWrapper";
-import { colorTables } from "@emerson-eps/color-tables";
-import {
-    ColormapLayer,
-    DrawingLayer,
-    FaultPolygonsLayer,
-    Hillshading2DLayer,
-    Map3DLayer,
-    NorthArrow3DLayer,
-    PieChartLayer,
-    WellsLayer,
-} from "../layers";
-
-import mapData from "../../../../demo/example-data/deckgl-map.json";
-import { Unit } from "convert-units";
-const colorTablesData = colorTables;
-const testBounds = [432205, 6475078, 437720, 6481113] as [
-    number,
-    number,
-    number,
-    number
-];
-const valueRange = [2782, 3513] as [number, number];
-
-const testLayers = [
-    new ColormapLayer({
-        image: "propertyMap.png",
-        rotDeg: 0,
-        bounds: testBounds,
-        colorMapName: "Rainbow",
-        valueRange: valueRange,
-        colorMapRange: valueRange,
-    }),
-    new Hillshading2DLayer({
-        bounds: testBounds,
-        valueRange: valueRange,
-        rotDeg: 0,
-        image: "propertyMap.png",
-    }),
-    new Map3DLayer({
-        bounds: testBounds,
-        meshMaxError: 5.0,
-        mesh: "hugin_depth_25_m_normalized_margin.png",
-        meshValueRange: valueRange,
-        propertyTexture: "kh_netmap_25_m_normalized_margin.png",
-        propertyValueRange: valueRange,
-        rotDeg: 0,
-        contours: [0, 50.0],
-        isContoursDepth: true,
-        colorMapName: "Physics",
-        colorMapRange: valueRange,
-        visible: false,
-    }),
-    new WellsLayer({
-        data: "volve_wells.json",
-        logData: "volve_logs.json",
-        logrunName: "BLOCKING",
-        logName: "ZONELOG",
-        logColor: "Stratigraphy",
-    }),
-    new FaultPolygonsLayer({
-        data: "fault_polygons.geojson",
-    }),
-    new PieChartLayer({
-        data: "piechart.json",
-    }),
-    new NorthArrow3DLayer({
-        visible: true,
-    }),
-    new DrawingLayer(),
-] as LayersList;
-
-describe("Test Map component", () => {
-    it("snapshot test", () => {
-        const { container } = render(
-            EmptyWrapper({
-                children: (
-                    <Map
-                        id={mapData[0].id}
-                        resources={mapData[0].resources}
-                        layers={testLayers}
-                        bounds={testBounds}
-                        coords={mapData[0].coords}
-                        scale={mapData[0].scale}
-                        coordinateUnit={mapData[0].coordinateUnit as Unit}
-                        editedData={mapData[0].editedData}
-                        views={{
-                            layout: [1, 1],
-                            viewports: [
-                                {
-                                    id: "view_1",
-                                    show3D: false,
-                                    layerIds: [],
-                                },
-                            ],
-                        }}
-                        colorTables={[colorTablesData[0]]}
-                    />
-                ),
-            })
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-    it("snapshot test with edited data", () => {
-        const { container } = render(
-            EmptyWrapper({
-                children: (
-                    <Map
-                        id={mapData[0].id}
-                        resources={mapData[0].resources}
-                        layers={testLayers}
-                        bounds={testBounds}
-                        coords={mapData[0].coords}
-                        scale={mapData[0].scale}
-                        coordinateUnit={mapData[0].coordinateUnit as Unit}
-                        editedData={{}}
-                        views={{
-                            layout: [1, 1],
-                            viewports: [
-                                {
-                                    id: "view_1",
-                                    show3D: false,
-                                    layerIds: [],
-                                },
-                            ],
-                        }}
-                        colorTables={[colorTablesData[0]]}
-                    />
-                ),
-            })
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});