How can I get widget title by mouse click

Panel
1

Hi All,

Anyone tell me how can I get widget title or name by mouse click? I want to know which widget user selected. I think the hover tool can actually display the allocated values, so I think it must be possible. But I can’ find the way I have to write.

For example , I have 3 widgets (refer below figure ) , When I click Graph1 , I want to get this title or name(‘Graph1’)

20211028_mouse_click.png
20211028_mouse_click.png1268×396 74.4 KB

My simple code

from bokeh.models import Panel, Tabs
import panel as pn
pn.extension(sizing_mode = 'stretch_width')
from bokeh.plotting import figure
from panel.template import DarkTheme

p1 = figure(width=150, height=150, name='Scatter',title='Graph1')
p1.scatter([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0])

p2 = figure(width=150, height=150, name='Line',title='Graph2')
p2.line([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0])

p3 = figure(width=150, height=150, name='Line',title='Graph3')
p3.line([0, 1, 2, 3, 4, 5, 6], [3, 2, 1, 1, 2, 3, 4])

p4 = pn.Row(p1)+pn.Row(p2)+pn.Row(p3)
# p4 = pn.Column(p4)+pn.Column(p4)

text1 = "# Sldeber 1"
text2 = "# Sldeber 2"
text3 = "# Sldeber 3"

def side_tabs():
    return pn.Tabs(
        ('scatter', text1),
        ('line', text2),
        ('line', text3)
    )

def main_tabs():
    return pn.Tabs(
        ('main1', p4),
        ('main2', p2),
        ('main3', p3)
    )

template = pn.template.FastListTemplate(
    title='contents_sample',
    site='Panel',
    sidebar=side_tabs(),sidebar_width =200,
    main=main_tabs()
).servable();

pn.serve(template)

Someone help me my code.

Thankls,

2

For sure there is a better solution, but the taptool of bokeh only responds to taps on the glyphs. I embed the row of the bokeh figure in a div in the new reactiveHTML component. You can embed whichever element in the tapping component. Now the print looks for the title text of the figure.

from bokeh.models import Panel, Tabs
import param 
import panel as pn
pn.extension(sizing_mode = 'stretch_width')
from bokeh.plotting import figure
from panel.template import DarkTheme
from bokeh.models import TapTool

p = figure(width=150, height=150, name='Scatter',title='Graph1')
p.scatter([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0])

class Tapping(pn.reactive.ReactiveHTML):
    row = param.Parameter()
    index = param.Integer(default=0) 

    _template = """
        <div id='row' onclick="${_row_click}"> ${row} </div>         
    """

    def _row_click(self, event):
        self.index += 1
        print ('clickind', self.row.object._property_values['title'].text  )


p1 = Tapping(row=p)

p2 = figure(width=150, height=150, name='Line',title='Graph2')
p2.line([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0])

p3 = figure(width=150, height=150, name='Line',title='Graph3')
p3.line([0, 1, 2, 3, 4, 5, 6], [3, 2, 1, 1, 2, 3, 4])

p4 = pn.Row(p1)+pn.Row(p2)+pn.Row(p3)
# p4 = pn.Column(p4)+pn.Column(p4)

text1 = "# Sldeber 1"
text2 = "# Sldeber 2"
text3 = "# Sldeber 3"

def side_tabs():
    return pn.Tabs(
        ('scatter', text1),
        ('line', text2),
        ('line', text3)
    )

def main_tabs():
    return pn.Tabs(
        ('main1', p4),
        ('main2', p2),
        ('main3', p3)
    )

template = pn.template.FastListTemplate(
    title='contents_sample',
    site='Panel',
    sidebar=side_tabs(),sidebar_width =200,
    main=main_tabs()
).servable()
4 Likes
3

Thanks for your quick and best solution. I modified my code. work it as I want.

2 Likes