🔍 Code Extractor

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

Purpose

Focus_button is a reactive UI component built on Panel's ReactiveHTML framework. It provides a clickable button with a Font Awesome eye icon that increments an internal counter on each click. The component is designed for interactive dashboards where tracking user focus or attention events is needed. It supports callback registration to execute custom functions when clicked, making it suitable for triggering actions like highlighting content, toggling visibility, or logging user interactions.

Source Code

class Focus_button(ReactiveHTML):
    
    value = param.Integer(default=0)
    _template = """
    <button id='button' class='focus-button' onClick=${_click}><i class="far fa-eye"></i></button>
    """
    
    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)
    
    __css__ = [
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    ]

Parameters

Parameter Details

value: An integer parameter (default=0) that tracks the number of times the button has been clicked. This is a param.Integer that automatically triggers reactivity when changed, allowing other components to respond to click events.

Return Value

Instantiating Focus_button() returns a ReactiveHTML widget instance that can be added to Panel layouts. The on_click method returns a param.Watcher object that can be used to unregister the callback if needed.

Class Interface

Methods

Attributes

Dependencies

• param
• panel
• panel.reactive.ReactiveHTML
• panel.layout.base.NamedListLike

Required Imports

import param
import panel as pn
from panel.reactive import ReactiveHTML
from panel.layout.base import NamedListLike

Usage Example

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

# Define the Focus_button class (as provided)
class Focus_button(ReactiveHTML):
    value = param.Integer(default=0)
    _template = """
    <button id='button' class='focus-button' onClick=${_click}><i class="far fa-eye"></i></button>
    """
    
    def _click(self, e):
        self.value += 1
    
    def on_click(self, callback):
        return self.param.watch(callback, 'value', onlychanged=False)
    
    __css__ = [
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    ]

# Initialize Panel extension
pn.extension()

# Create an instance of the button
focus_btn = Focus_button()

# Define a callback function
def handle_click(event):
    print(f"Button clicked! Total clicks: {event.new}")

# Register the callback
focus_btn.on_click(handle_click)

# Add to a layout and serve
layout = pn.Column(
    "# Focus Button Example",
    focus_btn,
    pn.pane.Markdown(f"Clicks: {focus_btn.param.value}")
)
layout.servable()

Best Practices

• Always call pn.extension() before creating Focus_button instances to ensure Panel is properly initialized
• Use the on_click method to register callbacks rather than directly watching the value parameter for cleaner code
• The value parameter increments indefinitely - consider resetting it if you need to track clicks within specific time windows
• Callbacks registered with on_click receive a param event object with 'new' and 'old' attributes representing the click count
• The button can be styled using CSS by targeting the 'focus-button' class
• Multiple callbacks can be registered on the same button instance by calling on_click multiple times
• The _click method is internal and should not be called directly - it's automatically triggered by the HTML onClick event
• The component requires an active Panel server or notebook environment to function properly

Tags

Similar Components

AI-powered semantic similarity - components with related functionality:

• class Browser_button 73.2% similar

  A custom Panel ReactiveHTML button component that displays a file or folder icon with text and tracks click events.

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

• class Confirm_button 63.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 Clickable_header 62.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 Toolbar 57.4% similar

  A reactive HTML toolbar component that displays social media links and a settings button, tracking the number of clicks on the settings icon.

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

• class Inbox 57.0% 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