[BUG] Hover CustomJS callback only triggered on last added glyph where glyphs share CDS about bokeh

[Lilneo786]

from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CustomJS, HoverTool

src = ColumnDataSource(
    data = {
        'x': [1,2,3,4],
        'y1': [1,2,3,4],
        'y2': [2,3,4,5],
        'y3': [3,4,5,6]
    }
)
style = {
    'y1': {'marker': 'circle', 'color': 'orange'},
    'y2': {'marker': 'square', 'color': 'blue'},
    'y3': {'marker': 'triangle', 'color': 'red'},
}

p = figure(width=400, height=400, tools = '')

for i in style:
    r =  p.scatter(
        x = 'x', y = i, 
        marker = style[i]['marker'],
        color = style[i]['color'], 
        size = 12, alpha = 0.5,
        source = src,
        name = i,
        legend_label = i
        )

    hover = HoverTool(
        tooltips = [
            (i, f'@{i}'),
            ('index', '$index'),
        ],
        renderers = [r]
    )

    hover.callback = CustomJS(
        args = {'src': src},
        code='''
            const idx = src.inspected.indices;
            if (idx.length > 0) {
                console.log(src.data.name);
                console.log(idx);
            }
        ''')

    p.add_tools(hover)

p.legend[0].location = 'bottom_right'

show(p)

With this adjustment, you generate an individual HoverTool and CustomJS callback for every renderer. The callback code accurately displays the name of the renderer and the index of the hovered data points for each series (y1, y2, y3) upon hovering over them.

[carve11]

@Lilneo786 Thanks for taking the time looking into this and proposing a solution. However, I do not observe anything that solves my issue; not sure if we are using the same version of Bokeh or if something else is different. Using your code proposal the CustomJS callback is still only triggered when hovering data points of the last series, y3 when I look in the browser console. Also, what you propose in the CustomJS callback code, src.data.name yields undefined in my system (not sure why I would change my code where I got rend.name since this is ok for me)

[Lilneo786]

This should ensure that the correct glyph name is logged when hovering over the points of each series.

from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CustomJS, HoverTool

src = ColumnDataSource(
    data={
        'x': [1, 2, 3, 4],
        'y1': [1, 2, 3, 4],
        'y2': [2, 3, 4, 5],
        'y3': [3, 4, 5, 6]
    }
)
style = {
    'y1': {'marker': 'circle', 'color': 'orange'},
    'y2': {'marker': 'square', 'color': 'blue'},
    'y3': {'marker': 'triangle', 'color': 'red'},
}

p = figure(width=400, height=400, tools='')

for i in style:
    r = p.scatter(
        x='x', y=i,
        marker=style[i]['marker'],
        color=style[i]['color'],
        size=12, alpha=0.5,
        source=src,
        name=i,
        legend_label=i
    )

    p.add_tools(HoverTool(
        tooltips=[
            (i, f'@{i}'),
            ('index', '$index'),
        ],
        renderers=[r],
        callback=CustomJS(
            args={'src': src},
            code='''
                const index = cb_data.index.indices[0];
                const glyph_name = %s;
                console.log(glyph_name);
                console.log(index);
            ''' % repr(i)  # Pass the glyph name as a string
        )
    ))

p.legend[0].location = 'bottom_right'

show(p)

[carve11]

@Lilneo786 OK, so cb_data and not source, do you know why this difference?

[Lilneo786]

cb_data provides information about the callback event itself, including indices of selected data points.
source refers to the data used for plotting.
You use cb_data to access event-related info, like which data point was selected, while source is for managing the plot's data.

[carve11]

I am still puzzled why source.inspected.indices does not work
Maybe related to #7397 ?

[mattpap]

Maybe related to #7397?

Yes, this is probably a duplicate of that issue.