2D Viewer - Multi-pick readouts

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,12 +1,11 @@
 import React from "react";
 
-import { View as DeckGlView, type Layer } from "@deck.gl/core";
-import type { BoundingBox2D, ViewportType } from "@webviz/subsurface-viewer";
+import type { Layer } from "@deck.gl/core";
+import type { BoundingBox2D } from "@webviz/subsurface-viewer";
 
 import type { ViewContext } from "@framework/ModuleContext";
 import { useViewStatusWriter } from "@framework/StatusWriter";
 import { PendingWrapper } from "@lib/components/PendingWrapper";
-import { useElementSize } from "@lib/hooks/useElementSize";
 import * as bbox from "@lib/utils/bbox";
 import { makeColorScaleAnnotation } from "@modules/2DViewer/DataProviderFramework/annotations/makeColorScaleAnnotation";
 import { makePolygonDataBoundingBox } from "@modules/2DViewer/DataProviderFramework/boundingBoxes/makePolygonDataBoundingBox";
@@ -25,7 +24,6 @@ import { makeRealizationSurfaceLayer } from "@modules/2DViewer/DataProviderFrame
 import { makeStatisticalSurfaceLayer } from "@modules/2DViewer/DataProviderFramework/visualization/makeStatisticalSurfaceLayer";
 import type { Interfaces } from "@modules/2DViewer/interfaces";
 import { PreferredViewLayout } from "@modules/2DViewer/types";
-import { ColorLegendsContainer } from "@modules/_shared/components/ColorLegendsContainer";
 import { DataProviderType } from "@modules/_shared/DataProviderFramework/dataProviders/dataProviderTypes";
 import { DrilledWellborePicksProvider } from "@modules/_shared/DataProviderFramework/dataProviders/implementations/DrilledWellborePicksProvider";
 import { DrilledWellTrajectoriesProvider } from "@modules/_shared/DataProviderFramework/dataProviders/implementations/DrilledWellTrajectoriesProvider";
@@ -48,7 +46,8 @@ import { usePublishSubscribeTopicValue } from "@modules/_shared/utils/PublishSub
 
 import { PlaceholderLayer } from "../../../_shared/customDeckGlLayers/PlaceholderLayer";
 
-import { ReadoutWrapper } from "./ReadoutWrapper";
+import type { ViewportTypeExtended, ViewsTypeExtended } from "./SubsurfaceViewerWrapper";
+import { SubsurfaceViewerWrapper } from "./SubsurfaceViewerWrapper";
 
 import "../../DataProviderFramework/customDataProviderImplementations/registerAllDataProviders";
 
@@ -124,74 +123,69 @@ VISUALIZATION_ASSEMBLER.registerDataProviderTransformers(
 export function LayersWrapper(props: LayersWrapperProps): React.ReactNode {
     const [prevBoundingBox, setPrevBoundingBox] = React.useState<bbox.BBox | null>(null);
 
-    const mainDivRef = React.useRef<HTMLDivElement>(null);
-    const mainDivSize = useElementSize(mainDivRef);
     const statusWriter = useViewStatusWriter(props.viewContext);
 
     usePublishSubscribeTopicValue(props.layerManager, DataProviderManagerTopic.DATA_REVISION);
 
-    const viewports: ViewportType[] = [];
-    const deckGlLayers: Layer<any>[] = [];
-    const viewportAnnotations: React.ReactNode[] = [];
-    const globalAnnotations: Annotation[] = [];
-    const globalLayerIds: string[] = ["placeholder"];
-
-    let numLoadingLayers = 0;
-
     const assemblerProduct = VISUALIZATION_ASSEMBLER.make(props.layerManager);
 
-    const numViews = assemblerProduct.children.filter(
-        (item) => item.itemType === VisualizationItemType.GROUP && item.groupType === GroupType.VIEW,
-    ).length;
+    const viewports: ViewportTypeExtended[] = [];
+    const deckGlLayers: Layer<any>[] = [];
+    const globalAnnotations: Annotation[] = [];
+    const globalColorScales = globalAnnotations.filter((el) => "colorScale" in el);
 
-    let numCols = Math.ceil(Math.sqrt(numViews));
-    let numRows = Math.ceil(numViews / numCols);
+    const globalLayerIds: string[] = ["placeholder"];
 
     for (const item of assemblerProduct.children) {
         if (item.itemType === VisualizationItemType.GROUP && item.groupType === GroupType.VIEW) {
+            const colorScales = item.annotations.filter((el) => "colorScale" in el);
             const layerIds: string[] = [];
+
             for (const child of item.children) {
                 if (child.itemType === VisualizationItemType.DATA_PROVIDER_VISUALIZATION) {
                     const layer = child.visualization;
                     layerIds.push(layer.id);
                     deckGlLayers.push(layer);
                 }
             }
+
             viewports.push({
                 id: item.id,
                 name: item.name,
+                color: item.color,
                 isSync: true,
                 layerIds,
+                colorScales,
             });
-
-            viewportAnnotations.push(
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                /* @ts-expect-error */
-                <DeckGlView key={item.id} id={item.id}>
-                    <ColorLegendsContainer
-                        colorScales={[...item.annotations.filter((el) => "colorScale" in el), ...globalAnnotations]}
-                        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: item.color ?? undefined }}
-                            />
-                            <div className="">{item.name}</div>
-                        </div>
-                    </div>
-                </DeckGlView>,
-            );
         } else if (item.itemType === VisualizationItemType.DATA_PROVIDER_VISUALIZATION) {
             deckGlLayers.push(item.visualization);
             globalLayerIds.push(item.visualization.id);
         }
     }
 
+    const views: ViewsTypeExtended = {
+        layout: [0, 0],
+        showLabel: false,
+        viewports: viewports.map((viewport) => ({
+            ...viewport,
+            // Apply global layers/annotations
+            layerIds: [...globalLayerIds, ...viewport.layerIds!],
+            colorScales: [...globalColorScales, ...viewport.colorScales!],
+        })),
+    };
+
+    const numViews = assemblerProduct.children.filter(
+        (item) => item.itemType === VisualizationItemType.GROUP && item.groupType === GroupType.VIEW,
+    ).length;
+
+    if (numViews) {
+        const numCols = Math.ceil(Math.sqrt(numViews));
+        const numRows = Math.ceil(numViews / numCols);
+        views.layout = [numCols, numRows];
+    }
+
     if (props.preferredViewLayout === PreferredViewLayout.HORIZONTAL) {
-        [numCols, numRows] = [numRows, numCols];
+        views.layout = [views.layout[1], views.layout[0]];
     }
 
     if (assemblerProduct.combinedBoundingBox !== null) {
@@ -204,7 +198,7 @@ export function LayersWrapper(props: LayersWrapperProps): React.ReactNode {
         }
     }
 
-    numLoadingLayers = assemblerProduct.numLoadingDataProviders;
+    const numLoadingLayers = assemblerProduct.numLoadingDataProviders;
     statusWriter.setLoading(assemblerProduct.numLoadingDataProviders > 0);
 
     for (const message of assemblerProduct.aggregatedErrorMessages) {
@@ -217,28 +211,11 @@ export function LayersWrapper(props: LayersWrapperProps): React.ReactNode {
     }
 
     deckGlLayers.push(new PlaceholderLayer({ id: "placeholder" }));
-
     deckGlLayers.reverse();
 
     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={{
-                            layout: [numCols, numRows],
-                            viewports: viewports.map((viewport) => ({
-                                ...viewport,
-                                layerIds: [...(viewport.layerIds ?? []), ...globalLayerIds],
-                            })),
-                            showLabel: false,
-                        }}
-                        viewportAnnotations={viewportAnnotations}
-                        layers={deckGlLayers}
-                        bounds={bounds}
-                    />
-                </div>
-            </PendingWrapper>
-        </div>
+        <PendingWrapper className="w-full h-full flex flex-col" isPending={numLoadingLayers > 0}>
+            <SubsurfaceViewerWrapper views={views} layers={deckGlLayers} bounds={bounds} />
+        </PendingWrapper>
     );
 }

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

@@ -1,119 +1,88 @@
 import React from "react";
 
-import type { ExtendedLayerProps, LayerPickInfo } from "@webviz/subsurface-viewer";
+import type { PickingInfoPerView } from "@webviz/subsurface-viewer/dist/hooks/useMultiViewPicking";
 import { isEqual } from "lodash";
 
 import type { ReadoutItem } from "@modules/_shared/components/ReadoutBox";
 import { ReadoutBox } from "@modules/_shared/components/ReadoutBox";
 
-
 // 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 (!isEqual(props.layerPickInfo, prevLayerPickInfo)) {
-        setPrevLayerPickInfo(props.layerPickInfo);
+    if (!props.visible) {
+        return null;
+    }
+
+    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}
+        />
+    );
 }