Merge pull request #12842 from quarto-dev/fix/plotly-subfigures

Support for plotly.py 6+

Author: cderv

news/changelog-1.8.md

@@ -68,6 +68,7 @@ All changes included in 1.8:
 ### `jupyter`
 
 - ([#12753](https://github.com/quarto-dev/quarto-cli/issues/12753)): Support change in IPython 9+ and import `set_matplotlib_formats` from `matplotlib_inline.backend_inline` in the internal `setup.py` script used to initialize rendering with Jupyter engine.
+- ([#12839](https://github.com/quarto-dev/quarto-cli/issues/12839)): Support for `plotly.py` 6+ which now loads plotly.js using a cdn in script as a module.
 
 ## Other fixes and improvements
 

src/core/jupyter/widgets.ts

@@ -190,9 +190,29 @@ function isWidgetIncludeHtml(html: string) {
 }
 
 function isPlotlyLibrary(html: string) {
-  return /^\s*<script type="text\/javascript">/.test(html) &&
+  // Plotly before version 6 used require.js to load the library
+  const hasRequireScript = (
+    html: string,
+  ) => (/^\s*<script type="text\/javascript">/.test(html) &&
     (/require\.undef\(["']plotly["']\)/.test(html) ||
-      /define\('plotly'/.test(html));
+      /define\('plotly'/.test(html)));
+  // Plotly 6+ uses the new module syntax
+  const hasModuleScript = (html: string) =>
+    /\s*<script type=\"module\">import .*plotly.*<\/script>/.test(html);
+  // notebook mode non connected embed plotly.js scripts like this:
+  //  * plotly.js v3.0.1
+  //  * Copyright 2012-2025, Plotly, Inc.
+  //  * All rights reserved.
+  //  * Licensed under the MIT license
+  const hasEmbedScript = (
+    html: string,
+  ) => (/\* plotly\.js v\d+\.\d+\.\d+\s*\n\s*\* Copyright \d{4}-\d{4}, Plotly, Inc\.\s*\n\s*\* All rights reserved\.\s*\n\s*\* Licensed under the MIT license/
+    .test(html));
+  return hasRequireScript(html) ||
+    // also handle new module syntax from plotly.py 6+
+    hasModuleScript(html) ||
+    // detect plotly by its copyright header
+    hasEmbedScript(html);
 }
 
 function htmlLibrariesText(htmlText: string) {

tests/docs/smoke-all/jupyter/subfigures/plotly.qmd

@@ -0,0 +1,56 @@
+---
+title: "Bugged plotly figure: phantom subfigure"
+_quarto:
+  tests: 
+    html:
+      ensureHtmlElements:
+        - 
+          - 'figure.quarto-float-fig div#fig-gapminder-1 figure.quarto-subfloat-fig div.plotly-graph-div'
+          - 'figure.quarto-float-fig div#fig-gapminder-2 figure.quarto-subfloat-fig div.plotly-graph-div'
+      ensureHtmlElementContents:
+        selectors: 
+          - 'div#fig-gapminder-1 figcaption.quarto-subfloat-caption'
+          - 'div#fig-gapminder-2 figcaption.quarto-subfloat-caption'
+        matches: ['\((a|b)\) Gapminder: (1957|2007)']
+      ensureHtmlElementCount:
+        selectors: ['figure.quarto-float-fig figure.quarto-subfloat-fig']
+        counts: [2]
+    dashboard:
+      ensureHtmlElements:
+        - 
+          - 'figure.quarto-float-fig div#fig-gapminder-1 figure.quarto-subfloat-fig div.plotly-graph-div'
+          - 'figure.quarto-float-fig div#fig-gapminder-2 figure.quarto-subfloat-fig div.plotly-graph-div'
+      ensureHtmlElementContents:
+        selectors: 
+          - 'div#fig-gapminder-1 figcaption.quarto-subfloat-caption'
+          - 'div#fig-gapminder-2 figcaption.quarto-subfloat-caption'
+        matches: ['\((a|b)\) Gapminder: (1957|2007)']
+      ensureHtmlElementCount:
+        selectors: ['figure.quarto-float-fig figure.quarto-subfloat-fig']
+        counts: [2]
+---
+
+```{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)
+```

tests/pyproject.toml

@@ -18,4 +18,5 @@ dependencies = [
     "great-tables>=0.17.0",
     "polars>=1.29.0",
     "pyarrow>=20.0.0",
+    "plotly>=6.1.1",
 ]

tests/smoke/smoke-all.test.ts

@@ -36,7 +36,8 @@ import {
   ensureLatexFileRegexMatches,
   printsMessage,
   shouldError,
-  ensureHtmlElementContents
+  ensureHtmlElementContents,
+  ensureHtmlElementCount,
 } from "../verify.ts";
 import { readYamlFromMarkdown } from "../../src/core/yaml.ts";
 import { findProjectDir, findProjectOutputDir, outputForInput } from "../utils.ts";
@@ -130,6 +131,7 @@ function resolveTestSpecs(
     ensureEpubFileRegexMatches,
     ensureHtmlElements,
     ensureHtmlElementContents,
+    ensureHtmlElementCount,
     ensureFileRegexMatches,
     ensureLatexFileRegexMatches,
     ensureTypstFileRegexMatches,

tests/uv.lock

@@ -402,6 +402,39 @@ export const ensureHtmlElementContents = (
 
 }
 
+export const ensureHtmlElementCount = (
+  file: string,
+  options: {
+    selectors: string[] | string,
+    counts: number[] | number
+  }
+): Verify => {
+  return {
+    name: "Verify number of elements for selectors",
+    verify: async (_output: ExecuteOutput[]) => {
+      const htmlInput = await Deno.readTextFile(file);
+      const doc = new DOMParser().parseFromString(htmlInput, "text/html")!;
+      
+      // Convert single values to arrays for unified processing
+      const selectorsArray = Array.isArray(options.selectors) ? options.selectors : [options.selectors];
+      const countsArray = Array.isArray(options.counts) ? options.counts : [options.counts];
+      
+      if (selectorsArray.length !== countsArray.length) {
+        throw new Error("Selectors and counts arrays must have the same length");
+      }
+      
+      selectorsArray.forEach((selector, index) => {
+        const expectedCount = countsArray[index];
+        const elements = doc.querySelectorAll(selector);
+        assert(
+          elements.length === expectedCount,
+          `Selector '${selector}' matched ${elements.length} elements, expected ${expectedCount}.`
+        );
+      });
+    }
+  };
+};
+
 export const ensureSnapshotMatches = (
   file: string,
 ): Verify => {