🔍 Code Extractor

class Toolbar

Maturity: 34

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

File:
/tf/active/vicechatdev/resources/py2html.py
Lines:
90 - 109
Complexity:
simple

Purpose

This class creates a sticky toolbar UI component with links to Connected Pathology's website, LinkedIn, email contact, and a settings button. It inherits from Panel's ReactiveHTML to provide reactive behavior, tracking clicks on the settings icon and allowing callbacks to be registered for click events. The toolbar is designed to be embedded in Panel dashboards or web applications.

Source Code

class Toolbar(ReactiveHTML):

    clicks = param.Integer(default=0)
    
    _template="""
<div class="my-sticky-container">
  <div class="button-container">
      <a href="https://www.connected-pathology.com/" target="_blank"><i class="fa fa-home" style="color:black;"></i></a>
      <a href="https://www.linkedin.com/company/connected-pathology/" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
      <a href="mailto:customercare@c-path.be"><i class="fa fa-envelope" aria-hidden="true"></i></a>
      <a id="usr_settings" onclick="${_clicked}" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a>
  </div>
</div>
"""
    
    def _clicked(self, event):
        self.clicks+=1
        
    def on_click(self, callback):
        return self.param.watch(callback, 'clicks', onlychanged=False)

Parameters

Name Type Default Kind
bases ReactiveHTML -

Parameter Details

clicks: A param.Integer that tracks the number of times the settings icon has been clicked. Defaults to 0 and increments with each click on the settings button.

Return Value

Instantiation returns a Toolbar object that can be added to Panel layouts. The on_click method returns a watcher object that can be used to unregister the callback later. The _clicked method does not return a value (implicitly returns None).

Class Interface

Methods

_clicked(self, event) -> None

Purpose: Internal method that handles click events from the settings icon, incrementing the clicks counter

Parameters:

  • event: The DOM event object passed from the HTML onclick handler

Returns: None (implicitly)

on_click(self, callback) -> param.Watcher

Purpose: Registers a callback function to be executed whenever the settings icon is clicked

Parameters:

  • callback: A callable function that will be invoked with an event object containing the new click count. The event object has attributes like 'new' (current value) and 'old' (previous value)

Returns: A param.Watcher object that can be used to unregister the callback later by calling watcher.unwatch()

Attributes

Name Type Description Scope
clicks param.Integer Tracks the total number of times the settings icon has been clicked. Starts at 0 and increments by 1 with each click. This is a reactive parameter that triggers callbacks when changed. class
_template str HTML template string defining the toolbar's structure with Font Awesome icons for home, LinkedIn, email, and settings links. The settings icon is wired to the _clicked method via ${_clicked} template variable. class

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 Toolbar(ReactiveHTML):
    clicks = param.Integer(default=0)
    _template="""<div class="my-sticky-container">
  <div class="button-container">
      <a href="https://www.connected-pathology.com/" target="_blank"><i class="fa fa-home" style="color:black;"></i></a>
      <a href="https://www.linkedin.com/company/connected-pathology/" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
      <a href="mailto:customercare@c-path.be"><i class="fa fa-envelope" aria-hidden="true"></i></a>
      <a id="usr_settings" onclick="${_clicked}" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a>
  </div>
</div>"""
    def _clicked(self, event):
        self.clicks+=1
    def on_click(self, callback):
        return self.param.watch(callback, 'clicks', onlychanged=False)

# Instantiate the toolbar
toolbar = Toolbar()

# Define a callback function
def handle_settings_click(event):
    print(f"Settings clicked {event.new} times")

# Register the callback
toolbar.on_click(handle_settings_click)

# Add to a Panel layout
app = pn.Column(toolbar, pn.pane.Markdown('# My Application'))
app.servable()

Best Practices

  • Always register click callbacks using the on_click method rather than directly watching the clicks parameter
  • Ensure Font Awesome CSS is loaded before rendering the toolbar for proper icon display
  • The toolbar is designed to be sticky, so ensure parent containers have appropriate CSS positioning
  • The clicks parameter increments on every click, so callbacks will fire even if the value changes from N to N+1
  • Use onlychanged=False in on_click to ensure callbacks fire on every click, not just when the value changes from its initial state
  • The _clicked method is internal and should not be called directly; it's automatically invoked by the HTML template's onclick event

Tags

ui-component toolbar reactive panel html navigation social-links click-tracking event-handling

Similar Components

AI-powered semantic similarity - components with related functionality:

  • class Clickable_header 64.2% 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 Browser_button 62.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 Scrollmenu 57.5% similar

    A horizontal scroll menu component that displays a series of clickable icons representing different stages of a pathology workflow, built using Panel's ReactiveHTML for enhanced CSS customization.

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

  • class Focus_button 57.4% 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 Study_progress 56.9% similar

    A Panel ReactiveHTML component that displays study progress as a visual taskbar with completed and pending items represented by SVG icons.

    From: /tf/active/vicechatdev/resources/.ipynb_checkpoints/py2html-checkpoint.py
← Back to Browse