fix: Dynamic updating a selector HoverTool (#6593)

hoxbro · web-flow · commit 9d2fdcb39c2a · 2025-06-10T12:23:46.000+02:00
diff --git a/doc/user_guide/index.rst b/doc/user_guide/index.rst
@@ -66,6 +66,10 @@ concepts in HoloViews:
 `Working with large data <Large_Data.html>`_
  Leverage Datashader to interactively explore millions or billions of datapoints.
 
+`Interactive Hover for Big Data <Interactive_Hover_for_Big_Data.html>`_
+ Use the ``selector`` with Datashader to enable fast, interactive hover tooltips that
+ reveal individual data points without sacrificing aggregation.
+
 `Working with Streaming Data <Streaming_Data.html>`_
  Demonstrates how to leverage the streamz library with HoloViews to work with streaming datasets.
 
@@ -142,6 +146,7 @@ These guides provide detail about specific additional features in HoloViews:
     Data Processing Pipelines <Data_Pipelines>
     Creating interactive network graphs <Network_Graphs>
     Working with large data <Large_Data>
+    Interactive Hover for Big Data <Interactive_Hover_for_Big_Data>
     Working with streaming data <Streaming_Data>
     Creating interactive dashboards <Dashboards>
     Customizing Plots <Customizing_Plots>
diff --git a/examples/user_guide/Interactive_Hover_for_Big_Data.ipynb b/examples/user_guide/Interactive_Hover_for_Big_Data.ipynb
@@ -18,6 +18,10 @@
     "This notebook uses dynamic updates, which require running a live Jupyter or Bokeh server. When viewed statically, the plots will not update, you can zoom and pan, and hover information will not be available. \n",
     ":::\n",
     "\n",
+    ":::{note}\n",
+    "This functionality requires Bokeh version 3.7 or greater.\n",
+    ":::\n",
+    "\n",
     "Let's start by creating a Points element with a DataFrame consisting of five datasets combined. Each of the datasets has a random x, y-coordinate based on a normal distribution centered at a specific (x, y) location, with varying standard deviations. The datasets—labeled `d1` through `d5`—represent different clusters:\n",
     "\n",
     "- `d1` is tightly clustered around (2, 2) with a small spread of 0.03,\n",
diff --git a/holoviews/plotting/bokeh/raster.py b/holoviews/plotting/bokeh/raster.py
@@ -1,5 +1,4 @@
 import sys
-import uuid
 
 import bokeh.core.properties as bp
 import numpy as np
@@ -12,18 +11,42 @@
 from ...core.data import XArrayInterface
 from ...core.util import cartesian_product, dimension_sanitizer, isfinite
 from ...element import Raster
+from ...util.warnings import warn
 from ..util import categorical_legend
 from .chart import PointPlot
 from .element import ColorbarPlot, LegendPlot
 from .selection import BokehOverlaySelectionDisplay
 from .styles import base_properties, fill_properties, line_properties, mpl_to_bokeh
-from .util import BOKEH_GE_3_3_0, BOKEH_GE_3_4_0, BOKEH_GE_3_7_0, colormesh
+from .util import (
+    BOKEH_GE_3_3_0,
+    BOKEH_GE_3_4_0,
+    BOKEH_GE_3_7_0,
+    BOKEH_VERSION,
+    colormesh,
+)
 
 _EPOCH = np.datetime64("1970-01-01", "ns")
 
 
+class HoverModel(DataModel):
+    xy = bp.Any()
+    data = bp.Any()
+
+    code_js = """
+    export default ({hover_model, attr, fmt}) => {
+      const templating = Bokeh.require("core/util/templating");
+      const value = hover_model.data[attr];
+      if (fmt == "M") {
+        const formatter = templating.DEFAULT_FORMATTERS.datetime;
+        return formatter(value, "%Y-%m-%d %H:%M:%S")
+      } else {
+        const formatter = templating.get_formatter();
+        return formatter(value)
+      }
+    }; """
+
+
 class ServerHoverMixin(param.Parameterized):
-    _model_cache = {}
 
     selector_in_hovertool = param.Boolean(default=True, doc="""
         Whether to show the selector in HoverTool.""")
@@ -52,6 +75,13 @@ def _init_tools(self, element, callbacks=None):
         ):
             return tools
 
+        if not BOKEH_GE_3_7_0:
+            bk_str = ".".join(map(str, BOKEH_VERSION))
+            msg = f"selector needs Bokeh 3.7 or greater, you are using version {bk_str}."
+            warn(msg, RuntimeWarning)
+            hover.tooltips = Div(children=[msg])
+            return tools
+
         self._hover_data = data
 
         # Get dimensions
@@ -69,34 +99,21 @@ def _init_tools(self, element, callbacks=None):
                 if vdim in vars:
                     vars.remove(vdim)
 
+        hover_model = HoverModel(data={})
         dims = (*coords, *vars)
-
-        # Create a dynamic custom DataModel with the dims as attributes
-        # __xy__ is the cursor position
-        if dims in self._model_cache:
-            HoverModel = self._model_cache[dims]
-        else:
-            HoverModel = self._model_cache[dims] = type(
-                f"HoverModel_{uuid.uuid4().hex}",
-                (DataModel,),
-                {d: bp.Any() for d in ("__xy__", *dims)},
-            )
-
-        hover_model = HoverModel()
         dtypes = {**data.coords.dtypes, **data.data_vars.dtypes}
         is_datetime = [dtypes[c].kind == "M" for c in data.coords]
         def _create_row(attr):
-            kwargs = {}
-            if BOKEH_GE_3_7_0:
-                kind = dtypes[attr].kind
-                if kind in "uifO":
-                    kwargs["formatter"] = "basic"
-                elif kind == "M":
-                    kwargs["formatter"] = "datetime"
-                    kwargs["format"] = "%Y-%m-%d %H:%M:%S"
+            kwargs = {
+                "format": "@{custom}",
+                "formatter": CustomJS(
+                    args=dict(hover_model=hover_model, attr=attr, fmt=dtypes[attr].kind),
+                    code=HoverModel.code_js
+                )
+            }
             return (
                 Span(children=[f"{ht.get(attr, attr)}:"], style={"color": "#26aae1", "text_align": "right"}),
-                Span(children=[ValueOf(obj=hover_model, attr=attr, **kwargs)], style={"text_align": "left"}),
+                Span(children=[ValueOf(obj=hover_model, attr="data", **kwargs)], style={"text_align": "left"}),
             )
         children = [el for dim in dims for el in _create_row(dim)]
 
@@ -136,7 +153,7 @@ def _create_row(attr):
         hover.tooltips = grid
         hover.callback = CustomJS(
             args={"position": hover_model},
-            code="export default ({position}, _, {geometry: {x, y}}) => {position.__xy__ = [x, y]}",
+            code="export default ({position}, _, {geometry: {x, y}}) => {position.xy = [x, y]}",
         )
 
         def on_change(attr, old, new):
@@ -157,11 +174,11 @@ def on_change(attr, old, new):
             data_coords = {dim: data_sel['coords'][dim]['data'] for dim in coords}
             data_vars = {dim: data_sel['data_vars'][dim]['data'] for dim in vars}
             with hold(self.document):
-                hover_model.update(**data_coords, **data_vars)
+                hover_model.update(data={**data_coords, **data_vars})
                 if self.comm:  # Jupyter Notebook
                     self.push()
 
-        hover_model.on_change("__xy__", on_change)
+        hover_model.on_change("xy", on_change)
 
         return tools
 
diff --git a/holoviews/tests/conftest.py b/holoviews/tests/conftest.py
@@ -124,6 +124,14 @@ def serve_and_return_page(hv_obj):
 
     return serve_and_return_page
 
+@pytest.fixture
+def serve_panel(page, port):  # noqa: F811
+    def serve_and_return_page(pn_obj):
+        serve_and_wait(pn.panel(pn_obj), port=port)
+        page.goto(f"http://localhost:{port}")
+        return page
+
+    return serve_and_return_page
 
 @pytest.fixture(autouse=True)
 def reset_store():
diff --git a/holoviews/tests/ui/bokeh/test_hover.py b/holoviews/tests/ui/bokeh/test_hover.py
@@ -1,5 +1,6 @@
 import numpy as np
 import pandas as pd
+import panel as pn
 import pytest
 
 import holoviews as hv
@@ -363,3 +364,67 @@ def test_hover_tooltips_rasterize_server_datetime_axis(serve_hv, rng, convert_x,
         expect(page.locator(".bk-Tooltip")).to_contain_text('x:2020-01-01')
     if convert_y:
         expect(page.locator(".bk-Tooltip")).to_contain_text('y:2020-01-01')
+
+
+@pytest.mark.usefixtures("bokeh_backend")
+def test_hover_tooltips_selector_update_plot(serve_panel):
+    import datashader as ds
+
+    from holoviews.operation.datashader import rasterize
+
+    N_OBS = 1000
+    x_data = np.random.random((N_OBS, N_OBS))
+
+    def get_plot(color_by):
+        if color_by == 'option1':
+            color_data = np.random.choice(['A', 'B', 'C', 'D'], size=N_OBS)
+        else:
+            color_data = np.random.choice(['a', 'b', 'c', 'd'], size=N_OBS)
+
+        dataset = hv.Dataset(
+            (x_data[:, 0], x_data[:, 1], color_data),
+            ['X', 'Y'],
+            color_by,
+        )
+        plot = dataset.to(hv.Points)
+        plot = rasterize(
+            plot,
+            aggregator=ds.count_cat(color_by),
+            selector=ds.first('X'),
+        )
+        plot = plot.opts(tools=["hover"], title=color_by)
+        return plot
+
+    scb = pn.widgets.Select(name="Color By", options=['option1', 'option2'])
+    layout = pn.Row(scb, pn.bind(get_plot, scb))
+
+    page = serve_panel(layout)
+    page.wait_for_timeout(500)
+
+    # Locate the plot and move mouse over it
+    hv_plot = page.locator(".bk-events")
+    expect(hv_plot).to_have_count(1)
+    bbox = hv_plot.bounding_box()
+    page.mouse.move(bbox["x"] + bbox["width"] / 2, bbox["y"] + bbox["height"] / 2)
+    page.wait_for_timeout(200)
+
+    tooltip = page.locator(".bk-Tooltip")
+    expect(tooltip).to_have_count(1)
+    expect(tooltip).to_contain_text('A:')
+    expect(tooltip).to_contain_text('B:')
+    expect(tooltip).to_contain_text('C:')
+    expect(tooltip).to_contain_text('D:')
+
+    # Change the selector to 'option2'
+    scb.value = "option2"
+    page.wait_for_timeout(500)
+
+    # Move the mouse again to trigger updated tooltip
+    page.mouse.move(bbox["x"] + bbox["width"] / 4, bbox["y"] + bbox["height"] / 4)
+    page.wait_for_timeout(200)
+    tooltip = page.locator(".bk-Tooltip")
+    expect(tooltip).to_have_count(1)
+    expect(tooltip).to_contain_text('a:')
+    expect(tooltip).to_contain_text('b:')
+    expect(tooltip).to_contain_text('c:')
+    expect(tooltip).to_contain_text('d:')
