Widget placement in Flask HTML template

[thomktz]

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

• Flask+Bokeh: Unable to have the button in the HTML taskbar, but callbacks work great
  
  

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

Thanks in advance,
Best,
TK

[Bryan]

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.

[thomktz]

Thanks!
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

[Bryan]

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:

bokeh/examples/server/app/faces at branch-3.2 · bokeh/bokeh

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

[thomktz]

Yep, that works!