Django support (django-plotly-dash library)

[predict-idlab]

Django support (django-plotly-dash library)

[jonasvdd]

Hi @thanosam,

My bad, I made a typo! I indeed use the django-plotly-dash repo and adjusted my above comment accordingly.

My first guess would be that sockets are in some way (pre)configurable with django; and you need to configure them properly to integrate successively?

Maybe this blogpost can help? https://medium.com/geekculture/a-beginners-guide-to-websockets-in-django-e45e68c68a71

[thanosam]

I tried to integrate it in Django but I receive the following error:

  _File ".../python3.9/site-packages/plotly_resampler/figure_resampler/figure_resampler.py", line 211, in register_update_graph_callback
    app.callback(
  File ".../lib/python3.9/site-packages/django_plotly_dash/dash_wrapper.py", line 345, in wrap_func
    func.expanded = DjangoDash.get_expanded_arguments(func, inputs, state)
AttributeError: 'method' object has no attribute 'expanded'_

Part of the code below:

...
date_rng = pd.date_range(start='1/1/2018', end='3/1/2018', freq='S')
df = pd.DataFrame(date_rng, columns=['date'])
df['data'] = np.random.randint(0, 100, size=(len(date_rng)))
fig = FigureResampler(go.Figure())
fig.add_trace(go.Scattergl(name='Timestamps', showlegend=True), hf_x=date_rng, hf_y=df['data'])

app = DjangoDash({myappname})  ##

app.layout = html.Div([
        dcc.Graph(id="graph-id", figure=fig),
        trace_updater.TraceUpdater(id="trace-updater", gdID="graph-id"),
 ])

fig.register_update_graph_callback(app, "graph-id", "trace-updater")  ##
...

So here because we are in Django our app = DjangoDash(....... and not app=Dash(.... .
What causes the error is the register_update_graph_callback, which seems to be incompatible with the django-plotly-dash library.
Any ideas ?

[jonasvdd]

Hi @thanosam!

Yesterday I played around a little with the examples from the django-plotly-dash repo and got to the point where everything seemed to run/work except the sockets of TraceUpdater. (so the graph was not loaded /updated)

For me it seemed that I could not rely on the register_updat_graph_callback method and needed to implement it this way:

# I support liveOut should be "app" in your use-case
@liveOut.callback(
    dash.dependencies.Output("trace-updater", "updateData"),
    dash.dependencies.Input("graph-id", "relayoutData"),
    prevent_initial_call=True,
)
def update(relayout):
    return fig.construct_update_data(relayout)

Maybe this can help you further.

Please let us know if you have any update about this issue! This might also help others!

[thanosam]

Hi @jvdd !

Thank you for your fast answer. My pleasure to share with the community my findings.
I will try it and I will let you know.
Fyi I am using the django-plotly-dash library, not the django-dash but I guess your proposal applies the same :)

I had the same issue. Everything seems to work fine except the sockets so when I zoom the graph doesn't update

[thanosam]

Following this tutorial I manage to handle dash @app.callbacks in Django: https://www.youtube.com/watch?v=psvU4zwO3Ao&t=2615s&ab_channel=PipInstallPython

In the simpleexample.py file I replaced the content as follows:

app = DjangoDash('SimpleExample')

x = np.arange(5_000_000)
noisy_sin = (3 + np.sin(x / 200) + np.random.randn(len(x)) / 10) * x / 1_000
fig = FigureResampler(go.Figure())
fig.add_trace(go.Scattergl(name='noisy sine', showlegend=True), hf_x=x, hf_y=noisy_sin)

app.layout = html.Div([
        dcc.Graph(id="graph-id", figure=fig),
        trace_updater.TraceUpdater(id="trace-updater", gdID="graph-id"),
 ])

@app.callback(Output("trace-updater", "updateData"),[Input("graph-id", "relayoutData")],prevent_initial_call=True,)
def update(relayout):
    return fig.construct_update_data(relayout)

Now, I see the 'Loading...' in the plot for a sec and then nothing. :/

The problem seems to be in this line:
trace_updater.TraceUpdater(id="trace-updater", gdID="graph-id"),

I work with serve_locally=False, trace-updater==0.0.8, plotly-resampler==0.7.2.1, plotly==5.8.2, dash==2.5.1, dash-core-components==2.0.0, dash-html-components==2.0.0, dash-renderer==1.9.1, dash-table==5.0.0, Django==3.2, django-plotly-dash==1.6.3

The error in the console:

Error: trace_updater was not found.
Pn https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
ou https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
uu https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
uu https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
uu https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
iu https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
os https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
React 11
react-dom.production.min.js:125:24
React 24
Uncaught Error: trace_updater was not found.
Pn https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
ou https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
uu https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
uu https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
uu https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
iu https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
os https://unpkg.com/[email protected]/build/dash_renderer.min.js:2
React 11

Any ideas please?

[ChrisDeufel]

Hi @jonasvdd,

I am facing the same problem as @thanosam.
Any updates on this issue? :)

[tschokokuki]

Going through the described issue, I got to the same result as @thanosam using his example.

After collecting the static files with Django, the code worked just fine.
This added the missing trace_updater.min.js (among others) to your static files location.

If you run Django behind NGINX inside Docker, make sure that all static files are accessible from or copied into the NGINX-Image.

Hope it helps!

[mpkasp-pison]

Thanks! This got it working for me.

How did you get django to collect trace_updater.min.js? I had to manually copy it into a static directory in my app with the correct plotly file path (dash/component/trace_updater) for it to work. Not a great workaround. Thought about referencing the site-packages directory in my STATICFILES_PATHS settings, but that seemed like a workaround too.