Fix positioning of DOM rendered Legend annotations

[mattpap]

This PR makes ToolbarPanel and Title participate in CSS layout. This way all side panel components can be positioned consistently. I attempted to make a minimal change that fixes the issue and can be back-ported. From here we can pretty much get rid of computed layout in side panels.

fixes #14451

[mattpap]

This is a bit much for a backportable PR, but given how badly positioning was broken in 3.7, then we don't have much choice in the matter.

[hoxbro]

I have two examples that indicate things are still broken.

---

Example 1 - missing toolbar after adding a line [works on Branch-3.8 (a6f66f5), broken with this PR (e8ce81d)]

Code

from bokeh.plotting import figure, curdoc
from bokeh.models import Button
from bokeh.layouts import column

x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

p = figure()

def add_line(count=[0]):
    p.line(x, [val + count[0] for val in y])
    count[0] += 1

add_button = Button(label="Add Line", button_type="success")
add_button.on_click(add_line)

# Layout and add to document
curdoc().add_root(column(p, add_button))

Running from this PR:

Screencast.From.2025-04-29.18-55-09.mp4

---

Example 2 - plot and legend split from each other [works on Branch-3.6 (62ace62), broken with this PR (e8ce81d), Branch-3.7 (119bb23), Branch-3.8 (a6f66f5)]

Code

from bokeh.plotting import figure, curdoc
from bokeh.models import Button, Legend
from bokeh.layouts import column

x = [1, 2, 3, 4, 5]
y1 = [6, 7, 2, 4, 5]
y2 = [1, 4, 3, 2, 6]

p = figure()
line1 = p.line(x, y1, color="red")
line2 = p.line(x, y2, color="blue")
legend = Legend(
    items=[("Line 1", [line1]), ("Line 2", [line2])],
)
p.add_layout(legend, "right")


def swap_lines():
    idx1 = p.renderers.index(line1)
    idx2 = p.renderers.index(line2)
    p.renderers[idx1], p.renderers[idx2] = p.renderers[idx2], p.renderers[idx1]

    legend.items = [
        ("Line 1", [line1]) if p.renderers[0] is line1 else ("Line 1", [line2]),
        ("Line 2", [line2]) if p.renderers[1] is line2 else ("Line 2", [line1]),
    ]


swap_button = Button(label="Swap Line Order", button_type="primary")
swap_button.on_click(swap_lines)

curdoc().add_root(column(p, swap_button))

Running from this PR:

Screencast.From.2025-04-29.18-57-10.mp4

Running from branch-3.8:

Screencast.From.2025-04-29.18-59-18.mp4

[mattpap]

@hoxbro, I fixed all problems found so far.

[hoxbro]

I think what @maximlt is seeing is adding a legend two times. Previously, it would attach to the right; now, it attaches to the center.

Branch	adding center first	adding right first
branch-3.6
branch-3.8
mattpap/14451_Legend_position

from bokeh.models import Legend, LegendItem
from bokeh.plotting import figure, curdoc

p = figure(frame_width=300, frame_height=300)
r1 = p.line([1, 2, 3], [4, 5, 6])

legend = Legend(items=[LegendItem(label="Line 1", renderers=[r1])])
legend.location = (0, 0)
p.add_layout(legend, "right")
p.add_layout(legend, "center")

curdoc().add_root(p)

[mattpap]

Previously, it would attach to the right; now, it attaches to the center.

To me, this is a better behavior, though perhaps coincidental. The right behavior is to have the legend rendered twice, but that's currently limited by a single view storage for all panels of a plot. This will be resolved in my ongoing work to support generic layouts in plot's panels.

Currently Plot.add_layout() simply pushes to the chosen panel, disregarding previously pushed instances. We can settle on whatever behavior we choose. We could remove existing instances, sealing the current behavior, or ignore new instances, restoring the old behavior, or throw an error if trying to repush an instance.

[mattpap]

Oh, it always ends up in the center panel. Well, that's definitely a bug.

[mattpap]

@hoxbro, @maximlt, I made Plot.add_layout() move an object into the new location. This still can be messed up when using left, right, etc. properties manually. This will be fixed later.

[hoxbro]

I have left some comments, but it seems to have solved all the cases I could think of.

(Last set of changes also fixed @maximlt MRE)

[hoxbro]

Is the extra space below deliberate?

[mattpap]

You mean at the bottom of the image? It's just generous "viewport" area. Could be tightened though. Images are captured by this viewport, which is either manually or automatically computed.

[hoxbro]

Everything is OK with me as long as it is not the element that causes it.

[mattpap]

Also, if test's output exceeds the prescribed viewport size, then the test will fail. The default is to give 50 px margin on both sides. In this particular case, the viewport has to be manually computed, because the test uses frame_width and frame_height properties, which aren't supported in the automated method.

[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.