Assets not fetched correctly while using plotly_direct template tags about django-plotly-dash

[GibbsConsulting]

@hkhare42 did you add the middleware entry as mentioned in the tag documentation?

[GibbsConsulting]

@hkhare42 are you able to look in the browser developer tools window and see what URLs it is requesting, and how they vary between the normal and direct case? Also, are there any warnings or errors in the console output?

As a rule, the direct template tag variant is a bit more of a pain as you lose the isolation and compartmentalisation of the iframe. Is there a particular reason that you need to use it?

Nice app, btw. Is it, or will it be, available at a public URL?

[hkhare42]

thanks! the iframe version of the app is live here: https://www.datadabble.in/2018-fifa-mens-wc-explorer/

I do have the middleware entry added as well as per documentation.

---

URLs it is trying to access for the plotly_direct version:

---

In case of IFrame, it gets it from this URL:

Even though the links within the IFrame look similar to direct case:

---

Console Log for IFrame version:

---

The only issue I have with the IFrame version is that I have to provide an aspect ratio before hand and that doesn't change dynamically with screen size. My app.css uses vw and vh units to ensure that the width and height exactly fits the user window. So, I was wondering if the plotly_direct route could get me there.

[delsim]

@hkhare42 I think you need to wrap them in calls to app.get_asset_url as noted in passing here but unfortunately you can't do that in the constructor of app.
Can you use the vw and vh values somehow in the plotly_app template tag or change the html by overriding the actual template itself by creating a file in your Django TEMPLATES path ahead of the django-plotly-dash one?

[hkhare42]

I'm wary about breaking something by trying to override the template themselves. Let me try that as last resort. For now:

---

For the plotly_app approach, tried:
{%plotly_app name="SimpleExample" dstyle="padding-bottom: 0; height: 100vh;" %}

Got a 500 error. Probably not the right way to try passing something to dstyle. (https://github.com/GibbsConsulting/django-plotly-dash/blob/master/django_plotly_dash/templates/django_plotly_dash/plotly_app.html)

---

For the plotly_direct suggestion, i.e. the app.get_asset_url method, I tried to add it to the body of the app like so:

app.layout = html.Div(id='bodydiv', children = [
                    html.Link(rel='stylesheet', href=app.get_asset_url('app_css.css')),
                    ... 

But the app is still looking in the same place and unable to fetch:
Refused to apply style from 'http://127.0.0.1:8000/app1/assets/app_css.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

[hkhare42]

@GibbsConsulting @delsim Looking forward to your guidance and suggestions.

[GibbsConsulting]

@hkhare42 did you try overriding the templates? If they are in your Django app's templates directory structure and your app is ahead of dpd in the list of Django apps, then your version of the template will be used ahead of the dpd one.