[Bug] Error plotly.min.js 302

[a-ceron]

Description
In the latest version of django-plotly-dash, there are errors when attempting to render a simple plot. The following code, which creates a basic scatter plot, results in the graph not being displayed:

fig = go.Figure(data=go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode='lines+markers'))

        return mydbc.html.Div([
            mydbc.dcc.Graph(id='prediction-graph', figure=fig)
        ])

The server logs show the following:

[03/Oct/2024 04:25:22] "POST /django_plotly_dash/app/SimpleExample/_dash-update-component HTTP/1.1" 200 28011
[03/Oct/2024 04:25:22] "GET /django_plotly_dash/app/SimpleExample/_dash-component-suites/plotly/package_data/plotly.min.js HTTP/1.1" 302 0
[03/Oct/2024 04:25:22] "GET /static/dash/component/plotly/package_data/plotly.min.js HTTP/1.1" 404 1958
[03/Oct/2024 04:25:23] "POST /django_plotly_dash/app/SimpleExample/_dash-update-component HTTP/1.1" 200 188
[03/Oct/2024 04:25:23] "POST /django_plotly_dash/app/SimpleExample/_dash-update-component HTTP/1.1" 200 212

The key error appears to be related to the file plotly.min.js not being found at the expected path:

404 GET /static/dash/component/plotly/package_data/plotly.min.js

This causes the graph to not be rendered on the frontend.

Temporary Solution I had to downgrade to a previous version of django-plotly-dash, which resolved the issue temporarily.

[AdrianDAlessandro]

I am also seeing the same error. Appears it is probably related to #485 (comment)

[delsim]

I'm also experiencing it. Has anyone tried using any version of Dash between 2.9 and the current release - and if so, what was the result?

[delsim]

Looks like a change in 2.13 is the source of the trouble. Leading candidate is plotly/dash#2610
For now, preparing v2.4.1 release to restrict the dash version to < 2.13 prior to a better fix.

[GibbsConsulting]

@a-ceron @AdrianDAlessandro PR #504 and released version 2.4.2 should now address this - it does in our test environments.
Closing this issue - please report any issues as a new issue.

[AdrianDAlessandro]

I haven't thoroughly checked it, but for me 2.4.2 still doesn't work and I now get lots of extra logging (essentially all the data being sent to and from the callbacks is being plotted).

This is what I'm seeing (although I know this isn't too useful for you without the code generating it. I don't have a minimal example). The main thing worth noting is I'm getting both a 302 and 404 for plotly.min.js

[10/Oct/2024 08:03:47] "GET /django_plotly_dash/app/analysispage/_dash-component-suites/plotly/package_data/plotly.min.js HTTP/1.1" 302 0
Component info from <function serve_layout at 0x113dbb7e0>
Component info from <function serve_layout at 0x113dbb7e0>
[10/Oct/2024 08:03:47] "GET /static/dash/component/plotly/package_data/plotly.min.js HTTP/1.1" 404 1958

2.4.1 works for me! But I also still get that extra logging. Which looks like this (obviously with some callback responses being plots, this becomes a massive dump of data.

Callback info
[{'id': 'test_result_drop', 'property': 'value', 'value': 'positive'}]
[{'id': 'test_type_drop', 'property': 'value', 'value': 'test_type004'}]
{'id': 'total_cases', 'property': 'children'}
Callback response
{"response":{"case_by_week":{"children":"Cases this week: 0, change:0.00%"}},"multi":true}

[delsim]

@AdrianDAlessandro pushed an updated 2.4.3 package without the extra logging. This should resolve the issue - it is possible some other packages are now out of step wrt version, so you might need to refresh or rebuild your environment.

[AdrianDAlessandro]

@delsim It still wasn't working for me, but I found the issue. I'll explain below, I'm not sure it the best solution on your end will be to update the documentation or change the default settings.

Problem

I'm still not seeing the graphs. I've used the example provided by @a-ceron in the original issue and done a clean install. This is the full file:

import plotly.graph_objects as go
from dash import dcc, html

from django_plotly_dash import DjangoDash


external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = DjangoDash("dashboard", external_stylesheets=external_stylesheets)

fig = go.Figure(data=go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode="lines+markers"))
app.layout = html.Div(
    children=[html.H1("Heading"), dcc.Graph(id="prediction-graph", figure=fig)]
)

These are the logs:

$ python manage.py runserver
[11/Oct/2024 08:57:58,518] Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
October 11, 2024 - 08:57:58
Django version 5.1.2, using settings 'qwikapp.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

[11/Oct/2024 08:58:09] "GET /dashboard/ HTTP/1.1" 200 3875
[11/Oct/2024 08:58:09] "GET /django_plotly_dash/app/dashboard/ HTTP/1.1" 200 3830
[11/Oct/2024 08:58:09] "GET /django_plotly_dash/app/dashboard/_dash-component-suites/plotly/package_data/plotly.min.js HTTP/1.1" 302 0
[11/Oct/2024 08:58:10] "GET /django_plotly_dash/app/dashboard/_dash-layout HTTP/1.1" 200 7924
[11/Oct/2024 08:58:10] "GET /django_plotly_dash/app/dashboard/_dash-dependencies HTTP/1.1" 200 2
[11/Oct/2024 08:58:10] "GET /static/dash/component/plotly/package_data/plotly.min.js HTTP/1.1" 404 1958

It looks like it successfully finds plotly.min.js in one location but then tries again in another location and failed.

Solution

I ran the demo app locally and found the plots displayed properly. I ended up determining the import difference was in the Django app settings. Most notably, I did not have the STATICFILES_FINDERS and PLOTLY_COMPONENTS mentioned in the Configuration options docs. Adding these in solved the problem.

In particular, the minimum required to make the plots work was:

STATICFILES_FINDERS = ['django_plotly_dash.finders.DashComponentFinder']

The implication from the docs is that these configuration options are optional, and the dash apps should work without them. So either this should be changed in the documentation and added to the Installation instructions in the Readme, or django_plotly_dash.finders.DashComponentFinder should be automatically included somehow.

Beware of browser cache!

After I enabled this settings value once, the plots continued to work after I removed it unless I opened a new private browser window. So testing this behaviour requires clearing browser cache.

[anderoonies]

im experiencing the inverse issue; the file exists at the static path (static/dash/component/plotly/package_data/plotly.min.js) but does not exist at the path where the app requests it (django_plotly_dash/app/<appname>/_dash-component-suites/plotly/package_data/plotly.min.js)

this is on:

dash==2.18.2
django-plotly-dash==2.4.3