DataTable requires custom scaling in Bokeh 3.1.0

In Bokeh 3, a DataTable occupies to much space. This causes vertical and horizontal scroll lines in the browser window, which did not happen in Bokeh 2.
I was able to work around this issue with InlineStyleSheet(css=":host {width:98%; height:98%;}")

Should I report this as an issue on GitHub, or is this desired behaviour?


"""Test plotting a grid in bokeh.

In bokeh 2.* this works as intended.

In bokeh 3.1.0, this page shows both vertical and horizontal scroll bars,
which is undesired.

This seems to be caused by the DataTable, which scales differently in
bokeh 3 than in 2. Setting the width and height scaling to 98% 'fixes' the
issue in my case.

I tested it in the context of a grid, but it happens even if only the DataTable
is added to curdoc().
"""

import numpy as np
from bokeh.layouts import gridplot
from bokeh.models import ColumnDataSource, DataTable, TableColumn
from bokeh.plotting import figure
from bokeh.io import curdoc
from bokeh.models import InlineStyleSheet

x = np.random.random(size=2000) * 1000
y = np.random.normal(size=2000) * 2 + 5
source = ColumnDataSource(dict(x=x, y=y))

def make_plot(mapper_type, palette):
    p = figure(x_range=(1, 1000),
               title=f"{palette} with {mapper_type} mapping",
               x_axis_type=mapper_type,
               output_backend="webgl",
               )
    p.scatter('x', 'y', alpha=0.8, source=source)
    p.yaxis.axis_label = 'y-axis Label [unit]'
    return p

# Issue can be fixed with this CSS
stylesheet_data_table = InlineStyleSheet(css=":host {width:98%; height:98%;}")

data_table = DataTable(
    source=source,
    columns=[TableColumn(field=field, title=title) for field, title in
             zip(["x", "y"], ["x", "y"])],
    stylesheets=[stylesheet_data_table],  # toggle, to see the difference
    )

p1 = make_plot("linear", "Viridis256")
p2 = make_plot("log", "Viridis256")
p3 = make_plot("linear", "Viridis6")
p4 = make_plot("log", "Viridis6")

grid = gridplot([
    [p1, p2],
    # [p3, p4],  # Option a): Does not cause scroll bars
    [p3, data_table],  # Option b): Causes undesired scroll bars
    ],
    sizing_mode='stretch_both',
    )

curdoc().add_root(grid)
# curdoc().add_root(data_table)  # This alone causes the undesired scroll bars
curdoc().title = "Grid Test"

This is due to intrinsic widgets’ margins, that are not taken into account at the top-level when using expanding sizing modes. This is a more idiomatic workaround for now:

stylesheet_data_table = InlineStyleSheet(css=":host {margin: 0;}")

Thanks for the answer. Should I post this as a GitHub issue?

Yes, please report a bug.

Done, see [BUG] DataTable requires custom scaling in Bokeh 3.1.0 · Issue #12956 · bokeh/bokeh · GitHub

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.