add support for responsive charts

[antoinerg]

Initial implementation of responsive charts as proposed in #2969.

By setting {responsive:true} in a plot's config, it will be automatically resized when the window size changes. For now it only reacts to window's resize but could be improved by using ResizeObserver down the road.

Viewing a responsive chart on a phone going from landscape to portrait now results in the following experience:

[alexcjohnson]

Code looks great, but I'm a little surprised to see it so late in the sequence... resize has an internal delay, and calls Plotly.relayout which will wait for any pending drawing on the plot to finish before making its changes. So to avoid missing events that happen halfway through an async draw (mathjax or maps) I'd have thought we should put this in the synchronous block.

[antoinerg]

It doesn't have to be this late. To be honest, I wasn't sure where it'd be best to put it in the sequence. Should I put it at line 193?

plotly.js/src/plot_api/plot_api.js

Lines 190 to 196 in 8457b40

	for(var i = 0; i < gd.calcdata.length; i++) {
	gd.calcdata[i][0].trace = gd._fullData[i];
	}
	/*
	* start async-friendly code - now we're actually drawing things
	*/

[alexcjohnson]

Should I put it at line 193?

Seems like a good place!

[alexcjohnson]

Oh one more thing occurs to me: a user could in principle start with responsive and then turn it off using Plotly.react... not sure why you'd want to do this, but it should work!

[alexcjohnson]

We also need to delete gd._responsiveChartHandler so it would reattach if we make a new plot in this div later on. The rest of this happens in Plots.purge (called a few lines down), and the delete and window.removeEventListener need to be in the same place (since there are a couple of places we call Plots.purge outside Plotly.purge, so seems like it would be safer to put both in Plots.purge

[alexcjohnson]

@antoinerg thanks for pushing on this one, it's looking good!

I'm not sure how feasible it is to write a test for my async comment - you could try resizing synchronously after Plotly.plot returns but that might not do it (or might not do it consistently). I guess perhaps we could artificially inject a delayed promise into gd._promises but... might be too hacky to be worth it.

But the comment about purging and replotting we can definitely test, also lets test that we have exactly one resize handler and one redraw after making a plot, then editing something (causing a new Plotly.plot call), and THEN resizing the window. That one looks like it already works, lets keep it that way 😈

[alexcjohnson]

Good idea to pull this function out! Nice and 🌴. You can probably simplify it a bit though:

function testResponsive() {
    checkLayoutSize(startWidth, startHeight);
    viewport.set(newWidth, newHeight);

    return delay(200)()
    .then(function() {
        checkLayoutSize(newWidth, newHeight);
    })
    .catch(failTest);
}

And use it like:

Plotly.plot(gd, data, {}, {responsive: true})
.then(testResponsive)
.then(done);

[antoinerg]

Good call :) Thank you again

[alexcjohnson]

You need to return these Plotly.* calls inside .then - as with any function that itself returns a promise - so the new promise gets added to the chain.

[alexcjohnson]

hmm actually there's another way to turn off config.responsive on a div, by calling newPlot again. I think the removal belongs in Plotly.plot instead, next to where you add the handler:

if(gd._context.responsive) {
    if(!gd. _responsiveChartHandler) { ...attach }
}
else {
    Lib.clearResponsive(gd);
}

Then it would handle both cases.

[alexcjohnson]

Alright, looks great now - thanks for the quick turnaround on my comments! 💃

[etpinard]

@antoinerg's 1st feature! 🍾