From 83da842e488b9c8bbf6eaae3600634e7b7c07d04 Mon Sep 17 00:00:00 2001 From: shengwei zhang Date: Thu, 3 Nov 2022 09:58:06 +0000 Subject: [PATCH 1/5] temp for opacity --- .../lib/components/DeckGLMap/components/Map.tsx | 14 +++++++++++++- .../DeckGLMap/layers/wells/wellsLayer.ts | 12 ++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/react/src/lib/components/DeckGLMap/components/Map.tsx b/react/src/lib/components/DeckGLMap/components/Map.tsx index a208cac8fa..ea042a2197 100644 --- a/react/src/lib/components/DeckGLMap/components/Map.tsx +++ b/react/src/lib/components/DeckGLMap/components/Map.tsx @@ -611,11 +611,23 @@ const Map: React.FC = ({ layers, "WellsLayer" )?.[0] as WellsLayer; - + wellslayer?.setSelection(selection?.well, selection?.selection); } }, [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([]); diff --git a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts b/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts index ca72f93fd6..ffce603173 100644 --- a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts +++ b/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts @@ -83,6 +83,7 @@ export interface WellsLayerProps extends ExtendedLayerProps { lineWidthScale: number; outline: boolean; selectedWell: string; + multipleSelectedWells: string[]; logData: string | LogCurveDataType[]; logName: string; logColor: string; @@ -234,6 +235,16 @@ export default class WellsLayer extends CompositeLayer< } } + setMultiSelection( + well: string | undefined, + ): void { + if (this.internalState) { + this.setState({ + well: well, + }); + } + } + shouldUpdateState({ changeFlags }: UpdateParameters): boolean { return ( changeFlags.viewportChanged || @@ -356,6 +367,7 @@ export default class WellsLayer extends CompositeLayer< }) ); + console.log(this.props); // Highlight the selected well. const highlight = new UnfoldedGeoJsonLayer( this.getSubLayerProps({ From 255b44688c228bea0cb83b817fd23437365ab42e Mon Sep 17 00:00:00 2001 From: shengwei zhang Date: Thu, 3 Nov 2022 11:49:12 +0000 Subject: [PATCH 2/5] temp for opacity task --- .../components/DeckGLMap/components/Map.tsx | 19 ++++-- .../DeckGLMap/layers/wells/wellsLayer.ts | 64 +++++++++++++++++-- 2 files changed, 72 insertions(+), 11 deletions(-) diff --git a/react/src/lib/components/DeckGLMap/components/Map.tsx b/react/src/lib/components/DeckGLMap/components/Map.tsx index ea042a2197..8ded6c91a1 100644 --- a/react/src/lib/components/DeckGLMap/components/Map.tsx +++ b/react/src/lib/components/DeckGLMap/components/Map.tsx @@ -617,20 +617,31 @@ 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); + wellslayer?.setMultiSelection(selection?.well, selection?.selection); } - }, [selection]); - + }, []) // multiple well layers const [multipleWells, setMultipleWells] = useState([]); + useEffect(() => { + console.log("getCalled"); + const layers = deckRef.current?.deck?.props.layers; + if (layers) { + const wellslayer = getLayersByType( + layers, + "WellsLayer" + )?.[0] as WellsLayer; + + wellslayer?.setMultiSelection(multipleWells); + } + }, [multipleWells]); // eslint-disable-next-line @typescript-eslint/no-explicit-any const [hoverInfo, setHoverInfo] = useState([]); const onHover = useCallback( diff --git a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts b/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts index ffce603173..86f5c29ee0 100644 --- a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts +++ b/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts @@ -83,7 +83,6 @@ export interface WellsLayerProps extends ExtendedLayerProps { lineWidthScale: number; outline: boolean; selectedWell: string; - multipleSelectedWells: string[]; logData: string | LogCurveDataType[]; logName: string; logColor: string; @@ -235,12 +234,10 @@ export default class WellsLayer extends CompositeLayer< } } - setMultiSelection( - well: string | undefined, - ): void { + setMultiSelection(wells: string[] | undefined): void { if (this.internalState) { this.setState({ - well: well, + selectedMultiWells: wells, }); } } @@ -367,7 +364,6 @@ export default class WellsLayer extends CompositeLayer< }) ); - console.log(this.props); // Highlight the selected well. const highlight = new UnfoldedGeoJsonLayer( this.getSubLayerProps({ @@ -394,6 +390,33 @@ export default class WellsLayer extends CompositeLayer< }) ); + // Highlight the multi selected wells. + const highlightMultiWells = new UnfoldedGeoJsonLayer( + this.getSubLayerProps({ + id: "highlight", + 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: getColor(this.props.wellHeadStyle?.color), + getFillColor: [0, 0, 0], + getLineColor: [0, 0, 0], + }) + ); + const log_layer = new PathLayer( this.getSubLayerProps({ id: "log_curve", @@ -520,7 +543,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 { @@ -683,6 +714,25 @@ function getWellObjectByName( ); } +function getWellObjectsByName( + wells_data: Feature[], + name: string[] +): Feature[] | undefined { + console.log("1"); + 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" From 35c6e3adc754a5f61dd14f0ac9522d0698da0bc5 Mon Sep 17 00:00:00 2001 From: shengwei zhang Date: Thu, 3 Nov 2022 23:57:22 +0000 Subject: [PATCH 3/5] temp for opacity task --- .../components/DeckGLMap/components/Map.tsx | 33 ++++++++++++------- .../DeckGLMap/layers/wells/wellsLayer.ts | 13 +++++--- 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/react/src/lib/components/DeckGLMap/components/Map.tsx b/react/src/lib/components/DeckGLMap/components/Map.tsx index 8ded6c91a1..6c74b8d579 100644 --- a/react/src/lib/components/DeckGLMap/components/Map.tsx +++ b/react/src/lib/components/DeckGLMap/components/Map.tsx @@ -630,18 +630,19 @@ const Map: React.FC = ({ // multiple well layers const [multipleWells, setMultipleWells] = useState([]); - useEffect(() => { - console.log("getCalled"); - const layers = deckRef.current?.deck?.props.layers; - if (layers) { - const wellslayer = getLayersByType( - layers, - "WellsLayer" - )?.[0] as WellsLayer; + // useEffect(() => { + // console.log("getCalled"); + // const layers = deckRef.current?.deck?.props.layers; + // if (layers) { + // const wellslayer = getLayersByType( + // layers, + // "WellsLayer" + // )?.[0] as WellsLayer; - wellslayer?.setMultiSelection(multipleWells); - } - }, [multipleWells]); + // wellslayer?.setMultiSelection(multipleWells); + // } + // console.log(multipleWells); + // }, [multipleWells]); // eslint-disable-next-line @typescript-eslint/no-explicit-any const [hoverInfo, setHoverInfo] = useState([]); const onHover = useCallback( @@ -912,6 +913,16 @@ const Map: React.FC = ({ setMultipleWells(temp); } } + const layers = deckRef.current?.deck?.props.layers; + if (layers) { + const wellslayer = getLayersByType( + layers, + "WellsLayer" + )?.[0] as WellsLayer; + + wellslayer?.setMultiSelection(updated_prop["multiSelectedWells"]); + } + console.log(updated_prop["multiSelectedWells"]); setEditedData?.(updated_prop); }, colorTables: colorTables, diff --git a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts b/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts index 86f5c29ee0..e04feee47e 100644 --- a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts +++ b/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts @@ -211,6 +211,7 @@ export default class WellsLayer extends CompositeLayer< > { // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any onClick(info: WellsPickInfo): boolean { + // Make selection only when drawing is disabled if (isDrawingEnabled(this.context.layerManager)) { return false; @@ -221,7 +222,7 @@ export default class WellsLayer extends CompositeLayer< return false; // do not return true to allow DeckGL props.onClick to be called } } - + setSelection( well: string | undefined, _selection?: [number | undefined, number | undefined] @@ -385,15 +386,17 @@ export default class WellsLayer extends CompositeLayer< this.props.wellHeadStyle?.size, 2 ), - getFillColor: getColor(this.props.wellHeadStyle?.color), - getLineColor: getColor(this.props.lineStyle?.color), + getFillColor: [0, 0, 0], + getLineColor: [0, 0, 0], + // getFillColor: getColor(this.props.wellHeadStyle?.color), + // getLineColor: getColor(this.props.lineStyle?.color), }) ); - + console.log(this.props["selectedWell"]); // Highlight the multi selected wells. const highlightMultiWells = new UnfoldedGeoJsonLayer( this.getSubLayerProps({ - id: "highlight", + id: "highlight2", data: getWellObjectsByName( data.features, this.state.selectedMultiWells From 089a7f7eff05556500bacf171a5521cc3be37d66 Mon Sep 17 00:00:00 2001 From: shengwei zhang Date: Mon, 7 Nov 2022 16:43:55 +0000 Subject: [PATCH 4/5] opacity option for multiple selections --- .../components/DeckGLMap/components/Map.tsx | 48 ++++++++----------- .../DeckGLMap/layers/utils/layerTools.ts | 37 ++++++++++++++ .../DeckGLMap/layers/wells/wellsLayer.ts | 19 +++----- 3 files changed, 64 insertions(+), 40 deletions(-) diff --git a/react/src/lib/components/DeckGLMap/components/Map.tsx b/react/src/lib/components/DeckGLMap/components/Map.tsx index 6c74b8d579..39b3477d0e 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"; @@ -611,38 +612,38 @@ const Map: React.FC = ({ layers, "WellsLayer" )?.[0] as WellsLayer; - + wellslayer?.setSelection(selection?.well, selection?.selection); } }, [selection]); useEffect(() => { - + const layers = deckRef.current?.deck?.props.layers; if (layers) { const wellslayer = getLayersByType( layers, "WellsLayer" )?.[0] as WellsLayer; - - wellslayer?.setMultiSelection(selection?.well, selection?.selection); + + wellslayer?.setSelection(selection?.well, selection?.selection); } - }, []) + }, [selection]); + // multiple well layers const [multipleWells, setMultipleWells] = useState([]); + const [selectedWell, setSelectedWell] = useState(""); - // useEffect(() => { - // console.log("getCalled"); - // const layers = deckRef.current?.deck?.props.layers; - // if (layers) { - // const wellslayer = getLayersByType( - // layers, - // "WellsLayer" - // )?.[0] as WellsLayer; - - // wellslayer?.setMultiSelection(multipleWells); - // } - // console.log(multipleWells); - // }, [multipleWells]); + 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( @@ -891,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"]); if ( Object.keys(updated_prop).includes("selectedWell") ) { @@ -913,16 +915,6 @@ const Map: React.FC = ({ setMultipleWells(temp); } } - const layers = deckRef.current?.deck?.props.layers; - if (layers) { - const wellslayer = getLayersByType( - layers, - "WellsLayer" - )?.[0] as WellsLayer; - - wellslayer?.setMultiSelection(updated_prop["multiSelectedWells"]); - } - console.log(updated_prop["multiSelectedWells"]); setEditedData?.(updated_prop); }, colorTables: colorTables, 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 e04feee47e..0a978f97b2 100644 --- a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts +++ b/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts @@ -211,7 +211,6 @@ export default class WellsLayer extends CompositeLayer< > { // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any onClick(info: WellsPickInfo): boolean { - // Make selection only when drawing is disabled if (isDrawingEnabled(this.context.layerManager)) { return false; @@ -222,7 +221,7 @@ export default class WellsLayer extends CompositeLayer< return false; // do not return true to allow DeckGL props.onClick to be called } } - + setSelection( well: string | undefined, _selection?: [number | undefined, number | undefined] @@ -386,20 +385,18 @@ export default class WellsLayer extends CompositeLayer< this.props.wellHeadStyle?.size, 2 ), - getFillColor: [0, 0, 0], - getLineColor: [0, 0, 0], - // getFillColor: getColor(this.props.wellHeadStyle?.color), - // getLineColor: getColor(this.props.lineStyle?.color), + getFillColor: getColor(this.props.wellHeadStyle?.color), + getLineColor: getColor(this.props.lineStyle?.color), }) ); - console.log(this.props["selectedWell"]); + // Highlight the multi selected wells. const highlightMultiWells = new UnfoldedGeoJsonLayer( this.getSubLayerProps({ id: "highlight2", data: getWellObjectsByName( data.features, - this.state.selectedMultiWells + this.state["selectedMultiWells"] ), pickable: false, stroked: false, @@ -414,9 +411,8 @@ export default class WellsLayer extends CompositeLayer< this.props.wellHeadStyle?.size, 2 ), - // getFillColor: getColor(this.props.wellHeadStyle?.color), - getFillColor: [0, 0, 0], - getLineColor: [0, 0, 0], + getFillColor: [255, 140, 0], + getLineColor: [255, 140, 0], }) ); @@ -721,7 +717,6 @@ function getWellObjectsByName( wells_data: Feature[], name: string[] ): Feature[] | undefined { - console.log("1"); const res: Feature[] = []; for (let i = 0; i < name?.length; i++) { wells_data?.find((item) => { From 16c3c3f5dc86cdc8326846c376b8973d4be83010 Mon Sep 17 00:00:00 2001 From: shengwei zhang Date: Mon, 7 Nov 2022 16:54:10 +0000 Subject: [PATCH 5/5] fix some linter issue --- react/src/lib/components/DeckGLMap/components/Map.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/src/lib/components/DeckGLMap/components/Map.tsx b/react/src/lib/components/DeckGLMap/components/Map.tsx index 39b3477d0e..fb785b716a 100644 --- a/react/src/lib/components/DeckGLMap/components/Map.tsx +++ b/react/src/lib/components/DeckGLMap/components/Map.tsx @@ -892,7 +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"]); + setSelectedWell(updated_prop["selectedWell"] as string); if ( Object.keys(updated_prop).includes("selectedWell") ) {