add a callback function to display the selected wells

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

@@ -900,6 +900,7 @@ const Map: React.FC<MapProps> = ({
         },
         [viewStates]
     );
+
     if (!deckGLViews || isEmpty(deckGLViews) || isEmpty(deckGLLayers))
         return null;
     return (

react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.stories.tsx

@@ -123,3 +123,51 @@ const enableLassoArgs = {
         },
     ],
 };
+
+export const lassoSelectionWithCallback: ComponentStory<
+    typeof DeckGLMap
+> = () => {
+    const [data, setData] = React.useState<string[]>([]);
+    const getSelectedWellsDataCallBack = React.useCallback(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (pickingInfos: any[]) => {
+            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": "LassoLayer",
+                visible: true,
+                data: "@@#resources.wellsData",
+                getSelectedWellsData: getSelectedWellsDataCallBack,
+            },
+        ],
+    };
+    return (
+        <>
+            <div className={useStyles().main}>
+                <DeckGLMap
+                    id={"DeckGL-Map"}
+                    {...lassoArgsWithSelectedWellsDataCallback}
+                    legend={{ visible: false }}
+                />
+            </div>
+            <div>
+                {data.map((item) => (
+                    <div key={item}>{item}</div>
+                ))}
+            </div>
+        </>
+    );
+};

react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.tsx

@@ -16,6 +16,8 @@ export interface LassoLayerProps<D> extends ExtendedLayerProps<D> {
     lineWidthScale: number;
     lineStyle: LineStyleAccessor;
     wellHeadStyle: WellHeadStyleAccessor;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getSelectedWellsData: (pickingInfos: any[]) => void;
 }
 
 type StyleAccessorFunction = (
@@ -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,7 @@ export default class LassoLayer extends CompositeLayer<
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 onSelect: ({ pickingInfos }: any) => {
                     this.setMultiSelection(pickingInfos);
+                    this.props.getSelectedWellsData(pickingInfos);
                 },
                 layerIds: ["wells-layer"],
                 getTentativeFillColor: () => [255, 0, 255, 100],

react/src/lib/components/DeckGLMap/layers/drawing/drawingLayer.tsx

@@ -32,6 +32,7 @@ class CustomModifyMode extends ModifyMode {
         super.handleKeyUp(event, props);
 
         if (event.key === "Delete") {
+            console.log("In");
             const updatedData = new ImmutableFeatureCollection(props.data)
                 .deleteFeatures(props.selectedIndexes)
                 .getObject();
@@ -154,6 +155,7 @@ export default class DrawingLayer extends CompositeLayer<
     // Callback for various editing events. Most events will update this component
     // through patches sent to the map parent. See patchLayerPropsin layerTools.ts.
     _onEdit(editAction: EditAction<FeatureCollection>): void {
+        console.log(editAction.editType);
         switch (editAction.editType) {
             case "addFeature":
                 this.setState({

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

@@ -295,7 +295,6 @@ export default class WellsLayer extends CompositeLayer<
         if (!(this.props.data as unknown as FeatureCollection).features) {
             return [];
         }
-
         const refine = this.props.refine;
         const data = refine
             ? splineRefine(this.props.data as unknown as FeatureCollection) // smooth well paths.