Multi selection of wells in DeckGl component map. hold 'ctrl' to select multi wells and fire callback after 'ctrl' is released

[ElfarriBadr]

I am currently working with DeckGl Map components in webviz and i am trying to achieve a circular filtering of wells. I have a dropdown menu to filter the DeckGl well layer and i am using editedData parameter to track the user selection of wells inside the map. The challenge is that in editedData the user may select one well at a time, this will render the map and the dropdown to one well. This will leave no other wells to select on the map, the solution i am looking for is selection of multiple wells on the map before the callback is triggered. Is there any possibility to hold 'ctrl' key (or other options) and select all wells desired and run the callback after releasing the 'ctrl' key. This will resemble the range slider where the updatemode='mouseup' will only call the callback after the mouse button is released.

[shadab-skhan]

Linked to #531

[ElfarriBadr]

There are some several challenges that we are facing within the selection solution in Deckgl component in python. The callback gets fired each time the user clicks on a well. We would like the callback beeing fired only on release of the ctrl button, however a visual feedback that the well has been selected must be provided to the user handled by DeckGl. example by changing the opacity of the current color.

So the following issues have been detected.

1. Once the user click on a well the callback is fired, if the user click multiple times on the well. The callback is not fired, however the list keeps extending with the same well.
2. If a user click a random well to reset selection, clicking the same well will result to callback not being fired. This is the same issue as above

Ideal solution for us will be the following:

1. User holds ctrl and select wells. DeckGl component change opacity of wells selected in client side to give visual feedback of selected wells. No callback is fired during the process
2. User release ctrl, the callback get fired and we preform our logic with the selected well list. DeckGl resets colors of wells to normal

Second solution

1. Another compnent_property in DeckGl that can be used as an input to fire the callback when the ctrl button beeing released.

[ElfarriBadr]

Another weakness is we are not able to reset selection programmatically.

[ElfarriBadr]

I see that the issue is closed but we are far from fixing the issues we have brought to the table. The only thing fixed now is the bug with wells that are already selected gets duplicated in the list.

To solve our use case, we need a workflow as follows:
User will select multiple wells on a map by holding the ctrl button down. (Support in component)
They need visual feedback on what has been selected. (Support in component)
After release of ctrl button, wells selected will be moved to dropdown menus. (Done in our callback logic after callback is fired due to ctrl button is released)
Highlighted wells are reset, and multi selection is reset when ctrl button is released (Support in component)

This is the flow that we are expecting (Optimal solution), the main difference that it is based on ctrl button state and not selection state with respect to firing the callback.

1. User holds ctrl and selects the wells they desire
2. Opacity of selected wells changes to indicate that they are selected.
3. Once ctrl button is released fire the callback by updating the Compnent_property, currently the editedData gets updated each time a selection of a well is done. We need to fire based on ctrl button state not on wells selection.
4. Reset all opacities back to initial state as the selection process is reset when the ctrl button is released

If the above is not possible we need to expand the current solution to fulfil our need by doing the following (Not a solution we want, doing this logic on the client side is a better solution):

1. User holds ctrl and selects the wells they desire
2. The callback is fired for each selection, callback changes the opacity of the selected wells (Current solution now)
3. Once ctrl button released, we need a new Compnent_property in DeckGl that gets set when ctrl button is released. This can be used as an input to fire the callback when the ctrl button being released.
4. ctrl button released fires the callback and we preform our business logic.
5. We need to reset selection, we still have no way of preforming that programmatically. We need a way to reset selections programmatically after ctrl button released

[VincentNevermore]

I see that the issue is closed but we are far from fixing the issues we have brought to the table. The only thing fixed now is the bug with wells that are already selected gets duplicated in the list.

To solve our use case, we need a workflow as follows: User will select multiple wells on a map by holding the ctrl button down. (Support in component) They need visual feedback on what has been selected. (Support in component) After release of ctrl button, wells selected will be moved to dropdown menus. (Done in our callback logic after callback is fired due to ctrl button is released) Highlighted wells are reset, and multi selection is reset when ctrl button is released (Support in component)

This is the flow that we are expecting (Optimal solution), the main difference that it is based on ctrl button state and not selection state with respect to firing the callback.

1. User holds ctrl and selects the wells they desire
2. Opacity of selected wells changes to indicate that they are selected.
3. Once ctrl button is released fire the callback by updating the Compnent_property, currently the editedData gets updated each time a selection of a well is done. We need to fire based on ctrl button state not on wells selection.
4. Reset all opacities back to initial state as the selection process is reset when the ctrl button is released

If the above is not possible we need to expand the current solution to fulfil our need by doing the following (Not a solution we want, doing this logic on the client side is a better solution):

1. User holds ctrl and selects the wells they desire
2. The callback is fired for each selection, callback changes the opacity of the selected wells (Current solution now)
3. Once ctrl button released, we need a new Compnent_property in DeckGl that gets set when ctrl button is released. This can be used as an input to fire the callback when the ctrl button being released.
4. ctrl button released fires the callback and we preform our business logic.
5. We need to reset selection, we still have no way of preforming that programmatically. We need a way to reset selections programmatically after ctrl button released

Regarding this requirement, there is a new version has been pushed into the master branch today which should help to fix some issue.
First of all, we do not need to ctrl select anymore as we have suppored for multiLayers and all the layer information can been seen in the layer props. (By double clicking on the same well, it means deselected ) For Opactiy of selected wells, this will be investigated in the next step with lasso selection.

[anders-kiaer]

Short summary after quick chat on the topic:

• Want a way to select multiple wells without triggering callback each time. Maybe offer this through rectangle and lasso selection?
• Need an easy way to deselect long list of wells. Clear button in component?
• Highlight in the UI which wells are actually selected or not. E.g. give non-selected wells a specified opacity/transparency?

[VincentNevermore]

I will complete the following requirements one by one.

• Want a way to select multiple wells without triggering callback each time. Maybe offer this through rectangle and lasso selection?
• Need an easy way to deselect long list of wells. Clear button in component?
• Highlight in the UI which wells are actually selected or not. E.g. give non-selected wells a specified opacity/transparency?

[VincentNevermore]

@ElfarriBadr @anders-kiaer
I have successfully implemented the multiple highlight selected wells and I have choose the color to be highlighted as orange (attached in following screenshoot): Let me know if you think there is any other more suitable color.

[hkfb]

Last task (lasso selection) is handled in #531

[ElfarriBadr]

@ElfarriBadr @anders-kiaer I have successfully implemented the multiple highlight selected wells and I have choose the color to be highlighted as orange (attached in following screenshoot): Let me know if you think there is any other more suitable color.

Waiting for the python release so we can test this layer thanks for the update :)

[ElfarriBadr]

@VincentNevermore and @anders-kiaer I am testing this solution and it seems like the selection do not fire the callback. The editedData property does not get triggered do you know what the issue might be?

[hkfb]

@ElfarriBadr this is not working yet. There is a new callback for handling the selection in this PR: #1333 which @VincentNevermore is working on.

There is a new Storybook example in this PR that shows how to use the callback.

[ElfarriBadr]

Ok that explains it :). Thanks, I will keep tracking that branch

[ElfarriBadr]

Is the lasso selection working? i am not able to get it to work at all in the python code. I see we also have lost the possibility of multi selection.

[hkfb]

No lasso selection, but there is a "box" selection example here: https://equinor.github.io/webviz-subsurface-components/storybook-static/?path=/story/deckglmap-box-selection-layer--box-selection

Can't find any example of multi selection. Did we have it before? If so I think you should post an issue.