🔍 Code Extractor

class Study_progress

Maturity: 40

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/.ipynb_checkpoints/py2html-checkpoint.py
Lines:
490 - 566
Complexity:
moderate

Purpose

Study_progress is a custom Panel widget that creates an interactive progress bar visualization. It displays two lists of items: 'finished' tasks shown on the left side and 'to_do' tasks shown on the right side. Each item is rendered as an SVG icon loaded from a custom static directory. The component uses a gradient background and dynamically adjusts its layout based on whether there are pending tasks. It's designed for educational or task-tracking applications where visual progress indication is needed.

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) {
            console.log("there's more to do, add whitespace")
            filladelphia.remove()
            fillcollins.remove()
            emptyRow.remove()
        }
            
    """,
    }

Parameters

Name Type Default Kind
bases ReactiveHTML -

Parameter Details

finished: A list of strings representing completed tasks/items. Each string should correspond to an SVG filename (without extension) in the './custom_static/images/Minimal/' directory. These items are displayed on the left side of the progress bar with full color.

to_do: A list of strings representing pending tasks/items. Each string should correspond to an SVG filename (without extension) in the './custom_static/images/Minimal/' directory. These items are displayed on the right side of the progress bar. When this list is empty, the component removes whitespace elements to show completion.

Return Value

Instantiation returns a Study_progress object that inherits from ReactiveHTML. This object can be added to Panel layouts and will render as an HTML component with the defined template. 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 the Study_progress component with lists of finished and pending tasks

Parameters:

  • finished: List of completed task identifiers (strings matching SVG filenames)
  • to_do: List of pending task identifiers (strings matching SVG filenames)
  • **params: Additional parameters inherited from ReactiveHTML parent class

Returns: Study_progress instance

Attributes

Name Type Description Scope
finished param.List List of completed task identifiers. Each item is rendered as an SVG icon on the left side of the progress bar. Updating this list triggers a re-render. instance
to_do param.List List of pending task identifiers. Each item is rendered as an SVG icon on the right side of the progress bar. When empty, the component adjusts layout to show completion state. instance
_template str HTML template string defining the component's structure with embedded CSS styles. Contains the taskbar layout with gradient background and placeholder divs for dynamic content. class
_scripts dict Dictionary containing JavaScript code for rendering logic. The 'render' script populates the progress bar with SVG icons based on finished and to_do lists, and adjusts layout 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

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']

# Mark all tasks complete
progress.finished = ['lesson1', 'lesson2', 'quiz1', 'lesson3', 'lesson4', 'final_exam']
progress.to_do = []  # This will trigger layout adjustment

# Serve the app
app.servable()

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 icons that match task identifiers
  • Update 'finished' and 'to_do' lists atomically rather than appending individual items for better performance
  • When all tasks are complete, set 'to_do' to an empty list to trigger the completion layout
  • Configure Panel's static file serving correctly to ensure SVG images load properly
  • The component automatically re-renders when parameters change due to ReactiveHTML inheritance
  • SVG filenames should not include the .svg extension in the list values
  • The gradient background is fixed; customize by modifying the _template if needed
  • Console logging is enabled in the JavaScript for debugging; remove in production if desired

Tags

panel reactive progress-bar visualization ui-component task-tracking study-tracker education dashboard html-template javascript svg-icons

Similar Components

AI-powered semantic similarity - components with related functionality:

  • class Study_progress_v1 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/py2html.py

  • class ProgressIndicator 59.8% 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.9% 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.1% 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