Bokeh nested column layout

问题

I want to create a nested layout in bokeh with 2 columns. The left column has 2 plots, one above the other. The right column has a number of widgets, all stacked ontop of each other. I also want everything to autofit within the browser window:

I currently have something like this:

from bokeh.io import curdoc
from bokeh.layouts import row, column, widgetbox, layout
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Slider, TextInput, Button, CheckboxGroup, RadioButtonGroup
from bokeh.plotting import figure

# Set up data
source = ColumnDataSource(data=dict(time=[1,2,3], acc=[1,2,3]))
source_raw = ColumnDataSource(data=dict(time=[1,2,3], acc=[1,2,3]))

## Top
plot_orig = figure(tools="crosshair,pan,reset,save,wheel_zoom")
line_orig = plot_orig.line('time', 'acc', source=source, line_width=1, line_alpha=1)

## Bottom
plot_new = figure(tools="crosshair,pan,reset,save,wheel_zoom")
line_new = plot_new.line('time', 'acc', source=source, line_width=1, line_alpha=1)

# Set up widgets
sub = TextInput(value="1", title="Option #:")
trial = TextInput(value="1", title="Option #:")

signal_type = RadioButtonGroup(labels=["Raw", "Filtered", "Both"], active=1)
flip_signal_active = []
flip_signal_btn = CheckboxGroup(labels=["Flip signal"], active=flip_signal_active)
filter_order = Slider(title="Filter order", value=2, start=2, end=20, step=1)
filter_threshold = Slider(title="Filter threshold (Hz)", value=10, start=1, end=20, step=1)
reset_options_btn = Button(label="Set Default Options", button_type="danger")

value = Slider(title="Minimum value", value=0.6, start=0, end=1, step=0.01)
distance = Slider(title="Minimum distance", value=30, start=0, end=100, step=0.01)
deletions = TextInput(value="", title="Peaks to delete (comma separated):")
reset_params_btn = Button(label="Set Default Parameters", button_type="danger")
save_params_btn = Button(label="Save Parameters", button_type="success")

# Set up layouts and add to document   
sub_trial = widgetbox(sub, trial)
options = widgetbox(signal_type, flip_signal_btn, filter_order, filter_threshold, reset_options_btn)
parameters = widgetbox(value, distance, deletions, reset_params_btn, save_params_btn)

new_layout = layout([
  column([plot_orig, plot_new], sizing_mode='stretch_both'),
  column([sub_trial, options, parameters], sizing_mode='stretch_both'),
], sizing_mode='stretch_both')

curdoc().add_root(new_layout)

That gets me close, as the correct things are stacked on top of each other and the resizing seems to work However, the plots and the widget stack should be in separate columns:

I tried adding a row to split the plots from the widget stack, but everything ends up tiny:

new_layout = layout([row(
  column([plot_orig, plot_new], sizing_mode='stretch_both'),
  column([sub_trial, options, parameters], sizing_mode='stretch_both'),
)], sizing_mode='stretch_both')

回答1:

I don't know if there is a way to make the code below work nicely with sizing modes

But if you can afford not to use them, set the figures plot_width and plot_height (e.g. 700x275) and use a gridplot layout:

grid = gridplot([[column([plot_orig, plot_new]),widgetbox(sub_trial.children+options.children+parameters.children)]])

curdoc().add_root(grid)

This is the same as column(row(column(),column())) except that you can choose if you want merged toolbars or not

来源：https://stackoverflow.com/questions/48594862/bokeh-nested-column-layout

标签

python

graph

data-visualization

bokeh