wip

rubenthoms · Nov 15, 2024 · f7b9109 · f7b9109
1 parent 4151351
commit f7b9109
Show file tree

Hide file tree

Showing 7 changed files with 427 additions and 89 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,7 +30,7 @@
         "@tanstack/react-query-devtools": "^5.4.2",
         "@types/geojson": "^7946.0.14",
         "@webviz/group-tree-plot": "^1.1.14",
-        "@webviz/subsurface-viewer": "^1.1.1",
+        "@webviz/subsurface-viewer": "^1.3.0",
         "@webviz/well-completions-plot": "^1.5.11",
         "animate.css": "^4.1.1",
         "axios": "^1.6.5",

diff --git a/frontend/src/modules/2DViewer/view/components/LayersWrapper.tsx b/frontend/src/modules/2DViewer/view/components/LayersWrapper.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 
-import { View as DeckGlView } from "@deck.gl/core";
 import { ViewContext } from "@framework/ModuleContext";
 import { useViewStatusWriter } from "@framework/StatusWriter";
 import { PendingWrapper } from "@lib/components/PendingWrapper";
@@ -16,7 +15,7 @@ import { ColorScaleWithId } from "@modules/_shared/components/ColorLegendsContai
 import { ViewportType } from "@webviz/subsurface-viewer";
 import { ViewsType } from "@webviz/subsurface-viewer/dist/SubsurfaceViewer";
 
-import { ReadoutWrapper } from "./ReadoutWrapper";
+import { ReadoutWrapper, ViewportAnnotation } from "./ReadoutWrapper";
 
 import { PlaceholderLayer } from "../customDeckGlLayers/PlaceholderLayer";
 import { DeckGlLayerWithPosition, recursivelyMakeViewsAndLayers } from "../utils/makeViewsAndLayers";
@@ -38,7 +37,7 @@ export function LayersWrapper(props: LayersWrapperProps): React.ReactNode {
 
     const viewports: ViewportType[] = [];
     const viewerLayers: DeckGlLayerWithPosition[] = [];
-    const viewportAnnotations: React.ReactNode[] = [];
+    const viewportAnnotations: ViewportAnnotation[] = [];
     const globalColorScales: ColorScaleWithId[] = [];
 
     const views: ViewsType = {
@@ -76,26 +75,27 @@ export function LayersWrapper(props: LayersWrapperProps): React.ReactNode {
         });
         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 p-2 backdrop-blur bg-opacity-50 rounded">
-                        <div
-                            className="rounded-full h-3 w-3 border border-white"
-                            style={{ backgroundColor: view.color ?? undefined }}
-                        />
-                        <div className="">{view.name}</div>
+        viewportAnnotations.push({
+            viewportId: view.id,
+            content: (
+                <>
+                    <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 p-2 backdrop-blur bg-opacity-50 rounded">
+                            <div
+                                className="rounded-full h-3 w-3 border border-white"
+                                style={{ backgroundColor: view.color ?? undefined }}
+                            />
+                            <div className="">{view.name}</div>
+                        </div>
                     </div>
-                </div>
-            </DeckGlView>
-        );
+                </>
+            ),
+        });
     }
 
     if (viewsAndLayers.boundingBox !== null) {

diff --git a/frontend/src/modules/2DViewer/view/components/ReadoutBoxWrapper.tsx b/frontend/src/modules/2DViewer/view/components/ReadoutBoxWrapper.tsx
@@ -1,69 +1,88 @@
 import React from "react";
 
+import { Vec2 } from "@lib/utils/vec2";
 import { ReadoutBox, ReadoutItem } from "@modules/_shared/components/ReadoutBox";
-import { ExtendedLayerProps, LayerPickInfo } from "@webviz/subsurface-viewer";
 
 import { isEqual } from "lodash";
 
+import { LayerPickingInfo } from "../utils/MultiViewPickingInfoAssembler";
+
 // Needs extra distance for the left side; this avoids overlapping with legend elements
 const READOUT_EDGE_DISTANCE_REM = { left: 6 };
 
-function makePositionReadout(layerPickInfo: LayerPickInfo): ReadoutItem | null {
-    if (layerPickInfo.coordinate === undefined || layerPickInfo.coordinate.length < 2) {
+function makePositionReadout(position: Vec2 | null): ReadoutItem | null {
+    if (!position) {
         return null;
     }
     return {
         label: "Position",
         info: [
             {
                 name: "x",
-                value: layerPickInfo.coordinate[0],
+                value: position.x,
                 unit: "m",
             },
             {
                 name: "y",
-                value: layerPickInfo.coordinate[1],
+                value: position.y,
                 unit: "m",
             },
         ],
     };
 }
 
 export type ReadoutBoxWrapperProps = {
-    layerPickInfo: LayerPickInfo[];
+    position: Vec2 | null;
+    layerPickInfo: LayerPickingInfo[];
     maxNumItems?: number;
     visible?: boolean;
 };
 
 export function ReadoutBoxWrapper(props: ReadoutBoxWrapperProps): React.ReactNode {
     const [infoData, setInfoData] = React.useState<ReadoutItem[]>([]);
-    const [prevLayerPickInfo, setPrevLayerPickInfo] = React.useState<LayerPickInfo[]>([]);
+    const [prevLayerPickInfo, setPrevLayerPickInfo] = React.useState<LayerPickingInfo[]>([]);
+    const [prevPosition, setPrevPosition] = React.useState<Vec2 | null>(null);
 
-    if (!isEqual(props.layerPickInfo, prevLayerPickInfo)) {
+    if (!isEqual(props.layerPickInfo, prevLayerPickInfo) || !isEqual(props.position, prevPosition)) {
         setPrevLayerPickInfo(props.layerPickInfo);
+        setPrevPosition(props.position);
+
         const newReadoutItems: ReadoutItem[] = [];
 
-        if (props.layerPickInfo.length === 0) {
+        if (!props.layerPickInfo || props.layerPickInfo.length === 0) {
             setInfoData([]);
             return;
         }
 
-        const positionReadout = makePositionReadout(props.layerPickInfo[0]);
+        const positionReadout = makePositionReadout(props.position);
         if (!positionReadout) {
             return;
         }
         newReadoutItems.push(positionReadout);
 
         for (const layerPickInfo of props.layerPickInfo) {
-            const layerName = (layerPickInfo.layer?.props as unknown as ExtendedLayerProps)?.name;
-            const layerProps = layerPickInfo.properties;
+            const layerName = layerPickInfo.layerName;
 
             // 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);
+            let layerReadout = newReadoutItems.find((item) => item.label === layerName);
+
+            if (!layerReadout) {
+                newReadoutItems.push({
+                    label: layerName,
+                    info: [],
+                });
+
+                layerReadout = newReadoutItems[newReadoutItems.length - 1];
+            }
+
+            for (const property of layerPickInfo.properties) {
+                layerReadout.info.push(property);
+            }
 
+            /*
             // collecting card data for 1st type
             const zValue = (layerPickInfo as LayerPickInfo).propertyValue;
             if (zValue !== undefined) {
@@ -104,6 +123,7 @@ export function ReadoutBoxWrapper(props: ReadoutBoxWrapperProps): React.ReactNod
                     info: layerProps,
                 });
             }
+                */
         }
 
         setInfoData(newReadoutItems);
@@ -113,5 +133,11 @@ export function ReadoutBoxWrapper(props: ReadoutBoxWrapperProps): React.ReactNod
         return null;
     }
 
-    return <ReadoutBox readoutItems={infoData} edgeDistanceRem={READOUT_EDGE_DISTANCE_REM} />;
+    return (
+        <ReadoutBox
+            readoutItems={infoData}
+            maxNumItems={props.maxNumItems}
+            edgeDistanceRem={READOUT_EDGE_DISTANCE_REM}
+        />
+    );
 }