Subfigures with Plotly python are wrongly identified, leading to Phantom subfigure

[GuillaumeDehaene]

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

When creating figures with plotly, I get a phantom subfigure with empty content.
I believe this subfigure contains the html code which loads plotly-js

I have included a MRE

Steps to reproduce

MRE; example figure from the docs

```qmd
---
title: "Bugged plotly figure: phantom subfigure"

execute:
    keep-md: true
---

```{python}
#| label: fig-gapminder
#| fig-cap: "Life Expectancy and GDP"
#| fig-subcap:
#|   - "Gapminder: 1957"
#|   - "Gapminder: 2007"
#| layout-ncol: 2
#| column: page

import plotly.express as px
import plotly.io as pio
gapminder = px.data.gapminder()
def gapminder_plot(year):
    gapminderYear = gapminder.query("year == " + 
                                    str(year))
    fig = px.scatter(gapminderYear, 
                     x="gdpPercap", y="lifeExp",
                     size="pop", size_max=60,
                     hover_name="country")
    fig.show()
    
gapminder_plot(1957)
gapminder_plot(2007)
```
```

Keep-md result and html added as external files

minimal.html.md

Actual behavior

The plotly figure creates 3 subfigures. The first subfigure is visually empty

Expected behavior

The plotly figure should have two subfigures

Your environment

IDE: vscode
Version: 1.100.2 (Universal)
Commit: 848b80aeb52026648a8ff9f7c45a9b0a80641e2e
Date: 2025-05-14T21:47:40.416Z (1 wk ago)
Electron: 34.5.1
ElectronBuildId: 11369351
Chromium: 132.0.6834.210
Node.js: 20.19.0
V8: 13.2.152.41-electron.0
OS: Darwin arm64 24.5.0

OS: macos darwin arm64

Quarto check output

Quarto 1.7.31
[✓] Checking environment information...
      Quarto cache location: /Users/guillaume/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.85.1: OK
      Deno version 1.46.3: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.7.31
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
      Source: MacOS known location

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.17
      Path: /Users/guillaume/Desktop/Workspace/test-video-compression/.venv/bin/python
      Jupyter: 5.7.2
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

[GuillaumeDehaene]

Screenshot from rendered html: html uploads are apparently impossible?

[cderv]

Thanks. I can reproduce. This is possibly related to this one too:

• A single bokeh plot is wrongly identified as several subfigures #7967

I am surprised this is new for Plotly, so I'll also look to see if something changed.

[cderv]

This is the intermediate .md structure.

The problem is indeed the first block with the raw block loading plotly.js, having the first sub cap assigned.

::: {#fig-gapminder .cell .column-page layout-ncol='2' execution_count=1}
``` {.python .cell-code}
# code cell content
```

::: {#fig-gapminder-1 .cell-output .cell-output-display}

```{=html}
// raw HTML loading plotly
```

Gapminder: 1957
:::

::: {#fig-gapminder-2 .cell-output .cell-output-display}

```{=html}
// plotly figures
```

Gapminder: 2007
:::

::: {#fig-gapminder-3 .cell-output .cell-output-display}

```{=html}
// second plotly figures
```

:::

Life Expectancy and GDP
:::

It could be some changes in plotly.js or its jupyter integration now works.
as I think those libraries calls should have been caught and move 🤔

quarto-cli/src/core/jupyter/widgets.ts

Lines 45 to 62 in 432c04f

	// see if there are html libraries that need to be hoisted up into the head
	const htmlLibraries: string[] = [];
	nb.cells.forEach((cell) => {
	if (cell.cell_type === "code") {
	cell.outputs = cell.outputs?.filter((output) => {
	if (isDisplayData(output)) {
	const displayOutput = output as JupyterOutputDisplayData;
	const html = displayOutput.data[kTextHtml];
	const htmlText = Array.isArray(html) ? html.join("") : html as string;
	if (html && isWidgetIncludeHtml(htmlText)) {
	htmlLibraries.push(htmlLibrariesText(htmlText));
	return false;
	}
	}
	return true;
	});
	}
	});

and this is with latest plotly python

    {
     "data": {
      "text/html": [
       "        <script type=\"text/javascript\">\n",
       "        window.PlotlyConfig = {MathJaxConfig: 'local'};\n",
       "        if (window.MathJax && window.MathJax.Hub && window.MathJax.Hub.Config) {window.MathJax.Hub.Config({SVG: {font: \"STIX-Web\"}});}\n",
       "        </script>\n",
       "        <script type=\"module\">import \"https://cdn.plot.ly/plotly-3.0.1.min\"</script>\n",
       "        "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },

This is not caught and identified by our post-processing for ipynb -> md

[cderv]

And I think this is the change in plotly.py causing the problem

• Use modern native ES6 import to load plotly.js bundle instead of requirejs which is no longer under active development plotly/plotly.py#4763

I can confirm that the example works with Plotly v5.24.1 so this is plotly update that breaks this.
We probably don't have good test for this. 😞

Thanks for the report !

[cscheid]

Thanks for taking the issue. I think this will have to be a library-specific fixup for us :( I don't know how we can robustly determine what parts of the cell are "not real content", and what parts are.

When you test your solutions, make sure to take into account a document with more than one cell. I suspect that plotly emits that first "// raw HTML loading plotly" cell only once, and so our fixup needs to be aware that the cell might not actually be there in some of the cells.

[cderv]

I was planning to keep using the same logic as it was but adapt the regex. We have a isWidgetIncludeHtml() that is already library specific. Possibly Bokeh support may try to be added there.

Anyway, we'll discuss in the PR.