Improve non-parallel demo (#40)

* fixing for M1 Mac

* Fix name of file targeted

* Simplify demo structure (#39)

* Simplify synchronous demo

* Update docs

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

* suggestions for readability

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Update descriptions and types

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Update _server.py

* Fix demo

* Document the frontend

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Update src/tqdm_publisher/_demo/_client.js

* Functional websocket declaration (#42)

* Update _server.py

* more keyword arguments; break up docstring; remove unused capture

* more keyword arguments

---------

Co-authored-by: Garrett Michael Flynn <[email protected]>

---------

Co-authored-by: CodyCBakerPhD <[email protected]>
Co-authored-by: Garrett Michael Flynn <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

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

@@ -12,6 +12,7 @@
 
     <title>Concurrent Client Demo</title>
 
+    <!-- Basic Page Styling -->
     <style>
 
         html, body {
@@ -45,66 +46,30 @@
             background-color: #ddd;
         }
 
-
-
         .progress div {
             height: 100%;
             background-color: #4caf50;
             width: 0%;
         }
 
     </style>
+    <script src="./_client.js" defer></script>
 
 </head>
 
+<!-- Basic Page Structure -->
 <body>
     <header>
         <div>
             <h1>tqdm_progress</h1>
             <i><small>Create multiple progress bars to test concurrent subscriptions</small></i>
         </div>
+
+        <!-- Declare a button to create progress bars -->
         <button>Create Progress Bar</button>
     </header>
 
-    <div id="bars">
-
-    </div>
-
+    <!-- Declare a container to hold the progress bars -->
+    <div id="bars"></div>
 </body>
-
-<script>
-
-    const bars = document.querySelector('#bars');
-
-    class ProgressClient {
-        constructor() {
-            this.socket = new WebSocket('ws://localhost:8000');
-
-            this.element = document.createElement('div');
-            this.element.classList.add('progress');
-            const progress = document.createElement('div');
-            this.element.appendChild(progress);
-            bars.appendChild(this.element);
-
-            this.socket.addEventListener('message', function (event) {
-                const data = JSON.parse(event.data);
-                progress.style.width = 100 * (data.n / data.total) + '%';
-            });
-
-        }
-
-        close() {
-            this.socket.close();
-            this.element.remove()
-        }
-
-    }
-
-const button = document.querySelector('button');
-button.addEventListener('click', () => {
-    const client = new ProgressClient();
-})
-
-</script>
-
 </html>