Fire a modal after a double click on data points in a graph

Dash Python
1

Hello dear community,
I have included a modal component into my dash application poping up after clicking on a data point inside a graph. I would like however to show the modal only after a second click on the data point confirming that the user really wants the modal to appear and not only clicked by accident. For the moment, I use the ‘Clickdata’ property of the graph component to trigger the callback responsible for the modal. Is there some other property that records how many time a data point was clicked for example, that way I could set the condition to number_of_clicks = 2 (or something alike … ) .

Thank you all for any helpful insight.

2

Hello @AitAhmed,

The default behavior for double click is to reset the graph to the original settings.

To overwrite this, check here:

You may also need to unbind the initial and replace the function “plotly_doubleclick”, which would need to be done in JS.

1 Like
3

However…

A work around would be to make sure the clickData is exactly the same two times in a row, if so, then display the modal. :smiley:

1 Like
4

Thank you @jinnyzor for your prompt answers. Your first suggested solution (change and overwrite the double click behaviour in the original settings) is somehow complicated as I am not proficient in JS, and also I would like to keep that behaviour as it suits my needs.
The second solution seems much compatible for my case. Here’s the scratch idea, please guide me if I’m wrong : I will add a dcc.Store component that stores the most recent clicked data point (how will I store that exactly ? ), and a calback that checks and updates the state of that dcc.Store whenever a click occurs. If the same data point is stored then the modal “is_open” property will get updated and then the modal will fire. My question is how exactly to check that the same point was clicked two times in a row ? Any hints ?

5

Sure thing.

First click → saves dcc.Store

Second click → pulls state from dcc.Store and compares to the current click data, if the same, open modal and clear the dcc.Store (if you dont clear, if the user accidentally clicks once on the point again, it will open again) If not the same, fallback to the first. :slight_smile: