How to achieve a responsive dashboard layout?

问题

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?

回答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:

来源：https://stackoverflow.com/questions/56158379/how-to-achieve-a-responsive-dashboard-layout