Add support for side panel layouts and SizeBar annotation

[mattpap]

This is a very preliminary implementation of generic layouts in Plot's side and center panels. This will also allow to support layouts of annotations (Legend, ColorBar). This is a prerequisite for resolving issue #2603. This will eventually allow to simplify ColorBar's implementation.

Screencast.from.2025-05-14.15-40-57.webm

Code

import numpy as np
from typing import Any

from bokeh.layouts import column
from bokeh.plotting import figure, show

TOOLS="hover,crosshair,pan,wheel_zoom,zoom_in,zoom_out,box_zoom,undo,redo,reset,tap,save,box_select,poly_select,lasso_select,examine,fullscreen,help"

def f(b: int, **args: Any):
    N = 4000
    x = np.random.random(size=N) * 100
    y = np.random.random(size=N) * 100
    radii = np.random.random(size=N) * 1.5
    colors = np.array([(r, g, b) for r, g in zip(50+2*x, 30+2*y)], dtype=np.uint8)
    p = figure(**args)
    p.circle(x, y, radius=radii, fill_color=colors, fill_alpha=0.6, line_color=None)
    return p

p = f(b=50, tools=TOOLS)

p1 = f(b=125, width=200, height=200, tools="pan,wheel_zoom,box_select,hover", toolbar_location="above")
p2 = f(b=250, width=200, height=200, tools="pan,wheel_zoom,box_select,hover", toolbar_location="above")

p.add_layout(column([p1, p2]), "right")

show(p)

• fixes Allow to place layouts in Plot's side and center panels #14323
• fixes Add a SizeBar guide to label relative scatter glyph sizes #2603

[mattpap]

TODO:

• actually resolve type errors in plot_canvas.ts
• implement has_size_changed() in SizeBar (otherwise the component may overflow plot's layout temporarily)

[droumis]

Is this nearly ready for review?

[mattpap]

@droumis, it's pretty close. I will make it reviewable by Monday.

[philippjfr]

The implementation looks fine to me. Main comment I have is about the missing documentation.

[mattpap]

This is tentatively ready. I'm still polishing some rough edges though.

[Azaya89]

I pushed some doc improvements.

I also tried running the example in examples/basic/annotations/size_bar.py but I got a blank canvas with this error in the console:

Error: could not resolve type 'SizeBar', which could be due to a widget or a custom model not being registered before first usage

Dependencies

Python version        :  3.13.5 | packaged by conda-forge | (main, Jun 16 2025, 08:24:05) [Clang 18.1.8 ]
IPython version       :  9.4.0
Tornado version       :  6.5.1
NumPy version         :  2.3.2
Bokeh version         :  3.8.0.dev3+10.ga47e3ac6
BokehJS static path   :  /Users/*/bokeh/src/bokeh/server/static
node.js version       :  v20.19.4
npm version           :  11.5.2
jupyter_bokeh version :  (not installed)
Operating system      :  macOS-15.0-arm64-arm-64bit-Mach-O

[mattpap]

Error: could not resolve type 'SizeBar', which could be due to a widget or a custom model not being registered before first usage

Either you didn't build bokehjs correctly or incorrect version of bokehjs is being used by the example (e.g. you will need to run examples under devtools with caching disabled). For now I can refer you to https://docs.bokeh.org/en/latest/docs/dev_guide/setup.html, be we can also set up a session to go through bokeh's dev setup.

[Azaya89]

Either you didn't build bokehjs correctly or incorrect version of bokehjs is being used by the example (e.g. you will need to run examples under devtools with caching disabled). For now I can refer you to https://docs.bokeh.org/en/latest/docs/dev_guide/setup.html, be we can also set up a session to go through bokeh's dev setup.

I used a fresh set-up before running the example and I've tried disabling cache in the browser but still a blank page. I'm open to setting up a session to go through my setup. Maybe I'm missing something...

[hoxbro]

I have left some comments.

---

I have a big concern, which is that the sizebar is only valid in the initial rendering; if I zoom in/out, the size does not update to match the actual size in the plot.

I'm also not sure how it would work when you set a radius_dimension=min on the circle glyph, and the axes are different scales. Though I haven't given it a go yet.

A smaller concern is, I actually want to have a border around the size bar, but I don't think it is a blocker.

---

Some bugs I also discovered when playing around with it:

1. If you zoom in on the webpage, the sizebar disappears:

Screencast.From.2025-08-11.11-44-29.mp4

2. It is not shown when saving the plot:

[mattpap]

I have a big concern, which is that the sizebar is only valid in the initial rendering; if I zoom in/out, the size does not update to match the actual size in the plot.

I'm working on this, though a solution causes other issues.

[hoxbro]

They are, or maybe I don't understand this point.

I'm talking about these lines, which, as I read them, will not respect the user input, e.g., if bounds[0] is smaller than the smallest radius, likewise if bounds[1] is larger than the largest radius.

bokeh/bokehjs/src/lib/models/annotations/size_bar.ts

Lines 301 to 302 in 7764ae1

	const r_min = Math.max(uniforms.min(glyph_view.radius), bounds[0])
	const r_max = Math.min(uniforms.max(glyph_view.radius), bounds[1])

Use e.g. (10, float("+inf")) in Python or [10, Infinity] in JS/TS. "auto" keyword expands to [-Infinity, Infinity].

Not the most elegant way to do it, but OK.

Saving the image still does not work, [...], and we should open an issue for now.

Can you open an issue for this?

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.