bokeh layout for plot and widget arrangement
<p>I have a specific design in mind for my bokeh app. I am using <code>bokeh 0.12.3</code> and a bokeh server to keep everything in sync. Please, have a look at my mockup:</p>

<p><a href="https://i.stack.imgur.com/KPZCd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KPZCd.png" alt="enter image description here"></a></p>

<p>On the left-hand side, there is a static navigation bar, the right part of the view will consist of plots, that are manually added. The amount of plot columns on the right-hand side shall change w.r.t. window size. I am well aware of the bokeh layout documentation <a href="http://bokeh.pydata.org/en/latest/docs/user_guide/layout.html" rel="noreferrer">laying out plots and widgets</a>, but it's a bit more complicated. This is the layout I currently have:</p>

<pre><code>doc_layout = layout(children=[[column(radio_buttons,
                                      cbx_buttons,
                                      div,
                                      data_table,
                                      plot,
                                      button)]],
                    sizing_mode='scale_width')
curdoc().add_root(doc_layout)
</code></pre>

<p>In order to add new plots I use:</p>

<pre><code>doc_layout.children[-1].children.append(plot)
# appends plot to layout children [[column(..), plot]]
</code></pre>

<p>But the behavior is very strange, and not at all what I actually want to achieve. New plots are added on top of the column (menu panel) instead.</p>

<p>Here, a short example where you can try out to see what I mean:</p>

<pre><code>from bokeh.io import curdoc
from bokeh.plotting import figure
from bokeh.models.sources import ColumnDataSource
from bokeh.models.widgets import Button, DataTable, TableColumn
from bokeh.layouts import layout, widgetbox, column, row

WIDTH = 200
HEIGHT = 200

def add_plot():
    p = figure(width=WIDTH, height=HEIGHT, tools=[], toolbar_location=None)
    p.line([0, 1, 2, 3, 4, 5], [0, 1, 4, 9, 16, 25])
    doc_layout.children[-1].children.append(p)

src = ColumnDataSource(dict(x=[0, 1, 2, 3, 4, 5], y=[0, 1, 4, 9, 16, 25]))
t1 = DataTable(source=src, width=WIDTH, height=HEIGHT,
               columns=[TableColumn(field='x', title='x'),
                        TableColumn(field='y', title='y')])
b = Button(label='add plot')
b.on_click(add_plot)

doc_layout = layout([[widgetbox(b, t1)]], sizing_mode='scale_width')
curdoc().add_root(doc_layout)
</code></pre>

<p>I am not sure what is the best solution to overcome this problem. I've tried several things, from <code>layout()</code> with different sizing modes, <code>gridplot()</code>, <code>column()</code>/<code>row()</code> in different combinations. In my previous version, where the navigation menu was placed on the top of the page instead on the left-hand side, everything seemed to work:</p>

<pre><code>layout(children=[[widgetbox(radio_button, cbx_button),
                  widgetbox(data_table),
                  widgetbox(div),
                  widgetbox(button)],
                  [Spacer()]],
       sizing_mode='scale_width')
</code></pre>