How to catch which button (zoom in, zoom out ,etc.) has been click in the Mode Bar?

plotly.js
1

I’m trying to find from which button in the Modebar (zoom in, out ,etc.) the zoom has been trigger
I catch the ploty_relayout event but now, how to find from which button it has been trigger ?
Looks like it is at document level but I cannot find out…

graphDivFullCycle.on('plotly_relayout', function(eventdata){

        alert( 'Event data:' + PointerEvent.target + '\n' +
             JSON.stringify(eventdata) + '\n\n' +
            'x-axis start:' + eventdata['xaxis.range[0]'] + '\n' +
            'x-axis end:' + eventdata['xaxis.range[1]'] );
.....
2

Hello @jea1768,

Welcome to the community.

You are trying to know which button is active when the user is interacting with the chart?

3

Hello jinnyzor,
Yes, because as you can see in the code below, I want to copy the part of the plot (graphDivFullCycle) that I zoomed into a second plot (graphDivCriteria) but as this is done in the ṕlot_relayout event, I also get the side effect of the zoom in & out from the first plot into the second plot which I don´t want - I managed to avoid the reset axes and autoscale with the If’s but I can´t find a way for zoom in & out (okay, I could remove the zoom in & out in graphDivFullCycle buttons but this is nice to have them)

graphDivFullCycle.on(‘plotly_relayout’, function(eventdata){
/*
alert( ‘Event data:\n’ +
JSON.stringify(eventdata) + ‘\n\n’ +
‘x-axis start:’ + eventdata[‘xaxis.range[0]’] + ‘\n’ +
‘x-axis end:’ + eventdata[‘xaxis.range[1]’] );
*/
// “Filter” zooms on the full data cycle to not propagate them on the criteria graph
if (JSON.stringify(eventdata) == ‘{“xaxis.autorange”:true,“yaxis.autorange”:true}’ ) // Auto scale ?
{
console.log(“AUTO RESCALE OF THE FULL DATA CYCLE, DO NOTHING !”);
return;
}
if (eventdata[‘xaxis.range[0]’] == null && eventdata[‘xaxis.range[1]’] == null ) // Reset axes ?
{
console.log(“RESET AXES OF THE FULL DATA CYCLE, DO NOTHING !”);
return;
}

        // Copy zoomed part into graphDivCriteria
        var startXZoom = eventdata['xaxis.range[0]'];
        var endXZoom = eventdata['xaxis.range[1]'];
        
        criteria['x'] = [];
        criteria['y'] = [];
        
        // Search index in dataFullCycle where x is >= startXZoom
        var startXCriteriaIndex = dataFullCycle['x'].findIndex(element => element >= startXZoom);
        console.log("Start Index=",startXCriteriaIndex, "=>", dataFullCycle['x'][startXCriteriaIndex] );
        // Search index in dataFullCycle where x is <= endXZoom
        var endXCriteriaIndex = dataFullCycle['x'].findIndex(element => element > endXZoom);
        //endXCriteriaIndex--;
        console.log("End Index=",endXCriteriaIndex, "=>", dataFullCycle['x'][endXCriteriaIndex] );
        
        criteria['x'] = dataFullCycle['x'].slice(startXCriteriaIndex, endXCriteriaIndex);
        criteria['y'] = dataFullCycle['y'].slice(startXCriteriaIndex, endXCriteriaIndex);          
        
        // Rescale criteria X according to the zoom we did
        updateCriteria['xaxis.range']  =  [startXZoom, endXZoom];
        
        Plotly.restyle(graphDivCriteria, updateCriteria);
        Plotly.relayout(graphDivCriteria, updateCriteria);
  
});
4

You might be able to query which “modebar-btn”, this is a class, has the class “active”.

I see that this is available through implementing via Dash, but it should be there.

5

I didn´t manage with modebar-btn… Do you have an example of an event catching from the modebar ?
I think I will add some flags in the button.js source code and test against them in my code
It is really amazing how these click events are very well hidden somewhere ! I cannot find them in the document neither the window nodes…

6

If you are trying to capture the event of selecting the active button, then you can do this:

$(document).on("mousedown", function () {
     if (event.target == 'path') {
          console.log($(event.target).closest('.modebar-btn').attr('data-title'))
     }
})

Keep in mind, setting a static variable based upon interaction will not work because of switching between graphs.

React doesnt use click events, rather, mousedown.

7

Thank you very much - mousedown does the job !

var zoom_button_on_mouse_down;
(document).on("mousedown", function () { zoom_button_on_mouse_down = (event.target).closest(‘.modebar-btn’).attr(‘data-title’);
})
graphDivFullCycle.on(‘plotly_relayout’, function(eventdata){

        if ( zoom_button_on_mouse_down == "Zoom in" ){
          return;
        }
        if ( zoom_button_on_mouse_down == "Zoom out" ){
          return;
        }
        if ( zoom_button_on_mouse_down == "Autoscale" ){
          return;
        }
        if ( zoom_button_on_mouse_down == "Reset axes" ){
          return;
        }
1 Like