HoverTool using CustomJSHover with linebreaks

[annesophie-cls]

Software versions

Python version : 3.11.0 | packaged by conda-forge | (main, Jan 14 2023, 12:27:40) [GCC 11.3.0]
IPython version : 8.14.0
Tornado version : 6.3.3
Bokeh version : 3.5.0
BokehJS static path : /work/scratch/env/tonneas/.conda/envs/py311_test/lib/python3.11/site-packages/bokeh/server/static
node.js version : (not installed)
npm version : (not installed)
Operating system : Linux-4.18.0-477.27.1.el8_8.x86_64-x86_64-with-glibc2.28

Browser name and version

No response

Jupyter notebook / Jupyter Lab version

No response

Expected behavior

I have a custom HoverTool and CustomJSHover doing some actions on the hover content. I would like to format the hover, for example, introduce some html <br> tags when a string is too long. But I don't see how to use {safe} option in the HoverTool definition to escape those html tags and display line breaks instead.

Observed behavior

Example code

Here is my HoverTool code :

from bokeh.plotting import figure, show
from bokeh.models import HoverTool, CustomJSHover
from bokeh.io import output_notebook
output_notebook()

p = figure(x_range=(0, 3), y_range=(0, 3),)

p.scatter(x=[0, 1, 2], y=[0, 1, 2], size=30)

custom_code = """
    var value;
    return value + ' veryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng striiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiing'
"""

hovertool = HoverTool(
    tooltips=[("xx", "@x{custom}")],
    formatters={"@x": CustomJSHover(code=custom_code)},
)

p.add_tools(hovertool)

show(p)

[bryevdv]

@annesophie-cls First off, please try things out with latest version 3.5 and report back, in case the issue has been fixed since 3.2.2. In any case there will be no more releases of 3.2.x so any fix will appear in future newer versions based off current development.

Additionally, please update the issue so that your example code is complete and self-contained, i.e. something that can just be copy and pasted and run directly without any modifications.

[annesophie-cls]

@bryevdv With the last version of bokeh the issue is fixed, the hover doesn't overflow the plot anymore. But I still have a questioning on how to format it. I updated the issue. Thank you very much

[bryevdv]

@annesophie-cls looking at the actual codepaths more closely, it does not appear that it is currently possible to combined {safe} and {custom} at the same time. TLDR; {safe} is itself considered a "formatter" and there can only be one formatter at at time.

In order to support this, new development would be needed. Some possibilities:

• allow multiple formatters to be specified/chained
• make "safe" be something other than a formatter (so it can be applied alongside formatters)
• add a safe option to CustomJSHover

The latter might be simpler and more straightforward in the short term, but the more general solutions seem more appealing from an API standpoint. cc @bokeh/dev

[mattpap]

I've been considering implementing the following for a while:

• allow multiple formatters to be specified/chained (equivalent to jinja's chains/pipelines), i.e. @{field}{custom | safe}, while preserving backwards compatibility
• allow CustomJSHover to return plain strings, HTML (via a plain object like {html: "..."}) or DOM nodes
• allow to configure automatic escaping per template (in HoverTool) and/or per formatter

so give or take what was proposed above.