Skip to content

Automargin call stack size exceeded exception when resizing window #4028

Description

@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):
ResizeStackSizeException

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

Activity

  1. etpinard commented on Jul 8, 2019

    @etpinard
    Contributor

    Thanks for reporting!

  2. etpinard commented on Jul 8, 2019

    @etpinard
    Contributor

    One more argument for starting work on #2704

  3. self-assigned this
    on Jul 25, 2019
  4. added this to the v1.50.0 milestone on Jul 25, 2019
  5. etpinard commented on Aug 6, 2019

    @etpinard
    Contributor

    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
  6. wbrgss commented on Sep 13, 2019

    @wbrgss
    Contributor

    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"?).

    image

    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.

  7. etpinard commented on Sep 24, 2019

    @etpinard
    Contributor

    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

bugsomething broken

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions