cderv
commented
11 months ago 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)#| 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
<details>
<summary>Very long intermediate md</summary>
````markdown
---
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}
<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}
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}
<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}
<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>::: :::
</details>
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
````markdown
::: {#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}
<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)
<details>
<summary>Intermediate md</summary>
````markdown
---
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}
<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 ::: :::
</details>
So probably something in `fixupBokehCells()` does not correctly merge the two output display data produces 
prairie-guy
cscheid
y9c
It seems this previous issue is not fixed
2107
Same problem. Downloaded repo and installed most current version
1.4.529with./configure.shNot sure why Jupyter is not installed. (Installed with both mamba and conda). It does shows up in correct env:
Originally posted by @prairie-guy in https://github.com/quarto-dev/quarto-cli/issues/2107#issuecomment-1862166865