Queue beginnings

src/lib/ComfyGraphCanvas.ts

@@ -1,5 +1,7 @@
 import { BuiltInSlotShape, LGraph, LGraphCanvas, LGraphNode, LiteGraph, NodeMode, type MouseEventExt, type Vector2, type Vector4 } from "@litegraph-ts/core";
 import type ComfyApp from "./components/ComfyApp";
+import queueState from "./stores/queueState";
+import { get } from "svelte/store";
 
 export default class ComfyGraphCanvas extends LGraphCanvas {
     app: ComfyApp
@@ -30,8 +32,10 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
     ): void {
         super.drawNodeShape(node, ctx, size, fgColor, bgColor, selected, mouseOver);
 
+        let state = get(queueState);
+
         let color = null;
-        if (node.id === +this.app.runningNodeId) {
+        if (node.id === +state.runningNodeId) {
             color = "#0f0";
         } else if (this.app.dragOverNode && node.id === this.app.dragOverNode.id) {
             color = "dodgerblue";
@@ -68,9 +72,9 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
             ctx.strokeStyle = fgColor;
             ctx.globalAlpha = 1;
 
-            if (this.app.progress) {
+            if (state.progress) {
                 ctx.fillStyle = "green";
-                ctx.fillRect(0, 0, size[0] * (this.app.progress.value / this.app.progress.max), 6);
+                ctx.fillRect(0, 0, size[0] * (state.progress.value / state.progress.max), 6);
                 ctx.fillStyle = bgColor;
             }
         }

src/lib/api.ts

@@ -8,6 +8,12 @@ type PromptRequestBody = {
 
 export type QueueItemType = "queue" | "history";
 
+export type ComfyAPIQueueStatus = {
+    exec_info: {
+        queue_remaining: number | "X";
+    }
+}
+
 export default class ComfyAPI extends EventTarget {
     private registered: Set<string> = new Set<string>();
 

src/lib/components/ComfyApp.svelte

@@ -13,10 +13,14 @@
  import { LGraph, LGraphNode } from "@litegraph-ts/core";
 	import LightboxModal from "./LightboxModal.svelte";
 	import { Block } from "@gradio/atoms";
+	import ComfyQueue from "./ComfyQueue.svelte";
+	import type { ComfyAPIStatus } from "$lib/api";
+	import queueState from "$lib/stores/queueState";
 
  let app: ComfyApp = undefined;
  let imageViewer: ImageViewer;
  let uiPane: ComfyUIPane = undefined;
+ let queue: ComfyQueue = undefined;
  let mainElem: HTMLDivElement;
  let containerElem: HTMLDivElement;
  let nodesLocked: boolean = false;
@@ -124,6 +128,10 @@
      app.eventBus.on("autosave", doAutosave);
      app.eventBus.on("restored", doRestore);
 
+     app.api.addEventListener("status", (ev: CustomEvent) => {
+         queueState.statusUpdated(ev.detail as ComfyAPIStatus);
+     });
+
      await app.setup();
      refreshView();
 
@@ -160,7 +168,7 @@
             </Pane>
             <Pane bind:size={sidebarSize}>
                 <div class="sidebar-wrapper pane-wrapper">
-                    Sidebar
+                    <ComfyQueue bind:this={queue} />
                 </div>
             </Pane>
         </Splitpanes>

src/lib/components/ComfyApp.ts

@@ -15,6 +15,7 @@ import type ComfyGraphNode from "$lib/ComfyGraphNode";
 import type { WidgetStateStore, WidgetUIState } from "$lib/stores/widgetState";
 import * as widgets from "$lib/widgets/index"
 import type ComfyWidget from "$lib/widgets/ComfyWidget";
+import queueState from "$lib/stores/queueState";
 
 LiteGraph.catch_exceptions = false;
 
@@ -70,9 +71,7 @@ export default class ComfyApp {
     nodeOutputs: Record<string, any> = {};
     eventBus: TypedEmitter<ComfyAppEvents> = new EventEmitter() as TypedEmitter<ComfyAppEvents>;
 
-    runningNodeId: number | null = null;
     dragOverNode: LGraphNode | null = null;
-    progress: Progress | null = null;
     shiftDown: boolean = false;
     selectedGroupMoving: boolean = false;
 
@@ -366,7 +365,7 @@ export default class ComfyApp {
      * Handles updates from the API socket
      */
     private addApiUpdateHandlers() {
-        this.api.addEventListener("status", ({ detail }: CustomEvent) => {
+        this.api.addEventListener("status", ({ detail: ComfyAPIStatus }: CustomEvent) => {
             // this.ui.setStatus(detail);
         });
 
@@ -379,13 +378,12 @@ export default class ComfyApp {
         });
 
         this.api.addEventListener("progress", ({ detail }: CustomEvent) => {
-            this.progress = detail;
+            queueState.progressUpdated(detail);
             this.lGraph.setDirtyCanvas(true, false);
         });
 
         this.api.addEventListener("executing", ({ detail }: CustomEvent) => {
-            this.progress = null;
-            this.runningNodeId = detail;
+            queueState.executingUpdated(detail);
             this.lGraph.setDirtyCanvas(true, false);
         });
 

src/lib/components/ComfyPane.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
  import { onDestroy } from "svelte";
+ import { get } from "svelte/store"
  import { Block, BlockTitle } from "@gradio/atoms";
  import { Move } from 'radix-icons-svelte';
  import ComboWidget from "$lib/widgets/ComboWidget.svelte";
  import RangeWidget from "$lib/widgets/RangeWidget.svelte";
  import TextWidget from "$lib/widgets/TextWidget.svelte";
- import widgetState, { type WidgetUIState } from "$lib/stores/widgetState";
+ import widgetState, { type WidgetDrawState, type WidgetUIState } from "$lib/stores/widgetState";
+ import queueState from "$lib/stores/queueState";
 
  import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
 
@@ -14,8 +16,10 @@
  import {cubicIn} from 'svelte/easing';
  import { flip } from 'svelte/animate';
 	import ComfyApp from "./ComfyApp";
+	import type { LGraphNode } from "@litegraph-ts/core";
+	import type { DragItem } from "./ComfyUIPane";
 
- export let dragItems = [];
+ export let dragItems: DragItem[] = [];
  let dragDisabled = true;
  const flipDurationMs = 200;
 
@@ -42,6 +46,13 @@
 
  onDestroy(unsubscribe);
 
+ $: if ($queueState.runningNodeId) {
+     for (let dragItem of dragItems) {
+         dragItem.isNodeExecuting = $queueState.runningNodeId === dragItem.node.id;
+     }
+     dragItems = dragItems;
+ }
+
  function getComponentForWidgetState(item: WidgetUIState): any {
      let ctor: any = null;
 
@@ -76,12 +87,12 @@
     {#each dragItems as dragItem(dragItem.id)}
         {@const node = dragItem.node}
         {@const id = node.id}
-        <div class="animation-wrapper" animate:flip={{duration:flipDurationMs}}>
+        <div class="animation-wrapper" class:is-executing={dragItem.isNodeExecuting} animate:flip={{duration:flipDurationMs}}>
             <Block>
                 <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}>
                     <Move/>
                 </div>
-                <label for={id}>
+                <label for={String(id)}>
                     <BlockTitle>{node.title}</BlockTitle>
                 </label>
                 {#each $widgetState[id] as item}
@@ -105,6 +116,10 @@
      width: 33%;
  }
 
+ .is-executing :global(.block) {
+     border: 5px dashed var(--color-green-600) !important;
+ }
+
  .handle {
      cursor: grab;
      position: absolute;

src/lib/components/ComfyQueue.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+ import queueState from "$lib/stores/queueState";
+ import ProgressBar from "./ProgressBar.svelte";
+
+ function getNodeInfo(nodeId: number): string {
+     let app = (window as any).app;
+     if (!app)
+         return String(nodeId);
+
+     const title = app.lGraph.getNodeById(nodeId)?.title || String(nodeId);
+     return title + " (" + nodeId + ")"
+ }
+</script>
+
+<div class="queue">
+    <div class="bottom">
+        {#if $queueState.runningNodeId || $queueState.progress}
+            <div class="node-name">
+                <span>Node: {getNodeInfo($queueState.runningNodeId)}</span>
+            </div>
+            <div>
+                <ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
+            </div>
+        {/if}
+        {#if typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0}
+            <div class="queue-remaining in-progress">
+                <div>
+                    Queued prompts: {$queueState.queueRemaining}.
+                </div>
+            </div>
+        {:else}
+            <div class="queue-remaining done">
+                <div>
+                    Nothing queued.
+                </div>
+            </div>
+        {/if}
+    </div>
+</div>
+
+<style lang="scss">
+ .queue-remaining {
+     height: 5em;
+     width: 100%;
+     text-align: center;
+     border: 5px solid #CCC;
+     position: relative;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+ }
+
+ .node-name {
+     border: 5px solid #CCC;
+     background-color: var(--color-red-300);
+     padding: 0.2em;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+ }
+
+ .bottom {
+     width: 100%;
+     height: auto;
+     position: absolute;
+     bottom: 0;
+     padding: 0.5em;
+ }
+
+ .in-progress {
+     background-color: var(--secondary-300);
+ }
+ .done {
+     background-color: var(--color-grey-200);
+ }
+
+ .queue-item {
+     height: 1.5em;
+     width: 10em;
+     text-align: center;
+     border: 1px solid black;
+ }
+</style>

src/lib/components/ComfyUIPane.svelte

@@ -6,11 +6,7 @@
  import type { SerializedPanes } from "./ComfyApp"
  import ComfyPane from "./ComfyPane.svelte";
  import widgetState, { type WidgetUIState } from "$lib/stores/widgetState";
-
- type DragItem = {
-     id: number,
-     node: LGraphNode
- }
+	import type { DragItem } from "./ComfyUIPane";
 
  export let app: ComfyApp;
  let dragConfigured: boolean = false;
@@ -84,7 +80,7 @@
 
      // Put everything left over into other columns
      if (Object.keys(nodeIdToDragItem).length > 0) {
-         console.warn("Extra panels without ordering found", nodeIdToDragItem)
+         console.warn("Extra panels without ordering found", nodeIdToDragItem, panels)
          for (const nodeId in nodeIdToDragItem) {
              const dragItem = nodeIdToDragItem[nodeId];
              const paneIndex = findLeastPopulatedPaneIndex();

src/lib/components/ComfyUIPane.ts

@@ -0,0 +1,7 @@
+import type { LGraphNode } from "@litegraph-ts/core"
+
+export type DragItem = {
+    id: number,
+    node: LGraphNode,
+    isNodeExecuting?: boolean
+}

src/lib/components/ProgressBar.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+ export let value: number | null = null;
+ export let max: number | null = null;
+ export let classes: string = "";
+ export let styles: string = "";
+ let percent: number = 0;
+ let text: string = ""
+
+ $: if (value && max) {
+     percent = (value / max) * 100;
+     text = percent.toFixed(1) + "%";
+ } else {
+     percent = 0
+     text = "??.?%"
+ }
+</script>
+
+<div class="progress {classes}" style={styles}>
+    <div class="bar" style="width: {percent}%;">
+        <span class="label">{text}</span>
+    </div>
+</div>
+
+<style>
+ .progress {
+     text-align: center;
+     background-color: lightgrey;
+     padding: 3px;
+     position: relative;
+ }
+
+ .bar {
+     background-color: #B3D8A9;
+     height: 20px;
+ }
+
+ .label {
+     font-size: .9em;
+     position: absolute;
+     margin: 0;
+     left: 0;
+     right: 0;
+     top: 50%;
+     transform: translateY(-50%);
+ }
+</style>

src/lib/stores/queueState.ts

@@ -0,0 +1,53 @@
+import type { ComfyAPIQueueStatus } from "$lib/api";
+import type { Progress } from "$lib/components/ComfyApp";
+import { writable, type Writable } from "svelte/store";
+
+export type QueueItem = {
+    name: string
+}
+
+type QueueStateOps = {
+    statusUpdated: (status: ComfyAPIQueueStatus) => void,
+    executingUpdated: (runningNodeId: string | null) => void,
+    progressUpdated: (progress: Progress | null) => void
+}
+
+export type QueueState = {
+    queueRemaining: number | "X" | null;
+    runningNodeId: number | null;
+    progress: Progress | null
+}
+type WritableQueueStateStore = Writable<QueueState> & QueueStateOps;
+
+const store: Writable<QueueState> = writable({ queueRemaining: null, runningNodeId: null, progress: null })
+
+function statusUpdated(status: ComfyAPIQueueStatus) {
+    store.update((s) => {
+        s.queueRemaining = status.exec_info.queue_remaining;
+        return s
+    })
+}
+
+function executingUpdated(runningNodeId: string | null) {
+    store.update((s) => {
+        s.progress = null;
+        s.runningNodeId = parseInt(runningNodeId);
+        return s
+    })
+}
+
+function progressUpdated(progress: Progress | null) {
+    store.update((s) => {
+        s.progress = progress;
+        return s
+    })
+}
+
+const queueStateStore: WritableQueueStateStore =
+{
+    ...store,
+    statusUpdated,
+    executingUpdated,
+    progressUpdated
+}
+export default queueStateStore;

src/lib/stores/widgetState.ts

@@ -11,6 +11,10 @@ export type WidgetUIState = {
     isVirtual: boolean
 }
 
+export type WidgetDrawState = {
+    isNodeExecuting: boolean
+}
+
 type NodeID = number;
 
 type WidgetStateOps = {
@@ -24,7 +28,7 @@ type WidgetStateOps = {
 export type WidgetStateStore = Record<NodeID, WidgetUIState[]>;
 type WritableWidgetStateStore = Writable<WidgetStateStore> & WidgetStateOps;
 
-const store: Writable<Record<NodeID, WidgetUIState[]>> = writable({})
+const store: Writable<WidgetStateStore> = writable({})
 
 function clear() {
     store.set({})

src/lib/widgets/ComboWidget.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
- import type { WidgetUIState } from "$lib/stores/widgetState";
+ import type { WidgetDrawState, WidgetUIState } from "$lib/stores/widgetState";
  import { BlockTitle } from "@gradio/atoms";
  import { Dropdown } from "@gradio/form";
  import Select from 'svelte-select';