feat: Well labels tool tip

typescript/packages/subsurface-viewer/src/components/InfoCard.tsx

@@ -17,6 +17,7 @@ import type {
     PropertyDataType,
 } from "../layers/utils/layerTools";
 import { rgb } from "d3-color";
+import { WellLabelLayer } from "../layers/wells/layers/wellLabelLayer";
 
 Icon.add({ arrow_drop_up, arrow_drop_down });
 
@@ -161,6 +162,32 @@ const InfoCard: React.FC<InfoCardProps> = (props: InfoCardProps) => {
             setInfoCardData(null);
             return;
         }
+
+        if (
+            (props.pickInfos[0].layer?.constructor === WellLabelLayer ||
+                props.pickInfos[0].sourceLayer?.constructor ===
+                    WellLabelLayer) &&
+            props.pickInfos[0].object?.wellLabels
+        ) {
+            // Cluster of well labels.
+            const info_card_data: InfoCardDataType[] = [];
+            const xy_properties: PropertyDataType[] = [];
+            props.pickInfos[0].object.wellLabels.forEach((label: string) => {
+                xy_properties.push({
+                    name: label,
+                    value: "",
+                });
+            });
+
+            info_card_data.push({
+                layerName: "Well(s)",
+                properties: xy_properties,
+            });
+
+            setInfoCardData(info_card_data);
+            return;
+        }
+
         const topObject = props.pickInfos[0];
         if (
             topObject.coordinate === undefined ||

typescript/packages/subsurface-viewer/src/components/Map.tsx

@@ -77,6 +77,7 @@ import type { ViewportType } from "../views/viewport";
 import { useVerticalScale } from "../views/viewport";
 
 import mergeRefs from "merge-refs";
+import { WellLabelLayer } from "../layers/wells/layers/wellLabelLayer";
 
 export type { BoundingBox2D, BoundingBox3D, Point2D, Point3D };
 /**
@@ -401,7 +402,13 @@ export interface MapProps {
 }
 
 function defaultTooltip(info: PickingInfo) {
-    if ((info as WellsPickInfo)?.logName) {
+    if (
+        (info.layer?.constructor === WellLabelLayer ||
+            info.sourceLayer?.constructor === WellLabelLayer) &&
+        info.object?.wellLabels
+    ) {
+        return info.object.wellLabels?.join("\n");
+    } else if ((info as WellsPickInfo)?.logName) {
         return (info as WellsPickInfo)?.logName;
     } else if (info.layer?.id === "drawing-layer") {
         return (info as LayerPickInfo).propertyValue?.toFixed(2);
@@ -640,7 +647,7 @@ const Map: React.FC<MapProps> = ({
     const onHover = useCallback(
         (pickInfo: PickingInfo, event: MjolnirEvent) => {
             const infos = getPickingInfos(pickInfo, event);
-            setHoverInfo(infos); //  for InfoCard pickInfos
+            setHoverInfo(infos);
             callOnMouseEvent?.("hover", infos, event);
         },
         [callOnMouseEvent, getPickingInfos]

typescript/packages/subsurface-viewer/src/layers/wells/layers/wellLabelLayer.ts

@@ -1,4 +1,4 @@
-import type { Color } from "@deck.gl/core";
+import type { Color, PickingInfo } from "@deck.gl/core";
 import { type DefaultProps, type UpdateParameters } from "@deck.gl/core";
 import type { TextLayerProps } from "@deck.gl/layers";
 import type { Feature, Position } from "geojson";
@@ -67,6 +67,7 @@ const DEFAULT_PROPS: DefaultProps<WellLabelLayerProps> = {
     backgroundPadding: [3, 1, 3, 1],
     getBorderColor: [0, 0, 0, 255],
     getBorderWidth: 1,
+    pickable: true,
 
     transitions: {
         // Animate label position transitions in order to help tracking when labels are moving
@@ -325,6 +326,15 @@ export class WellLabelLayer extends MergedTextLayer<
         // Default to well head of no valid position is found in viewport
         return [0, trajectory[0] as Position3D];
     }
+
+    getPickingInfo({ info }: { info: PickingInfo }) {
+        const name = info.object?.properties?.name ?? "";
+        const pos = this.state.labelPositions.get(name)!;
+        const names = this.state.clusters.get(pos);
+
+        info.object = { ...info.object, wellLabels: names };
+        return info;
+    }
 }
 
 WellLabelLayer.defaultProps = DEFAULT_PROPS as DefaultProps<

typescript/packages/subsurface-viewer/src/layers/wells/wellsLayer.ts

@@ -384,7 +384,7 @@ export default class WellsLayer extends CompositeLayer<WellsLayerProps> {
             ...this.props.wellLabel,
             id: SubLayerId.LABELS,
             data,
-
+            pickable: true,
             // Z is always increasing upwards at this stage
             zIncreasingDownwards: false,
 
@@ -645,7 +645,14 @@ export default class WellsLayer extends CompositeLayer<WellsLayerProps> {
     }
 
     getPickingInfo({ info }: { info: PickingInfo }): WellsPickInfo {
-        if (!info.object) return { ...info, properties: [], logName: "" };
+        const noLog = {
+            properties: [],
+            logName: "",
+        };
+
+        if (!info.object || info.sourceLayer?.constructor === WellLabelLayer) {
+            return { ...info, ...noLog };
+        }
 
         const features = this.getWellDataState()?.features ?? [];
         const coordinate: Position = info.coordinate || [0, 0, 0];

typescript/packages/subsurface-viewer/src/storybook/layers/WellLabelLayer.stories.tsx

@@ -13,7 +13,7 @@ import type {
     WellFeature,
     WellFeatureCollection,
 } from "../../layers/wells/types";
-import type { ViewsType } from "../../SubsurfaceViewer";
+import type { ViewStateType, ViewsType } from "../../SubsurfaceViewer";
 import SubsurfaceViewer from "../../SubsurfaceViewer";
 import {
     LABEL_ORIENTATION_ARGTYPES,
@@ -23,6 +23,7 @@ import {
 } from "../constant/argTypes";
 import type { TrajectorySimulationProps } from "../types/trajectory";
 import { getRgba } from "../util/color";
+import { fireEvent, userEvent } from "@storybook/test";
 
 type WellCount = { wellCount: number };
 
@@ -317,6 +318,79 @@ export const Default: StoryObj<WellCount> = {
     },
 };
 
+export const WellLabelPicking: StoryObj<typeof SubsurfaceViewer> = {
+    render: () => {
+        const camera: ViewStateType = {
+            target: [458305, 6785369, 0],
+            zoom: 0,
+            rotationX: 0,
+            rotationOrbit: 40,
+        };
+
+        const data = getSyntheticWells(10);
+
+        const wellLayer = new WellsLayer({
+            ...WELL_LAYER_PROPS,
+            data,
+        });
+
+        const labelLayer = new WellLabelLayer({
+            ...DEFAULT_LABEL_PROPS,
+            data: data.features,
+            background: true,
+            getSize: 100,
+        });
+
+        const propsWithLayers = {
+            id: "default",
+            cameraPosition: camera,
+            layers: [...AXES_LAYERS, wellLayer, labelLayer],
+            views: {
+                layout: [1, 1],
+                viewports: [
+                    {
+                        id: "view_1",
+                        show3D: false,
+                        layerIds: [
+                            "well-layer",
+                            "axes-layer-3d",
+                            "well-labels",
+                        ],
+                    },
+                ],
+            } as ViewsType,
+        };
+
+        return <SubsurfaceViewer {...propsWithLayers} />;
+    },
+    play: async () => {
+        const delay = 500;
+        const canvas = document.querySelector("canvas");
+
+        if (canvas) {
+            await userEvent.click(canvas, { delay });
+        }
+
+        if (!canvas) {
+            return;
+        }
+
+        const leftViewCenterPosition = {
+            x: canvas.clientLeft + canvas.clientWidth / 2,
+            y: canvas.clientTop + canvas.clientHeight / 2,
+        };
+
+        await userEvent.hover(canvas, { delay });
+
+        await fireEvent.mouseMove(canvas, { clientX: 0, clientY: 0, delay });
+        await fireEvent.mouseMove(canvas, {
+            clientX: leftViewCenterPosition.x,
+            clientY: leftViewCenterPosition.y,
+            delay,
+        });
+    },
+};
+
 export const LabelPosition: StoryObj<
     WellCount & WellLabelLayerProps & TrajectorySimulationProps
 > = {