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!