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 10 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
67 changes: 56 additions & 11 deletions .../layers/LassoLayer/lassoLayer.stories.tsx → ...ectionLayer/boxSelectionLayer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import DeckGLMap from "../../DeckGLMap";

export default {
component: DeckGLMap,
title: "DeckGLMap / Lasso Layer",
title: "DeckGLMap / Box Selection Layer",
} as ComponentMeta<typeof DeckGLMap>;

const useStyles = makeStyles({
Expand All @@ -22,20 +22,20 @@ const useStyles = makeStyles({
},
});

export const lassoSelection: ComponentStory<typeof DeckGLMap> = (args) => {
export const boxSelection: ComponentStory<typeof DeckGLMap> = (args) => {
const [editedData, setEditedData] = React.useState(args.editedData);
hkfb marked this conversation as resolved.
Show resolved Hide resolved
const [argsState, setArgsState] =
React.useState<Record<string, unknown>>(enableLassoArgs);
const [state, setState] = React.useState<boolean>(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);
Expand Down Expand Up @@ -90,9 +90,8 @@ const disableLassoArgs = {
data: "@@#resources.wellsData",
},
{
"@@type": "LassoLayer",
"@@type": "BoxSelectionLayer",
visible: false,
data: "@@#resources.wellsData",
},
],
editedData: {},
Expand All @@ -117,9 +116,55 @@ const enableLassoArgs = {
data: "@@#resources.wellsData",
},
{
"@@type": "LassoLayer",
"@@type": "BoxSelectionLayer",
visible: true,
data: "@@#resources.wellsData",
},
],
};

export const boxSelectionWithCallback: ComponentStory<
typeof DeckGLMap
> = () => {
const [data, setData] = React.useState<string[]>([]);
const getSelectedWellsDataCallBack = React.useCallback(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
hkfb marked this conversation as resolved.
Show resolved Hide resolved
(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": "BoxSelectionLayer",
visible: true,
handleSelection: getSelectedWellsDataCallBack,
},
],
};
return (
<>
<div className={useStyles().main}>
<DeckGLMap
id={"DeckGL-Map"}
{...lassoArgsWithSelectedWellsDataCallback}
legend={{ visible: false }}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The legend prop has been deprecated.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The legend prop has been deprecated.

/>
</div>
<div>
{data.map((item) => (
hkfb marked this conversation as resolved.
Show resolved Hide resolved
<div key={item}>{item}</div>
))}
</div>
</>
);
};
20 changes: 12 additions & 8 deletions ...eckGLMap/layers/LassoLayer/lassoLayer.tsx → ...s/BoxSelectionLayer/boxSelectionLayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { ExtendedLayerProps } from "../utils/layerTools";
import { getSize } from "../wells/wellsLayer";
import { Color } from "@deck.gl/core/typed";
import { Feature } from "geojson";
export interface LassoLayerProps<D> extends ExtendedLayerProps<D> {
export interface BoxSelectionLayerProps<D> extends ExtendedLayerProps<D> {
mode: string; // One of modes in MODE_MAP
selectedFeatureIndexes: number[];
pickingInfos: PickingInfo[];
Expand All @@ -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
handleSelection: (pickingInfos: any[]) => void;
hkfb marked this conversation as resolved.
Show resolved Hide resolved
}

type StyleAccessorFunction = (
Expand All @@ -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<FeatureCollection>
export default class BoxSelectionLayer extends CompositeLayer<
BoxSelectionLayerProps<FeatureCollection>
> {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setMultiSelection(pickingInfos: any[]): void {
Expand All @@ -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.handleSelection) {
this.props.handleSelection(pickingInfos);
}
},
layerIds: ["wells-layer"],
getTentativeFillColor: () => [255, 0, 255, 100],
Expand All @@ -109,7 +113,7 @@ export default class LassoLayer extends CompositeLayer<
}
}

LassoLayer.layerName = "LassoLayer";
LassoLayer.defaultProps = layersDefaultProps[
"LassoLayer"
] as LassoLayerProps<FeatureCollection>;
BoxSelectionLayer.layerName = "BoxSelectionLayer";
BoxSelectionLayer.defaultProps = layersDefaultProps[
"BoxSelectionLayer"
] as BoxSelectionLayerProps<FeatureCollection>;
4 changes: 2 additions & 2 deletions react/src/lib/components/DeckGLMap/layers/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
12 changes: 6 additions & 6 deletions react/src/lib/components/DeckGLMap/layers/layersDefaultProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,14 @@ export const layersDefaultProps: Record<string, unknown> = {
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",
Expand Down