Mimic Chart Double-Click Reset Behavior with "ESC"

Dash Python
1

Hello all,

I have been checking and working on this for a couple of days now, I am trying to trigger the “Reset” double-click event of a graph.

var clickEvent  = new MouseEvent('click', {
    detail: 2, view: window, cancelable: true, bubbles: true, eventPhase: 3,
});
document.addEventListener('keydown', function () {
    if (event.key === 'Escape') {
        $("#fig1 .drag")[0].dispatchEvent(clickEvent)
    }
}

I know that this event is not based upon a dblclick event, otherwise it would have been easier to implement. I have traced the event through React function calls and it seems to get treated differently with less priority for some reason.

Any help or guidance would be much appreciated.

2

For those who may be interested, I solved this.

const mouseClickEvents = ['mousedown', 'click', 'mouseup'];
function simulateMouseClick(element){
  mouseClickEvents.forEach(mouseEventType =>
    element.dispatchEvent(
      new MouseEvent(mouseEventType, {
          view: window,
          bubbles: true,
          cancelable: true,
          buttons: 1
      })
    )
  );
}

function resetGraphs(el) {
    simulateMouseClick(el)
    setTimeout(function () {simulateMouseClick(el)}, 100)
}

React doesnt use clicks by themselves, so passing all three mouse events and then setting a timeout for a subsequent set of events gets the system to think there was a double-click.

1 Like
3

This is a great solution!

You might also be able to use the EventListener component from dash-extensions

1 Like
4

Possibly, however, for my use case, I’d still have had to create a way to trigger the double-click event. Not sure if there is a way to trigger that specific event from inside a callback.

This way isnt perfect either, and you have to know what react element is supposed to be receiving the clicks.

5

Hi @jinnyzor

I’m not sure it’s linked with your question, but it might be: when we use “Box select” tool, how to cancel the current selection from Plotly.js ?

Double-click on the plot doesn’t delete the current selection. How to do this?

(I don’t use Dash, only Plotly.js)

6

@stamljf,

This code would work for you to be able to do it. However, it is interesting that you cant double-click the chart. Have you tried double-clicking multiple places?

Also, you should make a new topic regarding this error. :slight_smile:

7

I’m not familiar with js as much as I should to post but: this seems not listening to ESC anymore right? Did you discard this idea on the way?

8

What I posted was the clicking events to systematically reset the chart. That was the missing piece.

Adding event listeners to the document or a div is pretty straightforward.