Automargin call stack size exceeded exception when resizing window

[AlanJMac]

Resizing the browser window horizontally for a plot created using the code in the following codepen appears to occasionally result in a very specific case of the issue reported in #3561 :
https://codepen.io/alanjmac/pen/oraKpR

The combination of layout options I found that will cause the stack overflow exception is when the xaxis has automargin: true and default values are also given for the plot margins, e.g.
margin: { t: 30, b: 55, l: 20, r: 20 }
If the right margin is set to null then I no longer experience the stack exception.
I am specifying the margins because the default values leave too much space around the plot for my needs. Then automargin is required so that the axis titles do not overflow or overlap the axes labels.

The following GIF demonstrates how resizing the window leads to the mentioned exception (reproduced in Chrome and Firefox browsers on Ubuntu 18.04):

The following "Uncaught RangeError: Maximum call stack size exceeded" exception appears to be due to an infinite loop originating in or related to the doAutoMargin method:

plotly-latest.js:115686 Uncaught RangeError: Maximum call stack size exceeded
at Object.exports.drawMarginPushers (plotly-latest.js:115686)
at marginPushers (plotly-latest.js:110092)
at Object.lib.syncOrAsync (plotly-latest.js:104804)
at plot (plotly-latest.js:110174)
at Object.exports.call (plotly-latest.js:144186)
at plots.doAutoMargin (plotly-latest.js:137223)
at Object.lib.syncOrAsync (plotly-latest.js:104804)
at plot (plotly-latest.js:110174)
at Object.exports.call (plotly-latest.js:144186)
at plots.doAutoMargin (plotly-latest.js:137223)

Occasionally this is followed by one of the following other exceptions:

plotly-latest.js:105176 Uncaught TypeError: Cannot read property 'select' of undefined
at Object.lib.ensureSingle (plotly-latest.js:105176)
at Object.drawing.initGradients (plotly-latest.js:87445)
at plot (plotly-latest.js:109966)
at Object.exports.call (plotly-latest.js:144186)
at exports.layoutReplot (plotly-latest.js:115489)
at Object.lib.syncOrAsync (plotly-latest.js:104804)
at relayout (plotly-latest.js:111688)
at Object.exports.call (plotly-latest.js:144186)
at plotly-latest.js:135385

Uncaught TypeError: fullLayout._has is not a function
at _relayout (plotly-latest.js:112043)
at relayout (plotly-latest.js:111652)
at Object.exports.call (plotly-latest.js:144186)
at plotly-latest.js:135385

[etpinard]

Thanks for reporting!

[etpinard]

One more argument for starting work on #2704

[etpinard]

Using 1c09a52 and https://codepen.io/etpinard/pen/qexqMm illustrates the problem a little better. Sometimes, the "margin diff" converges to a value other than zero.

A few more notes,

• I haven't been able to reproduce this bug w/o a grid CSS layout
• this bug also seems to happen when resizeing the window fast

[wbrgss]

I think this issue is related to a problem we've (i.e. @cldougl and @chriddyp) encountered in dash-enterprise docs. I've made a codepen here: https://codepen.io/wbrgss/pen/LYPryKO to illustrate the problem, which I don't think is necessarily related to resizing the window, but rather figures with small widths (which would result from resizing the window "horizontally"?).

We can work around this for now, but it's a problem for responsive example plots in the DDK docs that would freeze the user's browser on smaller window widths. And of course it's a general problem for users with small figures.

More context on how we came across this issue here: plotly/dash-design-kit#507 (private repo). If you think it's tangential or a separate issue I'm happy to post a new one @etpinard.

[etpinard]

Thanks @wbrgss - your codepen is essentially is (very) minimal example of the situation described in #2704 (comment)

For example, setting the xaxis.range (as in https://codepen.io/etpinard/pen/GRKeKbK) makes the infinite loop go away.