Bokeh plot uses more space than is available

[huaracheguarache]

ALL software version info

Bokeh 3.1.1
Panel 1.0.2

Description of expected behavior and the observed behavior

Expected behaviour: Bokeh plot uses available space.

Observed behaviour: Bokeh plot uses more space than is available causing the plot tools to partially disappear behind the red spacer on the right. Tools reappear when plot dynamically updates when panning to non-negative y-values.

Complete, minimal, self-contained example code that reproduces the issue

import numpy as np
from bokeh.plotting import figure
import panel as pn

plot = figure()
plot.sizing_mode = "stretch_both"

x = np.arange(-3, 3, 1)
y = x

plot.line(x, y)

grid = pn.GridSpec(sizing_mode="stretch_both")
grid[0, 0:4] = pn.pane.Bokeh(plot)
grid[0, 4] = pn.Spacer(styles={'background': '#cc241d'})

grid.servable()

Screenshots or screencasts of the bug in action

Screencast.from.2023-05-23.21-15-26.webm

[philippjfr]

Thanks @huaracheguarache. We could definitely apply a fix here but this is probably better addressed in Bokeh itself. @mattpap if you inspect the DOM elements you can see that the <canvas> element overflows the bk-Canvas container:

[philippjfr]

For now I'd just suggest adding some margin to the Bokeh plot.

[huaracheguarache]

I've also discussed this issue on the Panel discourse forum, and I was able to produce an example where the Bokeh plot doesn't fully expand into the space it has available. I added a button that generated random data to plot with a scatterplot, and after generating new data a couple of times the plot dynamically updates and expands to occupy the entire available space. I believe this happens because the y-axis ticks lose a decimal in one of the updates causing the size of the figure to change.

Screencast.from.2023-05-23.15-56-05.webm

from numpy.random import default_rng
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure
import panel as pn

rng = default_rng()

def calculate_coordinates():
   x_coordinates = rng.standard_normal(10)
   y_coordinates = rng.standard_normal(10)

   return {"x": x_coordinates, "y": y_coordinates}

data = calculate_coordinates()
source = ColumnDataSource(data)

def refresh_data(event):
   new_data = calculate_coordinates()
   new_source = ColumnDataSource(new_data)
   source.data.update(new_source.data)

plot = figure()
plot.sizing_mode = "stretch_both"

plot.circle(x="x", y="y", source=source)

button = pn.widgets.Button(name="Replot", button_type="primary", sizing_mode="stretch_both")
button.on_click(refresh_data)

grid = pn.GridSpec(sizing_mode="stretch_both")
grid[0, 0:3] = pn.pane.Bokeh(plot)
grid[0, 3] = button

grid.servable()

The following workaround was suggested, and it works:

grid = pn.GridSpec(sizing_mode="stretch_both")
def on_load():
    grid[0, 0:3] = pn.pane.Bokeh(plot)
    grid[0, 3] = button
pn.state.onload(on_load)

[mattpap]

This is another issue with resize observer. The layout is initially computed and then incorrectly readjusted. This can be "fixed" by recomputing the layout (Bokeh.index[grid_id].compute_layout() or by resizing the window, etc.).