@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/components/DistanceScale.tsx

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

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

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

@@ -0,0 +1,142 @@
+/* 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();
+    });
+});