🔍 Code Extractor

A wrapper class that adds click detection functionality to Panel objects by wrapping them in a clickable div element and tracking the number of clicks.

Purpose

Click_watcher extends Panel's ReactiveHTML to provide click event tracking for any Panel widget. It wraps a Panel object (like buttons, text fields, etc.) in a clickable container and maintains a counter of how many times the wrapped element has been clicked. This is useful for adding click tracking to widgets that don't natively support click events or for creating custom click-based interactions in Panel dashboards.

Source Code

class Click_watcher(ReactiveHTML):
    """
    A wrapper class for panel objects that essentially places a click watcher on the object
    
    parameters
    ----------
    parameter : param.Parameter
        Should be a panel object, i.e. a button or text field
        
    attributes
    ----------
    value : integer
        The number of times an enter key-press was registered
    """
    
    value = param.Integer(default=0)
    parameter = param.Parameter()
    
    _template = """
    <div id="wrapper" style="display:flex;cursor:pointer;" onclick="${_click}">${parameter}</div>
    """
    
    def _click(self, e):
        """
        Fires on mouse click
        """
        self.value+=1

        
    def on_click(self, callback):
        """
        Set an on click function for this widget
        
        parameters
        ----------
        callback : function
            function to carry out when the widget is clicked
        """
        return self.param.watch(callback, 'value', onlychanged=False)

Parameters

Parameter Details

parameter: A Panel widget or object to be wrapped with click detection functionality. This should be any valid Panel component such as pn.widgets.Button, pn.widgets.TextInput, or other Panel objects. The wrapped object will be rendered inside a clickable div container.

Return Value

Instantiation returns a Click_watcher instance that wraps the provided Panel object. The instance maintains a 'value' attribute (integer) that increments with each click. The on_click method returns a watcher object that can be used to manage the callback subscription.

Class Interface

Methods

Attributes

Dependencies

• param
• panel

Required Imports

import param
import panel as pn
from panel.reactive import ReactiveHTML

Usage Example

import param
import panel as pn
from panel.reactive import ReactiveHTML

class Click_watcher(ReactiveHTML):
    value = param.Integer(default=0)
    parameter = param.Parameter()
    _template = '<div id="wrapper" style="display:flex;cursor:pointer;" onclick="${_click}">${parameter}</div>'
    def _click(self, e):
        self.value += 1
    def on_click(self, callback):
        return self.param.watch(callback, 'value', onlychanged=False)

# Create a button to wrap
my_button = pn.widgets.Button(name='Click Me')

# Wrap it with click watcher
watcher = Click_watcher(parameter=my_button)

# Define callback function
def handle_click(event):
    print(f'Clicked {event.new} times')

# Register the callback
watcher.on_click(handle_click)

# Display in a Panel app
pn.Column(watcher, pn.pane.Markdown(f'Clicks: {watcher.value}')).servable()

Best Practices

• Always pass a valid Panel object to the 'parameter' argument during instantiation
• Use the on_click method to register callbacks rather than directly watching the 'value' parameter
• The value attribute increments on every click, so it can be used as a click counter
• Callbacks registered with on_click will fire even if the value doesn't change (onlychanged=False), so be aware of potential duplicate triggers
• The wrapper adds a flex display style, which may affect the layout of the wrapped component
• This class must be used within a Panel application context (Jupyter notebook, Panel server, or standalone app)
• The _click method is internal and should not be called directly; it's triggered by the HTML template's onclick event

Tags

Similar Components

AI-powered semantic similarity - components with related functionality:

• class Enter_watcher 76.8% similar

  A Panel ReactiveHTML wrapper class that monitors Enter key presses on wrapped panel objects (like text fields or buttons) and tracks the count of Enter key events.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Clickable_header 59.8% similar

  A clickable header component that displays text as a hyperlink and tracks the number of times it has been clicked.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Focus_button 57.0% similar

  A custom Panel ReactiveHTML button widget that displays an eye icon and tracks the number of times it has been clicked.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Confirm_button 56.2% similar

  A custom Panel button widget that conditionally displays a confirmation dialog before registering clicks, built on ReactiveHTML with integrated JavaScript handlers.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Inbox 55.5% similar

  A reactive HTML component that displays a mailbox/notification icon with a badge indicator and tracks user clicks.

  From: /tf/active/vicechatdev/resources/py2html.py