2D Viewer - Multi-pick readouts

frontend/package.json

@@ -30,7 +30,7 @@
         "@tanstack/react-query-devtools": "^5.63",
         "@types/geojson": "^7946.0.14",
         "@webviz/group-tree-plot": "^1.4.0",
-        "@webviz/subsurface-viewer": "^1.1.1",
+        "@webviz/subsurface-viewer": "^1.8.7",
         "@webviz/well-completions-plot": "^1.5.11",
         "@webviz/well-log-viewer": "^2.1.0",
         "animate.css": "^4.1.1",

frontend/src/lib/components/PendingWrapper/pendingWrapper.tsx

@@ -6,14 +6,15 @@ import { resolveClassNames } from "@lib/utils/resolveClassNames";
 // Base state wrapper props
 export type PendingWrapperProps = {
     isPending: boolean;
+    className?: string;
     errorMessage?: string;
     children: React.ReactNode;
 };
 
 export const PendingWrapper: React.FC<PendingWrapperProps> = (props) => {
     return (
         <div
-            className={resolveClassNames("relative rounded-sm", {
+            className={resolveClassNames("relative rounded-sm", props.className, {
                 "outline outline-blue-100 outline-offset-2": props.isPending,
                 "outline outline-red-100 outline-offset-2": Boolean(!props.isPending && props.errorMessage),
             })}

frontend/src/lib/utils/resolveClassNames.ts

@@ -1,5 +1,10 @@
-export function resolveClassNames(...classNamesOrLists: (Record<string, boolean | undefined> | string)[]): string {
+export function resolveClassNames(
+    ...classNamesOrLists: (Record<string, boolean | undefined> | string | null | undefined)[]
+): string {
     const classNames = classNamesOrLists.reduce((acc, curr) => {
+        // Filter away undefined, null, and empty strings
+        if (!curr) return acc;
+
         if (typeof curr === "string") {
             acc.push(curr);
         } else {

frontend/src/modules/2DViewer/view/components/LayersWrapper.tsx

@@ -1,24 +1,21 @@
 import React from "react";
 
-import { View as DeckGlView } from "@deck.gl/core";
 import type { ViewContext } from "@framework/ModuleContext";
 import { useViewStatusWriter } from "@framework/StatusWriter";
 import { PendingWrapper } from "@lib/components/PendingWrapper";
-import { useElementSize } from "@lib/hooks/useElementSize";
 import type { Rect2D } from "@lib/utils/geometry";
 import { outerRectContainsInnerRect } from "@lib/utils/geometry";
 import type { Interfaces } from "@modules/2DViewer/interfaces";
 import { PreferredViewLayout } from "@modules/2DViewer/types";
 import type { LayerManager } from "@modules/_shared/LayerFramework/framework/LayerManager/LayerManager";
 import { LayerManagerTopic } from "@modules/_shared/LayerFramework/framework/LayerManager/LayerManager";
 import type { BoundingBox } from "@modules/_shared/LayerFramework/interfaces";
-import { ColorLegendsContainer } from "@modules/_shared/components/ColorLegendsContainer";
 import type { ColorScaleWithId } from "@modules/_shared/components/ColorLegendsContainer/colorLegendsContainer";
 import { usePublishSubscribeTopicValue } from "@modules/_shared/utils/PublishSubscribeDelegate";
-import type { BoundingBox2D, ViewportType } from "@webviz/subsurface-viewer";
-import type { ViewsType } from "@webviz/subsurface-viewer/dist/SubsurfaceViewer";
+import type { BoundingBox2D } from "@webviz/subsurface-viewer";
 
-import { ReadoutWrapper } from "./ReadoutWrapper";
+import type { ViewPortTypeExt, ViewsTypeExt } from "./SubsurfaceViewerWrapper";
+import { SubsurfaceViewerWrapper } from "./SubsurfaceViewerWrapper";
 
 import { PlaceholderLayer } from "../customDeckGlLayers/PlaceholderLayer";
 import type { DeckGlLayerWithPosition } from "../utils/makeViewsAndLayers";
@@ -33,18 +30,15 @@ export type LayersWrapperProps = {
 export function LayersWrapper(props: LayersWrapperProps): React.ReactNode {
     const [prevBoundingBox, setPrevBoundingBox] = React.useState<BoundingBox | null>(null);
 
-    const mainDivRef = React.useRef<HTMLDivElement>(null);
-    const mainDivSize = useElementSize(mainDivRef);
     const statusWriter = useViewStatusWriter(props.viewContext);
 
     usePublishSubscribeTopicValue(props.layerManager, LayerManagerTopic.LAYER_DATA_REVISION);
 
-    const viewports: ViewportType[] = [];
+    const viewports: ViewPortTypeExt[] = [];
     const viewerLayers: DeckGlLayerWithPosition[] = [];
-    const viewportAnnotations: React.ReactNode[] = [];
-    const globalColorScales: ColorScaleWithId[] = [];
+    const colorScales: ColorScaleWithId[] = [];
 
-    const views: ViewsType = {
+    const views: ViewsTypeExt = {
         layout: [1, 1],
         viewports: viewports,
         showLabel: false,
@@ -67,38 +61,23 @@ export function LayersWrapper(props: LayersWrapperProps): React.ReactNode {
     views.layout = [numCols, numRows];
 
     viewerLayers.push(...viewsAndLayers.layers);
-    globalColorScales.push(...viewsAndLayers.colorScales);
+    colorScales.push(...viewsAndLayers.colorScales);
+
     const globalLayerIds = viewsAndLayers.layers.map((layer) => layer.layer.id);
+    const globalColorScaleIds = viewsAndLayers.colorScales.map((c) => c.id);
 
     for (const view of viewsAndLayers.views) {
         viewports.push({
             id: view.id,
             name: view.name,
+            color: view.color,
             isSync: true,
             layerIds: [...globalLayerIds, ...view.layers.map((layer) => layer.layer.id), "placeholder"],
+            colorScaleIds: [...globalColorScaleIds, ...view.colorScales.map((scale) => scale.id)],
         });
-        viewerLayers.push(...view.layers);
 
-        viewportAnnotations.push(
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            /* @ts-expect-error */
-            <DeckGlView key={view.id} id={view.id}>
-                <ColorLegendsContainer
-                    colorScales={[...view.colorScales, ...globalColorScales]}
-                    height={((mainDivSize.height / 3) * 2) / numCols - 20}
-                    position="left"
-                />
-                <div className="font-bold text-lg flex gap-2 justify-center items-center">
-                    <div className="flex gap-2 items-center bg-white/50 p-2 backdrop-blur-sm rounded-sm">
-                        <div
-                            className="rounded-full h-3 w-3 border border-white"
-                            style={{ backgroundColor: view.color ?? undefined }}
-                        />
-                        <div className="">{view.name}</div>
-                    </div>
-                </div>
-            </DeckGlView>,
-        );
+        viewerLayers.push(...view.layers);
+        colorScales.push(...view.colorScales);
     }
 
     if (viewsAndLayers.boundingBox !== null) {
@@ -141,17 +120,8 @@ export function LayersWrapper(props: LayersWrapperProps): React.ReactNode {
     layers.push(new PlaceholderLayer({ id: "placeholder" }));
 
     return (
-        <div ref={mainDivRef} className="relative w-full h-full flex flex-col">
-            <PendingWrapper isPending={numLoadingLayers > 0}>
-                <div style={{ height: mainDivSize.height, width: mainDivSize.width }}>
-                    <ReadoutWrapper
-                        views={views}
-                        viewportAnnotations={viewportAnnotations}
-                        layers={layers}
-                        bounds={bounds}
-                    />
-                </div>
-            </PendingWrapper>
-        </div>
+        <PendingWrapper className="w-full h-full flex flex-col" isPending={numLoadingLayers > 0}>
+            <SubsurfaceViewerWrapper views={views} layers={layers} bounds={bounds} colorScales={colorScales} />
+        </PendingWrapper>
     );
 }

frontend/src/modules/2DViewer/view/components/ReadoutBoxWrapper.tsx

@@ -2,117 +2,87 @@ import React from "react";
 
 import type { ReadoutItem } from "@modules/_shared/components/ReadoutBox";
 import { ReadoutBox } from "@modules/_shared/components/ReadoutBox";
-import type { ExtendedLayerProps, LayerPickInfo } from "@webviz/subsurface-viewer";
+import type { PickingInfoPerView } from "@webviz/subsurface-viewer/dist/hooks/useMultiViewPicking";
 
 import { isEqual } from "lodash";
 
 // Needs extra distance for the left side; this avoids overlapping with legend elements
-const READOUT_EDGE_DISTANCE_REM = { left: 6 };
+const READOUT_EDGE_DISTANCE_REM = { left: 6, right: 2 };
 
-function makePositionReadout(layerPickInfo: LayerPickInfo): ReadoutItem | null {
-    if (layerPickInfo.coordinate === undefined || layerPickInfo.coordinate.length < 2) {
+function makePositionReadout(coordinates: number[]): ReadoutItem | null {
+    if (coordinates === undefined || coordinates.length < 2) {
         return null;
     }
     return {
         label: "Position",
         info: [
-            {
-                name: "x",
-                value: layerPickInfo.coordinate[0],
-                unit: "m",
-            },
-            {
-                name: "y",
-                value: layerPickInfo.coordinate[1],
-                unit: "m",
-            },
+            { name: "x", value: coordinates[0], unit: "m" },
+            { name: "y", value: coordinates[1], unit: "m" },
         ],
     };
 }
 
+// Infering the record type from PickingInfoPerView since it's not exported anywhere
+export type ViewportPickingInfo = PickingInfoPerView extends Record<any, infer V> ? V : never;
+
 export type ReadoutBoxWrapperProps = {
-    layerPickInfo: LayerPickInfo[];
+    viewportPickInfo: ViewportPickingInfo;
     maxNumItems?: number;
     visible?: boolean;
+    compact?: boolean;
 };
 
 export function ReadoutBoxWrapper(props: ReadoutBoxWrapperProps): React.ReactNode {
     const [infoData, setInfoData] = React.useState<ReadoutItem[]>([]);
-    const [prevLayerPickInfo, setPrevLayerPickInfo] = React.useState<LayerPickInfo[]>([]);
+    const [prevViewportPickInfo, setPrevViewportPickInfo] = React.useState<ViewportPickingInfo | null>(null);
+
+    if (!props.visible) {
+        return null;
+    }
 
-    if (!isEqual(props.layerPickInfo, prevLayerPickInfo)) {
-        setPrevLayerPickInfo(props.layerPickInfo);
+    if (!isEqual(props.viewportPickInfo, prevViewportPickInfo)) {
+        setPrevViewportPickInfo(props.viewportPickInfo);
         const newReadoutItems: ReadoutItem[] = [];
 
-        if (props.layerPickInfo.length === 0) {
+        const coordinates = props.viewportPickInfo.coordinates;
+        const layerInfoPicks = props.viewportPickInfo.layerPickingInfo;
+
+        if (!coordinates || coordinates.length < 2) {
             setInfoData([]);
             return;
         }
 
-        const positionReadout = makePositionReadout(props.layerPickInfo[0]);
+        const positionReadout = makePositionReadout(coordinates);
         if (!positionReadout) {
             return;
         }
         newReadoutItems.push(positionReadout);
 
-        for (const layerPickInfo of props.layerPickInfo) {
-            const layerName = (layerPickInfo.layer?.props as unknown as ExtendedLayerProps)?.name;
+        for (const layerPickInfo of layerInfoPicks) {
+            const layerName = layerPickInfo.layerName ?? "Unknown layer";
             const layerProps = layerPickInfo.properties;
 
-            // 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
-
-            const layerReadout = newReadoutItems.find((item) => item.label === layerName);
-
-            // collecting card data for 1st type
-            const zValue = (layerPickInfo as LayerPickInfo).propertyValue;
-            if (zValue !== undefined) {
-                if (layerReadout) {
-                    layerReadout.info.push({
-                        name: "Property value",
-                        value: zValue,
-                    });
-                } else {
-                    newReadoutItems.push({
-                        label: layerName ?? "Unknown layer",
-                        info: [
-                            {
-                                name: "Property value",
-                                value: zValue,
-                            },
-                        ],
-                    });
-                }
+            let layerReadout = newReadoutItems.find((item) => item.label === layerName);
+            if (!layerReadout) {
+                layerReadout = { label: layerName, info: [] };
+                newReadoutItems.push(layerReadout);
             }
 
-            // collecting card data for 2nd type
-            if (!layerProps || layerProps.length === 0) {
-                continue;
-            }
-            if (layerReadout) {
-                layerProps?.forEach((prop) => {
-                    const property = layerReadout.info?.find((item) => item.name === prop.name);
-                    if (property) {
-                        property.value = prop.value;
-                    } else {
-                        layerReadout.info.push(prop);
-                    }
-                });
-            } else {
-                newReadoutItems.push({
-                    label: layerName ?? "Unknown layer",
-                    info: layerProps,
-                });
-            }
+            layerReadout.info = layerProps.map((p) => ({
+                name: p.name,
+                value: p.value,
+            }));
         }
 
         setInfoData(newReadoutItems);
     }
 
-    if (!props.visible) {
-        return null;
-    }
-
-    return <ReadoutBox readoutItems={infoData} edgeDistanceRem={READOUT_EDGE_DISTANCE_REM} />;
+    return (
+        <ReadoutBox
+            noLabelColor
+            readoutItems={infoData}
+            edgeDistanceRem={READOUT_EDGE_DISTANCE_REM}
+            compact={props.compact}
+        />
+    );
 }