Merge pull request #112 from space-nuko/bughunt

Some issues fixing

src/lib/ComfyGraphCanvas.ts

@@ -25,7 +25,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
     activeErrors?: ComfyGraphErrors = null;
     blinkError: ComfyGraphErrorLocation | null = null;
     blinkErrorTime: number = 0;
-    highlightNodeAndInput: [LGraphNode, number] | null = null;
+    highlightNodeAndInput: [LGraphNode, number | null] | null = null;
 
     get comfyGraph(): ComfyGraph | null {
         return this.graph as ComfyGraph;
@@ -104,7 +104,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         let state = get(queueState);
         let ss = get(selectionState);
 
-        const isRunningNode = node.id == state.runningNodeID
+        const isExecuting = state.executingNodes.has(node.id);
         const nodeErrors = this.activeErrors?.errorsByID[node.id];
         const isHighlightedNode = this.highlightNodeAndInput && this.highlightNodeAndInput[0].id === node.id;
 
@@ -133,11 +133,20 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         else if (isHighlightedNode) {
             color = "cyan";
             thickness = 2
+
+            // Blink node if no input highlighted
+            if (this.highlightNodeAndInput[1] == null) {
+                if (this.blinkErrorTime > 0) {
+                    if ((Math.floor(this.blinkErrorTime / 2)) % 2 === 0) {
+                        color = null;
+                    }
+                }
+            }
         }
         else if (ss.currentHoveredNodes.has(node.id)) {
             color = "lightblue";
         }
-        else if (isRunningNode) {
+        else if (isExecuting) {
             color = "#0f0";
         }
 
@@ -153,7 +162,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
             this.drawNodeOutline(node, ctx, size, mouseOver, fgColor, bgColor, color, thickness)
         }
 
-        if (isRunningNode && state.progress) {
+        if (isExecuting && state.progress) {
             ctx.fillStyle = "green";
             ctx.fillRect(0, 0, size[0] * (state.progress.value / state.progress.max), 6);
             ctx.fillStyle = bgColor;
@@ -172,9 +181,11 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
             }
             if (draw) {
                 const [node, inputSlot] = this.highlightNodeAndInput;
-                ctx.lineWidth = 2;
+                if (inputSlot != null) {
-                ctx.strokeStyle = color;
+                    ctx.lineWidth = 2;
-                this.highlightNodeInput(node, inputSlot, ctx);
+                    ctx.strokeStyle = color;
+                    this.highlightNodeInput(node, inputSlot, ctx);
+                }
             }
         }
     }
@@ -733,7 +744,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         this.selectNode(node);
     }
 
-    jumpToNodeAndInput(node: LGraphNode, slotIndex: number) {
+    jumpToNodeAndInput(node: LGraphNode, slotIndex: number | null) {
         this.jumpToNode(node);
         this.highlightNodeAndInput = [node, slotIndex];
         this.blinkErrorTime = 20;

src/lib/ImageViewer.ts

@@ -165,7 +165,6 @@ export class ImageViewer {
 
         let urls = ImageViewer.get_gallery_urls(galleryElem)
         const [_currentButton, index] = ImageViewer.selected_gallery_button(galleryElem)
-        console.warn("Gallery!", index, urls, galleryElem)
 
         this.showModal(urls, index, galleryElem)
     }

src/lib/api.ts

@@ -45,7 +45,8 @@ export type ComfyAPIHistoryItem = [
 ]
 
 export type ComfyAPIPromptSuccessResponse = {
-    promptID: PromptID
+    promptID: PromptID,
+    number: number
 }
 
 export type ComfyAPIPromptResponse = ComfyAPIPromptSuccessResponse | ComfyAPIPromptErrorResponse
@@ -295,7 +296,7 @@ export default class ComfyAPI {
                 }
                 return res.json()
             })
-            .then(raw => { return { promptID: raw.prompt_id } })
+            .then(raw => { return { promptID: raw.prompt_id, number: raw.number } })
             .catch(error => { return error })
     }
 

src/lib/components/ComfyApp.ts

@@ -728,9 +728,11 @@ export default class ComfyApp {
     }
 
     private requestPermissions() {
-        if (Notification.permission === "default") {
+        if (window.Notification != null) {
-            Notification.requestPermission()
+            if (window.Notification.permission === "default") {
-                .then((result) => console.log("Notification status:", result));
+                window.Notification.requestPermission()
+                    .then((result) => console.log("Notification status:", result));
+            }
         }
     }
 
@@ -939,7 +941,11 @@ export default class ComfyApp {
         if (workflow.attrs.queuePromptButtonRunWorkflow) {
             // Hold control to queue at the front
             const num = this.ctrlDown ? -1 : 0;
-            this.queuePrompt(workflow, num, 1);
+            let tag = null;
+            if (workflow.attrs.queuePromptButtonDefaultWorkflow) {
+                tag = workflow.attrs.queuePromptButtonDefaultWorkflow
+            }
+            this.queuePrompt(workflow, num, 1, tag);
         }
     }
 
@@ -1037,11 +1043,11 @@ export default class ComfyApp {
 
                     const p = this.graphToPrompt(workflow, tag);
                     const wf = this.serialize(workflow)
-                    console.debug(graphToGraphVis(workflow.graph))
+                    // console.debug(graphToGraphVis(workflow.graph))
-                    console.debug(promptToGraphVis(p))
+                    // console.debug(promptToGraphVis(p))
 
                     const stdPrompt = this.stdPromptSerializer.serialize(p);
-                    console.warn("STD", stdPrompt);
+                    // console.warn("STD", stdPrompt);
 
                     const extraData: ComfyBoxPromptExtraData = {
                         extra_pnginfo: {
@@ -1074,8 +1080,8 @@ export default class ComfyApp {
                             workflowState.promptError(workflow.id, errorPromptID)
                         }
                         else {
-                            queueState.afterQueued(workflow.id, response.promptID, num, p.output, extraData)
+                            queueState.afterQueued(workflow.id, response.promptID, response.number, p.output, extraData)
-                            workflowState.afterQueued(workflow.id, response.promptID, p, extraData)
+                            workflowState.afterQueued(workflow.id, response.promptID)
                         }
                     } catch (err) {
                         errorMes = err?.toString();

src/lib/components/ComfyBoxWorkflowsView.svelte

@@ -1,5 +1,11 @@
 <script context="module" lang="ts">
- export const WORKFLOWS_VIEW: any = {}
+ // workaround a vite HMR bug
+ // shouts out to @rixo
+ // https://github.com/sveltejs/svelte/issues/8655
+ export const WORKFLOWS_VIEW = import.meta.hot?.data?.WORKFLOWS_VIEW || {}
+ if (import.meta.hot?.data) {
+     import.meta.hot.data.WORKFLOWS_VIEW = WORKFLOWS_VIEW
+ }
 </script>
 
 <script lang="ts">

src/lib/components/ComfyGraphErrorList.svelte

@@ -4,16 +4,36 @@
  import Accordion from "./gradio/app/Accordion.svelte";
  import uiState from '$lib/stores/uiState';
  import type { ComfyNodeDefInputType } from "$lib/ComfyNodeDef";
- import type { INodeInputSlot, LGraphNode, Subgraph } from "@litegraph-ts/core";
+ import type { INodeInputSlot, LGraphNode, LLink, Subgraph } from "@litegraph-ts/core";
- import { UpstreamNodeLocator } from "./ComfyPromptSerializer";
+ import { UpstreamNodeLocator, getUpstreamLink, nodeHasTag } from "./ComfyPromptSerializer";
  import JsonView from "./JsonView.svelte";
 
  export let app: ComfyApp;
  export let errors: ComfyGraphErrors;
 
+ let missingTag = null;
+ let nodeToJumpTo = null;
+ let inputSlotToHighlight = null;
+ let _errors = null
+
+ $: if (_errors != errors) {
+     _errors = errors;
+     if (errors.errors[0]) {
+         jumpToError(errors.errors[0])
+     }
+ }
+
  function closeList() {
      app.lCanvas.clearErrors();
      $uiState.activeError = null;
+     clearState()
+ }
+
+ function clearState() {
+     _errors = null;
+     missingTag = null;
+     nodeToJumpTo = null;
+     inputSlotToHighlight = null;
  }
 
  function getParentNode(error: ComfyGraphErrorLocation): Subgraph | null {
@@ -24,18 +44,26 @@
      return node.graph._subgraph_node
  }
 
- function canJumpToDisconnectedInput(error: ComfyGraphErrorLocation): boolean {
+ function jumpToFoundNode() {
-     return error.errorType === ComfyNodeErrorType.RequiredInputMissing && error.input != null;
+     if (nodeToJumpTo == null) {
+         return
+     }
+
+     app.lCanvas.jumpToNodeAndInput(nodeToJumpTo, inputSlotToHighlight);
  }
 
- function jumpToDisconnectedInput(error: ComfyGraphErrorLocation) {
+ function detectDisconnected(error: ComfyGraphErrorLocation) {
+     missingTag = null;
+     nodeToJumpTo = null;
+     inputSlotToHighlight = null;
+
      if (error.errorType !== ComfyNodeErrorType.RequiredInputMissing || error.input == null) {
          return
      }
 
      const node = app.lCanvas.graph.getNodeByIdRecursive(error.nodeID);
 
-     const inputIndex =node.findInputSlotIndexByName(error.input.name);
+     const inputIndex = node.findInputSlotIndexByName(error.input.name);
      if (inputIndex === -1) {
          return
      }
@@ -43,17 +71,33 @@
      // TODO multiple tags?
      const tag: string | null = error.queueEntry.extraData.extra_pnginfo.comfyBoxPrompt.subgraphs[0];
 
-     const test = (node: LGraphNode) => (node as any).isBackendNode
+     const test = (node: LGraphNode, currentLink: LLink) => {
+         if (!nodeHasTag(node, tag, true))
+             return true;
+
+         const [nextGraph, nextLink, nextInputSlot, nextNode] = getUpstreamLink(node, currentLink)
+         return nextLink == null;
+     };
      const nodeLocator = new UpstreamNodeLocator(test)
-     const [_, foundLink, foundInputSlot, foundPrevNode] = nodeLocator.locateUpstream(node, inputIndex, tag);
+     const [foundNode, foundLink, foundInputSlot, foundPrevNode] = nodeLocator.locateUpstream(node, inputIndex, null);
 
      if (foundInputSlot != null && foundPrevNode != null) {
-         app.lCanvas.jumpToNodeAndInput(foundPrevNode, foundInputSlot);
+         if (!nodeHasTag(foundNode, tag, true)) {
+             nodeToJumpTo = foundNode
+             missingTag = tag;
+             inputSlotToHighlight = null;
+         }
+         else {
+             nodeToJumpTo = foundPrevNode;
+             inputSlotToHighlight = foundInputSlot;
+         }
      }
  }
 
  function jumpToError(error: ComfyGraphErrorLocation) {
      app.lCanvas.jumpToError(error);
+
+     detectDisconnected(error);
  }
 
  function getInputTypeName(type: ComfyNodeDefInputType) {
@@ -88,26 +132,37 @@
                                 <div class="error-details">
                                     <button class="jump-to-error" class:execution-error={isExecutionError} on:click={() => jumpToError(error)}><span>⮎</span></button>
                                     <div class="error-details-wrapper">
-                                        <span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
+                                        {#if missingTag && nodeToJumpTo}
+                                            <div class="error-input">
+                                                <div><span class="error-message">Node "{nodeToJumpTo.title}" was missing tag used in workflow:</span><span style:padding-left="0.2rem"><b>{missingTag}</b></span></div>
+                                                <div>Tags on node: <b>{(nodeToJumpTo?.properties?.tags || []).join(", ")}</b></div>
+                                            </div>
+                                        {:else}
+                                            <span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
+                                        {/if}
                                         {#if error.exceptionType}
                                             <span>({error.exceptionType})</span>
                                         {/if}
                                         {#if error.exceptionMessage && !isExecutionError}
                                             <div style:text-decoration="underline">{error.exceptionMessage}</div>
                                         {/if}
-                                        {#if error.input}
+                                        {#if nodeToJumpTo != null}
+                                            <div style:display="flex" style:flex-direction="row">
+                                                <button class="jump-to-error locate" on:click={jumpToFoundNode}><span>⮎</span></button>
+                                                {#if missingTag}
+                                                    <span>Jump to node: {nodeToJumpTo.title}</span>
+                                                {:else}
+                                                    <span>Find disconnected input</span>
+                                                {/if}
+                                            </div>
+                                        {/if}
+                                        {#if error.input && !missingTag}
                                             <div class="error-input">
                                                 <span>Input: <b>{error.input.name}</b></span>
                                                 {#if error.input.config}
                                                     <span>({getInputTypeName(error.input.config[0])})</span>
                                                 {/if}
                                             </div>
-                                            {#if canJumpToDisconnectedInput(error)}
-                                                <div style:display="flex" style:flex-direction="row">
-                                                    <button class="jump-to-error locate" on:click={() => jumpToDisconnectedInput(error)}><span>⮎</span></button>
-                                                    <span>Find disconnected input</span>
-                                                </div>
-                                            {/if}
 
                                             {#if error.input.receivedValue}
                                                 <div>

src/lib/components/ComfyPromptSerializer.ts

@@ -71,62 +71,62 @@ export function isActiveBackendNode(node: LGraphNode, tag: string | null = null)
     return true;
 }
 
-type UpstreamResult = [LGraph | null, LLink | null, number | null, LGraphNode | null];
+export type UpstreamResult = [LGraph | null, LLink | null, number | null, LGraphNode | null];
+
+function followSubgraph(subgraph: Subgraph, link: LLink): UpstreamResult {
+    if (link.origin_id != subgraph.id)
+        throw new Error("Invalid link and graph output!")
+
+    const innerGraphOutput = subgraph.getInnerGraphOutputByIndex(link.origin_slot)
+    if (innerGraphOutput == null)
+        throw new Error("No inner graph input!")
+
+    const nextLink = innerGraphOutput.getInputLink(0)
+    return [innerGraphOutput.graph, nextLink, 0, innerGraphOutput];
+}
+
+function followGraphInput(graphInput: GraphInput, link: LLink): UpstreamResult {
+    if (link.origin_id != graphInput.id)
+        throw new Error("Invalid link and graph input!")
+
+    const outerSubgraph = graphInput.getParentSubgraph();
+    if (outerSubgraph == null)
+        throw new Error("No outer subgraph!")
+
+    const outerInputIndex = outerSubgraph.inputs.findIndex(i => i.name === graphInput.nameInGraph)
+    if (outerInputIndex === -1)
+        throw new Error("No outer input slot!")
+
+    const nextLink = outerSubgraph.getInputLink(outerInputIndex)
+    return [outerSubgraph.graph, nextLink, outerInputIndex, outerSubgraph];
+}
+
+export function getUpstreamLink(parent: LGraphNode, currentLink: LLink): UpstreamResult {
+    if (parent.is(Subgraph)) {
+        console.debug("FollowSubgraph")
+        return followSubgraph(parent, currentLink);
+    }
+    else if (parent.is(GraphInput)) {
+        console.debug("FollowGraphInput")
+        return followGraphInput(parent, currentLink);
+    }
+    else if ("getUpstreamLink" in parent) {
+        const link = (parent as ComfyGraphNode).getUpstreamLink();
+        return [parent.graph, link, link?.target_slot, parent];
+    }
+    else if (parent.inputs.length === 1) {
+        // Only one input, so assume we can follow it backwards.
+        const link = parent.getInputLink(0);
+        if (link) {
+            return [parent.graph, link, 0, parent]
+        }
+    }
+    console.warn("[graphToPrompt] Frontend node does not support getUpstreamLink", parent.type)
+    return [null, null, null, null];
+}
 
 export class UpstreamNodeLocator {
-    constructor(private isTheTargetNode: (node: LGraphNode) => boolean) {
+    constructor(private isTheTargetNode: (node: LGraphNode, currentLink: LLink) => boolean) {
-    }
-
-    private followSubgraph(subgraph: Subgraph, link: LLink): UpstreamResult {
-        if (link.origin_id != subgraph.id)
-            throw new Error("Invalid link and graph output!")
-
-        const innerGraphOutput = subgraph.getInnerGraphOutputByIndex(link.origin_slot)
-        if (innerGraphOutput == null)
-            throw new Error("No inner graph input!")
-
-        const nextLink = innerGraphOutput.getInputLink(0)
-        return [innerGraphOutput.graph, nextLink, 0, innerGraphOutput];
-    }
-
-    private followGraphInput(graphInput: GraphInput, link: LLink): UpstreamResult {
-        if (link.origin_id != graphInput.id)
-            throw new Error("Invalid link and graph input!")
-
-        const outerSubgraph = graphInput.getParentSubgraph();
-        if (outerSubgraph == null)
-            throw new Error("No outer subgraph!")
-
-        const outerInputIndex = outerSubgraph.inputs.findIndex(i => i.name === graphInput.nameInGraph)
-        if (outerInputIndex == null)
-            throw new Error("No outer input slot!")
-
-        const nextLink = outerSubgraph.getInputLink(outerInputIndex)
-        return [outerSubgraph.graph, nextLink, outerInputIndex, outerSubgraph];
-    }
-
-    private getUpstreamLink(parent: LGraphNode, currentLink: LLink): UpstreamResult {
-        if (parent.is(Subgraph)) {
-            console.debug("FollowSubgraph")
-            return this.followSubgraph(parent, currentLink);
-        }
-        else if (parent.is(GraphInput)) {
-            console.debug("FollowGraphInput")
-            return this.followGraphInput(parent, currentLink);
-        }
-        else if ("getUpstreamLink" in parent) {
-            const link = (parent as ComfyGraphNode).getUpstreamLink();
-            return [parent.graph, link, link?.target_slot, parent];
-        }
-        else if (parent.inputs.length === 1) {
-            // Only one input, so assume we can follow it backwards.
-            const link = parent.getInputLink(0);
-            if (link) {
-                return [parent.graph, link, 0, parent]
-            }
-        }
-        console.warn("[graphToPrompt] Frontend node does not support getUpstreamLink", parent.type)
-        return [null, null, null, null];
     }
 
     /*
@@ -146,8 +146,8 @@ export class UpstreamNodeLocator {
         let currentInputSlot = inputIndex;
         let currentNode = fromNode;
 
-        const shouldFollowParent = (parent: LGraphNode) => {
+        const shouldFollowParent = (parent: LGraphNode, currentLink: LLink) => {
-            return isActiveNode(parent, tag) && !this.isTheTargetNode(parent);
+            return isActiveNode(parent, tag) && !this.isTheTargetNode(parent, currentLink);
         }
 
         // If there are non-target nodes between us and another
@@ -156,8 +156,8 @@ export class UpstreamNodeLocator {
         // will simply follow their single input, while branching
         // nodes have conditional logic that determines which link
         // to follow backwards.
-        while (shouldFollowParent(parent)) {
+        while (shouldFollowParent(parent, currentLink)) {
-            const [nextGraph, nextLink, nextInputSlot, nextNode] = this.getUpstreamLink(parent, currentLink);
+            const [nextGraph, nextLink, nextInputSlot, nextNode] = getUpstreamLink(parent, currentLink);
 
             currentInputSlot = nextInputSlot;
             currentNode = nextNode;
@@ -183,7 +183,7 @@ export class UpstreamNodeLocator {
             }
         }
 
-        if (!isActiveNode(parent, tag) || !this.isTheTargetNode(parent) || currentLink == null)
+        if (!isActiveNode(parent, tag) || !this.isTheTargetNode(parent, currentLink) || currentLink == null)
             return [null, currentLink, currentInputSlot, currentNode];
 
         return [parent, currentLink, currentInputSlot, currentNode]

src/lib/components/gradio/gallery/Gallery.svelte

@@ -15,7 +15,7 @@
 	export let label: string;
 	export let root: string = "";
 	export let root_url: null | string = null;
-    export let scrollOnUpdate = false;
+    export let focusOnScroll = false;
 	export let value: Array<string> | Array<FileData> | null = null;
 	export let style: Styles = {
 		grid_cols: [2],
@@ -121,11 +121,11 @@
 	let container: HTMLDivElement;
 
 	async function scroll_to_img(index: number | null) {
-        if (!scrollOnUpdate) return;
 		if (typeof index !== "number") return;
 		await tick();
 
-		el[index].focus();
+		if (focusOnScroll)
+			el[index].focus();
 
 		const { left: container_left, width: container_width } =
 			container.getBoundingClientRect();

src/lib/nodes/ComfyPickFirstNode.ts

@@ -3,7 +3,7 @@ import ComfyGraphNode, { type ComfyGraphNodeProperties } from "./ComfyGraphNode"
 import { Watch } from "@litegraph-ts/nodes-basic";
 import { nextLetter } from "$lib/utils";
 
-export type PickFirstMode = "anyActiveLink" | "truthy" | "dataNonNull"
+export type PickFirstMode = "anyActiveLink" | "dataTruthy" | "dataNonNull"
 
 export interface ComfyPickFirstNodeProperties extends ComfyGraphNodeProperties {
     mode: PickFirstMode
@@ -12,7 +12,7 @@ export interface ComfyPickFirstNodeProperties extends ComfyGraphNodeProperties {
 export default class ComfyPickFirstNode extends ComfyGraphNode {
     override properties: ComfyPickFirstNodeProperties = {
         tags: [],
-        mode: "dataNonNull"
+        mode: "anyActiveLink"
     }
 
     static slotLayout: SlotLayout = {
@@ -36,21 +36,39 @@ export default class ComfyPickFirstNode extends ComfyGraphNode {
         super(title);
         this.displayWidget = this.addWidget("text", "Value", "")
         this.displayWidget.disabled = true;
-        this.modeWidget = this.addWidget("combo", "Mode", this.properties.mode, null, { property: "mode", values: ["anyActiveLink", "truthy", "dataNonNull"] })
+        this.modeWidget = this.addWidget("combo", "Mode", this.properties.mode, null, { property: "mode", values: ["anyActiveLink", "dataTruthy", "dataNonNull"] })
     }
 
     override onDrawBackground(ctx: CanvasRenderingContext2D) {
-        if (this.flags.collapsed || this.selected === -1) {
+        if (this.flags.collapsed) {
             return;
         }
 
-        ctx.fillStyle = "#AFB";
+        if (this.selected === -1) {
-        var y = (this.selected) * LiteGraph.NODE_SLOT_HEIGHT + 6;
+            // Draw an X indicating nothing matched the selection criteria
-        ctx.beginPath();
+            const y = LiteGraph.NODE_SLOT_HEIGHT + 6;
-        ctx.moveTo(50, y);
+            ctx.lineWidth = 5;
-        ctx.lineTo(50, y + LiteGraph.NODE_SLOT_HEIGHT);
+            ctx.strokeStyle = "red";
-        ctx.lineTo(34, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
+            ctx.beginPath();
-        ctx.fill();
+
+            ctx.moveTo(50 - 15, y - 15);
+            ctx.lineTo(50 + 15, y + 15);
+            ctx.stroke();
+
+            ctx.moveTo(50 + 15, y - 15);
+            ctx.lineTo(50 - 15, y + 15);
+            ctx.stroke();
+        }
+        else {
+            // Draw an arrow pointing to the selected input
+            ctx.fillStyle = "#AFB";
+            const y = (this.selected) * LiteGraph.NODE_SLOT_HEIGHT + 6;
+            ctx.beginPath();
+            ctx.moveTo(50, y);
+            ctx.lineTo(50, y + LiteGraph.NODE_SLOT_HEIGHT);
+            ctx.lineTo(34, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
+            ctx.fill();
+        }
     };
 
     override onConnectionsChange(
@@ -113,7 +131,7 @@ export default class ComfyPickFirstNode extends ComfyGraphNode {
         else {
             if (this.properties.mode === "dataNonNull")
                 return link.data != null;
-            else if (this.properties.mode === "truthy")
+            else if (this.properties.mode === "dataTruthy")
                 return Boolean(link.data)
             else // anyActiveLink
                 return true;

src/lib/notify.ts

@@ -92,6 +92,11 @@ function notifyToast(text: string, options: NotifyOptions) {
 }
 
 function notifyNative(text: string, options: NotifyOptions) {
+    if (window.Notification == null) {
+        console.warn("[notify] No Notification available on window")
+        return
+    }
+
     if (document.hasFocus())
         return;
 

src/lib/stores/layoutStates.ts

@@ -681,6 +681,13 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 editable: true,
                 defaultValue: true
             },
+            {
+                name: "queuePromptButtonDefaultWorkflow",
+                type: "string",
+                location: "workflow",
+                editable: true,
+                defaultValue: ""
+            },
             {
                 name: "showDefaultNotifications",
                 type: "boolean",

src/lib/stores/queueState.ts

@@ -9,6 +9,7 @@ import { v4 as uuidv4 } from "uuid";
 import workflowState, { type WorkflowError, type WorkflowExecutionError, type WorkflowInstID, type WorkflowValidationError } from "./workflowState";
 import configState from "./configState";
 import uiQueueState from "./uiQueueState";
+import type { NodeID } from "@litegraph-ts/core";
 
 export type QueueEntryStatus = "success" | "validation_failed" | "error" | "interrupted" | "all_cached" | "unknown";
 
@@ -81,7 +82,21 @@ export type QueueState = {
     queuePending: Writable<QueueEntry[]>,
     queueCompleted: Writable<CompletedQueueEntry[]>,
     queueRemaining: number | "X" | null;
+
+    /*
+     * Currently executing node if any
+     */
     runningNodeID: ComfyNodeID | null;
+
+    /*
+     * Nodes which should be rendered as "executing" in the frontend (green border).
+     * This includes the running node and all its parent subgraphs
+     */
+    executingNodes: Set<NodeID>;
+
+    /*
+     * Progress for the current node reported by the frontend
+     */
     progress: Progress | null,
     /**
      * If true, user pressed the "Interrupt" button in the frontend. Disable the
@@ -98,6 +113,7 @@ const store: Writable<QueueState> = writable({
     queueCompleted: writable([]),
     queueRemaining: null,
     runningNodeID: null,
+    executingNodes: new Set(),
     progress: null,
     isInterrupting: false
 })
@@ -272,6 +288,7 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
 
     store.update((s) => {
         s.progress = null;
+        s.executingNodes.clear();
 
         const [index, entry, queue] = findEntryInPending(promptID);
         if (runningNodeID != null) {
@@ -279,6 +296,17 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
                 entry.nodesRan.add(runningNodeID)
             }
             s.runningNodeID = runningNodeID;
+
+            if (entry?.extraData?.workflowID) {
+                const workflow = workflowState.getWorkflow(entry.extraData.workflowID);
+                if (workflow != null) {
+                    let node = workflow.graph.getNodeByIdRecursive(s.runningNodeID);
+                    while (node != null) {
+                        s.executingNodes.add(node.id);
+                        node = node.graph?._subgraph_node;
+                    }
+                }
+            }
         }
         else {
             // Prompt finished executing.
@@ -310,6 +338,7 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
             }
             s.progress = null;
             s.runningNodeID = null;
+            s.executingNodes.clear();
         }
         entry_ = entry;
         return s
@@ -334,6 +363,7 @@ function executionCached(promptID: PromptID, nodes: ComfyNodeID[]) {
         s.isInterrupting = false; // TODO move to start
         s.progress = null;
         s.runningNodeID = null;
+        s.executingNodes.clear();
         return s
     })
 }
@@ -351,6 +381,7 @@ function executionError(error: ComfyExecutionError): CompletedQueueEntry | null
         }
         s.progress = null;
         s.runningNodeID = null;
+        s.executingNodes.clear();
         return s
     })
     return entry_;
@@ -384,6 +415,8 @@ function executionStart(promptID: PromptID) {
             moveToRunning(index, queue)
         }
         s.isInterrupting = false;
+        s.runningNodeID = null;
+        s.executingNodes.clear();
         return s
     })
 }
@@ -448,6 +481,7 @@ function queueCleared(type: QueueItemType) {
             s.queueRemaining = 0;
             s.runningNodeID = null;
             s.progress = null;
+            s.executingNodes.clear();
         }
         else {
             s.queueCompleted.set([])

src/lib/stores/workflowState.ts

@@ -57,6 +57,12 @@ export type WorkflowAttributes = {
      */
     queuePromptButtonRunWorkflow: boolean,
 
+    /*
+     * Default subgraph to run if `queuePromptButtonRunWorkflow` is `true`. Set
+     * to blank to run the default subgraph (tagless).
+     */
+    queuePromptButtonDefaultWorkflow: string,
+
     /*
      * If true, notifications will be shown when a prompt is queued and
      * completed. Set to false if you need more detailed control over the

src/lib/widgets/ComboWidget.svelte

@@ -8,7 +8,7 @@
  import { type WidgetLayout } from "$lib/stores/layoutStates";
  import { get, writable, type Writable } from "svelte/store";
  import { isDisabled } from "./utils"
- import { getSafetensorsMetadata } from '$lib/utils';
+ import { clamp, getSafetensorsMetadata } from '$lib/utils';
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyComboNode | null = null;
@@ -174,7 +174,7 @@
                         itemCount={filteredItems.length}
                         {itemSize}
                         overscanCount={5}
-                        scrollToIndex={hoverItemIndex}>
+                        scrollToIndex={activeIndex != null ? clamp(activeIndex + itemsToShow - 1, 0, filteredItems.length-1) : hoverItemIndex}>
                         <div slot="item"
                                 class="comfy-select-item"
                                 class:mobile={isMobile}