Add support for formatters to ValueRef

[mattpap]

Example (side-by-side comparison):

import numpy as np

from bokeh.models import HoverTool, Styles
from bokeh.models.dom import Div, Index, ValueRef
from bokeh.palettes import Spectral11
from bokeh.plotting import figure, show

N = 1000
x = np.random.random(size=N) * 100
y = np.random.random(size=N) * 100
radii = np.random.random(size=N) * 1.5
colors = np.random.choice(Spectral11, size=N)

p = figure(
    title="Demonstrates hover tool with advanced and regular tooltip formatting side-by-side",
    tools="pan,wheel_zoom,box_select,crosshair",
)

p.circle(x, y, radius=radii, fill_color=colors, fill_alpha=0.6, line_color=None)

grid = Div(
    style=Styles(
        display="grid",
        grid_template_columns="auto auto",
        column_gap="10px",
    ),
    children=[
        "index:",  Div(children=["#", Index()]),
        "(x, y):", Div(children=["(", ValueRef(field="x"), ", ", ValueRef(field="y"), ")"]),
        "radius:", ValueRef(field="radius", format="%.2f", formatter="printf"),
    ],
)

hover_advanced = HoverTool(
    description="Advanced hover",
    tooltips=grid,
    attachment="left",
)
p.add_tools(hover_advanced)

hover_regular = HoverTool(
    description="Regular hover",
    tooltips=[
        ("index", "$index"),
        ("(x,y)", "(@x, @y)"),
        ("radius", "@radius{%.2f}"),
    ],
    formatters={
        "@radius": "printf",
    },
    attachment="right",

)
p.add_tools(hover_regular)

show(p)

fixes #13599

[mattpap]

When working on this I noticed that the template case only renders tooltip entry for the last selected index, not all of the selected indices as in the default (tuple) case.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.59%. Comparing base (e61219b) to head (b5ba116).
Report is 70 commits behind head on branch-3.5.

❗ Current head b5ba116 differs from pull request most recent head 057f06e

Please upload reports for the commit 057f06e to get more accurate results.

Additional details and impacted files

@@              Coverage Diff               @@
##           branch-3.5   #13650      +/-   ##
==============================================
+ Coverage       91.57%   92.59%   +1.02%     
==============================================
  Files             326      325       -1     
  Lines           20737    20733       -4     
==============================================
+ Hits            18990    19198     +208     
+ Misses           1747     1535     -212     

[mattpap]

This is tentatively ready. Some more unit testing will follow.

[hoxbro]

Just thinking out loud here, having a convenience class like this could make sense to me.

        "(x, y):", Div(children=[ValueRefs("({x}, {y})", fields=["x", "y"])]),

or

        "(x, y):", ValueRefs("({x}, {y})", fields=["x", "y"]),

Likely out-of-scope for this PR.

[mattpap]

ValueRef is a low-level API meant for having full control over formatting, instead of relying on an ad-hoc syntax. However, most of the time users will choose the syntax out of convenience. Thus I don't see a need for additional convenience here. If only PEP 501 (general purpose string interpolation) wasn't deferred, then this could be made really convenient while retaining complete control.

[hoxbro]

Maybe add a style to this Div.

I feel like this example shows the API but not why to use it, which is a bit sad.

[mattpap]

This is also a bit much. I will see if I can simplify this with HTML() model.

[mattpap]

The "improved" example is still quite much, but is shows styling and better shows how to reference things.

[mattpap]

With some styling:

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