Merge pull request #3 from koaning/koaning/progress-bar-dark-mode

progress bar

Author: koaning

README.md

@@ -17,6 +17,14 @@ uv pip install mofresh
 
 The goal of this project is to offer a few tools that make it easy for you to refresh charts in marimo. This can be useful during a PyTorch training loop where you might want to update a chart on every iteration, but there are many other use-cases for this too.
 
+### Widgets
+
+The library provides three widgets:
+
+1. **`ImageRefreshWidget`** - Displays images that can be updated dynamically. Perfect for refreshing matplotlib plots or any image content.
+2. **`HTMLRefreshWidget`** - Renders HTML content that can be updated on the fly. Great for Altair charts, plotly visualizations, or custom HTML.
+3. **`ProgressBar`** - A modern progress bar with dark mode support. Ideal for tracking training loops or long-running operations.
+
 ## How it works
 
 The trick to get updating charts to work is to leverage [anywidget](https://anywidget.dev/). These widgets have a loop that is independant of the marimo cells which means that you can update a chart even if the cell hasn't completed running. The goal of this library is to make it easy to use this pattern by giving you a few utilities.

demo.py

@@ -13,7 +13,7 @@
 
 import marimo
 
-__generated_with = "0.13.6"
+__generated_with = "0.17.0"
 app = marimo.App(width="medium")
 
 
@@ -112,7 +112,7 @@ def _(mo):
 
     This library can also deal with altair charts. This works by turning the chart into an SVG. This is a static representation that does not require any javascript to run, which means that we can apply a similar pattern as before!
 
-    > Due to a required dependency to convert the altair chart to SVG we cannot run the altair demo in WASM. This code will run just fine locally on your machine but currently breaks on the Github pages deployment. 
+    > Due to a required dependency to convert the altair chart to SVG we cannot run the altair demo in WASM. This code will run just fine locally on your machine but currently breaks on the Github pages deployment.
     """
     )
     return
@@ -195,6 +195,37 @@ def _(html_widget, time):
     return
 
 
+@app.cell
+def _(mo):
+    mo.md(r"""## Progress bars""")
+    return
+
+
+@app.cell
+def _():
+    from mofresh import ProgressBar
+
+    progress = ProgressBar(value=0, max_value=100)
+    progress
+    return (progress,)
+
+
+@app.cell
+def _(progress, random, time):
+    from threading import Lock
+    from collections import deque
+
+    def slow_task():
+        """Simulated task that takes time"""
+        time.sleep(random.random())
+
+    progress.value = 0 
+    for _ in range(100):
+        slow_task()
+        progress.value += 1
+    return
+
+
 @app.cell(hide_code=True)
 def _(mo):
     mo.md(r"""Enjoy!""")

mofresh/__init__.py

@@ -82,3 +82,106 @@ def wrapper(*args, **kwargs):
         altair_chart = func(*args, **kwargs)
         return altair2svg(altair_chart)
     return wrapper
+
+
+class ProgressBar(anywidget.AnyWidget):
+    _esm = """
+    function render({ model, el }) {
+        let getValue = () => model.get("value");
+        let getMaxValue = () => model.get("max_value");
+
+        // Check for dark mode via marimo's body class or system preference
+        const checkDarkMode = () => {
+            return document.body.classList.contains('dark') ||
+                   (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        };
+
+        const container = document.createElement('div');
+        container.style.width = '100%';
+        container.style.marginBottom = '10px';
+        container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+
+        // Label
+        const label = document.createElement('div');
+        label.style.marginBottom = '8px';
+        label.style.fontSize = '13px';
+        label.style.fontWeight = '500';
+
+        // Progress bar container
+        const barContainer = document.createElement('div');
+        barContainer.style.width = '100%';
+        barContainer.style.height = '24px';
+        barContainer.style.borderRadius = '12px';
+        barContainer.style.overflow = 'hidden';
+
+        // Progress fill
+        const fill = document.createElement('div');
+        fill.style.height = '100%';
+        fill.style.transition = 'width 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
+        fill.style.display = 'flex';
+        fill.style.alignItems = 'center';
+        fill.style.justifyContent = 'center';
+
+        // Percentage text
+        const text = document.createElement('span');
+        text.style.fontSize = '11px';
+        text.style.fontWeight = '600';
+        text.style.color = 'white';
+        text.style.textShadow = '0 1px 2px rgba(0,0,0,0.3)';
+        text.style.letterSpacing = '0.5px';
+
+        const applyTheme = () => {
+            const isDarkMode = checkDarkMode();
+            label.style.color = isDarkMode ? '#e0e0e0' : '#333';
+            barContainer.style.backgroundColor = isDarkMode ? '#2a2a2a' : '#f0f0f0';
+            barContainer.style.border = isDarkMode ? '1px solid #404040' : '1px solid #d0d0d0';
+            barContainer.style.boxShadow = isDarkMode ? 'inset 0 1px 3px rgba(0,0,0,0.3)' : 'inset 0 1px 3px rgba(0,0,0,0.1)';
+            fill.style.background = isDarkMode
+                ? 'linear-gradient(90deg, #5cb85c 0%, #4cae4c 100%)'
+                : 'linear-gradient(90deg, #66d966 0%, #4caf50 100%)';
+            fill.style.boxShadow = isDarkMode
+                ? '0 0 10px rgba(76, 174, 76, 0.3)'
+                : '0 0 10px rgba(76, 175, 80, 0.3)';
+        };
+
+        const updateDisplay = () => {
+            const value = getValue();
+            const max = getMaxValue();
+            const percentage = max > 0 ? (value / max) * 100 : 0;
+
+            label.textContent = `Progress: ${value} / ${max}`;
+            fill.style.width = percentage + '%';
+            text.textContent = Math.round(percentage) + '%';
+
+            // Update text visibility based on bar width
+            text.style.opacity = percentage > 10 ? '1' : '0';
+        };
+
+        fill.appendChild(text);
+        barContainer.appendChild(fill);
+        container.appendChild(label);
+        container.appendChild(barContainer);
+
+        applyTheme();
+        updateDisplay();
+
+        model.on('change:value', updateDisplay);
+        model.on('change:max_value', updateDisplay);
+
+        // Listen for dark mode changes (both system and marimo)
+        if (window.matchMedia) {
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme);
+        }
+
+        // Watch for marimo dark mode class changes
+        const observer = new MutationObserver(applyTheme);
+        observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+
+        el.appendChild(container);
+    }
+
+    export default { render };
+    """
+
+    value = traitlets.Int(0).tag(sync=True)
+    max_value = traitlets.Int(100).tag(sync=True)

pyproject.toml

@@ -2,9 +2,19 @@
 requires = ["hatchling"]
 build-backend = "hatchling.build"
 
+[tool.hatch.build.targets.sdist]
+include = [
+    "mofresh/",
+    "README.md",
+    "LICENSE",
+]
+
+[tool.hatch.build.targets.wheel]
+packages = ["mofresh"]
+
 [project]
 name = "mofresh"
-version = "0.2.2"
+version = "0.2.4"
 authors = [
     { name = "Vincent Warmerdam" },
 ]