Simplified parallel structure

src/tqdm_publisher/_demos/_client.css

@@ -1,7 +1,9 @@
+* {
+    box-sizing: border-box;
+}
 
 html, body {
     font-family: sans-serif;
-    box-sizing: border-box;
 }
 
 h1 {
@@ -10,49 +12,99 @@ h1 {
     font-size: 1.5rem;
 }
 
+h2 {
+    margin: 0;
+    padding: 0;
+    font-size: 1.2rem;
+}
+
 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 20px 0px;
+}
+
+body > header {
     padding: 20px;
 }
 
+
 #bars {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
+    padding: 0px 20px;
 }
 
-.progress {
+.request-container {
     width: 100%;
-    height: 20px;
-    background-color: #ddd;
-    box-sizing: border-box;
 }
 
-.progress div {
-    height: 100%;
-    background-color: #4caf50;
-    width: 0%;
+.bar {
+    padding: 10px;
 }
 
-.progress[data-small="true"] {
-    height: 10px;
+.bar, .progress {
+    width: 100%;
+}
+
+/* Small Bar */
+.bar[data-small="true"] {
     border-bottom: 1px solid gainsboro;
 }
 
-.progress[data-small="true"]:last-child {
+.bar > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+
+.bar[data-small="true"] .progress {
+    height: 10px;
+}
+
+.bar[data-small="true"] .progress:last-child {
     border-bottom: none;
 }
 
-.progress[data-small="false"] {
+/* Large Bar */
+.bar[data-small="false"] {
     border-bottom: 1px solid black;
+}
+
+.bar[data-small="false"] .progress {
     padding: 4px;
 }
 
+.progress {
+    height: 20px;
+    background-color: #ddd;
+}
+
+.progress div {
+    height: 100%;
+    background-color: #4caf50;
+    width: 0%;
+}
+
 
 .bar-container {
     border: 1px solid black;
 }
+
+small {
+    font-size: 0.7rem;
+    color: gray;
+    width: min-content;
+    white-space: nowrap;
+}
+
+.bar > div:last-child > small:not(:empty) {
+    font-size: 0.65rem;
+    margin-top: 5px;
+}

src/tqdm_publisher/_demos/_demo_command_line_interface.py

@@ -6,9 +6,6 @@
 
 from tqdm_publisher._demos._multiple_bars._server import run_multiple_bar_demo
 from tqdm_publisher._demos._parallel_bars._server import run_parallel_bar_demo
-from tqdm_publisher._demos._parallel_bars._server_ws import (
-    run_parallel_bar_demo as run_parallel_bar_demo_ws,
-)
 from tqdm_publisher._demos._single_bar._server import run_single_bar_demo
 
 CLIENT_PORT = 1234
@@ -17,7 +14,6 @@
     "demo_single": dict(subpath="_single_bar", server=run_single_bar_demo),
     "demo_multiple": dict(subpath="_multiple_bars", server=run_multiple_bar_demo),
     "demo_parallel": dict(subpath="_parallel_bars", server=run_parallel_bar_demo),
-    "demo_parallel_ws": dict(subpath="_parallel_bars", server=run_parallel_bar_demo_ws),
 }
 
 DEMO_BASE_FOLDER_PATH = Path(__file__).parent

src/tqdm_publisher/_demos/_multiple_bars/_client.js

@@ -6,7 +6,9 @@ const bars = {} // Track progress bars
 // Update the specified progress bar when a message is received from the server
 const onProgressUpdate = (event) => {
     const { request_id, format_dict } = JSON.parse(event.data);
-    bars[request_id].style.width = 100 * (format_dict.n / format_dict.total) + '%';
+    const { update } = bars[request_id];
+    update(format_dict);
+
 }
 
 // Create a new WebSocket client

src/tqdm_publisher/_demos/_parallel_bars/_client.js

@@ -1,53 +1,15 @@
 import { EventSourceManager } from '../utils/EventSourceManager.js';
-import { WebSocketManager } from '../utils/WebSocketManager.js';
-import { createProgressBar } from '../utils/elements.js';
+import { getBar } from '../utils/elements.js';
 
-const bars = {} // Track progress bars
-const requests = {} // Track request containers
-
-function getRequestContainer(request_id) {
-    const existing = requests[request_id]
-    if (existing) return existing;
-
-    // Create a new container for the progress bar
-    const container = document.createElement('div');
-    container.id = request_id;
-    container.classList.add('request-container');
-    const h2 = document.createElement('h2');
-    h2.innerText = `Request ID: ${request_id}`;
-    container.append(h2);
-    document.body.append(container);
-    const barContainer = document.createElement('div');
-    barContainer.classList.add('bar-container');
-    container.append(barContainer);
-    requests[request_id] = barContainer;
-
-    return barContainer;
-}
-
-// Create and/or render a progress bar
-const getBar = (request_id, id) => {
-
-    if (bars[id]) return bars[id];
-
-    const container = getRequestContainer(request_id);
-    const bar = createProgressBar(container);
-
-    bar.parentElement.setAttribute('data-small', request_id !== id); // Add a small style to the progress bar if it is not the main request bar
-
-    return bars[id] = bar;
-
-}
 
 // Update the specified progress bar when a message is received from the server
 const onProgressUpdate = (event) => {
     const { request_id, progress_bar_id, format_dict } = JSON.parse(event.data);
-    const bar = getBar(request_id, progress_bar_id);
-    bar.style.width = 100 * (format_dict.n / format_dict.total) + '%';
+    const { update } = getBar(request_id, progress_bar_id);
+    update(format_dict, { request_id, progress_bar_id });
 }
 
 // Create a new message client
-const wsClient = new WebSocketManager({ onmessage: onProgressUpdate }, 3);
 const client = new EventSourceManager({ onmessage: onProgressUpdate });
 
 // Declare that the HTML Button should create a new progress bar when clicked
@@ -56,5 +18,4 @@ button.addEventListener('click', async () => {
     const request_id = Math.random().toString(36).substring(7); // Create a unique ID for the progress bar
     getBar(request_id, request_id); // Create a bar specifically for this request
     await client.send({ command: 'start', request_id }).catch(() => {}); // Send a message to the server to start the progress bar
-    wsClient.send({ command: 'start', request_id }); // Send a message to the server to start the progress bar
 })