Improve non-parallel demo

README.md

@@ -11,36 +11,50 @@ This is useful if you want to use `tqdm` to track the progress of a long-running
 ```bash
 pip install tqdm_publisher
 ```
+## Getting Started
+### Basic Usage
+To monitor the progress of an existing `tqdm` progress bar, simply swap the `tqdm`and `TQDMPublisher` constructors. Then, declare a callback function to handle progress updates, and subscribe it to the `TQDMPublisher` updates using the `subscribe` method _before iteration begins_.
 
-## Usage
+#### Original Code
 ```python
 import random
-import asyncio
+import time
 
-from tqdm_publisher import TQDMPublisher
+from tqdm import tqdm
+
+N_TASKS = 100
+
+# Create a list of tasks
+durations = [ random.uniform(0, 1.0) for _ in range(N_TASKS) ]
+
+# Create a progress bar
+progress_bar = tqdm(durations)
 
-async def sleep_func(sleep_duration = 1):
-    await asyncio.sleep(delay=sleep_duration)
+# Iterate over the progress bar
+for duration in progress_bar:
+    time.sleep(duration) # Execute the task
+```
 
-async def run_multiple_sleeps(sleep_durations):
+#### Modified Code
 
-    tasks = []
+```python
+import random
+import time
 
-    for sleep_duration in sleep_durations:
-        task = asyncio.create_task(sleep_func(sleep_duration=sleep_duration))
-        tasks.append(task)
+from tqdm_publisher import TQDMPublisher
 
-    progress_bar = TQDMPublisher(asyncio.as_completed(tasks), total=len(tasks))
-    callback_id = progress_bar.subscribe(lambda info: print('Progress Update', info))
+N_TASKS = 100
+durations = [ random.uniform(0, 1.0) for _ in range(N_TASKS) ]
+progress_bar = TQDMPublisher(durations)
 
-    for f in progress_bar:
-        await f
+# Declare a callback function to handle progress updates
+on_update = lambda info: print('Progress Update', info)
 
-    progress_bar.unsubscribe(callback_id)
+# Subscribe the callback to the TQDMPublisher
+progress_bar.subscribe(on_update)
 
-number_of_tasks = 10**5
-sleep_durations = [random.uniform(0, 5.0) for _ in range(number_of_tasks)]
-asyncio.run(run_multiple_sleeps(sleep_durations=sleep_durations))
+for duration in progress_bar:
+    time.sleep(duration)
 ```
 
 ## Demo

pyproject.toml

@@ -31,6 +31,7 @@ classifiers = [
     "Operating System :: MacOS",
     "Operating System :: Unix",
 ]
+
 dependencies = [
     "tqdm>=4.49.0"
 ]
@@ -50,8 +51,8 @@ demo = [
 "Homepage" = "https://github.com/catalystneuro/tqdm_publisher"
 "Bug Tracker" = "https://github.com/catalystneuro/tqdm_publisher/issues"
 
-[project.gui-scripts]
-tqdm_publisher = "demo.demo_cli:main"
+[project.scripts]
+tqdm_publisher = "tqdm_publisher._demo._demo_command_line_interface:_command_line_interface"
 
 [tool.black]
 line-length = 120

demo/client.html → src/tqdm_publisher/_demo/_client.html

@@ -74,35 +74,67 @@ <h1>tqdm_progress</h1>
 
 <script>
 
-    const bars = document.querySelector('#bars');
+    const barElements = document.querySelector('#bars');
+
+    const createProgressBar = () => {
+        const element = document.createElement('div');
+        element.classList.add('progress');
+        const progress = document.createElement('div');
+        element.appendChild(progress);
+        barElements.appendChild(element);
+        return { element, progress };
+    }
 
     class ProgressClient {
-        constructor() {
-            this.socket = new WebSocket('ws://localhost:8000');
+        #connect = (props = {}) => {
 
-            this.element = document.createElement('div');
-            this.element.classList.add('progress');
-            const progress = document.createElement('div');
-            this.element.appendChild(progress);
-            bars.appendChild(this.element);
+            const {
+                onopen = () => {},
+                onclose = () => {},
+                onmessage = () => {}
+            } = props;
 
-            this.socket.addEventListener('message', function (event) {
-                const data = JSON.parse(event.data);
-                progress.style.width = 100 * (data.n / data.total) + '%';
+            this.socket = new WebSocket('ws://localhost:8000');
+            this.socket.addEventListener('open', onopen);
+            this.socket.addEventListener('close', () => {
+                onclose();
+                setTimeout(() => this.#connect(props), 1000);
             });
+            this.socket.addEventListener('message', onmessage);
+        }
+        constructor(props) {
+
+            this.#connect(props);
 
         }
 
         close() {
             this.socket.close();
-            this.element.remove()
         }
 
     }
 
+
+const bars = {}
+const client = new ProgressClient({
+    onopen: () => console.log('Connected'),
+    onclose: () => console.log('Disconnected'),
+    onmessage: (data) => {
+        const { id, payload } = JSON.parse(event.data);
+        console.log(id, payload, bars[id]);
+        bars[id].style.width = 100 * (payload.n / payload.total) + '%';
+    }
+});
+
 const button = document.querySelector('button');
 button.addEventListener('click', () => {
-    const client = new ProgressClient();
+    const { element, progress } = createProgressBar();
+    barElements.appendChild(element);
+
+    const progress_bar_id = Math.random().toString(36).substring(7);
+    bars[progress_bar_id] = progress;
+
+    client.socket.send(JSON.stringify({ command: 'start', progress_bar_id }));
 })
 
 </script>