A minimal example is below. My hope was to do this with a json_item embedding. Essentially, precompute the figure in Python, obtain the JSON with
Bokeh.embed.embed_item() on the JSON information. This pretty much works except for the fact that #id is not found, because it is contained in a shadowroot. How could I solve this?
from bokeh import events from bokeh.embed import json_item from bokeh.layouts import layout from bokeh.models import Button, CustomJS from bokeh.models import Div from bokeh.plotting import figure, show import json p = figure() p.line(x=[0, 1], y=[0, 1]) div = Div(text='', name='mydiv') button = Button(label='Click') item_text = json.dumps(json_item(p, "myplot")) button.js_on_event(events.ButtonClick, CustomJS(code=f""" let div = Bokeh.documents.get_model_by_name('mydiv'); div.text = '<div id="myplot"></div>'; let item = JSON.parse(data); // Raises error "Error rendering Bokeh model: could not find #myplot HTML tag" Bokeh.embed.embed_item(item); """, args=dict(data=item_text))) show(layout([button, div]))
Edit: I now realized that I can pass a html-DOM-reference to
embed_item, as in
Bokeh.embed.embed_item(item, dom). Still, it would be nice to realize this within the Bokeh components without having to figure out the dom-tree to a component, which can be quite brittle and complicated.