Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

TypeError: r.*.destroy is not a function #313

Closed
slishak opened this issue Sep 25, 2018 · 6 comments
Closed

TypeError: r.*.destroy is not a function #313

slishak opened this issue Sep 25, 2018 · 6 comments

Comments

@slishak
Copy link

slishak commented Sep 25, 2018

I've recently updated all my Dash/Plotly depenendices to their latest versions:

dash==0.27.0
dash-core-components==0.30.2
dash-html-components==0.13.2
dash-renderer==0.14.1
plotly==3.2.1

I have a Dash app where the number and layout of subplots in one of my figures (consisting of lots of Scattergl traces) changes depending on user inputs. When the number/layout of subplots changes, sometimes I get the following errors in the Chrome console:
image

After this, the subplots seem to be drawn incorrectly (missing elements, incorrect sizes). If I trigger another redraw after this happens the figure is eventually drawn correctly. Unfortunately I can't share the app code but will see if I can reproduce it.

I was previously on the following, and had never seen this issue before (although despite this problem, in general drawing performance with my Dash apps is a lot better now):

dash==0.22.0
dash-core-components==0.26.0
dash-html-components==0.11.0
dash-renderer==0.13.0
plotly==3.1.0
@T4rk1n
Copy link
Contributor

T4rk1n commented Sep 25, 2018

Can you set app.run_server(debug=True) and app.scripts.config.serve_locally=True and rerun the app so you can have the dev bundles and a better stacktrace (with the latest version you listed first).

If you can't share the code, maybe try to make a minimal example showing the behavior.

@slishak
Copy link
Author

slishak commented Sep 25, 2018

Thanks! I have now enabled the options you suggested, and will update this issue when I manage to capture this issue again (it's quite intermittent, which is also why I've had difficulty creating a reproducible example).

@slishak
Copy link
Author

slishak commented Sep 25, 2018

Have managed to trigger it again.

Uncaught (in promise) TypeError: r.line2d.destroy is not a function
    at Object.L.e._scene.r.destroy (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:132249)
    at Object.r.clean (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:102915)
    at Object.v.cleanPlot (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:110328)
    at e (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:97362)
    at Object.l.syncOrAsync (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:94533)
    at r.plot (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:97388)
    at Object.l.syncOrAsync (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:94533)
    at Object.r.react (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:98097)
    at PlotlyGraph.plot (Graph.react.js?2a5f:80)
    at PlotlyGraph.componentWillReceiveProps (Graph.react.js?2a5f:168)


  | L.e._scene.r.destroy | @ | plotly-1.41.0.min.js…36:formatted:132249
  | r.clean | @ | plotly-1.41.0.min.js…36:formatted:102915
  | v.cleanPlot | @ | plotly-1.41.0.min.js…36:formatted:110328
  | e | @ | plotly-1.41.0.min.js…736:formatted:97362
  | l.syncOrAsync | @ | plotly-1.41.0.min.js…736:formatted:94533
  | r.plot | @ | plotly-1.41.0.min.js…736:formatted:97388
  | l.syncOrAsync | @ | plotly-1.41.0.min.js…736:formatted:94533
  | r.react | @ | plotly-1.41.0.min.js…736:formatted:98097
  | plot | @ | Graph.react.js?2a5f:80
  | componentWillReceiveProps | @ | Graph.react.js?2a5f:168
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | updateChildren | @ | [email protected]…4.1&m=1537860738:13
  | _reconcilerUpdateChildren | @ | [email protected]…4.1&m=1537860738:14
  | _updateChildren | @ | [email protected]…4.1&m=1537860738:14
  | updateChildren | @ | [email protected]…4.1&m=1537860738:14
  | _updateDOMChildren | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | updateChildren | @ | [email protected]…4.1&m=1537860738:13
  | _reconcilerUpdateChildren | @ | [email protected]…4.1&m=1537860738:14
  | _updateChildren | @ | [email protected]…4.1&m=1537860738:14
  | updateChildren | @ | [email protected]…4.1&m=1537860738:14
  | _updateDOMChildren | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | updateChildren | @ | [email protected]…4.1&m=1537860738:13
  | _reconcilerUpdateChildren | @ | [email protected]…4.1&m=1537860738:14
  | _updateChildren | @ | [email protected]…4.1&m=1537860738:14
  | updateChildren | @ | [email protected]…4.1&m=1537860738:14
  | _updateDOMChildren | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | updateChildren | @ | [email protected]…4.1&m=1537860738:13
  | _reconcilerUpdateChildren | @ | [email protected]…4.1&m=1537860738:14
  | _updateChildren | @ | [email protected]…4.1&m=1537860738:14
  | updateChildren | @ | [email protected]…4.1&m=1537860738:14
  | _updateDOMChildren | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:13
  | receiveComponent | @ | [email protected]…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | [email protected]…4.1&m=1537860738:13
  | _performComponentUpdate | @ | [email protected]…4.1&m=1537860738:13
  | updateComponent | @ | [email protected]…4.1&m=1537860738:13
  | performUpdateIfNecessary | @ | [email protected]…4.1&m=1537860738:13
  | performUpdateIfNecessary | @ | [email protected]…4.1&m=1537860738:14
  | s | @ | [email protected]…4.1&m=1537860738:14
  | perform | @ | [email protected]…4.1&m=1537860738:15
  | perform | @ | [email protected]…4.1&m=1537860738:15
  | perform | @ | [email protected]…4.1&m=1537860738:14
  | T | @ | [email protected]…4.1&m=1537860738:14
  | closeAll | @ | [email protected]…4.1&m=1537860738:15
  | perform | @ | [email protected]…4.1&m=1537860738:15
  | batchedUpdates | @ | [email protected]…4.1&m=1537860738:14
  | u | @ | [email protected]…4.1&m=1537860738:14
  | r | @ | [email protected]…4.1&m=1537860738:14
  | enqueueSetState | @ | [email protected]…4.1&m=1537860738:14
  | r.setState | @ | [email protected]?…4.1&m=1537860738:12
  | handleChange | @ | connect.js?55bc:302
  | dispatch | @ | createStore.js?61ed:173
  | (anonymous) | @ | index.js?d595:104
  | (anonymous) | @ | index.js?4dd3:14
  | dispatch | @ | applyMiddleware.js?05f2:35
  | handleJson | @ | index.js?f40b:586

Images from formatted plotly.js for the top few frames in the stack trace:
image
image
image
image

@slishak
Copy link
Author

slishak commented Oct 18, 2018

Turns out this was actually very easy to reproduce - it seems like any figure containing Scattergl traces and a variable subplot layout will cause this issue.

In the app below, moving any sliders will cause the figure to crash. Using add_scatter instead of add_scattergl removes the problem and the app runs as expected.

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
from plotly import tools
import random

app = dash.Dash()

sx = dcc.Slider(id='sx', min=1, max=5, value=1)
sy = dcc.Slider(id='sy', min=1, max=5, value=1)

app.layout = html.Div(children=[
    sx, sy,
    dcc.Graph(
        id='graph',
    )
])


@app.callback(
    Output('graph', 'figure'),
    [Input('sx', 'value'),
     Input('sy', 'value')]
)
def callback(nx, ny):
    fig = tools.make_subplots(ny, nx)
    for ix in range(nx):
        for iy in range(ny):
            fig.add_scattergl(x=[random.random() for i in range(20)],
                              y=[random.random() for i in range(20)],
                              mode='markers',
                              row=iy+1, col=ix+1)
    return fig


if __name__ == '__main__':
    app.scripts.config.serve_locally = True
    app.run_server(debug=True)

Versions:

dash==0.28.2
dash-core-components==0.33.0
dash-html-components==0.13.2
dash-renderer==0.14.1
plotly==3.3.0

@slishak
Copy link
Author

slishak commented Oct 18, 2018

For further info, the issue is still present when updating to:

dash==0.28.3
dash-core-components==0.34.0
dash-renderer==0.14.3

And for more interest, when the figure starts throwing errors and stops responding, you can sometimes coax the plot back into life by double clicking on a subplot and then clicking on a slider to redraw with the same layout - but it can end up looking pretty funky (see below)! It also generally seems to be more likely to work when reducing the number of subplots instead of increasing.

image

@slishak
Copy link
Author

slishak commented Oct 31, 2018

Fixed in plotly.js 1.42.0

@slishak slishak closed this as completed Nov 2, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants