Bokeh server : Customize row ratio

Question

I am using Bokeh to vizualize scientific data for a while and I fail to customize my layout as I wish.

from bokeh.plotting import figure
from bokeh.io import show
from bokeh.layouts import row
from bokeh.models.widgets import Button

tools_to_show = 'hover, box_zoom, save, reset, pan'
p = figure(tools=tools_to_show, output_backend = "webgl")
p.line([1, 2, 3, 4], [9, 5, 7, 6])

b_valid = Button(label="valid")

my_plot = row(p, b_valid, sizing_mode="stretch_both")

show(my_plot)

I have a plot area and a controls area. The controls area should be smaller, maybe 1/3 of available width to let the plot with a bigger area (2/3 of available width).

I'm using sizing_mode = "stretch_both" to be sure to use all available space in screen.

I need to keep using the bokeh server (bokeh serve myapp.py) to get python callback working, so the embbeded solution suggested here is not working for me.

Maybe there is a way with serving directory with bokeh command because there is a template mechanism, but I can't figure how to get seperate div for plot and controls.

Have you any (simple) idea ?

Edit : it seems that it's not a feature currently available on bokeh. A promising solution is to be able to place components embedded in template using bokeh server : amilestone is scheduled

Answer 1

I would say that we are backing away from the built-in layout system for more than very simple things. PR #7708 was just merged an will be in the upcoming 0.13.0 release. When 0.13.0 is available, you can embed individual document roots separately in temlates, e.g. if you define five plots in a Bokeh server app:

curdoc().add_root(p0)
curdoc().add_root(p1)
curdoc().add_root(p2)
curdoc().add_root(p3)
curdoc().add_root(p4)

They can all be placed in responsive Bootstrap layouts:

<div class="row">
  <div class="col-sm-8">
    {{ embed(doc.roots[0]) }}
    <br>
  </div>
  <div class="col-sm-4">
    {{ embed(doc.roots[1]) }}
    <br>
  </div>
</div>

<div class="row">
  <div class="col-sm-4">
    {{ embed(doc.roots[2]) }}
    <br>
  </div>
  <div class="col-sm-4">
    {{ embed(doc.roots[3]) }}
    <br>
  </div>
  <div class="col-sm-4">
    {{ embed(doc.roots[4]) }}
    <br>
  </div>
</div>