HTML linking behaviour when clicking on a rect glyph with individual links

Community Support
,
1

Hi,

first of all thanks for creating bokeh, I really enjoy it.

And I would enjoy it even more, if anyone could help me with the following issue :)

I would like to have a classic html linking behaviour on a glyph, in my case a rect(). At the moment I am using the TapTool with a small CustomJS snippet and behaviour = 'select'. Please find the following minimal reproducible example:

from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CustomJS, TapTool
import pandas as pd

p = figure()
df = pd.DataFrame()
df.loc[:, 'jumptostring'] = ['discourse.bokeh.org', 'discourse.bokeh.org']
df.loc[:, 'more_data'] = ['data', 'data']
source = ColumnDataSource(df)
rect = p.rect(x=[0,2], y=[0,2], width=1, height=1)
code = f'''
        const selected_index = cb_data.source.selected.indices[0];
        const jumptostring = source.data['jumptostring'][selected_index];
        console.log(jumptostring)
        window.open('https://' + jumptostring, '_blank');
        '''
p.add_tools(TapTool(renderers=[rect], behavior='select', callback = CustomJS(args=dict(source=source), code=code)))
show(p)

The target URL is different for every rect(), therefore you find a DataFrame as input. This works so far, but the problem is that all the other glyphs are greyed out. That’s confusing if you expect a ‘classic html linking behaviour’. I found in the documentation that there is also the behaviour = 'inspect', which isn’t greying out, but it looks like the javascript object in the background is constituted differently in this case, because when debugging cb_data.source.selected.indices[0] doesn’t exist and the linking doesn’t work. :(

Summary of wanted behaviour:

  • data from DataFrame defines a link for every rect()
  • clicking on the rect() opens the link to a new page
  • no greying out

Thanks!

2

When any points are selected (e.g. via tap, box selection, or lasso tool, etc) the default behavior is to “wash out” all the non-selected points to make the selection easy to see. This is fairly standard behavior for interactive plots in my experience. However, Bokeh exposes many configurable options, including full control over the appearance of non-selected points:

https://docs.bokeh.org/en/latest/docs/user_guide/styling/plots.html#selected-and-unselected-glyphs

In particular, setting nonselection_fill_alpha and nonselection_line_alpha both to 1.0 will probably achieve what you want.

3

Great. Thanks Bryan. That did the trick.

Setting nonselection values to the same value as previously plotted made the wanted behaviour possible.

1 Like