How to achieve a responsive dashboard layout? - bokeh

Question

I am working on a dashboard with a responsive map in the center that should take most available space (stretch_both) and two performance plots on either side with fixed width and a stretching height.
Below the map is a slider that should have default height but stretch to the width of the map. Finally there is a button that should take a corner space and be of fixed size to avoid looking awkward.
Here is the design:
Here is a minimal not working example of a directory app:
from bokeh.models import Button, Slider
from bokeh.plotting import figure, curdoc
from bokeh.tile_providers import CARTODBPOSITRON
from bokeh.layouts import column, row, Spacer
map = figure(x_range=(2479280, 2497644), y_range=(5882088, 5901322))
map.add_tile(CARTODBPOSITRON)
plot = figure(plot_width=100)
plot.circle(x=[1, 2, 3], y=[5, 5, 6])
button = Button(label='click me', width=100)
slider = Slider(start=0, end=100, value=0, step=1, title='value')
col1 = column(children=[plot, plot, button])
col2 = column(children=[map, slider], sizing_mode='stretch_both')
col3 = column(children=[plot, plot, Spacer()])
layout = row(children=[col1, col2, col3])
curdoc().add_root(layout)
And here is what I get when I start the app:
Strangely, two of the four plots are not even visible and the columns don't have the same height.
What can I do to get the layout to look more like the design?

Answer 1

The reason the plots are not showing is that, in general, Bokeh objects such as plots cannot be re-used more than once in a layout. For a layout like this, the grid function is preferable:
from bokeh.models import Button, Slider
from bokeh.plotting import figure, curdoc
from bokeh.tile_providers import CARTODBPOSITRON
from bokeh.layouts import grid, column
map = figure(x_range=(2479280, 2497644), y_range=(5882088, 5901322), sizing_mode="stretch_both")
map.add_tile(CARTODBPOSITRON)
p1 = figure(plot_width=100)
p1.circle(x=[1, 2, 3], y=[5, 5, 6])
p2 = figure(plot_width=100)
p2.circle(x=[1, 2, 3], y=[5, 5, 6])
p3 = figure(plot_width=100)
p3.circle(x=[1, 2, 3], y=[5, 5, 6])
p4 = figure(plot_width=100)
p4.circle(x=[1, 2, 3], y=[5, 5, 6])
button = Button(label='click me', width=100, sizing_mode="fixed")
slider = Slider(start=0, end=100, value=0, step=1, title='value')
layout = grid([
[column(p1, p2, sizing_mode="stretch_height"), map, column(p3, p4, sizing_mode="stretch_height")],
[button, slider, None]
], sizing_mode='stretch_width')
curdoc().add_root(layout)
which yields: