A single bokeh plot is wrongly identified as several subfigures

[cderv]

It seems this previous issue is not fixed

• A single bokeh plot will be wrongly identified as several subfigures.  #2107

Same problem. Downloaded repo and installed most current version 1.4.529 with ./configure.sh

Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      Path: /home/cdaniels/junk/quarto/quarto-cli/package/dist/bin

Check file:///home/cdaniels/junk/quarto/quarto-cli/src/resources/vendor/deno-land/x/puppeteer@9-0-2/mod.ts
[✓] Checking tools....................OK
      TinyTeX: v2023.12
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /home/cdaniels/.TinyTeX/bin/x86_64-linux
      Version: 2023

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

[✓] Checking Python 3 installation....OK
      Version: 3.12.0 (Conda)
      Path: /home/cdaniels/mambaforge/envs/quarto/bin/python
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with conda install jupyter

[✓] Checking R installation...........OK
      Version: 4.3.2
      Path: /usr/lib/R
      LibPaths:
        - /home/cdaniels/R/x86_64-pc-linux-gnu-library/4.3
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.45
      rmarkdown: 2.25

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

Not sure why Jupyter is not installed. (Installed with both mamba and conda). It does shows up in correct env:

Selected Jupyter core packages...
IPython          : 8.18.1
ipykernel        : 6.26.0
ipywidgets       : 8.1.1
jupyter_client   : 8.6.0
jupyter_core     : 5.5.1
jupyter_server   : 2.12.1
jupyterlab       : 4.0.9
nbclient         : 0.8.0
nbconvert        : 7.13.0
nbformat         : 5.9.2
notebook         : 7.0.6
qtconsole        : 5.5.1
traitlets        : 5.14.0

Originally posted by @prairie-guy in #2107 (comment)

[cderv]

Here is a simplified test document

---
title: "test "
format:
  html: default
keep-md: true
---

```{python}
from bokeh.io import output_notebook
output_notebook(hide_banner=True)
```

```{python}
#| label: fig-4
#| fig-cap: "Line Plot from Bokeh"

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# create a new plot with a title and axis labels
p = figure(title="Simple line example", x_axis_label="x", y_axis_label="y")

# add a line renderer with legend and line thickness
p.line(x, y, legend_label="Temp.", line_width=2)

# show the results
show(p)
```

It happens because this is two cells - if there is only one, no problems

Very long intermediate md

---
title: "test webpage"
format:
  html: default
keep-md: true
---


::: {#9a1b83c0 .cell execution_count=1}
``` {.python .cell-code}
from bokeh.io import output_notebook
output_notebook(hide_banner=True)
```

::: {.cell-output .cell-output-display}

```{=html}
<script type="application/javascript">
(function(root) {
  function now() {
    return new Date();
  }

  const force = true;

  if (typeof root._bokeh_onload_callbacks === "undefined" || force === true) {
    root._bokeh_onload_callbacks = [];
    root._bokeh_is_loading = undefined;
  }

const JS_MIME_TYPE = 'application/javascript';
  const HTML_MIME_TYPE = 'text/html';
  const EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';
  const CLASS_NAME = 'output_bokeh rendered_html';

  /**
   * Render data to the DOM node
   */
  function render(props, node) {
    const script = document.createElement("script");
    node.appendChild(script);
  }

  /**
   * Handle when an output is cleared or removed
   */
  function handleClearOutput(event, handle) {
    const cell = handle.cell;

    const id = cell.output_area._bokeh_element_id;
    const server_id = cell.output_area._bokeh_server_id;
    // Clean up Bokeh references
    if (id != null && id in Bokeh.index) {
      Bokeh.index[id].model.document.clear();
      delete Bokeh.index[id];
    }

    if (server_id !== undefined) {
      // Clean up Bokeh references
      const cmd_clean = "from bokeh.io.state import curstate; print(curstate().uuid_to_server['" + server_id + "'].get_sessions()[0].document.roots[0]._id)";
      cell.notebook.kernel.execute(cmd_clean, {
        iopub: {
          output: function(msg) {
            const id = msg.content.text.trim();
            if (id in Bokeh.index) {
              Bokeh.index[id].model.document.clear();
              delete Bokeh.index[id];
            }
          }
        }
      });
      // Destroy server and session
      const cmd_destroy = "import bokeh.io.notebook as ion; ion.destroy_server('" + server_id + "')";
      cell.notebook.kernel.execute(cmd_destroy);
    }
  }

  /**
   * Handle when a new output is added
   */
  function handleAddOutput(event, handle) {
    const output_area = handle.output_area;
    const output = handle.output;

    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only
    if ((output.output_type != "display_data") || (!Object.prototype.hasOwnProperty.call(output.data, EXEC_MIME_TYPE))) {
      return
    }

    const toinsert = output_area.element.find("." + CLASS_NAME.split(' ')[0]);

    if (output.metadata[EXEC_MIME_TYPE]["id"] !== undefined) {
      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];
      // store reference to embed id on output_area
      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE]["id"];
    }
    if (output.metadata[EXEC_MIME_TYPE]["server_id"] !== undefined) {
      const bk_div = document.createElement("div");
      bk_div.innerHTML = output.data[HTML_MIME_TYPE];
      const script_attrs = bk_div.children[0].attributes;
      for (let i = 0; i < script_attrs.length; i++) {
        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);
        toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent
      }
      // store reference to server id on output_area
      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE]["server_id"];
    }
  }

  function register_renderer(events, OutputArea) {

    function append_mime(data, metadata, element) {
      // create a DOM node to render to
      const toinsert = this.create_output_subarea(
        metadata,
        CLASS_NAME,
        EXEC_MIME_TYPE
      );
      this.keyboard_manager.register_events(toinsert);
      // Render to node
      const props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};
      render(props, toinsert[toinsert.length - 1]);
      element.append(toinsert);
      return toinsert
    }

    /* Handle when an output is cleared or removed */
    events.on('clear_output.CodeCell', handleClearOutput);
    events.on('delete.Cell', handleClearOutput);

    /* Handle when a new output is added */
    events.on('output_added.OutputArea', handleAddOutput);

    /**
     * Register the mime type and append_mime function with output_area
     */
    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {
      /* Is output safe? */
      safe: true,
      /* Index of renderer in `output_area.display_order` */
      index: 0
    });
  }

  // register the mime type if in Jupyter Notebook environment and previously unregistered
  if (root.Jupyter !== undefined) {
    const events = require('base/js/events');
    const OutputArea = require('notebook/js/outputarea').OutputArea;

    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {
      register_renderer(events, OutputArea);
    }
  }
  if (typeof (root._bokeh_timeout) === "undefined" || force === true) {
    root._bokeh_timeout = Date.now() + 5000;
    root._bokeh_failed_load = false;
  }

  const NB_LOAD_WARNING = {'data': {'text/html':
     "<div style='background-color: #fdd'>\n"+
     "<p>\n"+
     "BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \n"+
     "may be due to a slow or bad network connection. Possible fixes:\n"+
     "</p>\n"+
     "<ul>\n"+
     "<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\n"+
     "<li>use INLINE resources instead, as so:</li>\n"+
     "</ul>\n"+
     "<code>\n"+
     "from bokeh.resources import INLINE\n"+
     "output_notebook(resources=INLINE)\n"+
     "</code>\n"+
     "</div>"}};

  function display_loaded() {
    const el = document.getElementById(null);
    if (el != null) {
      el.textContent = "BokehJS is loading...";
    }
    if (root.Bokeh !== undefined) {
      if (el != null) {
        el.textContent = "BokehJS " + root.Bokeh.version + " successfully loaded.";
      }
    } else if (Date.now() < root._bokeh_timeout) {
      setTimeout(display_loaded, 100)
    }
  }

  function run_callbacks() {
    try {
      root._bokeh_onload_callbacks.forEach(function(callback) {
        if (callback != null)
          callback();
      });
    } finally {
      delete root._bokeh_onload_callbacks
    }
    console.debug("Bokeh: all callbacks have finished");
  }

  function load_libs(css_urls, js_urls, callback) {
    if (css_urls == null) css_urls = [];
    if (js_urls == null) js_urls = [];

    root._bokeh_onload_callbacks.push(callback);
    if (root._bokeh_is_loading > 0) {
      console.debug("Bokeh: BokehJS is being loaded, scheduling callback at", now());
      return null;
    }
    if (js_urls == null || js_urls.length === 0) {
      run_callbacks();
      return null;
    }
    console.debug("Bokeh: BokehJS not loaded, scheduling load and callback at", now());
    root._bokeh_is_loading = css_urls.length + js_urls.length;

    function on_load() {
      root._bokeh_is_loading--;
      if (root._bokeh_is_loading === 0) {
        console.debug("Bokeh: all BokehJS libraries/stylesheets loaded");
        run_callbacks()
      }
    }

    function on_error(url) {
      console.error("failed to load " + url);
    }

    for (let i = 0; i < css_urls.length; i++) {
      const url = css_urls[i];
      const element = document.createElement("link");
      element.onload = on_load;
      element.onerror = on_error.bind(null, url);
      element.rel = "stylesheet";
      element.type = "text/css";
      element.href = url;
      console.debug("Bokeh: injecting link tag for BokehJS stylesheet: ", url);
      document.body.appendChild(element);
    }

    for (let i = 0; i < js_urls.length; i++) {
      const url = js_urls[i];
      const element = document.createElement('script');
      element.onload = on_load;
      element.onerror = on_error.bind(null, url);
      element.async = false;
      element.src = url;
      console.debug("Bokeh: injecting script tag for BokehJS library: ", url);
      document.head.appendChild(element);
    }
  };

  function inject_raw_css(css) {
    const element = document.createElement("style");
    element.appendChild(document.createTextNode(css));
    document.body.appendChild(element);
  }

  const js_urls = ["https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.3.min.js"];
  const css_urls = [];

  const inline_js = [    function(Bokeh) {
      Bokeh.set_log_level("info");
    },
function(Bokeh) {
    }
  ];

  function run_inline_js() {
    if (root.Bokeh !== undefined || force === true) {
          for (let i = 0; i < inline_js.length; i++) {
      inline_js[i].call(root, root.Bokeh);
    }
} else if (Date.now() < root._bokeh_timeout) {
      setTimeout(run_inline_js, 100);
    } else if (!root._bokeh_failed_load) {
      console.log("Bokeh: BokehJS failed to load within specified timeout.");
      root._bokeh_failed_load = true;
    } else if (force !== true) {
      const cell = $(document.getElementById(null)).parents('.cell').data().cell;
      cell.output_area.append_execute_result(NB_LOAD_WARNING)
    }
  }

  if (root._bokeh_is_loading === 0) {
    console.debug("Bokeh: BokehJS loaded, going straight to plotting");
    run_inline_js();
  } else {
    load_libs(css_urls, js_urls, function() {
      console.debug("Bokeh: BokehJS plotting callback run at", now());
      run_inline_js();
    });
  }
}(window));
</script>
```

:::
:::


::: {#fig-4 .cell execution_count=2}
``` {.python .cell-code}
from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# create a new plot with a title and axis labels
p = figure(title="Simple line example", x_axis_label="x", y_axis_label="y")

# add a line renderer with legend and line thickness
p.line(x, y, legend_label="Temp.", line_width=2)

# show the results
show(p)
```

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

```{=html}

  <div class="bk-root" id="bd096a76-3096-475a-9054-ff1b53329601" data-root-id="3320"></div>
```


Line Plot from Bokeh
:::

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

```{=html}
<script type="application/javascript">
(function(root) {
  function embed_document(root) {
  const docs_json = {"e88c3968-8e0a-4037-a315-5e0168c10e1b":{"defs":[],"roots":{"references":[{"attributes":{"below":[{"id":"3331"}],"center":[{"id":"3334"},{"id":"3338"},{"id":"3369"}],"left":[{"id":"3335"}],"renderers":[{"id":"3357"}],"title":{"id":"3321"},"toolbar":{"id":"3346"},"x_range":{"id":"3323"},"x_scale":{"id":"3327"},"y_range":{"id":"3325"},"y_scale":{"id":"3329"}},"id":"3320","subtype":"Figure","type":"Plot"},{"attributes":{"line_color":"#1f77b4","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"3354","type":"Line"},{"attributes":{"line_alpha":0.2,"line_color":"#1f77b4","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"3356","type":"Line"},{"attributes":{"data":{"x":[1,2,3,4,5],"y":[6,7,2,4,5]},"selected":{"id":"3367"},"selection_policy":{"id":"3366"}},"id":"3353","type":"ColumnDataSource"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"3355","type":"Line"},{"attributes":{},"id":"3362","type":"AllLabels"},{"attributes":{"coordinates":null,"data_source":{"id":"3353"},"glyph":{"id":"3354"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"3356"},"nonselection_glyph":{"id":"3355"},"view":{"id":"3358"}},"id":"3357","type":"GlyphRenderer"},{"attributes":{"tools":[{"id":"3339"},{"id":"3340"},{"id":"3341"},{"id":"3342"},{"id":"3343"},{"id":"3344"}]},"id":"3346","type":"Toolbar"},{"attributes":{},"id":"3339","type":"PanTool"},{"attributes":{},"id":"3340","type":"WheelZoomTool"},{"attributes":{},"id":"3361","type":"BasicTickFormatter"},{"attributes":{"axis":{"id":"3335"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"3338","type":"Grid"},{"attributes":{"coordinates":null,"group":null,"items":[{"id":"3370"}]},"id":"3369","type":"Legend"},{"attributes":{},"id":"3366","type":"UnionRenderers"},{"attributes":{},"id":"3329","type":"LinearScale"},{"attributes":{"label":{"value":"Temp."},"renderers":[{"id":"3357"}]},"id":"3370","type":"LegendItem"},{"attributes":{"axis_label":"y","coordinates":null,"formatter":{"id":"3361"},"group":null,"major_label_policy":{"id":"3362"},"ticker":{"id":"3336"}},"id":"3335","type":"LinearAxis"},{"attributes":{},"id":"3342","type":"SaveTool"},{"attributes":{},"id":"3365","type":"AllLabels"},{"attributes":{"bottom_units":"screen","coordinates":null,"fill_alpha":0.5,"fill_color":"lightgrey","group":null,"left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"3345","type":"BoxAnnotation"},{"attributes":{"overlay":{"id":"3345"}},"id":"3341","type":"BoxZoomTool"},{"attributes":{},"id":"3327","type":"LinearScale"},{"attributes":{"axis":{"id":"3331"},"coordinates":null,"group":null,"ticker":null},"id":"3334","type":"Grid"},{"attributes":{},"id":"3344","type":"HelpTool"},{"attributes":{},"id":"3323","type":"DataRange1d"},{"attributes":{"coordinates":null,"group":null,"text":"Simple line example"},"id":"3321","type":"Title"},{"attributes":{},"id":"3336","type":"BasicTicker"},{"attributes":{},"id":"3367","type":"Selection"},{"attributes":{"axis_label":"x","coordinates":null,"formatter":{"id":"3364"},"group":null,"major_label_policy":{"id":"3365"},"ticker":{"id":"3332"}},"id":"3331","type":"LinearAxis"},{"attributes":{},"id":"3364","type":"BasicTickFormatter"},{"attributes":{},"id":"3343","type":"ResetTool"},{"attributes":{},"id":"3332","type":"BasicTicker"},{"attributes":{"source":{"id":"3353"}},"id":"3358","type":"CDSView"},{"attributes":{},"id":"3325","type":"DataRange1d"}],"root_ids":["3320"]},"title":"Bokeh Application","version":"2.4.3"}};
  const render_items = [{"docid":"e88c3968-8e0a-4037-a315-5e0168c10e1b","root_ids":["3320"],"roots":{"3320":"bd096a76-3096-475a-9054-ff1b53329601"}}];
  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);
  }
  if (root.Bokeh !== undefined) {
    embed_document(root);
  } else {
    let attempts = 0;
    const timer = setInterval(function(root) {
      if (root.Bokeh !== undefined) {
        clearInterval(timer);
        embed_document(root);
      } else {
        attempts++;
        if (attempts > 100) {
          clearInterval(timer);
          console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
        }
      }
    }, 10, root)
  }
})(window);
</script>
```

:::
:::

we got the second cell outputing two display_data, one is only a HTML div that should contains the graph, and the other is the JS script to create it. Somehow, it got separated and we end up with somthing like

::: {#fig-4 .cell execution_count=2}

< python source code cell here>

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

```{=html}

  <div class="bk-root" id="bd096a76-3096-475a-9054-ff1b53329601" data-root-id="3320"></div>
```


Line Plot from Bokeh
:::

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

```{=html}
<script type="application/javascript">

(...)
:::
:::

Merging the two cells fix the issue

---
title: "test webpage"
format:
  html: default
keep-md: true
---


```{python}
#| label: fig-4
#| fig-cap: "Line Plot from Bokeh"

from bokeh.plotting import figure, show
from bokeh.io import output_notebook
output_notebook(hide_banner=True)

# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# create a new plot with a title and axis labels
p = figure(title="Simple line example", x_axis_label="x", y_axis_label="y")

# add a line renderer with legend and line thickness
p.line(x, y, legend_label="Temp.", line_width=2)

# show the results
show(p)
```

Intermediate md

---
title: "test webpage"
format:
  html: default
keep-md: true
---


::: {#cell-fig-4 .cell execution_count=1}
``` {.python .cell-code}
from bokeh.plotting import figure, show
from bokeh.io import output_notebook
output_notebook(hide_banner=True)

# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# create a new plot with a title and axis labels
p = figure(title="Simple line example", x_axis_label="x", y_axis_label="y")

# add a line renderer with legend and line thickness
p.line(x, y, legend_label="Temp.", line_width=2)

# show the results
show(p)
```

::: {#fig-4 .cell-output .cell-output-display}

```{=html}
<script>(function(root) {
  function now() {
    return new Date();
  }

  const force = true;

  if (typeof root._bokeh_onload_callbacks === "undefined" || force === true) {
    root._bokeh_onload_callbacks = [];
    root._bokeh_is_loading = undefined;
  }

const JS_MIME_TYPE = 'application/javascript';
  const HTML_MIME_TYPE = 'text/html';
  const EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';
  const CLASS_NAME = 'output_bokeh rendered_html';

  /**
   * Render data to the DOM node
   */
  function render(props, node) {
    const script = document.createElement("script");
    node.appendChild(script);
  }

  /**
   * Handle when an output is cleared or removed
   */
  function handleClearOutput(event, handle) {
    const cell = handle.cell;

    const id = cell.output_area._bokeh_element_id;
    const server_id = cell.output_area._bokeh_server_id;
    // Clean up Bokeh references
    if (id != null && id in Bokeh.index) {
      Bokeh.index[id].model.document.clear();
      delete Bokeh.index[id];
    }

    if (server_id !== undefined) {
      // Clean up Bokeh references
      const cmd_clean = "from bokeh.io.state import curstate; print(curstate().uuid_to_server['" + server_id + "'].get_sessions()[0].document.roots[0]._id)";
      cell.notebook.kernel.execute(cmd_clean, {
        iopub: {
          output: function(msg) {
            const id = msg.content.text.trim();
            if (id in Bokeh.index) {
              Bokeh.index[id].model.document.clear();
              delete Bokeh.index[id];
            }
          }
        }
      });
      // Destroy server and session
      const cmd_destroy = "import bokeh.io.notebook as ion; ion.destroy_server('" + server_id + "')";
      cell.notebook.kernel.execute(cmd_destroy);
    }
  }

  /**
   * Handle when a new output is added
   */
  function handleAddOutput(event, handle) {
    const output_area = handle.output_area;
    const output = handle.output;

    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only
    if ((output.output_type != "display_data") || (!Object.prototype.hasOwnProperty.call(output.data, EXEC_MIME_TYPE))) {
      return
    }

    const toinsert = output_area.element.find("." + CLASS_NAME.split(' ')[0]);

    if (output.metadata[EXEC_MIME_TYPE]["id"] !== undefined) {
      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];
      // store reference to embed id on output_area
      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE]["id"];
    }
    if (output.metadata[EXEC_MIME_TYPE]["server_id"] !== undefined) {
      const bk_div = document.createElement("div");
      bk_div.innerHTML = output.data[HTML_MIME_TYPE];
      const script_attrs = bk_div.children[0].attributes;
      for (let i = 0; i < script_attrs.length; i++) {
        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);
        toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent
      }
      // store reference to server id on output_area
      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE]["server_id"];
    }
  }

  function register_renderer(events, OutputArea) {

    function append_mime(data, metadata, element) {
      // create a DOM node to render to
      const toinsert = this.create_output_subarea(
        metadata,
        CLASS_NAME,
        EXEC_MIME_TYPE
      );
      this.keyboard_manager.register_events(toinsert);
      // Render to node
      const props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};
      render(props, toinsert[toinsert.length - 1]);
      element.append(toinsert);
      return toinsert
    }

    /* Handle when an output is cleared or removed */
    events.on('clear_output.CodeCell', handleClearOutput);
    events.on('delete.Cell', handleClearOutput);

    /* Handle when a new output is added */
    events.on('output_added.OutputArea', handleAddOutput);

    /**
     * Register the mime type and append_mime function with output_area
     */
    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {
      /* Is output safe? */
      safe: true,
      /* Index of renderer in `output_area.display_order` */
      index: 0
    });
  }

  // register the mime type if in Jupyter Notebook environment and previously unregistered
  if (root.Jupyter !== undefined) {
    const events = require('base/js/events');
    const OutputArea = require('notebook/js/outputarea').OutputArea;

    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {
      register_renderer(events, OutputArea);
    }
  }
  if (typeof (root._bokeh_timeout) === "undefined" || force === true) {
    root._bokeh_timeout = Date.now() + 5000;
    root._bokeh_failed_load = false;
  }

  const NB_LOAD_WARNING = {'data': {'text/html':
     "<div style='background-color: #fdd'>\n"+
     "<p>\n"+
     "BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \n"+
     "may be due to a slow or bad network connection. Possible fixes:\n"+
     "</p>\n"+
     "<ul>\n"+
     "<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\n"+
     "<li>use INLINE resources instead, as so:</li>\n"+
     "</ul>\n"+
     "<code>\n"+
     "from bokeh.resources import INLINE\n"+
     "output_notebook(resources=INLINE)\n"+
     "</code>\n"+
     "</div>"}};

  function display_loaded() {
    const el = document.getElementById(null);
    if (el != null) {
      el.textContent = "BokehJS is loading...";
    }
    if (root.Bokeh !== undefined) {
      if (el != null) {
        el.textContent = "BokehJS " + root.Bokeh.version + " successfully loaded.";
      }
    } else if (Date.now() < root._bokeh_timeout) {
      setTimeout(display_loaded, 100)
    }
  }

  function run_callbacks() {
    try {
      root._bokeh_onload_callbacks.forEach(function(callback) {
        if (callback != null)
          callback();
      });
    } finally {
      delete root._bokeh_onload_callbacks
    }
    console.debug("Bokeh: all callbacks have finished");
  }

  function load_libs(css_urls, js_urls, callback) {
    if (css_urls == null) css_urls = [];
    if (js_urls == null) js_urls = [];

    root._bokeh_onload_callbacks.push(callback);
    if (root._bokeh_is_loading > 0) {
      console.debug("Bokeh: BokehJS is being loaded, scheduling callback at", now());
      return null;
    }
    if (js_urls == null || js_urls.length === 0) {
      run_callbacks();
      return null;
    }
    console.debug("Bokeh: BokehJS not loaded, scheduling load and callback at", now());
    root._bokeh_is_loading = css_urls.length + js_urls.length;

    function on_load() {
      root._bokeh_is_loading--;
      if (root._bokeh_is_loading === 0) {
        console.debug("Bokeh: all BokehJS libraries/stylesheets loaded");
        run_callbacks()
      }
    }

    function on_error(url) {
      console.error("failed to load " + url);
    }

    for (let i = 0; i < css_urls.length; i++) {
      const url = css_urls[i];
      const element = document.createElement("link");
      element.onload = on_load;
      element.onerror = on_error.bind(null, url);
      element.rel = "stylesheet";
      element.type = "text/css";
      element.href = url;
      console.debug("Bokeh: injecting link tag for BokehJS stylesheet: ", url);
      document.body.appendChild(element);
    }

    for (let i = 0; i < js_urls.length; i++) {
      const url = js_urls[i];
      const element = document.createElement('script');
      element.onload = on_load;
      element.onerror = on_error.bind(null, url);
      element.async = false;
      element.src = url;
      console.debug("Bokeh: injecting script tag for BokehJS library: ", url);
      document.head.appendChild(element);
    }
  };

  function inject_raw_css(css) {
    const element = document.createElement("style");
    element.appendChild(document.createTextNode(css));
    document.body.appendChild(element);
  }

  const js_urls = ["https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.3.min.js"];
  const css_urls = [];

  const inline_js = [    function(Bokeh) {
      Bokeh.set_log_level("info");
    },
function(Bokeh) {
    }
  ];

  function run_inline_js() {
    if (root.Bokeh !== undefined || force === true) {
          for (let i = 0; i < inline_js.length; i++) {
      inline_js[i].call(root, root.Bokeh);
    }
} else if (Date.now() < root._bokeh_timeout) {
      setTimeout(run_inline_js, 100);
    } else if (!root._bokeh_failed_load) {
      console.log("Bokeh: BokehJS failed to load within specified timeout.");
      root._bokeh_failed_load = true;
    } else if (force !== true) {
      const cell = $(document.getElementById(null)).parents('.cell').data().cell;
      cell.output_area.append_execute_result(NB_LOAD_WARNING)
    }
  }

  if (root._bokeh_is_loading === 0) {
    console.debug("Bokeh: BokehJS loaded, going straight to plotting");
    run_inline_js();
  } else {
    load_libs(css_urls, js_urls, function() {
      console.debug("Bokeh: BokehJS plotting callback run at", now());
      run_inline_js();
    });
  }
}(window));</script>
  <div class="bk-root" id="567c4106-f6c4-41f7-bfb6-0aca5bdc7c42" data-root-id="3550"></div>
<script>(function(root) {
  function embed_document(root) {
  const docs_json = {"104cdd4c-c6c2-4012-b05c-854ec2a8c186":{"defs":[],"roots":{"references":[{"attributes":{"below":[{"id":"3561"}],"center":[{"id":"3564"},{"id":"3568"},{"id":"3599"}],"left":[{"id":"3565"}],"renderers":[{"id":"3587"}],"title":{"id":"3551"},"toolbar":{"id":"3576"},"x_range":{"id":"3553"},"x_scale":{"id":"3557"},"y_range":{"id":"3555"},"y_scale":{"id":"3559"}},"id":"3550","subtype":"Figure","type":"Plot"},{"attributes":{"coordinates":null,"data_source":{"id":"3583"},"glyph":{"id":"3584"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"3586"},"nonselection_glyph":{"id":"3585"},"view":{"id":"3588"}},"id":"3587","type":"GlyphRenderer"},{"attributes":{},"id":"3569","type":"PanTool"},{"attributes":{},"id":"3557","type":"LinearScale"},{"attributes":{"overlay":{"id":"3575"}},"id":"3571","type":"BoxZoomTool"},{"attributes":{},"id":"3592","type":"AllLabels"},{"attributes":{},"id":"3562","type":"BasicTicker"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"3585","type":"Line"},{"attributes":{"line_alpha":0.2,"line_color":"#1f77b4","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"3586","type":"Line"},{"attributes":{},"id":"3555","type":"DataRange1d"},{"attributes":{},"id":"3595","type":"AllLabels"},{"attributes":{"source":{"id":"3583"}},"id":"3588","type":"CDSView"},{"attributes":{},"id":"3553","type":"DataRange1d"},{"attributes":{},"id":"3573","type":"ResetTool"},{"attributes":{},"id":"3597","type":"Selection"},{"attributes":{"line_color":"#1f77b4","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"3584","type":"Line"},{"attributes":{"axis_label":"x","coordinates":null,"formatter":{"id":"3594"},"group":null,"major_label_policy":{"id":"3595"},"ticker":{"id":"3562"}},"id":"3561","type":"LinearAxis"},{"attributes":{"axis":{"id":"3565"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"3568","type":"Grid"},{"attributes":{},"id":"3596","type":"UnionRenderers"},{"attributes":{},"id":"3591","type":"BasicTickFormatter"},{"attributes":{},"id":"3559","type":"LinearScale"},{"attributes":{"coordinates":null,"group":null,"text":"Simple line example"},"id":"3551","type":"Title"},{"attributes":{"axis":{"id":"3561"},"coordinates":null,"group":null,"ticker":null},"id":"3564","type":"Grid"},{"attributes":{"axis_label":"y","coordinates":null,"formatter":{"id":"3591"},"group":null,"major_label_policy":{"id":"3592"},"ticker":{"id":"3566"}},"id":"3565","type":"LinearAxis"},{"attributes":{"label":{"value":"Temp."},"renderers":[{"id":"3587"}]},"id":"3600","type":"LegendItem"},{"attributes":{"tools":[{"id":"3569"},{"id":"3570"},{"id":"3571"},{"id":"3572"},{"id":"3573"},{"id":"3574"}]},"id":"3576","type":"Toolbar"},{"attributes":{"bottom_units":"screen","coordinates":null,"fill_alpha":0.5,"fill_color":"lightgrey","group":null,"left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"3575","type":"BoxAnnotation"},{"attributes":{"data":{"x":[1,2,3,4,5],"y":[6,7,2,4,5]},"selected":{"id":"3597"},"selection_policy":{"id":"3596"}},"id":"3583","type":"ColumnDataSource"},{"attributes":{},"id":"3594","type":"BasicTickFormatter"},{"attributes":{"coordinates":null,"group":null,"items":[{"id":"3600"}]},"id":"3599","type":"Legend"},{"attributes":{},"id":"3570","type":"WheelZoomTool"},{"attributes":{},"id":"3566","type":"BasicTicker"},{"attributes":{},"id":"3574","type":"HelpTool"},{"attributes":{},"id":"3572","type":"SaveTool"}],"root_ids":["3550"]},"title":"Bokeh Application","version":"2.4.3"}};
  const render_items = [{"docid":"104cdd4c-c6c2-4012-b05c-854ec2a8c186","root_ids":["3550"],"roots":{"3550":"567c4106-f6c4-41f7-bfb6-0aca5bdc7c42"}}];
  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);
  }
  if (root.Bokeh !== undefined) {
    embed_document(root);
  } else {
    let attempts = 0;
    const timer = setInterval(function(root) {
      if (root.Bokeh !== undefined) {
        clearInterval(timer);
        embed_document(root);
      } else {
        attempts++;
        if (attempts > 100) {
          clearInterval(timer);
          console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
        }
      }
    }, 10, root)
  }
})(window);</script>
```


Line Plot from Bokeh
:::
:::

So probably something in fixupBokehCells() does not correctly merge the two output display data produces

[prairie-guy]

@cderv Thanks for following this bug. I’m new to Quarto and have been very impressed! I’m an emacs guy that lives in a Microsoft Office World, so being able to use a mark up based language to generate docx, ppt, pdf is great. Keep up the great work!

One thing I haven’t been able to figure out is how to use Quarto with Bokeh (or Plotly) to render pdf or docx documents. Is this even possible as these are dynamic JS based packages?

Thanks

[cscheid]

One thing I haven’t been able to figure out is how to use Quarto with Bokeh (or Plotly) to render pdf or docx documents. Is this even possible as these are dynamic JS based packages?

It's not currently possible, exactly for the reason you point out. Some libraries know how to emit static output, but not all do. I believe Bokeh and Plotly don't.

We have plans to use an offscreen HTML renderer and take screenshots for the non-HTML formats, but the situation is more complicated than it might look at a glance.

[prairie-guy]

Thanks. Keep us posted. What you describe would be a great feature as those packages create great looking content. Probably many more use cases.

[cderv]

I believe Bokeh and Plotly don't.

Plotly as a way see https://plotly.com/python/static-image-export/ and example at #4225 (comment)

For bokeh, it is a bit more complex to export to image (https://docs.bokeh.org/en/2.4.1/docs/user_guide/export.html) as it requires Selenium

[cscheid]

Plotly as a way see https://plotly.com/python/static-image-export/ and example at #4225 (comment)

My point that they could/should be doing that by default and emitting an image in the notebook itself.

[cderv]

Oh I see. If they can do that this is indeed what we want !! I'll see if there are issues about this in there repo.

[cscheid]

WRT original report: I wish bokeh emitted better output in this case. They're emitting two separate cells, one with text/html and another with application/javascript:

   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <div class=\"bk-root\" id=\"ff6b5ddd-9a7b-49ff-850a-2d676060cc5c\" data-root-id=\"1083\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "  const docs_json = {\"d2a1b461-05 ... },\"view\":{\"id\":\"1121\"}},\"id\":\"1120\",\"type\":\"GlyphRenderer\"}],\"root_ids\":[\"1083\"]},\"title\":\"Bokeh Application\",\"version\":\"2.4.3\"}};\n",
       "  const render_items = [{\"docid\":\"d2a1b461-05ae-48dd-818e-bced8fb6ab08\",\"root_ids\":[\"1083\"],\"roots\":{\"1083\":\"ff6b5ddd-9a7b-49ff-850a-2d676060cc5c\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    let attempts = 0;\n",
       "    const timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },

We can add a workaround that tries to detect a cell with "application/vnd.bokehjs_exec.v0+json": "", application/javascript, and a previous cell that looks like it might have come from bokeh, and merge all of them. It's a dangerous move, though, because we can't know for sure that the previous cell was indeed generated by bokeh (since they don't actually mark it as such).

It's not clearly a bug because I bet they only test the rendered .ipynb result on jupyter lab or jupyter notebook. But it sure feels like an unfortunate way to generate results.

[cscheid]

They could, for example, add metadata to the cells so that they would be parseable as a "single bokeh figure". I'm somewhat surprised that this isn't already a jupyter feature. I wonder how jupyterbook handles this.