maartenbreddels
commented
1 year ago Bokeh rendering/loading is a bit odd, because there are two parts
- injecting the bokehjs library in the notebook using output_notebook()/display()
- rendering the bokeh plot, which expects 1 to have happened in the past, (i.e. the window.Bokeh object is expected to be available in the frontend).
In solara, 1 and 2 happen really fast, and the Bokeh object is not available yet.
However, if we poll for this, we can make this work:
from typing import Callable
import numpy as np
from bokeh.io import output_notebook
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure
from jupyter_bokeh import BokehModel
import solara
rng = np.random.default_rng()
@solara.component_vue('bokeh_loaded.vue')
def BokehLoaded(loaded: bool, on_loaded: Callable[[bool], None]):
pass
def PlotBokeh(fig: figure):
loaded = solara.use_reactive(False)
with solara.Column():
output_notebook(hide_banner=True)
BokehLoaded(loaded=loaded.value, on_loaded=loaded.set)
if loaded.value:
BokehModel.element(model=fig)
@solara.component
def Page():
data = {"x_values": [1, 2, 3, 4, 5], "y_values": rng.random(5)}
source = ColumnDataSource(data=data)
p = figure(title="Simple line example", x_axis_label="x", y_axis_label="y")
p.line(x="x_values", y="y_values", source=source, legend_label="Temp.", line_width=2)
def on_click():
print("new data")
data = {"x_values": [1, 2, 3, 4, 5], "y_values": rng.random(5)}
source.data = data
with solara.Card("Bokeh"):
solara.Button(label="Click me", on_click=on_click)
PlotBokeh(p)
bokeh_loaded.vue:
<template>
<div v-if="!loaded">Loading bokeh...</div>
</template>
<script>
module.exports = {
mounted() {
const check = () => {
if (window.Bokeh) {
this.loaded = true;
return;
}
setTimeout(check, 100);
}
check();
}
}
</script>
cc @Jhsmit who is also interested in this.
cc @philippjfr if the above is correct, I wouldn't be surprised if sometimes the rendering in notebook, lab or voila fails because step 1 takes too long.
theeldermillenial
Just wanted to request Bokeh integration. I realize it can be somewhat supported with the
displayfunctionality, but having integration would be nice to get analogous functionality to Altair and Plotly.https://bokeh.org/