Skip to content

Unexpected initial layout with DataTable and layout() #5131

@ababino

Description

@ababino

Dear all,

thanks for this marvelous library! I have written a small dashboard to follow some processes. The dashboard consists of three tables that I render with the layout() function. The problem is that the initial layout has the wrong width making the tables overlap each other.

initial_layout
After moving the browser's window (with the mouse I mean) the elements re-accommodate and they layout as I expected.

final_layout
In order to reproduce the behavior I saved the code below and I run bokeh serve test.py

test.py file:

from bokeh.layouts import widgetbox, layout
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn, NumberFormatter
from bokeh.plotting import curdoc
import pandas as pd

df = pd.DataFrame({'Host': ['foo', 'foo', 'bar', 'bar', 'foo', 'foo', 'bar', 'bar'],
                   'JobRuntime': [215, 351, 756, 654, 684, 654, 654, 658],
                   'Exitval': [0, 0, 0, 255, 0, 255, 0, 0]})
source = ColumnDataSource(df)
columns = [
        TableColumn(field="Host", title="Host"),
        TableColumn(field="JobRuntime", title="JobRuntime",
                    formatter=NumberFormatter(format='00:00:00')),
        TableColumn(field="Exitval", title="Exitval"),
    ]
data_table = DataTable(source=source, columns=columns, fit_columns=True,
                       width=400, height=400)

counts = df.pivot_table(columns='Host', index='Exitval', values='JobRuntime',
                        aggfunc=len, margins=True)
counts = counts.reset_index()
counts.columns = counts.columns.map(str)
columns2 = [TableColumn(field=val, title=val) for val in counts.columns]
counts = ColumnDataSource(counts)
data_table2 = DataTable(source=counts, columns=columns2, fit_columns=True,
                        width=800, height=200)

means = df.pivot_table(columns='Host', index='Exitval', values='JobRuntime',
                       margins=True)
means = means.reset_index()
means.columns = means.columns.map(str)
columns3 = [TableColumn(field='Exitval', title='ExitVal')]
columns3 += [TableColumn(field=val, title=val, formatter=NumberFormatter(format='00:00:00')) for val in means.columns[1:]]
means = ColumnDataSource(means)
data_table3 = DataTable(source=means, columns=columns3, fit_columns=True,
                        width=800, height=200)

curdoc().add_root(layout([[widgetbox(data_table), widgetbox(data_table2, data_table3)]], width=3000, sizing_mode='stretch_both'))

The output of bokeh info is
Python version : 2.7.11 |Anaconda 4.0.0 (64-bit)| (default, Dec 6 2015, 18:08:32)
IPython version : 4.1.2
Bokeh version : 0.12.2
BokehJS static path : /home/andres/anaconda2/lib/python2.7/site-packages/bokeh/server/static

Thanks again

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions