From d4790d8174ca34baae677452ec5aaf23ffa6b9c4 Mon Sep 17 00:00:00 2001 From: VincentNevermore <39239025+VincentNevermore@users.noreply.github.com> Date: Wed, 7 Dec 2022 14:07:17 +0000 Subject: [PATCH] add a callback function to display the selected wells (#1333) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: Håvard Bjerke --- .../boxSelectionLayer.stories.tsx} | 82 +++++++++++++------ .../boxSelectionLayer.tsx} | 20 +++-- .../lib/components/DeckGLMap/layers/index.ts | 4 +- .../DeckGLMap/layers/layersDefaultProps.ts | 12 +-- .../DeckGLMap/layers/map/mapLayer.stories.tsx | 2 +- 5 files changed, 78 insertions(+), 42 deletions(-) rename react/src/lib/components/DeckGLMap/layers/{LassoLayer/lassoLayer.stories.tsx => BoxSelectionLayer/boxSelectionLayer.stories.tsx} (56%) rename react/src/lib/components/DeckGLMap/layers/{LassoLayer/lassoLayer.tsx => BoxSelectionLayer/boxSelectionLayer.tsx} (86%) diff --git a/react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.stories.tsx b/react/src/lib/components/DeckGLMap/layers/BoxSelectionLayer/boxSelectionLayer.stories.tsx similarity index 56% rename from react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.stories.tsx rename to react/src/lib/components/DeckGLMap/layers/BoxSelectionLayer/boxSelectionLayer.stories.tsx index 575f1b512f..80587471a8 100644 --- a/react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.stories.tsx +++ b/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; const useStyles = makeStyles({ @@ -22,20 +23,19 @@ const useStyles = makeStyles({ }, }); -export const lassoSelection: ComponentStory = (args) => { - const [editedData, setEditedData] = React.useState(args.editedData); +export const boxSelection: ComponentStory = () => { const [argsState, setArgsState] = React.useState>(enableLassoArgs); const [state, setState] = React.useState(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); @@ -43,22 +43,10 @@ export const lassoSelection: ComponentStory = (args) => { setState(!state); }, [state]); - React.useEffect(() => { - setEditedData(args.editedData); - }, [args.editedData]); - return ( <>
- { - setEditedData(updatedProps); - }} - legend={{ visible: false }} - /> +
= () => { + const [data, setData] = React.useState([]); + 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 = { + ...disableLassoArgs, + layers: [ + { + "@@type": "WellsLayer", + data: "@@#resources.wellsData", + }, + { + "@@type": "BoxSelectionLayer", + visible: true, + handleSelection: getSelectedWellsDataCallBack, + }, + ], + }; + return ( + <> +
+ +
+
+
Selected Wells:
+ {data.map((item) => ( +
{item}
+ ))} +
+ + ); +}; diff --git a/react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.tsx b/react/src/lib/components/DeckGLMap/layers/BoxSelectionLayer/boxSelectionLayer.tsx similarity index 86% rename from react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.tsx rename to react/src/lib/components/DeckGLMap/layers/BoxSelectionLayer/boxSelectionLayer.tsx index 8e73fdc90c..60f8bdcd76 100644 --- a/react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.tsx +++ b/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 extends ExtendedLayerProps { +import { PickInfo } from "lib"; +export interface BoxSelectionLayerProps extends ExtendedLayerProps { mode: string; // One of modes in MODE_MAP selectedFeatureIndexes: number[]; pickingInfos: PickingInfo[]; @@ -16,6 +17,7 @@ export interface LassoLayerProps extends ExtendedLayerProps { 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 +export default class BoxSelectionLayer extends CompositeLayer< + BoxSelectionLayerProps > { // 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; +BoxSelectionLayer.layerName = "BoxSelectionLayer"; +BoxSelectionLayer.defaultProps = layersDefaultProps[ + "BoxSelectionLayer" +] as BoxSelectionLayerProps; diff --git a/react/src/lib/components/DeckGLMap/layers/index.ts b/react/src/lib/components/DeckGLMap/layers/index.ts index 1a6c3e40d8..caf7e3bff5 100644 --- a/react/src/lib/components/DeckGLMap/layers/index.ts +++ b/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"; diff --git a/react/src/lib/components/DeckGLMap/layers/layersDefaultProps.ts b/react/src/lib/components/DeckGLMap/layers/layersDefaultProps.ts index d1045e6972..420861db51 100644 --- a/react/src/lib/components/DeckGLMap/layers/layersDefaultProps.ts +++ b/react/src/lib/components/DeckGLMap/layers/layersDefaultProps.ts @@ -158,14 +158,14 @@ export const layersDefaultProps: Record = { 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", diff --git a/react/src/lib/components/DeckGLMap/layers/map/mapLayer.stories.tsx b/react/src/lib/components/DeckGLMap/layers/map/mapLayer.stories.tsx index 0c2cfca5f1..4d7ba1c14e 100644 --- a/react/src/lib/components/DeckGLMap/layers/map/mapLayer.stories.tsx +++ b/react/src/lib/components/DeckGLMap/layers/map/mapLayer.stories.tsx @@ -907,7 +907,7 @@ export const ColorMapRange: ComponentStory = (args) => { max={41048} defaultValue={41048} step={1000} - onChangeCommitted={handleChange} + onChange={handleChange} /> );