Plotly.js: Traces visibility is out of sync with corresponding legend state on mouse click

[contactsandygo]

In latest version of Plotlyjs traces visibility is out of sync with corresponding legend state on mouse click. This particular issue is easy to reproduce when use clicks legend repetitively and fast. I have captured this behavior in following screen-cast

This issue can also be reproduced using example code for legend following pattern I mentioned fast mouse click on one particular legend which makes hide/show of chart traces out of synch or altogether all traces hide with click on single legend after a while which also captured in screenshot.

https://codepen.io/plotly/pen/LVoGNa

After doing some research I found this behavior is happening after implementation of feature request
https://github.com/plotly/plotly.js/pull/1432(Allow toggling legend to show just 1 series (or group) by double clicking)
and subsequent commit for this feature
https://github.com/plotly/plotly.js/commit/b106b9f2d5f14436c469ac1dcd9c241741b9a216

When I restored code for method setupTraceToggle prior to 1.25.0 and from version 1.24.2. in src\components\legend\draw.js this issue is getting resolved but it would be correct to resolve this issue on latest code without rolling back to old code and loosing feature.

Please look into this issue ASAP as this is a major functionality break and chart looks very bad when it happens from logical perspective. Hope provided screen cast will help to reproduce this issue on latest plotlyjs.

Regards,
SG

[alexcjohnson]

I'm a bit confused, what behavior there is undesirable? I don't see anything out of sync, which to me would mean the actual trace visibility not matching the visibility implied by the legend, or clicking on one legend item having an effect as if you clicked on a different item.

If you double-click one trace in the legend, then that trace is isolated (per #1432), then if you single-click that trace again you hide that trace so no traces are visible. That all seems to be working as expected as far as I can see. I understand that if you spam-click the legend it may be hard to tell what's a single-click and what's a double-click, but it'll be hard for the user to tell that too, so I doubt anyone would be surprised that this results in the plot being in a strange state.

[etpinard]

@contactsandygo note that if you don't like the doubleclick behavior, you can disable it using:

Plotly.newPlot(gd, data, layout);
gd.on('plotly_legenddoubleclick', () => false);

starting in v.1.37.0

[contactsandygo]

@etpinard Thanks for your quick suggestion. I dont know the full context of double click on legend functionality but we are not using it and being it is by-default on its giving weird user experience. When user click on some legend randomly some other trace is getting hidden or sometimes all other traces (even without clicking there respective legend ) are hidden but most of the time respective trace . It might due to single click treated as double click if single click happens with less interval of time.
I implemented your suggestion and I dont see above mentioned behavior.

Thanks a lot for quick help...
SG

[contactsandygo]

Plotly.newPlot(gd, data, layout);
gd.on('plotly_legenddoubleclick', () => false);

this code is working fine for disabling doubleclick on chart traces but it is not working for annotations where visibility of traces and corresponding annotation is synced in a solution provided by @etpinard
https://codepen.io/etpinard/pen/ZWdjNy

When this example I modified with suggested solution to disable double click. Traces seems to be disabled but annotation is visible when corresponding trace is invisible as shown in below screen shot

Link for modified code pen is as below
https://codepen.io/contactsandygo/pen/xzLJwQ

[alexcjohnson]

@contactsandygo the issue is that changing the trace visibility is delayed with respect to the click event now, so that we can distinguish single- and double-clicks. Anyway rather than diving into our element structure, I'd suggest binding to the plotly_restyle event that accompanies actually changing the trace visibility:
https://codepen.io/alexcjohnson/pen/ERvewP?editors=0010

[contactsandygo]

@alexcjohnson codepen example works like a charm I will integrate this solution in our application.
Thank a lot for help

Regards
SG

[alexcjohnson]

(side note: you may find annotation.visible better than annotation.opacity, particularly if you care about autoranging the axes: visible: false stops reserving space for the annotation, whereas opacity: 0 will continue autoranging to include the annotation even though you can't see it. I've updated the codepen to use visible https://codepen.io/alexcjohnson/pen/ERvewP?editors=0010)

[alexcjohnson]

@etpinard do you want to leave this open as a placeholder for a cleaner way to disable legend doubleclick, or shall we close it?

[etpinard]

do you want to leave this open as a placeholder for a cleaner way to disable legend doubleclick,

There's already https://github.com/plotly/plotly.js/issues/665 for that

I'd vote for closing this.

[codermeen]

@alexcjohnson ,there seems one issue with using 'plotly_restyle' event , firstly this event doesnt pass any event data , so it cannot be used to figure out which particular legend has been clicked ... in case u got a clue , pls share ....secondly if try to use 'plotly_legendclick' to get hold of which legend has been clicked ... i tried but its not the same as 'plotly_click' eventdata .... seeking insight as how to get hold of clicked legend .. appreciate it as there is not enough documentation avaialble anywhere related to eventData passed in thses events ,...