Mimic Chart Double-Click Reset Behavior with "ESC"

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.

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

This is a great solution!

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

1 Like

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.

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)

@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: