Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add a callback function to display the selected wells #1333

Merged
merged 16 commits into from
Dec 7, 2022
Merged

add a callback function to display the selected wells #1333

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
5818e0c
temp
Nov 30, 2022
71b68fa
temp
Dec 1, 2022
0554b53
add a callback function to display the selected wells
Dec 1, 2022
a948b16
add a callback function to display the selected wells
Dec 1, 2022
68eb02d
fix comments
Dec 1, 2022
7eef889
fix issue when getSelectedWellsData is not provided
Dec 1, 2022
5a91bf6
rename lasso layer to box selection layer
Dec 5, 2022
ae1248c
change box selection default visible to true
Dec 5, 2022
7831059
revert map layer changes
Dec 5, 2022
913c02a
make variable lower case as suggested
Dec 6, 2022
c16327c
fix comments
Dec 6, 2022
045f7aa
fix lint issue
Dec 6, 2022
569d5c6
fix comments
Dec 6, 2022
4747f81
remove eslint comment
Dec 7, 2022
e3c3444
remove deprecrated prop - legend
Dec 7, 2022
4064777
Merge branch 'master' into 531
hkfb Dec 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 47 additions & 2 deletions react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ const disableLassoArgs = {
{
"@@type": "LassoLayer",
visible: false,
data: "@@#resources.wellsData",
},
],
editedData: {},
Expand All @@ -119,7 +118,53 @@ const enableLassoArgs = {
{
"@@type": "LassoLayer",
visible: true,
data: "@@#resources.wellsData",
},
],
};

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,
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>
</>
);
};
6 changes: 5 additions & 1 deletion react/src/lib/components/DeckGLMap/layers/LassoLayer/lassoLayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down Expand Up @@ -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"],
Expand Down Expand Up @@ -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.getSelectedWellsData) {
this.props.getSelectedWellsData(pickingInfos);
}
},
layerIds: ["wells-layer"],
getTentativeFillColor: () => [255, 0, 255, 100],
Expand Down