Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Array buffer allocation failed

Hi all,

I am geting Array buffer allocation failed error when I try to generate a 3D plot with huge number of data points in it. Here is an example of such plot when my n=800

image

Here is my sample code. When I increase to n=2500, I am getting the following error.

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import plotly.graph_objs as go


def get_figure(n):
    x = np.linspace(-100, 100, n)
    y = np.linspace(-100, 100, n)
    xx, yy = np.meshgrid(x, y)
    r = np.sqrt(xx**2 + yy**2)
    zz = np.sin(r) * np.cos(xx)
    return go.Figure(
        data=go.Surface(z=zz),
        layout=dict(width=600, height=600))


app = dash.Dash(__name__, suppress_callback_exceptions=True)

server = app.server
app.layout = html.Div(
    dcc.Graph(
        figure=get_figure(n=2500)
    )
)


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

Array buffer allocation failed

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
RangeError: Array buffer allocation failed

    at new ArrayBuffer (<anonymous>)

    at p (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:1883273)

    at Object.b (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:1883615)

    at A.S.update (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:753154)

    at f.p.update (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:3367781)

    at Object.e.exports [as plot] (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:3368322)

    at _.w.plot (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:2608764)

    at Object.r.plot (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:2586897)

    at r.drawData (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:2387959)

    at Object.c.syncOrAsync (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_13_0m1604001894.js:2:2278084)

Here is my system config

i7-9700k CPU, 48GB DDR4
OS: Win10 Pro
Browser: Chrome v86.0.4240.193

NodeJS v12.16.2
Python v3.8.3

numpy                1.18.0
plotly               4.12.0
dash                 1.17.0
dash-core-components 1.13.0
dash-html-components 1.1.1
dash-renderer        1.8.3
dash-table           4.11.0

Does anyone how to fix this issue?
I also submit a ticket to Github.

Thanks