🔍 Code Extractor

class Study_progress_v1

Maturity: 36

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

File:
/tf/active/vicechatdev/resources/py2html.py
Lines:
765 - 840
Complexity:
moderate

Purpose

This class creates an interactive progress visualization widget for tracking study or task completion. It displays two sections: finished items (shown with full color) and to-do items (shown in a white/empty section), using SVG images from a custom static directory. The component uses a gradient background that transitions from purple to yellow to teal, with completed items on the left and pending items on the right. When all tasks are completed, the empty section is automatically removed.

Source Code

class Study_progress(ReactiveHTML):
    finished = param.List(default=[])
    to_do = param.List(default=[])

    
    _template = """
    <style>
    .fill-row {
      background: transparent;
      margin-left: 20px;
      margin-right: 20px;
      display: flex;
      justify-content: space-between;
    }
    .empty-row {
      background: white;

    }
    .empty-row::after {
      background:white;

    }
    .resize-me {
      height: 50px;
      width: auto;
    }
    .col {
      display: flex;
      justify-content: center;
    }
    .cover-row {
      overflow: hidden;
      border: 2px solid black;
      border-radius: 10px;
      margin-left: 40px;
      margin-right: 20px;
      justify-content: space-around;
    }
    .fill {
      flex-grow:1; 
      background: white;
    }
    </style>
    <div id="taskbar" class="row cover-row" style="background: linear-gradient(to right, #DBBAE8, #F7D06D, #3DCAB1); display: flex;">
        <div id="fillRow" class="row fill-row">
        </div>
        <div id="filladelphia" class="fill"></div>
        <div id="emptyRow" class="row empty-row" style="background: white;">
        </div>
        <div id="fillcollins" class="fill"></div>
    </div>
    """
    
    _scripts = {
    'render': """
        var html = ""
        data.finished.forEach(setImages);
        function setImages(value, index, array) {
            console.log(array)
            html += `<div class="col" style="margin:10px;"><img class="resize-me" src="./custom_static/images/Minimal/${value}.svg" alt="${value}" title="${value}"/></div>`
        }
        fillRow.innerHTML = html
        var html = ""
        data.to_do.forEach(setFillImages);
        function setFillImages(value, index, array) {
            html += `<div class="col" style="margin:10px;"><img class="resize-me" src="./custom_static/images/Minimal/${value}.svg" alt="${value}" title="${value}"/></div>`
        }
        emptyRow.innerHTML = html
        if (data.to_do.length === 0) {
            filladelphia.remove()
            fillcollins.remove()
            emptyRow.remove()
        }
            
    """,
    }

Parameters

Name Type Default Kind
bases ReactiveHTML -

Parameter Details

finished: A list of strings representing completed study items or tasks. Each string should correspond to an SVG filename (without extension) in the './custom_static/images/Minimal/' directory. These items will be displayed on the left side of the progress bar with the gradient background visible.

to_do: A list of strings representing pending study items or tasks. Each string should correspond to an SVG filename (without extension) in the './custom_static/images/Minimal/' directory. These items will be displayed on the right side of the progress bar with a white background, indicating they are not yet completed.

Return Value

Instantiation returns a Study_progress object that is a Panel ReactiveHTML component. This object can be added to Panel layouts and will render as an HTML/CSS/JavaScript widget. The component automatically re-renders when the 'finished' or 'to_do' lists are updated.

Class Interface

Methods

__init__(finished: list = [], to_do: list = [], **params)

Purpose: Initialize a Study_progress component with lists of completed and pending items

Parameters:

  • finished: List of strings representing completed items (default: empty list)
  • to_do: List of strings representing pending items (default: empty list)
  • **params: Additional parameters inherited from ReactiveHTML parent class

Returns: A Study_progress instance

Attributes

Name Type Description Scope
finished param.List List of completed study items/tasks. Each item should be a string matching an SVG filename in the custom_static directory. Changes to this list trigger a re-render of the component. instance
to_do param.List List of pending study items/tasks. Each item should be a string matching an SVG filename in the custom_static directory. Changes to this list trigger a re-render of the component. instance
_template str HTML template string defining the structure and CSS styling of the progress bar component. Contains the layout with gradient background, fill sections, and placeholder divs for finished and to-do items. class
_scripts dict Dictionary containing JavaScript code for rendering the component. The 'render' script dynamically generates HTML for displaying SVG images based on the finished and to_do lists, and handles removal of empty sections when all tasks are complete. class

Dependencies

  • param
  • panel
  • panel.reactive

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

# Define the Study_progress class (as provided)
class Study_progress(ReactiveHTML):
    finished = param.List(default=[])
    to_do = param.List(default=[])
    # ... (rest of class definition)

# Instantiate the component
progress = Study_progress(
    finished=['lesson1', 'lesson2', 'quiz1'],
    to_do=['lesson3', 'lesson4', 'final_exam']
)

# Add to a Panel layout
app = pn.Column(progress)

# Update progress dynamically
progress.finished = ['lesson1', 'lesson2', 'quiz1', 'lesson3']
progress.to_do = ['lesson4', 'final_exam']

# Serve the application
app.servable()
# Or display in notebook: app

Best Practices

  • Ensure all SVG files referenced in 'finished' and 'to_do' lists exist in the './custom_static/images/Minimal/' directory before instantiation
  • Use descriptive filenames for SVG images as they appear in the 'alt' and 'title' attributes of the rendered images
  • Update the 'finished' and 'to_do' lists by reassigning them entirely rather than using in-place modifications (e.g., use 'progress.finished = new_list' instead of 'progress.finished.append(item)')
  • The component automatically handles the visual transition when all tasks are completed (to_do becomes empty)
  • Configure Panel's static file serving properly to ensure custom_static directory is accessible
  • The gradient background is hardcoded; if customization is needed, modify the _template style
  • The component re-renders on any change to 'finished' or 'to_do' parameters due to the 'render' script

Tags

panel reactive progress-bar visualization study-tracker task-management ui-component html-widget svg-display progress-tracking

Similar Components

AI-powered semantic similarity - components with related functionality:

  • class Study_progress 96.7% 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

  • class ProgressIndicator 62.1% similar

    Abstract base class for progress indicators that display task completion as a percentage, providing a framework for implementing custom progress tracking mechanisms.

    From: /tf/active/vicechatdev/patches/util.py

  • class Toolbar 56.7% 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 options 54.0% similar

    A Panel-based UI class for managing slide release visibility in a study management system, allowing users to view and toggle the release status of slides at various hierarchical levels (Study, Group, Animal, Block, Slide).

    From: /tf/active/vicechatdev/options.py

  • class Scrollmenu 53.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
← Back to Browse