Hello,
I’m developing a Python based Dash server
I was having a problem with poor performance client-side with a ~500k point plot using scattergl. Doing nothing, just having the page open, would cause about 30% CPU usage and doing anything like zooming or panning would lag for about 60 seconds.
When I profiled it in Chrome, all the time was being spent in async-plotlyjs.js in the u.onmousemove function. I commented out the contents of this function on the server (I’m not a javascript person so was just fiddling around), and performance was immediately fixed. Plot could be interacted with quickly, and CPU usage was down to zero if the page was just open and not being interacted with.
So it seems there is something seriously wrong with that function, as it shouldn’t max out a CPU just sitting there, not even moving the mouse. Maybe something for developers to look at…
Although that performance is fixed, another one remains. I was seeing issues with the double click to reset axes, as it would be slow and hang, so I added config={‘doubleClick’:False} to the dcc.Graph object. In well performing graphs (small number of points) there are no problems. However, in graphs around 500k points, single or double clicking on the graph causes a spike in CPU usage and it hangs for 30 seconds or so. Profiling in Chrome shows it is all happening in “Function T @ async-plotlyjs.js:formatted:103726”, so again some javasript function dealing with mouse clicks.
After this 30 second hang, the graph can be interacted with again. I can reset the axes with the tool button, zoom back in, pan, etc., just there is a big pause.
So it seems as if that function is doing a lot of work if I single click, like it’s waiting for something, or doing all sorts of calculations on the data which is causing a large pause… Any thoughts on what to do? I haven’t tried changing this function since it seems to be responsible for all mouse interactions.
Server is using Dash 1.21.0 and Plotly 5.1.0.
Thanks.
Update:
The lag when clicking on the graph was traced to the function “function L(e,r,n,i,a,o)” inside the “return d.range=function()” in async-plotlyjs.js. Not sure what this is doing but it isn’t doing it well. Commenting it out causes the graphs to perform quite well.