fix: Subsurface viewer - Assorted fixes to wells layer and multi pick hook (#2491)

* Made the `useMultiViewPicking` hook able to return picks from multiple
wells if hovering on overlapping wells
* Generally makes it so the hook is able to pick multiple items from the
same layer, whereas before it would only take the first
  * Added a new multi-pick example with wells to show it
* Adds a more descriptive typing for the GeoJson feature we use in the
WellsLayer data prop -- `WellFeatureCollection`.
* Most notably, we now specify what should be in the properties object.
* Made most utils take this new specified typing, and removed/clean up a
buuunch of spots where we were just assuming validity and casting
any-values
* Exposed or specified some extra types that made sense to export as
well
* Updated the `colorMappingFunction` prop to match the
`createColorMapFunction` from emerson table.
* The only difference is that it now specifies a couple of extra
(optional) params. We were actually using these params, so the typing
should now reflect that
* Refactored some messy code in the wells layer class

Author: Anders2303

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

@@ -51,7 +51,7 @@ import {
     getModelMatrixScale,
     getWellLayerByTypeAndSelectedWells,
 } from "../layers/utils/layerTools";
-import type { WellsPickInfo } from "../layers/wells/wellsLayer";
+import type { WellsPickInfo } from "../layers/wells/types";
 import type { BoundingBox2D, Point2D } from "../utils/BoundingBox2D";
 import { isEmpty as isEmptyBox2D } from "../utils/BoundingBox2D";
 import type { BoundingBox3D, Point3D } from "../utils/BoundingBox3D";

typescript/packages/subsurface-viewer/src/hooks/useMultiViewPicking/MultiViewPickingInfoAssembler.ts

@@ -1,24 +1,26 @@
 import type { PickingInfo, Viewport } from "@deck.gl/core";
 import type { DeckGLRef } from "@deck.gl/react";
+
+import _ from "lodash";
+
 import type {
     ExtendedLayerProps,
     MapMouseEvent,
     PropertyDataType,
 } from "../../";
+import { distance } from "mathjs";
 
 export type LayerPickingInfo = {
     layerId: string;
     layerName: string;
     properties: PropertyDataType[];
 };
 
-export type PickingInfoPerView = Record<
-    string,
-    {
-        coordinates: number[] | null;
-        layerPickingInfo: LayerPickingInfo[];
-    }
->;
+export type ViewportPickInfo = {
+    coordinates: number[] | null;
+    layerPickingInfo: LayerPickingInfo[];
+};
+export type PickingInfoPerView = Record<string, ViewportPickInfo>;
 
 function hasPropertiesArray(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -34,6 +36,10 @@ function hasSingleProperty(obj: any): obj is { propertyValue: number } {
     );
 }
 
+function getUniqueInfoPickId(pick: PickingInfo): string {
+    return `${pick.index}::${pick.layer?.id}`;
+}
+
 export type MultiViewPickingInfoAssemblerOptions = {
     multiPicking: boolean;
     pickDepth: number;
@@ -114,14 +120,43 @@ export class MultiViewPickingInfoAssembler {
         });
     }
 
+    private pickAtCoordinate(x: number, y: number): PickingInfo[] {
+        const deck = this._deckGl?.deck;
+        if (!deck) return [];
+
+        if (this._options.multiPicking) {
+            // ! For some reason, multi-pick pads the array up to pick-depth length, repeating the last element
+            const multPickResult = deck.pickMultipleObjects({
+                depth: this._options.pickDepth,
+                unproject3D: true,
+                x,
+                y,
+            });
+
+            // Ensure the top-most element is processed first by sorting based on distance to camera
+            return _.sortBy(multPickResult, (pick) => {
+                if (!pick.viewport?.cameraPosition) return -1;
+                if (!pick.coordinate) return -1;
+
+                return distance(pick.coordinate, pick.viewport.cameraPosition);
+            });
+        } else {
+            const obj = deck.pickObject({
+                unproject3D: true,
+                x,
+                y,
+            });
+            return obj ? [obj] : [];
+        }
+    }
+
     private async assembleMultiViewPickingInfo(
         eventScreenCoordinate: [number, number],
         activeViewportId: string,
         viewports: Viewport[]
     ): Promise<PickingInfoPerView> {
         return new Promise((resolve, reject) => {
-            const deck = this._deckGl?.deck;
-            if (!deck) {
+            if (!this._deckGl?.deck) {
                 reject("DeckGL not initialized");
                 return;
             }
@@ -143,80 +178,53 @@ export class MultiViewPickingInfoAssembler {
             );
 
             const collectedPickingInfo: PickingInfoPerView = {};
+
             for (const viewport of viewports) {
                 const [relativeScreenX, relativeScreenY] =
                     viewport.project(worldCoordinate);
 
-                let pickingInfo: PickingInfo[] = [];
-                if (this._options.multiPicking) {
-                    pickingInfo = deck.pickMultipleObjects({
-                        x: relativeScreenX + viewport.x,
-                        y: relativeScreenY + viewport.y,
-                        depth: this._options.pickDepth,
-                        unproject3D: true,
-                    });
-                } else {
-                    const obj = deck.pickObject({
-                        x: relativeScreenX + viewport.x,
-                        y: relativeScreenY + viewport.y,
-                        unproject3D: true,
-                    });
-                    pickingInfo = obj ? [obj] : [];
-                }
+                const pickingInfo = this.pickAtCoordinate(
+                    relativeScreenX + viewport.x,
+                    relativeScreenY + viewport.y
+                );
 
                 if (pickingInfo) {
-                    const collectedLayerPickingInfo: LayerPickingInfo[] = [];
+                    const layerInfoDict: Record<string, LayerPickingInfo> = {};
+                    const processedPickIds: string[] = [];
+
                     for (const info of pickingInfo) {
+                        const uniquePickId = getUniqueInfoPickId(info);
                         const hasMultipleProperties = hasPropertiesArray(info);
                         const hasOneProperty = hasSingleProperty(info);
 
-                        if (!hasMultipleProperties && !hasOneProperty) {
-                            continue;
-                        }
-
-                        if (!info.layer) {
-                            continue;
-                        }
+                        // General guard clauses
+                        if (!info.layer) continue;
+                        if (processedPickIds.includes(uniquePickId)) continue;
+                        if (!hasMultipleProperties && !hasOneProperty) continue;
 
-                        if (
-                            collectedLayerPickingInfo.find(
-                                (el) => el.layerId === info.layer?.id
-                            )
-                        ) {
-                            continue;
-                        }
+                        processedPickIds.push(uniquePickId);
 
                         const layerId = info.layer.id;
-                        const layerName = (
-                            info.layer.props as unknown as ExtendedLayerProps
-                        ).name;
+                        const layerProps = info.layer
+                            .props as unknown as ExtendedLayerProps;
+                        const layerName = layerProps.name;
 
-                        let layerPickingInfo = collectedLayerPickingInfo.find(
-                            (el) => el.layerId === layerId
-                        );
-
-                        if (!layerPickingInfo) {
-                            collectedLayerPickingInfo.push({
+                        if (!layerInfoDict[layerId]) {
+                            layerInfoDict[layerId] = {
                                 layerId,
                                 layerName,
                                 properties: [],
-                            });
-                            layerPickingInfo =
-                                collectedLayerPickingInfo[
-                                    collectedLayerPickingInfo.length - 1
-                                ];
+                            };
                         }
+                        const layerPickingInfo = layerInfoDict[layerId];
 
                         if (hasOneProperty) {
                             layerPickingInfo.properties.push({
                                 name: "Value",
                                 value: info.propertyValue,
                                 color: undefined,
                             });
-                            continue;
-                        }
-
-                        if (hasMultipleProperties) {
+                        } else if (hasMultipleProperties) {
                             const properties = info.properties;
 
                             for (const property of properties) {
@@ -231,11 +239,11 @@ export class MultiViewPickingInfoAssembler {
 
                     collectedPickingInfo[viewport.id] = {
                         coordinates: worldCoordinate,
-                        layerPickingInfo: collectedLayerPickingInfo,
+                        layerPickingInfo: Object.values(layerInfoDict),
                     };
                 } else {
                     collectedPickingInfo[viewport.id] = {
-                        coordinates: null,
+                        coordinates: worldCoordinate,
                         layerPickingInfo: [],
                     };
                 }

typescript/packages/subsurface-viewer/src/layers/types.ts

@@ -5,7 +5,7 @@ export type NumberPair = [number, number];
 
 type StyleData = NumberPair | Color | number;
 
-export type StyleAccessorFunction = (
-    object: Feature,
+export type StyleAccessorFunction<TFeature extends Feature = Feature> = (
+    object: TFeature,
     objectInfo?: Record<string, unknown>
 ) => StyleData;

typescript/packages/subsurface-viewer/src/layers/utils/layerTools.ts

@@ -1,6 +1,9 @@
 import type { PickingInfo } from "@deck.gl/core";
 import type { Color } from "@deck.gl/core";
-import type { colorTablesArray } from "@emerson-eps/color-tables/";
+import type {
+    colorTablesArray,
+    createColorMapFunction,
+} from "@emerson-eps/color-tables/";
 import { rgbValues } from "@emerson-eps/color-tables/";
 import { createDefaultContinuousColorScale } from "@emerson-eps/color-tables/dist/component/Utils/legendCommonFunction";
 
@@ -20,7 +23,7 @@ import type DrawingLayer from "../drawing/drawingLayer";
 export type Position3D = [number, number, number];
 
 /** Type of functions returning a color from a value in the [0,1] range. */
-export type ColorMapFunctionType = (x: number) => [number, number, number];
+export type ColorMapFunctionType = ReturnType<typeof createColorMapFunction>;
 /** @deprecated Use ColorMapFunctionType instead. */
 export type colorMapFunctionType = ColorMapFunctionType;
 
@@ -44,7 +47,8 @@ export interface PropertyDataType {
 }
 
 // Layer pick info can have multiple properties
-export interface LayerPickInfo extends PickingInfo {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- We use "any" to match picking-info default
+export interface LayerPickInfo<T = any> extends PickingInfo<T> {
     propertyValue?: number; // for single property
     properties?: PropertyDataType[]; // for multiple properties
 }

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

@@ -1,18 +1,14 @@
-import {
-    type DefaultProps,
-    type Position,
-    type UpdateParameters,
-} from "@deck.gl/core";
+import { type DefaultProps, type UpdateParameters } from "@deck.gl/core";
 import type { TextLayerProps } from "@deck.gl/layers";
 import { TextLayer } from "@deck.gl/layers";
-import type { Feature, GeoJsonProperties, Geometry } from "geojson";
+import type { Feature, Position } from "geojson";
 import _ from "lodash";
 import { Vector2, Vector3 } from "math.gl";
 import type { Position3D } from "../../utils/layerTools";
 import { getTrajectory } from "../utils/trajectory";
+import type { WellFeature } from "../types";
 
-type WellLabelLayerData = Feature<Geometry, GeoJsonProperties>;
-
+type WellLabelLayerData = WellFeature;
 /**
  * Enum representing the orientation of well labels.
  */
@@ -58,8 +54,8 @@ const DEFAULT_PROPS: DefaultProps<WellLabelLayerProps> = {
     id: "well-label-layer",
     autoPosition: false,
     getPositionAlongPath: 0,
-    getText: (d: Feature) => {
-        const name = d.properties?.["name"];
+    getText: (d: WellFeature) => {
+        const name = d.properties.name;
         return name;
     },
     getAlignmentBaseline: "bottom",
@@ -123,13 +119,13 @@ export class WellLabelLayer extends TextLayer<
 
         const newProps = {
             ...sublayerProps,
-            getPosition: (d: Feature) => {
+            getPosition: (d: WellFeature) => {
                 return this.getAnnotationPosition(
                     d,
                     this.props.getPositionAlongPath
                 );
             },
-            getAngle: (d: Feature) => this.getLabelAngle(d),
+            getAngle: (d: WellFeature) => this.getLabelAngle(d),
             updateTriggers: {
                 ...sublayerProps?.updateTriggers,
                 getAngle: [
@@ -160,7 +156,7 @@ export class WellLabelLayer extends TextLayer<
         return super.shouldUpdateState(params);
     }
 
-    protected getLabelAngle(well: Feature) {
+    protected getLabelAngle(well: WellFeature) {
         if (this.props.orientation === "horizontal") {
             return 0;
         }
@@ -178,7 +174,7 @@ export class WellLabelLayer extends TextLayer<
      * @returns world position of the annotation
      */
     protected getAnnotationPosition(
-        well_data: Feature,
+        well_data: WellFeature,
         annotationPosition: WellLabelLayerProps["getPositionAlongPath"]
     ): Position {
         let fraction = Number(annotationPosition);
@@ -236,7 +232,7 @@ export class WellLabelLayer extends TextLayer<
      */
     protected getVectorAlongTrajectory(
         fraction: number,
-        wellData: Feature
+        wellData: WellFeature
     ): [number, Position3D] {
         if (!wellData) {
             return [0, [0, 0, 0]];

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

@@ -0,0 +1,58 @@
+import type { Color } from "@deck.gl/core";
+import type { Feature, GeometryCollection, FeatureCollection } from "geojson";
+import type { LayerPickInfo } from "../utils/layerTools";
+import type { NumberPair, StyleAccessorFunction } from "../types";
+
+export type GeoJsonWellProperties = {
+    name: string;
+    md: number[][];
+    color?: Color;
+};
+
+export type WellFeature = Feature<GeometryCollection, GeoJsonWellProperties>;
+export type WellFeatureCollection = FeatureCollection<
+    GeometryCollection,
+    GeoJsonWellProperties
+>;
+
+export interface WellsPickInfo extends LayerPickInfo<WellFeature> {
+    featureType?: string;
+    logName: string;
+}
+
+export interface LogCurveDataType {
+    header: {
+        name: string;
+        well: string;
+    };
+    curves: {
+        name: string;
+        description: string;
+    }[];
+    data: number[][];
+    metadata_discrete: Record<
+        string,
+        {
+            attributes: unknown;
+            objects: Record<string, [Color, number]>;
+        }
+    >;
+}
+
+export type ColorAccessor = Color | StyleAccessorFunction | undefined;
+export type SizeAccessor = number | StyleAccessorFunction | undefined;
+export type DashAccessor =
+    | boolean
+    | NumberPair
+    | StyleAccessorFunction
+    | undefined;
+
+export type LineStyleAccessor = {
+    color?: ColorAccessor;
+    dash?: DashAccessor;
+    width?: SizeAccessor;
+};
+export type WellHeadStyleAccessor = {
+    color?: ColorAccessor;
+    size?: SizeAccessor;
+};