Opacity

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

@@ -38,6 +38,7 @@ import {
 } from "../../../inputSchema/schemaValidationUtil";
 import { LayerPickInfo } from "../layers/utils/layerTools";
 import { getLayersByType } from "../layers/utils/layerTools";
+import { getWellLayerByTypeAndSelectedWells } from "../layers/utils/layerTools";
 import { WellsLayer } from "../layers";
 
 import { isEmpty, isEqual } from "lodash";
@@ -616,9 +617,33 @@ const Map: React.FC<MapProps> = ({
         }
     }, [selection]);
 
+    useEffect(() => {
+        const layers = deckRef.current?.deck?.props.layers;
+        if (layers) {
+            const wellslayer = getLayersByType(
+                layers,
+                "WellsLayer"
+            )?.[0] as WellsLayer;
+
+            wellslayer?.setSelection(selection?.well, selection?.selection);
+        }
+    }, [selection]);
+
     // multiple well layers
     const [multipleWells, setMultipleWells] = useState<string[]>([]);
+    const [selectedWell, setSelectedWell] = useState<string>("");
 
+    useEffect(() => {
+        const layers = deckRef.current?.deck?.props.layers;
+        if (layers) {
+            const wellslayer = getWellLayerByTypeAndSelectedWells(
+                layers,
+                "WellsLayer",
+                selectedWell
+            )?.[0] as WellsLayer;
+            wellslayer?.setMultiSelection(multipleWells);
+        }
+    }, [multipleWells]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [hoverInfo, setHoverInfo] = useState<any>([]);
     const onHover = useCallback(
@@ -867,6 +892,7 @@ const Map: React.FC<MapProps> = ({
                 // @ts-expect-error this prop doesn't exists directly on DeckGL, but on Deck.Context
                 userData={{
                     setEditedData: (updated_prop: Record<string, unknown>) => {
+                        setSelectedWell(updated_prop["selectedWell"] as string);
                         if (
                             Object.keys(updated_prop).includes("selectedWell")
                         ) {

react/src/lib/components/DeckGLMap/layers/utils/layerTools.ts

@@ -132,6 +132,43 @@ export function getLayersByType(layers: LayersList, type: string): LayersList {
     return layers.filter((l) => l?.constructor.name === type);
 }
 
+export type NewLayersList = LayersList & {
+    id: string;
+    props: prop;
+};
+
+type prop = {
+    data: wellData;
+};
+
+type wellData = {
+    features: feature[];
+    type: string;
+    unit?: string;
+};
+
+type feature = {
+    properties: {
+        name: string;
+    };
+};
+
+export function getWellLayerByTypeAndSelectedWells(
+    layers: LayersList,
+    type: string,
+    selectedWell: string
+): LayersList {
+    if (!layers) return [];
+    return layers.filter((l) => {
+        return (
+            l?.constructor.name === type &&
+            (l as NewLayersList).props.data.features.find(
+                (item) => item.properties.name === selectedWell
+            )
+        );
+    });
+}
+
 export function getLayersById(layers: LayersList, id: string): LayersList {
     if (!layers) return [];
     return layers.filter((l) => (l as Layer).id === id);

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

@@ -234,6 +234,14 @@ export default class WellsLayer extends CompositeLayer<
         }
     }
 
+    setMultiSelection(wells: string[] | undefined): void {
+        if (this.internalState) {
+            this.setState({
+                selectedMultiWells: wells,
+            });
+        }
+    }
+
     shouldUpdateState({ changeFlags }: UpdateParameters<this>): boolean {
         return (
             changeFlags.viewportChanged ||
@@ -382,6 +390,32 @@ export default class WellsLayer extends CompositeLayer<
             })
         );
 
+        // Highlight the multi selected wells.
+        const highlightMultiWells = new UnfoldedGeoJsonLayer(
+            this.getSubLayerProps({
+                id: "highlight2",
+                data: getWellObjectsByName(
+                    data.features,
+                    this.state["selectedMultiWells"]
+                ),
+                pickable: false,
+                stroked: false,
+                positionFormat,
+                pointRadiusUnits: "pixels",
+                lineWidthUnits: "pixels",
+                pointRadiusScale: this.props.pointRadiusScale,
+                lineWidthScale: this.props.lineWidthScale,
+                getLineWidth: getSize(LINE, this.props.lineStyle?.width, -1),
+                getPointRadius: getSize(
+                    POINT,
+                    this.props.wellHeadStyle?.size,
+                    2
+                ),
+                getFillColor: [255, 140, 0],
+                getLineColor: [255, 140, 0],
+            })
+        );
+
         const log_layer = new PathLayer<LogCurveDataType>(
             this.getSubLayerProps({
                 id: "log_curve",
@@ -508,7 +542,15 @@ export default class WellsLayer extends CompositeLayer<
             })
         );
 
-        return [outline, log_layer, colors, highlight, selection_layer, names];
+        return [
+            outline,
+            log_layer,
+            colors,
+            highlight,
+            highlightMultiWells,
+            selection_layer,
+            names,
+        ];
     }
 
     getPickingInfo({ info }: { info: PickingInfo }): WellsPickInfo {
@@ -671,6 +713,24 @@ function getWellObjectByName(
     );
 }
 
+function getWellObjectsByName(
+    wells_data: Feature[],
+    name: string[]
+): Feature[] | undefined {
+    const res: Feature[] = [];
+    for (let i = 0; i < name?.length; i++) {
+        wells_data?.find((item) => {
+            if (
+                item.properties?.["name"]?.toLowerCase() ===
+                name[i]?.toLowerCase()
+            ) {
+                res.push(item);
+            }
+        });
+    }
+    return res;
+}
+
 function getPointGeometry(well_object: Feature): Point {
     return (well_object.geometry as GeometryCollection)?.geometries.find(
         (item: { type: string }) => item.type == "Point"