Plotly offline embed-resources not working

[bryanwhiting]

Context

I work in an off-line environment (no access to the internet). I can run this code in a jupyter notebook and have it render plotly properly. But when I either try to convert the notebook into html using quarto render my.ipynb --to html or put all this code below in a file.qmd and render, I cannot see the plotly code.

• rendering an executed .ipynb file yields CDN issues, which i try to overcome with include-in-header but i'm not certain the right way to go about this from the docs.
• rendering via .qmd oddly complains about pyspark, and doesn't try using the CDN (also odd)

Goal

Get a self-contained html file with plotly rendered in an offline environment that cannot access the CDN that I can download and share with colleagues.

Repro

Here's what I have:

quarto version 1.5.57

---
title: "Example Quarto Document"
format: 
  html:
    embed-resources: true
    include-in-header:
        - text: <script src="./js/jquery.min.js"></script>
        - text: <script src="./js/require.min.js"></script>

---

# Introduction

This is an example of a Quarto document. We will demonstrate how to create a plot using `plotly.express`.

## Plotting with Plotly Express

Let's create a simple scatter plot using `plotly.express`.

``{python}
from IPython.display import display
import plotly.express as px

# Sample data
df = px.data.iris()

# Create a scatter plot
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species", title="Iris Dataset - Sepal Width vs Sepal Length")
display(fig)
``

Error using .qmd file

When I do quarto render file.qmd --to html, this is what I see. This is odd, because I don't use pyspark:

The code failed because of a fatal error:
    Error sending http request and maximum retry encountered..

Some things to try:
a) Make sure Spark has enough available resources for Jupyter to create a Spark context.
b) Contact your Jupyter administrator to make sure the Spark magics library is configured correctly.
c) Restart the kernel.

Error using .ipynb

When i put the above code in a jupyter notebook, render it, and save it, and then call quarto render file.ipynb --to html, I get these timeout warnings asking for jquery.min.js and require.min.js

Text of error (to make this issue searchable):

[WARNING] Could not fetch resource https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js: HttpExceptionRequest Request {
    host                 = "cdnjs.cloudflare.com"
    port                 = 443
    secure               = True
    requestHeaders       = []
    path                 = "/ajax/libs/jquery/3.5.1/jquery.min.js"
    queryString          = ""
    method               = "GET"
    proxy                = Nothing
    rawBody              = False
    redirectCount        = 10
    responseTimeout      = ResponseTimeoutDefault
    requestVersion       = HTTP/1.1
    proxySecureMode      = ProxySecureWithConnect
  }
   ConnectionTimeout
[WARNING] Could not fetch resource https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js: HttpExceptionRequest Request {
    host                 = "cdnjs.cloudflare.com"
    port                 = 443
    secure               = True
    requestHeaders       = []
    path                 = "/ajax/libs/require.js/2.3.6/require.min.js"
    queryString          = ""
    method               = "GET"
    proxy                = Nothing
    rawBody              = False
    redirectCount        = 10
    responseTimeout      = ResponseTimeoutDefault
    requestVersion       = HTTP/1.1
    proxySecureMode      = ProxySecureWithConnect
  }
   ConnectionTimeout

Things I've tried

• As you see, I downloaded the scripts and put them in include-in-header: with various attempts at plotly_connected: false or even plotly.offline.init_notebook_mode(connected=True) per some plotly figures are not rendered (unpredictably) #1689
• I even put those scripts where I thought they should be: in /ajax/libs/* and have removed the js.
• I tried a scripts: with pointing to the .js file and that didn't seem to embed it

Confusion

• I can see the <script src=js/require.min.js> in the output HTML file when I inspect it, but shouldn't it be embedding that files' contents?
• Why is it referencing spark?

Some python packages in details

``` sh-4.2$ pip list | grep jupyter hdijupyterutils 0.21.0 jupyter 1.0.0 jupyter_client 7.4.9 jupyter-console 6.6.3 jupyter_core 5.7.2 jupyter-events 0.10.0 jupyter-lsp 2.2.5 jupyter_server 2.14.0 jupyter_server_fileid 0.9.2 jupyter-server-mathjax 0.2.6 jupyter-server-proxy 3.2.1 jupyter_server_terminals 0.5.3 jupyter_server_ydoc 0.8.0 jupyter-ydoc 0.2.5 jupyterlab 4.2.3 jupyterlab_code_formatter 3.0.0 jupyterlab-git 0.41.0 jupyterlab-lsp 4.3.0 jupyterlab_pygments 0.3.0 jupyterlab_server 2.27.1 jupyterlab-vim 4.1.3 jupyterlab_widgets 3.0.10 ```

sh-4.2$ pip list | grep ipy
brotlipy                                 0.7.0
ipykernel                                6.29.5
ipython                                  8.22.2
ipython-genutils                         0.2.0
ipywidgets                               8.1.2
scipy                                    1.9.3

[mcanouil]

First, the issue is not really Quarto.
If plotly uses CDN scripts, there is nothing Quarto can do.

Now, your idea to use include might work but you still need the libraries locally and you might need to make your project an explicit Quarto project in order to tell Quarto about the new resources you want to inject:

In _quarto.yml

project:
  type: default
  resources: 
    - "js/jquery.min.js"
    - "js/require.min.js"

Side note, you don't need to multiply the text key:

include-in-header:
  - text: |
      <script src="./js/jquery.min.js"></script>
      <script src="./js/require.min.js"></script>

[lind3r]

Hi @bryanwhiting ,
Did you ever find a solution to this?
I'm facing the exact same issue (offline environment where it fails to download above mentioned scripts).
I tried all your suggestions with include-in-header and also adding them as resources in _quato.yml as suggested by @mcanouil but no luck.
Other suggestions are very welcome, I am finding no way around this.

[cderv]

To be clear on the problem here, using embed-resources: true requires internet connection at render time.
This is a because all outside resources are downloaded to be inlined in the HTML document. If your environment can't reach out to those resource when calling quarto render, then embed-resources should not be used.

We'll update the doc to make that more clear maybe.

The suggestion with include-in-header is just a workaround to pre-download resources you needed to make them available, but it requires a way to communicate to other tooling like plotly that you want to use a local version of dependencies. Otherwise, they will use links to external CDN and then quarto will try to embed them for there.

Hope it clarifies

[cderv]

Why is it referencing spark?

@bryanwhiting I don't see how the message "Make sure Spark has enough available resources for Jupyter to create a Spark context." does not come for PySpark session or related.

In which environment are you running ?

Any search on this sentence in google points to Spark related content. I don't think this Quarto related, but Quarto will try to find a Python kernel it can use, and will use the first one.

I would check all your Jupyter kernels (using quarto check jupyter and also directly jupyter kernelspec list) in the environment your running. Maybe the Jupyter and Python used by Quarto is not the one you expect.

[federhub]

I had a similar issue - generating interactive plotly figures in a notebook within an offline environment, and then willing to generate a standalone html with quartoquarto render my.ipynb.

I was able to make it work by duming the code for plotly-latest.min.js directly into the generated html, right before the html <head>.