scrollZoom performance issues introduced in 2.3.0

[secretwpn]

There is a significant performance drop when using scroll zoom in version 2.3.0 and newer
Latest version with better performance is 2.2.1

Demo: https://codesandbox.io/s/plotly2-performance-drop-iinx5

Steps to reproduce:

• open the demo, try scrolling in/out to change the zoom level
• change the plotly.js-dist dependency version (in the dependencies section of the toolbar on the left) from 2.3.0 to 2.2.1 and test the scroll zoom again

[archmoj]

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.

[secretwpn]

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.

[nicolaskruchten]

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

[archmoj]

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.

[secretwpn]

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

[archmoj]

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

[secretwpn]

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