Scrollmenu - Code Extractor

class Scrollmenu

Maturity: 57

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.

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

Lines:
21 - 86

Complexity:
moderate

Purpose

This class creates an interactive navigation menu for a pathology laboratory workflow system. It displays nine stages (Delivery, Registration, Grossing, Embedding, Sectioning, Staining, Scanning, Assessment, Report) as clickable icons. When an icon is clicked, the component updates its 'selected' parameter to reflect the current stage. Each stage icon can have its CSS class dynamically controlled through corresponding parameters, allowing for visual state changes (e.g., highlighting active stages). The component is designed to work within Panel applications and uses ReactiveHTML to provide better CSS control than standard Python-based Panel components.

Source Code

class Scrollmenu(ReactiveHTML):
    """
    A horizontal scroll menu of our images, using ReactiveHTML instead of python for improved CSS freedom.
    
    Attributes
    ----------
    _template : str
        The HTML string. The onclick ${} links to a python function
        
    Parameters
    ----------
    delivery : param.String
        css class for delivery icon
    """
    
    selected = param.String()
    
    delivery = param.String()
    registration = param.String()
    grossing = param.String()
    embedding = param.String()
    sectioning = param.String()
    staining = param.String()
    scanning = param.String()
    assessment = param.String()
    report = param.String()
    
    _template = """
<div class="scrollmenu">
  <div class="wrapper"><img id="Delivery" class="${delivery}" src="./custom_static/images/Delivery.png" onclick="${_delivery_click}" style="width:60px !important;"/></div>
  <div class="wrapper"><img id="Registration" class="${registration}" src="./custom_static/images/Registration.png" onclick="${_registration_click}"/></div>
  <div class="wrapper"><img id="Grossing" class="${grossing}" src="./custom_static/images/Grossing.png" onclick="${_grossing_click}" style="width:70px !important;"/></div>
  <div class="wrapper"><img id="Embedding" class="${embedding}" src="./custom_static/images/Embedding.png" onclick="${_embedding_click}"/></div>
  <div class="wrapper"><img id="Sectioning" class="${sectioning}" src="./custom_static/images/Sectioning.png" onclick="${_sectioning_click}"/></div>
  <div class="wrapper"><img id="Staining" class="${staining}" src="./custom_static/images/Staining.png" onclick="${_staining_click}"/></div>
  <div class="wrapper"><img id="Scanning" class="${scanning}" src="./custom_static/images/Scanning.png" onclick="${_scanning_click}"/></div>
  <div class="wrapper"><img id="Assessment" class="${assessment}" src="./custom_static/images/Assessment.png" onclick="${_assessment_click}" style="width:50px !important;"/></div>
  <div class="wrapper"><img id="Report" class="${report}" src="./custom_static/images/Report.png" onclick="${_report_click}" style="width:50px !important;"/></div>
</div>
    """
    def _delivery_click(self, event):
        self.selected = 'Delivery'

    def _registration_click(self, event):
        self.selected='Registration'
        
    def _grossing_click(self, event):
        self.selected = 'Grossing'
    
    def _embedding_click(self, event):
        self.selected = 'Embedding'
        
    def _sectioning_click(self, event):
        self.selected = 'Sectioning'
        
    def _staining_click(self, event):
        self.selected = 'Staining'
        
    def _scanning_click(self, event):
        self.selected = 'Scanning'
    
    def _assessment_click(self, event):
        self.selected = 'Assessment'
        
    def _report_click(self, event):
        self.selected = 'Report'

Parameters

Name	Type	Default	Kind
`bases`	ReactiveHTML	-

Parameter Details

delivery: CSS class name to apply to the Delivery icon, allowing dynamic styling based on state (e.g., 'active', 'completed', 'disabled')

registration: CSS class name to apply to the Registration icon for dynamic styling

grossing: CSS class name to apply to the Grossing icon for dynamic styling

embedding: CSS class name to apply to the Embedding icon for dynamic styling

sectioning: CSS class name to apply to the Sectioning icon for dynamic styling

staining: CSS class name to apply to the Staining icon for dynamic styling

scanning: CSS class name to apply to the Scanning icon for dynamic styling

assessment: CSS class name to apply to the Assessment icon for dynamic styling

report: CSS class name to apply to the Report icon for dynamic styling

Return Value

Instantiation returns a Scrollmenu object that inherits from ReactiveHTML. The object renders as an HTML component with a horizontal scrollable menu of icons. The 'selected' attribute returns a string indicating which stage was last clicked (one of: 'Delivery', 'Registration', 'Grossing', 'Embedding', 'Sectioning', 'Staining', 'Scanning', 'Assessment', 'Report'). Click handler methods (_delivery_click, etc.) do not return values but update the 'selected' parameter as a side effect.

Class Interface

Methods

`_delivery_click(self, event) -> None`

Purpose: Internal click handler that sets the selected parameter to 'Delivery' when the Delivery icon is clicked

Parameters:

event: Click event object passed by the ReactiveHTML framework containing event details