From 398c5402d2f1ce0c993c74e1ff4136b3cdb716bb Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 31 Jan 2025 21:59:00 +0600
Subject: [PATCH] web/ProcessingQueueItem: display all steps in progress bar

---
 .../components/queue/ProcessingQueue.svelte   |  3 ++
 .../queue/ProcessingQueueItem.svelte          | 49 ++++++------------
 web/src/components/queue/ProgressBar.svelte   | 50 +++++++++++++++++++
 3 files changed, 68 insertions(+), 34 deletions(-)
 create mode 100644 web/src/components/queue/ProgressBar.svelte

diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte
index 2278ccb4..2d9e0915 100644
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -76,6 +76,9 @@
                     runningWorker={
                         item.state === "running" ? $currentTasks[item.runningWorker] : undefined
                     }
+                    runningWorkerId={
+                        item.state === "running" ? item.runningWorker : undefined
+                    }
                 />
             {/each}
             {#if queue.length === 0}
diff --git a/web/src/components/queue/ProcessingQueueItem.svelte b/web/src/components/queue/ProcessingQueueItem.svelte
index 4e132eb4..d57a004b 100644
--- a/web/src/components/queue/ProcessingQueueItem.svelte
+++ b/web/src/components/queue/ProcessingQueueItem.svelte
@@ -7,7 +7,7 @@
     import type { CobaltQueueItem } from "$lib/types/queue";
     import type { CobaltCurrentTaskItem } from "$lib/types/queen-bee";
 
-    import Skeleton from "$components/misc/Skeleton.svelte";
+    import ProgressBar from "$components/queue/ProgressBar.svelte";
 
     import IconX from "@tabler/icons-svelte/IconX.svelte";
     import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
@@ -27,6 +27,7 @@
     export let id: string;
     export let info: CobaltQueueItem;
     export let runningWorker: CobaltCurrentTaskItem | undefined;
+    export let runningWorkerId: string | undefined;
 
     $: progress = runningWorker?.progress;
     $: size = formatFileSize(runningWorker?.progress?.size);
@@ -50,22 +51,15 @@
         </div>
 
         {#if info.state === "running"}
-            <div class="file-progress">
-                {#if progress?.percentage}
-                    <div
-                        class="progress"
-                        style="width: {Math.min(
-                            100,
-                            progress?.percentage || 0
-                        )}%"
-                    ></div>
-                {:else}
-                    <Skeleton
-                        height="6px"
-                        width="100%"
-                        class="elevated indeterminate-progress"
+            <div class="progress-holder">
+                {#each info.pipeline as pipeline}
+                    <ProgressBar
+                        percentage={progress?.percentage}
+                        workerId={pipeline.workerId}
+                        runningWorkerId={runningWorkerId}
+                        completedWorkers={info.completedWorkers}
                     />
-                {/if}
+                {/each}
             </div>
         {/if}
 
@@ -75,6 +69,7 @@
             {/if}
 
             {#if info.state === "running"}
+                {(info.completedWorkers?.length || 0) + 1}/{info.pipeline.length}
                 {#if runningWorker && progress && progress.percentage}
                     {$t(`queue.state.running.${runningWorker.type}`)}: {Math.ceil(
                         progress.percentage
@@ -147,24 +142,10 @@
         font-weight: 500;
     }
 
-    .file-progress {
-        width: 100%;
-        background-color: var(--button-elevated);
-    }
-
-    .file-progress,
-    .file-progress .progress {
-        height: 6px;
-        border-radius: 10px;
-        transition: width 0.1s;
-    }
-
-    .file-progress :global(.indeterminate-progress) {
-        display: block;
-    }
-
-    .file-progress .progress {
-        background-color: var(--blue);
+    .progress-holder {
+        display: flex;
+        flex-direction: row;
+        gap: 2px;
     }
 
     .file-title {
diff --git a/web/src/components/queue/ProgressBar.svelte b/web/src/components/queue/ProgressBar.svelte
new file mode 100644
index 00000000..f2f5d448
--- /dev/null
+++ b/web/src/components/queue/ProgressBar.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import Skeleton from "$components/misc/Skeleton.svelte";
+
+    export let percentage: number = 0;
+    export let workerId: string;
+    export let runningWorkerId: string | undefined;
+    export let completedWorkers: string[] = [];
+</script>
+
+<div class="file-progress">
+    {#if percentage && workerId === runningWorkerId}
+        <div
+            class="progress"
+            style="width: {Math.min(100, percentage || 0)}%"
+        ></div>
+    {:else if completedWorkers.includes(workerId)}
+        <div
+            class="progress"
+            style="width: 100%"
+        ></div>
+    {:else if workerId === runningWorkerId}
+        <Skeleton
+            height="6px"
+            width="100%"
+            class="elevated indeterminate-progress"
+        />
+    {/if}
+</div>
+
+<style>
+    .file-progress {
+        width: 100%;
+        background-color: var(--button-elevated);
+    }
+
+    .file-progress,
+    .file-progress .progress {
+        height: 6px;
+        border-radius: 10px;
+        transition: width 0.1s;
+    }
+
+    .file-progress :global(.indeterminate-progress) {
+        display: block;
+    }
+
+    .file-progress .progress {
+        background-color: var(--blue);
+    }
+</style>