Display figure name on tap

I would like to display the figure name when the figure has been tapped on. My understanding of Bokeh and Java is that the this keyword in the code of CustomJS should refer to the object that was passed to it, which should be the figure fig2 in the CustomJS of the variable change_text in the code below. However, this seems incorrect as I cannot get the code to work.

What should be passed to the code of CustomJS in order to display the name attribute of fig2?

Edit: note that I don’t want to parse fig2 as an argument to CustomJS. The method I need has to be generalised and work for all figures on the page.

Here is the code (note the figure has no data to minimise code):

from bokeh.models import CustomJS
from bokeh.plotting import figure, output_file, show
from bokeh.models.widgets import Paragraph
from bokeh.events import Tap
from bokeh.layouts import column

fig2 = figure(name='fig2')
current_selection = Paragraph(text="")

change_text = CustomJS(code="current_selection.text = this.name")
change_text.args.update(dict(current_selection=current_selection))
fig2.js_on_event(Tap, change_text)

output_file("example.html", title="example")
show(column(fig2, current_selection))

@Daniel_Stoops

The edit to your post indicates that you’ve figured out you can affect the update of the Paragraph text by passing the figure as an argument to the JS callback.

You indicate that you don’t want to do that for the purposes of generalizing your code, which seems reasonable. Might something like the following work in your use case, even if it does pass the associated figure via callback arguments?

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
"""

from bokeh.models import CustomJS
from bokeh.plotting import figure, output_file, show
from bokeh.models.widgets import Paragraph
from bokeh.events import Tap
from bokeh.layouts import column

fig2 = figure(width=300, height=100, name='fig2')
fig3 = figure(width=300, height=100, name='fig3')

current_selection = Paragraph(text="")

change_text = lambda fig: CustomJS(code="current_selection.text = fig.name",
                                   args=dict(current_selection=current_selection, fig=fig))

fig2.js_on_event(Tap, change_text(fig2))
fig3.js_on_event(Tap, change_text(fig3))

output_file("example.html", title="example")
show(column(fig2, fig3, current_selection))

Thank you so much! Excellent solution.

Can you please explain what the this keyword in CustomJS refers to? And further, why it doesn’t refer to figures when parsed but does refer to, for example, items of a drop down menu?

Hi @Daniel_Stoops

Regarding …

I am not certain, but will note that “this” in the JavaScript has attributes of (x,y,sx,sy) based on some quick experimentation. These are the tap-location in data (x,y) coordinates of the figure and the screen (sx,sy) coordinates where the tap occurs. These properties are also arguments to a bokeh Tap event, which might give an indication of what “this” is in the current context.

Regarding …

No. Sorry. I am a user and not one of the developers.