poor performance of chart layout when data includes rangebreaks

[spasovski]

My team detected a significant performance issue with charts when rangebreaks are involved. Example chart at https://codepen.io/spasovski/pen/wvgVRNV and is even better demonstrated at https://jsbench.me/zpko8zmpic/1

This makes the charts quite slow to generate and more specifically update (as would be the case in a ticking chart). The main thread tends to lock up when lots of data points are involved and affects the overall usability of the rest of the page.

A team member first found the likely culprit at

plotly.js/src/plots/cartesian/set_convert.js

Line 834 in 623fcd1

if(ax.rangebreaks) {

since this then kicks off ax.maskBreaks(), and this only multiplies as the the number of rangebreaks increases.

Please let me know if a performance recording/screenshot would also be of benefit.

[dsmmcken]

https://jsbench.me/zpko8zmpic/2

5000 points with 300 range breaks is 99% slower at plotting than with no breaks.

The biggest slow down seems to be doing the dateTime2ms for every point * every range break, so in this case 1,509,346 times for the 5000 points.

[nicolaskruchten]

Thanks for flagging this! We'd love a PR if someone wants to take on this optimization work :)