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.

Feature Request: Bokeh support #202

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions