Add a zoom tool per subcoordinate_y group

[maximlt]

closes #5901

When users assign a group to an Element with subcoordinate_y enabled, a dedicated wheel_zoom is created per group. The order of the zoom tools matches how the groups are displayed, i.e. the top tool controls the group displayed at the top of the chart. Each tool has a custom tooltip that contains the group name.

import numpy as np
import panel as pn
import holoviews as hv
hv.extension('bokeh')

x = np.linspace(0, 10*np.pi)
curves = []
j = 0.5
for group in ['A', 'B', 'C']:
    for i in range(2):
        yvals = j * np.sin(x)
        curve = hv.Curve((x + i*np.pi/2, yvals), label=f'{group}{i}', group=group).opts(
            subcoordinate_y=True
        )
        curves.append(curve)
        j += 1

hv.Overlay(curves).opts(show_legend=False, width=400, height=400)

Users can add extra zoom_in and zoom_out tools. The UX isn't great but we agreed not to spend too much time trying to improve it (I've seen worse!).

for group in ['A', 'B', 'C']:
    for i in range(2):
        yvals = j * np.sin(x)
        curve = hv.Curve((x + i*np.pi/2, yvals), label=f'{group}{i}', group=group).opts(
            subcoordinate_y=True, tools=['zoom_in', 'zoom_out']
        )
        curves.append(curve)
        j += 1

hv.Overlay(curves).opts(show_legend=False, width=400, height=800)

When overlaid with other non subcoordinate_y elements, the default zoom tool is displayed.

for group in ['A', 'B', 'C']:
    for i in range(2):
        yvals = j * np.sin(x)
        curve = hv.Curve((x + i*np.pi/2, yvals), label=f'{group}{i}', group=group).opts(
            subcoordinate_y=True,
        )
        curves.append(curve)
        j += 1

(hv.Overlay(curves) * hv.Overlay([hv.VSpan(i, i + 2) for i in range(2, 20, 4)])).opts(
    show_legend=False, width=400, height=500
)

Implementation-wise, I opted for adding a post-processing step, instead of having to changing the structure of the zoom handle directory (accounting for groups) as it required changes in various places that are hard to follow. In the end, the implementation isn't so complex.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 98.23009% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 88.69%. Comparing base (bf4592e) to head (81e507b).
Report is 2 commits behind head on main.

❗ Current head 81e507b differs from pull request most recent head a93c67e. Consider uploading reports for the commit a93c67e to get more accurate results

Files	Patch %	Lines
holoviews/plotting/bokeh/element.py	94.28%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6122      +/-   ##
==========================================
- Coverage   88.70%   88.69%   -0.01%     
==========================================
  Files         316      316              
  Lines       66121    66129       +8     
==========================================
+ Hits        58650    58654       +4     
- Misses       7471     7475       +4     

Flag	Coverage Δ
ui-tests	23.77% <7.07%> (-0.03%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[droumis]

I made the normalization per group a separate issue. I think it could probably go into your postprocessing step.

[droumis]

If not all the curves are assigned a group, then none of the group-wise zooming takes effect. We should either issue a warning/error to assign all curves to a group, or just group any that aren't already assigned into a new group. Probably the former is good enough and the simpler approach.

For example, in the code below, not including a group arg for the B group breaks all the intended grouping behavior.

import numpy as np
import panel as pn
import holoviews as hv
hv.extension('bokeh')

x = np.linspace(0, 10*np.pi)
curves = {}
j = 0.5
for i, group in enumerate(['A', 'B', 'C']):
    for i in range(2):     
        yvals = j * np.sin(x)
        label = f'{group}{i}'
        if group == "B":
            curve = hv.Curve((x + i*np.pi/2, yvals), label=label, group=group).opts(
                subcoordinate_y=True, tools=['zoom_in', 'zoom_out', 'hover']
            )
        else:
            curve = hv.Curve((x + i*np.pi/2, yvals), label=label).opts(
                subcoordinate_y=True, tools=['zoom_in', 'zoom_out', 'hover']
            )
        curves[(group, label)] = curve
        j += 1

pn.Row(hv.Overlay(curves, kdims=['group', 'label']).opts(show_legend=False, width=600, height=500)).servable()

[maximlt]

We decided yesterday not to try to depend on bokeh/bokeh#13826 for now, since it may take a little while until this is refined and released, and may need more upstream changes in Panel (to adapt to Bokeh 3.5) before we can even start using the new Bokeh feature.

[philippjfr]

Looks good to me!