diff --git a/react/src/lib/components/DeckGLMap/components/Map.tsx b/react/src/lib/components/DeckGLMap/components/Map.tsx index a208cac8fa..fb785b716a 100644 --- a/react/src/lib/components/DeckGLMap/components/Map.tsx +++ b/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 = ({ } }, [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([]); + const [selectedWell, setSelectedWell] = useState(""); + 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([]); const onHover = useCallback( @@ -867,6 +892,7 @@ const Map: React.FC = ({ // @ts-expect-error this prop doesn't exists directly on DeckGL, but on Deck.Context userData={{ setEditedData: (updated_prop: Record) => { + setSelectedWell(updated_prop["selectedWell"] as string); if ( Object.keys(updated_prop).includes("selectedWell") ) { diff --git a/react/src/lib/components/DeckGLMap/layers/utils/layerTools.ts b/react/src/lib/components/DeckGLMap/layers/utils/layerTools.ts index d870d88c1c..ba842e2196 100644 --- a/react/src/lib/components/DeckGLMap/layers/utils/layerTools.ts +++ b/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); diff --git a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts b/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts index ca72f93fd6..0a978f97b2 100644 --- a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts +++ b/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): 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( 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"