add a callback function to display the selected wells (#1333)

* temp

* temp

* add a callback function to display the selected wells

* add a callback function to display the selected wells

* fix comments

* fix issue when getSelectedWellsData is not provided

* rename lasso layer to box selection layer

* change box selection default visible to true

* revert map layer changes

* make variable lower case as suggested

* fix comments

* fix lint issue

* fix comments

* remove eslint comment

* remove deprecrated prop - legend

Co-authored-by: shengwei zhang <[email protected]>
Co-authored-by: Håvard Bjerke <[email protected]>

Author: 3 people

…layers/LassoLayer/lassoLayer.stories.tsx …ctionLayer/boxSelectionLayer.stories.tsxreact/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.stories.tsx renamed to react/src/lib/components/DeckGLMap/layers/BoxSelectionLayer/boxSelectionLayer.stories.tsx react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.stories.tsx renamed to react/src/lib/components/DeckGLMap/layers/BoxSelectionLayer/boxSelectionLayer.stories.tsx

@@ -1,11 +1,12 @@
 import { FormControlLabel, makeStyles, Switch } from "@material-ui/core";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { PickInfo } from "lib";
 import React from "react";
 import DeckGLMap from "../../DeckGLMap";
 
 export default {
     component: DeckGLMap,
-    title: "DeckGLMap / Lasso Layer",
+    title: "DeckGLMap / Box Selection Layer",
 } as ComponentMeta<typeof DeckGLMap>;
 
 const useStyles = makeStyles({
@@ -22,43 +23,30 @@ const useStyles = makeStyles({
     },
 });
 
-export const lassoSelection: ComponentStory<typeof DeckGLMap> = (args) => {
-    const [editedData, setEditedData] = React.useState(args.editedData);
+export const boxSelection: ComponentStory<typeof DeckGLMap> = () => {
     const [argsState, setArgsState] =
         React.useState<Record<string, unknown>>(enableLassoArgs);
     const [state, setState] = React.useState<boolean>(true);
 
     const handleChange = React.useCallback(() => {
-        const lassoLayer = enableLassoArgs.layers.filter(
-            (item) => item["@@type"] === "LassoLayer"
+        const boxSelectionLayer = enableLassoArgs.layers.filter(
+            (item) => item["@@type"] === "BoxSelectionLayer"
         );
-        if (lassoLayer[0].visible !== undefined) {
-            lassoLayer[0].visible = !lassoLayer[0].visible;
+        if (boxSelectionLayer[0].visible !== undefined) {
+            boxSelectionLayer[0].visible = !boxSelectionLayer[0].visible;
         }
-        if (lassoLayer[0].visible) {
+        if (boxSelectionLayer[0].visible) {
             setArgsState(enableLassoArgs);
         } else {
             setArgsState(disableLassoArgs);
         }
         setState(!state);
     }, [state]);
 
-    React.useEffect(() => {
-        setEditedData(args.editedData);
-    }, [args.editedData]);
-
     return (
         <>
             <div className={useStyles().main}>
-                <DeckGLMap
-                    id={"DeckGL-Map"}
-                    {...argsState}
-                    editedData={editedData}
-                    setProps={(updatedProps) => {
-                        setEditedData(updatedProps);
-                    }}
-                    legend={{ visible: false }}
-                />
+                <DeckGLMap id={"DeckGL-Map"} {...argsState} />
             </div>
             <div style={{ textAlign: "center" }}>
                 <FormControlLabel
@@ -90,9 +78,8 @@ const disableLassoArgs = {
             data: "@@#resources.wellsData",
         },
         {
-            "@@type": "LassoLayer",
+            "@@type": "BoxSelectionLayer",
             visible: false,
-            data: "@@#resources.wellsData",
         },
     ],
     editedData: {},
@@ -117,9 +104,54 @@ const enableLassoArgs = {
             data: "@@#resources.wellsData",
         },
         {
-            "@@type": "LassoLayer",
+            "@@type": "BoxSelectionLayer",
             visible: true,
-            data: "@@#resources.wellsData",
         },
     ],
 };
+
+export const boxSelectionWithCallback: ComponentStory<
+    typeof DeckGLMap
+> = () => {
+    const [data, setData] = React.useState<string[]>([]);
+    const getSelectedWellsDataCallBack = React.useCallback(
+        (pickingInfos: PickInfo[]) => {
+            const selectedWells = pickingInfos
+                .map((item) => item.object)
+                .filter((item) => item.type === "Feature")
+                .map((item) => item.properties["name"]) as string[];
+            setData(selectedWells);
+        },
+        []
+    );
+    const lassoArgsWithSelectedWellsDataCallback: Record<string, unknown> = {
+        ...disableLassoArgs,
+        layers: [
+            {
+                "@@type": "WellsLayer",
+                data: "@@#resources.wellsData",
+            },
+            {
+                "@@type": "BoxSelectionLayer",
+                visible: true,
+                handleSelection: getSelectedWellsDataCallBack,
+            },
+        ],
+    };
+    return (
+        <>
+            <div className={useStyles().main}>
+                <DeckGLMap
+                    id={"DeckGL-Map"}
+                    {...lassoArgsWithSelectedWellsDataCallback}
+                />
+            </div>
+            <div>
+                <div>Selected Wells:</div>
+                {data.map((item) => (
+                    <div key={item}>{item}</div>
+                ))}
+            </div>
+        </>
+    );
+};

…ckGLMap/layers/LassoLayer/lassoLayer.tsx …/BoxSelectionLayer/boxSelectionLayer.tsxreact/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.tsx renamed to react/src/lib/components/DeckGLMap/layers/BoxSelectionLayer/boxSelectionLayer.tsx react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.tsx renamed to react/src/lib/components/DeckGLMap/layers/BoxSelectionLayer/boxSelectionLayer.tsx

@@ -7,7 +7,8 @@ import { ExtendedLayerProps } from "../utils/layerTools";
 import { getSize } from "../wells/wellsLayer";
 import { Color } from "@deck.gl/core/typed";
 import { Feature } from "geojson";
-export interface LassoLayerProps<D> extends ExtendedLayerProps<D> {
+import { PickInfo } from "lib";
+export interface BoxSelectionLayerProps<D> extends ExtendedLayerProps<D> {
     mode: string; // One of modes in MODE_MAP
     selectedFeatureIndexes: number[];
     pickingInfos: PickingInfo[];
@@ -16,6 +17,7 @@ export interface LassoLayerProps<D> extends ExtendedLayerProps<D> {
     lineWidthScale: number;
     lineStyle: LineStyleAccessor;
     wellHeadStyle: WellHeadStyleAccessor;
+    handleSelection: (pickingInfos: PickInfo[]) => void;
 }
 
 type StyleAccessorFunction = (
@@ -42,8 +44,8 @@ type WellHeadStyleAccessor = {
 
 // Composite layer that contains an Selection Lyaer from nebula.gl
 // See https://nebula.gl/docs/api-reference/layers/selection-layer
-export default class LassoLayer extends CompositeLayer<
-    LassoLayerProps<FeatureCollection>
+export default class BoxSelectionLayer extends CompositeLayer<
+    BoxSelectionLayerProps<FeatureCollection>
 > {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setMultiSelection(pickingInfos: any[]): void {
@@ -68,7 +70,6 @@ export default class LassoLayer extends CompositeLayer<
         const isOrthographic =
             this.context.viewport.constructor.name === "OrthographicViewport";
         const positionFormat = isOrthographic ? "XY" : "XYZ";
-
         const geoJsonLayer = new GeoJsonLayer({
             id: "geoJson",
             data: this.state["data"],
@@ -96,6 +97,9 @@ export default class LassoLayer extends CompositeLayer<
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 onSelect: ({ pickingInfos }: any) => {
                     this.setMultiSelection(pickingInfos);
+                    if (this.props.handleSelection) {
+                        this.props.handleSelection(pickingInfos);
+                    }
                 },
                 layerIds: ["wells-layer"],
                 getTentativeFillColor: () => [255, 0, 255, 100],
@@ -109,7 +113,7 @@ export default class LassoLayer extends CompositeLayer<
     }
 }
 
-LassoLayer.layerName = "LassoLayer";
-LassoLayer.defaultProps = layersDefaultProps[
-    "LassoLayer"
-] as LassoLayerProps<FeatureCollection>;
+BoxSelectionLayer.layerName = "BoxSelectionLayer";
+BoxSelectionLayer.defaultProps = layersDefaultProps[
+    "BoxSelectionLayer"
+] as BoxSelectionLayerProps<FeatureCollection>;

react/src/lib/components/DeckGLMap/layers/index.ts

@@ -13,7 +13,7 @@ export { default as SelectableGeoJsonLayer } from "./selectable_geojson/selectab
 export { default as NorthArrow3DLayer } from "./northarrow/northArrow3DLayer";
 export { default as UnfoldedGeoJsonLayer } from "./intersection/unfoldedGeoJsonLayer";
 export { default as Grid3DLayer } from "./grid3d/grid3dLayer";
-export { default as LassoLayer } from "./LassoLayer/lassoLayer";
+export { default as BoxSelectionLayer } from "./BoxSelectionLayer/boxSelectionLayer";
 
 export { AxesLayerProps } from "./axes/axesLayer";
 export { Axes2DLayerProps } from "./axes2d/axes2DLayer";
@@ -28,4 +28,4 @@ export { PieChartLayerProps } from "./piechart/pieChartLayer";
 export { Map3DLayerProps } from "./terrain/map3DLayer";
 export { WellsLayerProps } from "./wells/wellsLayer";
 export { Grid3DLayerProps } from "./grid3d/grid3dLayer";
-export { LassoLayerProps } from "./LassoLayer/lassoLayer";
+export { BoxSelectionLayerProps } from "./BoxSelectionLayer/boxSelectionLayer";

react/src/lib/components/DeckGLMap/layers/layersDefaultProps.ts

@@ -158,14 +158,14 @@ export const layersDefaultProps: Record<string, unknown> = {
             features: [],
         },
     },
-    LassoLayer: {
-        "@@type": "LassoLayer",
-        name: "Lasso",
-        id: "lasso-layer",
+    BoxSelectionLayer: {
+        "@@type": "BoxSelectionLayer",
+        name: "boxSelection",
+        id: "boxSelection-layer",
         pickable: true,
-        visible: false,
+        visible: true,
 
-        // Props used to get/set data in the drawing layer.
+        // Props used to get/set data in the box selection layer.
         selectedFeatureIndexes: [] as number[],
         data: {
             type: "FeatureCollection",

react/src/lib/components/DeckGLMap/layers/map/mapLayer.stories.tsx

@@ -907,7 +907,7 @@ export const ColorMapRange: ComponentStory<typeof DeckGLMap> = (args) => {
                 max={41048}
                 defaultValue={41048}
                 step={1000}
-                onChangeCommitted={handleChange}
+                onChange={handleChange}
             />
         </>
     );