Widget placement in Flask HTML template

Hi all,
After a few days of frustrating search, I’m stuck on a problem:
I want to put interactive bokeh widgets in different parts of a HTML template
My whole problem resolves around the fact that I want to have a button in a nice looking HTML+CSS taskbar at the top of my app, and having it fetch some data through Python, and then changing the sources of my (eventually many) plots underneath for a local server app with multiple users

I have tried a few solutions, which almost worked but all had major drawbacks

I tried putting the button and the table in their correct place using

app_layout = layout([
    column(button, css_classes=['taskbar-button']),
    column(data_table, css_classes=['table-container'])

And using the same classes in the placeholder divs of my HTML template

  • Pure bokeh: Unable to call Python callback. JS callback is not satisfactory because I will have to run some calculation in Python in the future, and I’m not a huge fan of passing all the data in one JSON and then somehow distributing it to 10 plots, but button in the right place

My ideal solution would allow me to put my widgets where I want in my HTML template, and being able to have pure Python callbacks to do some

def button_callback():
    table.source.data = get_table_data()
    plot1.source.data = get_plot_history()

I am really not sure which way to go about this, and would really appreciate some help if someone has any ideas!

PS: I am really new to servers, so I might have missed something common/obvious :grin:

Thanks in advance,

It sounds like you want to use components since that API is specifically intended for putting different Bokeh objects in different parts of a template.

I tried this at some point, but can you still have Python callbacks that interact from one to another through Python?
I.e. bokeh button does some Python stuff and then updates the sources via Python

No, components is only for standalone HTML (non-server) content. If you are using a Bokeh server application, here is an example that shows separate templating of individual objects:

More or less: give each object a name value that matches a place in the template, then call add_root on each object individually.

1 Like

Yep, that works! :grin:

1 Like