Как добиться адаптивного макета панели управления?

Question

Я работаю над приборной панелью с отзывчивой картой в центре, которая должна занимать наибольшее доступное пространство (stretch_both) и два графика производительности с обеих сторон с фиксированной шириной и высотой растяжения.

Ниже карты находится ползунок, который должен иметь высоту по умолчанию, но растягиваться на ширину карты. Наконец, есть кнопка, которая должна занимать угол и быть фиксированного размера, чтобы не выглядеть неловко.

Вот дизайн:

Вот минимальный не работающий пример приложения каталога:

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)

И вот что я получаю, когда запускаю приложение:

Как ни странно, два из четырех графиков даже не видны, а столбцы имеют разную высоту.

Что можно сделать, чтобы макет больше походил на дизайн?

Answer 1

Причина, по которой графики не отображаются, заключается в том, что в общем объекты типа Bokeh, такие как графики, не могут быть повторно использованы в макете более одного раза. Для такого макета предпочтительна функция grid:

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)

, что дает: