Show duration instead of rate for slow progress (#7209)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
#123).
-->

When using the progress bar the duration (e.g. `2 min, 2s per iter`) of
each loop will be shown instead of the rate (e.g. `0.01 iter/s`) when
progress is slow.

## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->

When progress is slow the current implementation of the progress bar is
not very helpful as it is harder to interpret `0.01 iter/s` than `1 min
40s per iter`. When the rate is very low the rounding also makes `100s`
appear the same as `100m` (both `0.01 iter/s`). This commit detects when
the rate drops below 1 iteration per second and switches the display to
show time per iteration instead.

## Comparison Table

|Rate [iter/s] | Old          | New         |
|-----|----------|----------|
|10|10 iter/s | 10 iter/s |
|1|1 iter/s | 1 iter/s |
|0.5|0.5 iter/s | 2s per iter |
|0.3267|0.33 iter/s | 3.06s per iter |
|0.0751|0.08 iter/s | 13s per iter |
|0.009|0.01 iter/s | 1m, 11s per iter |
|0.00165|0.01 iter/s| 10m, 2s per iter|

This uses the same humanizer that is used for the ETA, so the styles
match. There is one small change to the humanizer: if the seconds are
greater than 10, no decimal places are shown on the smaller unit, to
avoid outputs like `10m, 2.04s`.

## 📋 Checklist

- [X] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [X] I have added tests for the changes made.
- [X] I have run the code and verified that it works as expected.

Author: kjgoodrick

examples/outputs/progress_bar.py

@@ -7,7 +7,9 @@
 @app.cell
 def _():
     import marimo as mo
-    return (mo,)
+    import asyncio
+
+    return (mo, asyncio)
 
 
 @app.cell
@@ -18,19 +20,35 @@ def _(mo):
 
 
 @app.cell
-async def _(mo, rerun):
-    import asyncio
+async def _(mo, asyncio, rerun):
     rerun
     for _ in mo.status.progress_bar(
         range(10),
         title="Loading",
         subtitle="Please wait",
         show_eta=True,
-        show_rate=True
+        show_rate=True,
     ):
         await asyncio.sleep(0.5)
     return
 
 
+@app.cell
+def _(mo):
+    rerun_slow = mo.ui.button(label="Rerun Slow")
+    rerun_slow
+    return (rerun_slow,)
+
+
+@app.cell
+async def _(mo, asyncio, rerun_slow):
+    rerun_slow
+    for _ in mo.status.progress_bar(
+        range(2), title="Loading", subtitle="Please wait", show_eta=True, show_rate=True
+    ):
+        await asyncio.sleep(12)
+    return
+
+
 if __name__ == "__main__":
     app.run()

frontend/src/plugins/layout/ProgressPlugin.tsx

@@ -93,10 +93,13 @@ export const ProgressComponent = ({
 
     const elements: React.ReactNode[] = [];
     if (rate) {
-      elements.push(
-        <span key="rate">{rate} iter/s</span>,
-        <span key="spacer-rate">&middot;</span>,
-      );
+      if (rate < 1) {
+        elements.push(<span key="rate">{prettyTime(1 / rate)} per iter</span>);
+      } else {
+        elements.push(<span key="rate">{rate} iter/s</span>);
+      }
+
+      elements.push(<span key="spacer-rate">&middot;</span>);
     }
 
     if (!hasCompleted && eta) {
@@ -170,6 +173,6 @@ export function prettyTime(seconds: number): string {
     language: "shortEn",
     largest: 2,
     spacer: "",
-    maxDecimalPoints: 2,
+    maxDecimalPoints: seconds < 10 ? 2 : 0,
   });
 }

frontend/src/plugins/layout/__test__/ProgressPlugin.test.ts

@@ -2,25 +2,41 @@
 import { expect, test } from "vitest";
 import { prettyTime } from "../ProgressPlugin";
 
-// examples of expected output
-test("prettyTime", () => {
-  // exact
-  expect(prettyTime(0)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(1)).toMatchInlineSnapshot('"1s"');
-  expect(prettyTime(60)).toMatchInlineSnapshot('"1m"');
-  expect(prettyTime(60 * 60)).toMatchInlineSnapshot('"1h"');
-  expect(prettyTime(60 * 60 * 24)).toMatchInlineSnapshot('"1d"');
-
-  // decimal
-  expect(prettyTime(0.5)).toMatchInlineSnapshot('"0.5s"');
-  expect(prettyTime(1.5)).toMatchInlineSnapshot('"1.5s"');
-  expect(prettyTime(60 * 1.5)).toMatchInlineSnapshot('"1m, 30s"');
-  expect(prettyTime(60 * 60 * 1.5)).toMatchInlineSnapshot('"1h, 30m"');
-  expect(prettyTime(60 * 60 * 24 * 1.5)).toMatchInlineSnapshot('"1d, 12h"');
-
+const Cases: Array<[number, string]> = [
+  // exact values
+  [0, "0s"],
+  [1, "1s"],
+  [5, "5s"],
+  [15, "15s"],
+  [60, "1m"],
+  [100, "1m, 40s"],
+  [60 * 60, "1h"],
+  [60 * 60 * 24, "1d"],
+  [60 * 60 * 24 * 7, "1w"],
+  [60 * 60 * 24 * 8, "1w, 1d"],
+  [60 * 60 * 24 * 30, "4w, 2d"],
+  [60 * 60 * 24 * 366, "1y, 18h"],
+  [60 * 60 * 24 * 466, "1y, 3mo"],
+  // decimal values
+  [0.5, "0.5s"],
+  [1.5, "1.5s"],
+  [5.2, "5.2s"],
+  [5.33, "5.33s"],
+  [15.2, "15s"],
+  [60 * 1.5, "1m, 30s"],
+  [100.2, "1m, 40s"],
+  [60 * 60 * 1.5, "1h, 30m"],
+  [60 * 60 * 24 * 1.5, "1d, 12h"],
   // edge cases
-  expect(prettyTime(0)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(0.0001)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(0.001)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(0.01)).toMatchInlineSnapshot('"0.01s"');
-});
+  [0, "0s"],
+  [0.0001, "0s"],
+  [0.001, "0s"],
+  [0.01, "0.01s"],
+];
+
+// generate one test per pair
+for (const [input, expected] of Cases) {
+  test(`prettyTime(${input}) → ${expected}`, () => {
+    expect(prettyTime(input)).toBe(expected);
+  });
+}

marimo/_plugins/stateless/status/_progress.py

@@ -135,7 +135,9 @@ def _calculate_rate(self) -> Optional[float]:
         if diff == 0:
             return None
         rate = self.current / diff
-        return round(rate, 2)
+        # If rate is less than 1, return as is (e.g., 0.5)
+        # As the UI will format it as "2s per iter"
+        return round(rate, 2) if rate >= 1 else rate
 
     def _get_rate(self) -> Optional[float]:
         if self.show_rate:
@@ -309,7 +311,7 @@ class progress_bar(Generic[S]):
         completion_title (str, optional): Optional title to show during completion.
         completion_subtitle (str, optional): Optional subtitle to show during completion.
         total (int, optional): Optional total number of items to iterate over.
-        show_rate (bool, optional): If True, show the rate of progress (items per second).
+        show_rate (bool, optional): If True, show the rate of progress (items per second or duration per iteration).
         show_eta (bool, optional): If True, show the estimated time of completion.
         remove_on_exit (bool, optional): If True, remove the progress bar from output on exit.
         disabled (bool, optional): If True, disable the progress bar.

marimo/_smoke_tests/async_iterator.py

@@ -1,6 +1,6 @@
 import marimo
 
-__generated_with = "0.15.3"
+__generated_with = "0.17.8"
 app = marimo.App(width="medium")
 
 
@@ -14,26 +14,30 @@ async def sleep(seconds):
 
 
 @app.cell
-async def _() -> None:
+async def _():
     import marimo as mo
 
     async def test_progress_async() -> None:
-
         ait = sleep([0.3, 0.2, 0.1])
         result = [s async for s in mo.status.progress_bar(ait, total=3)]
         assert result == [0.1, 0.2, 0.3]
 
     await test_progress_async()
-    return
+    return (mo,)
 
 
 @app.cell
-def _() -> None:
-    return
+async def _(mo):
+    async def test_progress_slow_async() -> None:
+        test_durations = [250, 35, 10, 1.5]
+        ait = sleep(test_durations)
+        result = [
+            s async for s in mo.status.progress_bar(ait, total=len(test_durations))
+        ]
 
+        assert result == sorted(test_durations)
 
-@app.cell
-def _() -> None:
+    await test_progress_slow_async()
     return
 
 

tests/_plugins/stateless/status/test_progress.py

@@ -67,6 +67,36 @@ def test_update_progress(mock_flush: Any) -> None:
     mock_flush.assert_called_once()
 
 
+# Test update_progress method slow
+@patch("marimo._runtime.output._output.flush")
+def test_update_progress_slowly(mock_flush: Any) -> None:
+    progress = _Progress(
+        title="Test",
+        subtitle="Running Slowly",
+        total=5,
+        show_rate=True,
+        show_eta=True,
+    )
+
+    # Mock sleep 120 seconds
+    with patch("time.time", return_value=progress.start_time + 120):
+        progress.update_progress(
+            increment=1, title="Updated", subtitle="Still Running Slowly"
+        )
+
+        rate = progress._get_rate()
+        eta = progress._get_eta()
+
+    assert progress.current == 1
+    assert progress.title == "Updated"
+    assert progress.subtitle == "Still Running Slowly"
+    assert rate is not None
+    assert rate > 0.0
+    assert eta is not None
+    assert eta > 0.0
+    mock_flush.assert_called_once()
+
+
 # Test update_progress without arguments
 @patch("marimo._runtime.output._output.flush")
 def test_update_progress_no_args(mock_flush: Any) -> None: