Improvement for finding nodes with missing tags

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;
@@ -133,6 +133,15 @@ 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";
@@ -172,12 +181,14 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
             }
             if (draw) {
                 const [node, inputSlot] = this.highlightNodeAndInput;
+                if (inputSlot != null) {
                     ctx.lineWidth = 2;
                     ctx.strokeStyle = color;
                     this.highlightNodeInput(node, inputSlot, ctx);
                 }
             }
         }
+    }
 
     private drawFailedValidationInputs(node: LGraphNode, errors: ComfyGraphErrorLocation[], color: string, ctx: CanvasRenderingContext2D) {
         ctx.lineWidth = 2;
@@ -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/components/ComfyGraphErrorList.svelte

@@ -5,15 +5,35 @@
  import uiState from '$lib/stores/uiState';
  import type { ComfyNodeDefInputType } from "$lib/ComfyNodeDef";
  import type { INodeInputSlot, LGraphNode, LLink, Subgraph } from "@litegraph-ts/core";
- import { UpstreamNodeLocator, getUpstreamLink } 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,11 +44,19 @@
      return node.graph._subgraph_node
  }
 
- function canJumpToDisconnectedInput(error: ComfyGraphErrorLocation): boolean {
+ function jumpToFoundNode() {
-     return error.errorType === ComfyNodeErrorType.RequiredInputMissing && error.input != null;
+     if (nodeToJumpTo == null) {
+         return
      }
 
- function jumpToDisconnectedInput(error: ComfyGraphErrorLocation) {
+     app.lCanvas.jumpToNodeAndInput(nodeToJumpTo, inputSlotToHighlight);
+ }
+
+ function detectDisconnected(error: ComfyGraphErrorLocation) {
+     missingTag = null;
+     nodeToJumpTo = null;
+     inputSlotToHighlight = null;
+
      if (error.errorType !== ComfyNodeErrorType.RequiredInputMissing || error.input == null) {
          return
      }
@@ -44,19 +72,32 @@
      const tag: string | null = error.queueEntry.extraData.extra_pnginfo.comfyBoxPrompt.subgraphs[0];
 
      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) {
@@ -91,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">
+                                        {#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?.attrs?.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>