Added tooltip styling story. (equinor#1117)

* Added tooltip styling example.

* fixed processPropInfo function.

* Add typing to signatures.

* Fix typing.

* Export types.

* Fixed typing.

* Updated story description.

* Fixed getting camera position.

* Fixed getting camera position.

* Use official deck.gl typing for axes layer.

* Fix typescript conditions.

* Bumped deck.gl dependency.

Co-authored-by: Havard Bjerke <[email protected]>

react/package.json

@@ -49,7 +49,7 @@
     "author": "Equinor <[email protected]>",
     "license": "MPL",
     "dependencies": {
-        "@danmarshall/deckgl-typings": "^4.9.0",
+        "@danmarshall/deckgl-typings": "^4.9.24",
         "@emerson-eps/color-tables": "^0.4.4",
         "@equinor/eds-core-react": "^0.12.1",
         "@equinor/eds-icons": "^0.9.1",
@@ -72,7 +72,7 @@
         "convert-units": "^2.3.4",
         "d3": "^5.11.0",
         "d3-format": "^1.4.5",
-        "deck.gl": "^8.7.5",
+        "deck.gl": "^8.8.3",
         "deep-equal": "^2.0.5",
         "fast-json-patch": "^3.0.0-1",
         "jsonschema": "^1.4.0",

react/src/lib/components/DeckGLMap/DeckGLMap.stories.tsx

@@ -1,9 +1,16 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { format } from "d3-format";
-import { PickInfo } from "deck.gl";
 import DeckGLMap from "./DeckGLMap";
-import { WellsPickInfo } from "./layers/wells/wellsLayer";
+import {
+    PickInfo,
+    TooltipCallback,
+    WellsPickInfo,
+    ExtendedLayerProps,
+    PropertyDataType,
+    TerrainMapPickInfo,
+    FeatureCollection,
+} from "../..";
 
 export default {
     component: DeckGLMap,
@@ -64,3 +71,82 @@ TooltipApi.parameters = {
         iframeHeight: 500,
     },
 };
+
+export const TooltipStyle = Template.bind({});
+
+const processPropInfo = (
+    properties: PropertyDataType[] | undefined,
+    filter: string[] | boolean
+): string => {
+    if (!properties) {
+        return "";
+    }
+
+    let outputString = "";
+
+    if (typeof filter == "boolean") {
+        if (filter) {
+            properties.forEach((ppobj) => {
+                outputString += `\n${ppobj["name"]} : ${ppobj["value"]}`;
+            });
+        }
+    } else {
+        // filter is not boolean - thus it is a string array and we should check each property
+        properties.forEach((ppobj) => {
+            if (filter.includes(ppobj["name"] as string)) {
+                outputString += `\n${ppobj["name"]} : ${ppobj["value"]}`;
+            }
+        });
+    }
+    return outputString;
+};
+
+const tooltipImpFunc: TooltipCallback = (
+    info: PickInfo<unknown>
+): Record<string, unknown> | string | null => {
+    if (!info.picked || !info.layer) {
+        return null;
+    }
+    const outputObject: Record<string, unknown> = {};
+    const layerName = info.layer.constructor.name;
+    let outputString = "";
+    if (layerName === "Map3DLayer") {
+        const layerProps = info.layer.props as ExtendedLayerProps<unknown>;
+        const layerName = layerProps.name;
+        const properties = (info as unknown as TerrainMapPickInfo).properties;
+        outputString += `Property: ${layerName}`;
+        outputString += processPropInfo(properties, true);
+    } else if (layerName === "WellsLayer") {
+        const wellsPickInfo = info as WellsPickInfo;
+        const wellsPickInfoObject = wellsPickInfo.object as FeatureCollection;
+        const wellProperties = wellsPickInfoObject.properties;
+        const name = (wellProperties as { name: string }).name;
+        outputString += `Well: ${name || ""}`;
+        outputString += processPropInfo(wellsPickInfo.properties, true);
+    }
+    outputObject["text"] = outputString;
+    outputObject["style"] = { color: "yellow" };
+    return outputObject;
+};
+
+TooltipStyle.args = {
+    ...defaultProps,
+    layers: [
+        {
+            ...defaultWellsLayer,
+            lineStyle: { width: 7 },
+        },
+    ],
+    getTooltip: tooltipImpFunc,
+    bounds: [433000, 6476000, 439000, 6480000],
+};
+
+TooltipStyle.parameters = {
+    docs: {
+        description: {
+            story: "Example of overriding tooltip style.",
+        },
+        inlineStories: false,
+        iframeHeight: 500,
+    },
+};

react/src/lib/components/DeckGLMap/layers/northarrow/northArrow3DLayer.ts

@@ -1,10 +1,13 @@
-import { Layer } from "@deck.gl/core";
+import {
+    Layer,
+    Viewport,
+    LayerContext,
+    UpdateParameters,
+    LayerProps,
+    project,
+} from "@deck.gl/core/typed";
 import GL from "@luma.gl/constants";
 import { Model, Geometry } from "@luma.gl/core";
-import { project } from "deck.gl";
-import { DeckGLLayerContext } from "../../components/Map";
-import { LayerProps } from "@deck.gl/core/lib/layer";
-import { UpdateStateInfo } from "@deck.gl/core/lib/layer";
 import { Vector3 } from "@math.gl/core";
 import { RGBAColor } from "deck.gl";
 import vertexShader from "./northarrow-vertex.glsl";
@@ -13,22 +16,20 @@ import fragmentShader from "./northarrow-fragment.glsl";
 export interface NorthArrow3DLayerProps<D> extends LayerProps<D> {
     color: RGBAColor;
 }
+
 export default class NorthArrow3DLayer extends Layer<
-    unknown,
     NorthArrow3DLayerProps<unknown>
 > {
-    initializeState(context: DeckGLLayerContext): void {
+    initializeState(context: LayerContext): void {
         const { gl } = context;
         this.setState(this._getModels(gl));
     }
 
-    shouldUpdateState(): boolean | string | null {
+    shouldUpdateState(): boolean {
         return true;
     }
 
-    updateState({
-        context,
-    }: UpdateStateInfo<NorthArrow3DLayerProps<unknown>>): void {
+    updateState({ context }: UpdateParameters<this>): void {
         if (context.gl) {
             this.setState(this._getModels(context.gl));
         }
@@ -51,11 +52,11 @@ export default class NorthArrow3DLayer extends Layer<
             this.context.viewport.constructor.name === "OrthographicViewport";
 
         const view_at = new Vector3(this.unproject([100, 100, 0]));
-        let view_from = new Vector3(this.context.viewport.getCameraPosition());
+        let view_from = new Vector3(this.context.viewport.cameraPosition);
 
         if (is_orthographic) {
             const cam_pos_z = new Vector3(
-                this.context.viewport.getCameraPosition()
+                (this.context.viewport as Viewport).cameraPosition
             )[2];
             view_from = new Vector3([view_at[0], view_at[1], cam_pos_z]);
         }
@@ -87,7 +88,7 @@ export default class NorthArrow3DLayer extends Layer<
             lines.push(x, y, z);
         }
 
-        const color = this.props.color.map((x) => (x ?? 0) / 255);
+        const color = this.props.color.map((x?: number) => (x ?? 0) / 255);
         const grids = new Model(gl, {
             id: `${this.props.id}-grids`,
             vs: vertexShader,

react/src/lib/components/DeckGLMap/layers/terrain/terrainMapLayer.ts

@@ -1,6 +1,7 @@
 import { SimpleMeshLayer } from "@deck.gl/mesh-layers";
 import { SimpleMeshLayerProps } from "@deck.gl/mesh-layers/simple-mesh-layer/simple-mesh-layer";
 import { COORDINATE_SYSTEM } from "@deck.gl/core";
+import { PickInfo, RGBAColor } from "deck.gl";
 import { RGBColor } from "@deck.gl/core/utils/color";
 import fsShader from "./terrainmap.fs.glsl";
 import GL from "@luma.gl/constants";
@@ -30,6 +31,10 @@ export type Material =
       }
     | boolean;
 
+export type TerrainMapPickInfo = PickInfo<TerrainMapLayerData> & {
+    properties?: PropertyDataType[];
+};
+
 export const DECODER = {
     rScaler: 256 * 256,
     gScaler: 256,
@@ -134,6 +139,7 @@ export default class TerrainMapLayer extends SimpleMeshLayer<
     TerrainMapLayerData,
     TerrainMapLayerProps<TerrainMapLayerData>
 > {
+    properties?: PropertyDataType[];
     // Signature from the base class, eslint doesn't like the any type.
     // eslint-disable-next-line
     draw({ uniforms, context }: any): void {
@@ -220,18 +226,24 @@ export default class TerrainMapLayer extends SimpleMeshLayer<
         return 0;
     }
 
-    // For now, use `any` for the picking types.
-    //eslint-disable-next-line
-    getPickingInfo({ info }: { info: any }): any {
-        if (!info.color) {
+    getPickingInfo({
+        info,
+    }: {
+        info: PickInfo<TerrainMapLayerData>;
+    }): PickInfo<TerrainMapLayerData> & {
+        properties?: PropertyDataType[];
+    } {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const pickColor: RGBAColor = (info as any).color;
+        if (!pickColor) {
             return info;
         }
 
         // Texture coordinates.
-        const s = info.color[0] / 255.0;
-        const t = info.color[1] / 255.0;
+        const s = pickColor[0] / 255.0;
+        const t = pickColor[1] / 255.0;
 
-        const is_outside: boolean = info.color[2] == 0;
+        const is_outside: boolean = pickColor[2] == 0;
         if (is_outside) {
             // Mouse is outside the non-transparent part of the map.
             return info;

react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts

@@ -10,6 +10,7 @@ import {
     colorTablesArray,
     getColors,
 } from "@emerson-eps/color-tables/";
+import { PickInfo } from "deck.gl";
 
 import {
     Feature,
@@ -484,44 +485,50 @@ export default class WellsLayer extends CompositeLayer<
         return [outline, log_layer, colors, highlight, selection_layer, names];
     }
 
-    // For now, use `any` for the picking types because this function should
-    // recieve PickInfo<FeatureCollection>, but it recieves PickInfo<Feature>.
-    //eslint-disable-next-line
-    getPickingInfo({ info }: { info: any }): any {
-        if (!info.object) return info;
+    getPickingInfo({
+        info,
+    }: {
+        info: PickInfo<FeatureCollection>;
+    }): PickInfo<FeatureCollection> & {
+        properties: PropertyDataType[];
+        logName: string;
+    } {
+        if (!info.object) return { ...info, properties: [], logName: "" };
+
+        const coordinate = info.coordinate || [0, 0, 0];
 
         let md_property = getMdProperty(
-            info.coordinate,
-            info.object,
+            coordinate,
+            info.object as unknown as Feature,
             this.props.lineStyle?.color
         );
         if (!md_property) {
             md_property = getLogProperty(
-                info.coordinate,
+                coordinate as Position2D,
                 (this.props.data as FeatureCollection).features,
-                info.object,
+                (info as WellsPickInfo).object as LogCurveDataType,
                 this.props.logrunName,
                 "MD"
             );
         }
         let tvd_property = getTvdProperty(
-            info.coordinate,
-            info.object,
+            info.coordinate as Position2D,
+            info.object as unknown as Feature,
             this.props.lineStyle?.color
         );
         if (!tvd_property) {
             tvd_property = getLogProperty(
-                info.coordinate,
+                info.coordinate as Position2D,
                 (this.props.data as FeatureCollection).features,
-                info.object,
+                (info as WellsPickInfo).object as LogCurveDataType,
                 this.props.logrunName,
                 "TVD"
             );
         }
         const log_property = getLogProperty(
-            info.coordinate,
+            info.coordinate as Position2D,
             (this.props.data as FeatureCollection).features,
-            info.object,
+            (info as WellsPickInfo).object as LogCurveDataType,
             this.props.logrunName,
             this.props.logName
         );
@@ -541,7 +548,7 @@ export default class WellsLayer extends CompositeLayer<
         return {
             ...info,
             properties: layer_properties,
-            logName: log_property?.name,
+            logName: log_property?.name || "",
         };
     }
 }

react/src/lib/index.js

@@ -20,6 +20,14 @@ import WebVizContinuousLegend from "./components/ColorLegends/WebVizContinuousLe
 import WebVizDiscreteLegend from "./components/ColorLegends/WebVizDiscreteLegend";
 import { PickInfo } from "deck.gl";
 import { TooltipCallback } from "./components/DeckGLMap/components/Map";
+import {
+    ExtendedLayerProps,
+    PropertyDataType,
+    LayerPickInfo,
+} from "./components/DeckGLMap/layers/utils/layerTools";
+import { WellsPickInfo } from "./components/DeckGLMap/layers/wells/wellsLayer";
+import TerrainMapPickInfo from "./components/DeckGLMap/layers/terrain/terrainMapLayer";
+import { FeatureCollection } from "@nebula.gl/edit-modes";
 
 export {
     HistoryMatch,
@@ -38,4 +46,10 @@ export {
     WebVizDiscreteLegend,
     PickInfo,
     TooltipCallback,
+    ExtendedLayerProps,
+    PropertyDataType,
+    WellsPickInfo,
+    TerrainMapPickInfo,
+    FeatureCollection,
+    LayerPickInfo,
 };