scrollZoom performance issues introduced in 2.3.0 #5912

Activity

1. archmoj commented on Aug 30, 2021

   

   archmoj

   on Aug 30, 2021

   Contributor

   More actions

   Thanks for the report & beautiful demo.
   Prior to v2.3.0 scattergl ignored plotGlPixelRatio setting which was a bug.
   Now you could get similar performance by setting plotGlPixelRatio: 1 in the config i.e. in the last argument.
2. secretwpn commented on Aug 31, 2021

   

   secretwpn

   on Aug 31, 2021

   Last edited by secretwpn

   Author

   More actions

   Thanks for the quick reply @archmoj, much appreciated!

   I've tried setting the plotGlPixelRatio: 1 and indeed in my demo it did the trick.
   (By the way it was not obvious from the release notes that this flag should be adjusted to avoid performance penalties)

   Excited I've applied this to my actual project code but sadly it did almost nothing in terms of performance improvement.

   After spending a few hours on trying to extract the minimum example that would still trigger the issue from our production code, this is what I've came up with:

   Demo: https://codesandbox.io/s/plotly2-performance-drop-demo-tickvals-1t424

   Steps to reproduce:

   • open the demo, try scrolling in/out to change the zoom level
   • change the plotly.js-dist dependency version from 2.0.0-rc.0 to 2.0.0-rc.1 and test the scroll zoom again

   Unlike the plotGlPixelRatio change that happened between 2.2.1 and 2.3.0 the reason for this tickvals related issue was probably introduced in 2.0.0-rc.1 since 2.0.0-rc.0 still has a reasonable performance and 2.0.0-rc.1 drops a lot of frames when zooming and is borderline unresponsive.
3. nicolaskruchten commented on Aug 31, 2021

   

   nicolaskruchten

   on Aug 31, 2021

   Contributor

   More actions

   I can replicate this slowdown with the sample provided, thanks very much! @archmoj are you able to replicate also?

   👍React with 👍1Reacted by Simon
4. archmoj commented on Aug 31, 2021

   

   archmoj

   on Aug 31, 2021

   Contributor

   More actions

   Demo: https://codesandbox.io/s/plotly2-performance-drop-demo-tickvals-1t424

   Steps to reproduce:

   • open the demo, try scrolling in/out to change the zoom level
   • change the plotly.js-dist dependency version from 2.0.0-rc.0 to 2.0.0-rc.1 and test the scroll zoom again

   Related to #5584.
   In your test case adding ticklabeloverflow: "allow" to xaxis and yaxis can help.

   🎉React with 🎉1Reacted by Simon
5. secretwpn commented on Aug 31, 2021

   

   secretwpn

   on Aug 31, 2021

   Author

   More actions

   @archmoj adding ticklabeloverflow: "allow" seems to help both on demo and on my project code as well, I had a feeling you'd have some sort of magic flag handy. Thanks!

   I will put more testing on that and report back if I find more related issues/details, but for now I think I am happy with using these additional configuration parameters you've pointed out.
6. archmoj commented on Sep 1, 2021

   

   archmoj

   on Sep 1, 2021

   Contributor

   More actions

   Closing. Please feel free to reopen or open a new issue if you encountered a new one.
7. archmoj

   closed this as completedon Sep 1, 2021
8. secretwpn commented on Dec 9, 2021

   

   secretwpn

   on Dec 9, 2021

   Last edited by secretwpn

   Author

   More actions

   I'm not sure if i can reopen the issue, let's see if it happens automatically with this comment, if not I'll open a new one and link to here. (UPD: reopened as #6054)

   So not all the issues are fixed with those flags you have suggested above.
   Here's a new demo: https://codesandbox.io/s/plotly2-performance-hovermode-0hf9z?file=/src/index.js
   It is set to run with Plotly 2.0.0-rc.1 and the zoom is smooth like butter
   But change it to rc.2 or any fresher version and try zooming in with mouse wheel some good amount - after certain point it will become unusably sluggish