Plotly.redraw / drawLabels performance

[blankclemens]

I came across the problem, that redrawing the plots (with new data) takes a lot of time. E.g. in the attached profile graph one single plot took around 40ms, where half of the time(!) is spent for drawAxes, or more precisely drawLabels.

Having half of the redraw time spent on doing labels? Seems quite inappropriate to me and I wonder if this can be speed up?

The problem is that it adds up quite a lot when having multiple plots at one page, just 10 plots and suddenly the redrawing process takes half a second.

Since the problem lies in drawLabels, it also doesn't help to reduce the data (doesn't matter much if 5 or 500 points are plotted).

Of course, better performances is everywhere nice, but looking at the profile I've got the feeling that drawLabels might be the best start to get some more.

Profile graph

[blankclemens]

A small hack if one just needs more performance: Removing fixLabelOverlaps saved 10-20ms and didn't change my output. Of course, some functionality will be gone, but I had no overlapping labels anyways. ;)

But of course, the problem is not solved with half the time - 20ms for a single plot are still way to much.

[etpinard]

PR #2487 has made some improvements. From #2487 (comment), here are a few more things we should do to help Axes.doTicks performance:

• optimize the number of positionLabels calls in Axes.doTicks (N.B. now called Axes.drawOne) which is called multiples time per axis
• speed up fixLabelOverlaps
• find solution for Replace getBoundingClientRect calls in axes.js #1988 done for most axes in: Axes.draw w/o getBoundingClientRect + many axis automargin fixes #4165

[etpinard]

PR #4165 (set to be released in 1.50.0) should help out a little bit: we removed a getBoundingClientRect call during all Axes.drawOne calls except when for multicategory axes and/or axes with a rangeslider and/or axis.automargin is turned on.

Moreover, copying from #4165 (comment), PR #4165 opens up a way to improve performance in multicategory/rangeslider/automargin scenarios if ever we choose to do so:

plotly.js/src/plots/cartesian/axes.js

Lines 2053 to 2067 in b5f0316

	ax._selections[cls].each(function() {
	var thisLabel = selectTickLabel(this);
	// Use parent node <g.(x|y)tick>, to make Drawing.bBox
	// retrieve a bbox computed with transform info
	//
	// To improve perf, it would be nice to use `thisLabel.node()`
	// (like in fixLabelOverlaps) instead and use Axes.getPxPosition
	// together with the makeLabelFns outputs and `tickangle`
	// to compute one bbox per (tick value x tick style)
	var bb = Drawing.bBox(thisLabel.node().parentNode);
	top = Math.min(top, bb.top);
	bottom = Math.max(bottom, bb.bottom);
	left = Math.min(left, bb.left);
	right = Math.max(right, bb.right);
	});

[gvwilson]

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson