Wednesday, 16 September 2020

Can bokeh dynamically update the number of columns in a gridplot?

I have 2 bokeh rows. The top row contains a DataTable and a TextInput, both of which are able to stretch_width in order to fit the width of the browser. The bottom row contains a gridplot, which is able to stretch_width, but only does so by distorting the scale of the image. Ideally, I would like the gridplot to update the amount of columns displayed based on the size of the browser.

Consider the following example:

import pandas as pd

from bokeh.models.widgets import DataTable, TableColumn
from bokeh.models import ColumnDataSource, TextInput
from bokeh.plotting import figure, output_file, save
from bokeh.layouts import row, column, gridplot


def get_datatable():
    """this can stretch width without issue"""
    df = pd.DataFrame({'a': [0, 1, 2], 'b': [2, 3, 4]})
    source = ColumnDataSource(df)
    Columns = [TableColumn(field=i, title=i) for i in df.columns]
    data_table = DataTable(columns=Columns, source=source, sizing_mode='stretch_width', max_width=9999)
    return data_table

def get_text_input():
    """this can stretch width without issue"""
    return TextInput(value='Example', title='Title', sizing_mode="stretch_width", max_width=9999)

def get_gridplot():
    """
    this requires columns to be hard-coded
    stretch_width is an option, but only distorts the images if enabled
    """
    figs = []
    for _ in range(30):
        fig = figure(x_range=(0,10), y_range=(0,10))
        _ = fig.image_rgba(image=[], x=0, y=0)
        figs.append(fig)
    return gridplot(children=figs, ncols=2)
    
top_row = row([get_datatable(), get_text_input()], max_width=9999, sizing_mode='stretch_width')
bottom_row = row(get_gridplot())

col = column(top_row, bottom_row, sizing_mode="stretch_width")

output_file("example.html")
save(col)

My end goal is to have the gridplot automatically update the amount of columns based on the width of the browser. Is there a way to do this natively in bokeh? If not, is it possible to do this via a CustomJs javascript callback?



from Can bokeh dynamically update the number of columns in a gridplot?

No comments:

Post a Comment