Update the frontend to support async nodes. (#4382)

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Christian Byrne <[email protected]>

Author: 3 people

src/components/graph/GraphCanvas.vue

@@ -72,7 +72,6 @@ import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n, t } from '@/i18n'
-import type { NodeId } from '@/schemas/comfyWorkflowSchema'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
@@ -192,22 +191,26 @@ watch(
   }
 )
 
-// Update the progress of the executing node
+// Update the progress of executing nodes
 watch(
   () =>
-    [
-      executionStore.executingNodeId,
-      executionStore.executingNodeProgress
-    ] satisfies [NodeId | null, number | null],
-  ([executingNodeId, executingNodeProgress]) => {
-    for (const node of comfyApp.graph.nodes) {
-      if (node.id == executingNodeId) {
-        node.progress = executingNodeProgress ?? undefined
+    [executionStore.nodeLocationProgressStates, canvasStore.canvas] as const,
+  ([nodeLocationProgressStates, canvas]) => {
+    if (!canvas?.graph) return
+    for (const node of canvas.graph.nodes) {
+      const nodeLocatorId = useWorkflowStore().nodeIdToNodeLocatorId(node.id)
+      const progressState = nodeLocationProgressStates[nodeLocatorId]
+      if (progressState && progressState.state === 'running') {
+        node.progress = progressState.value / progressState.max
       } else {
         node.progress = undefined
       }
     }
-  }
+
+    // Force canvas redraw to ensure progress updates are visible
+    canvas.graph.setDirtyCanvas(true, false)
+  },
+  { deep: true }
 )
 
 // Update node slot errors

src/components/graph/widgets/TextPreviewWidget.vue

@@ -20,33 +20,44 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 
 const modelValue = defineModel<string>({ required: true })
-defineProps<{
+const props = defineProps<{
   widget?: object
+  nodeId: NodeId
 }>()
 
 const executionStore = useExecutionStore()
 const isParentNodeExecuting = ref(true)
 const formattedText = computed(() => nl2br(linkifyHtml(modelValue.value)))
 
-let executingNodeId: NodeId | null = null
+let parentNodeId: NodeId | null = null
 onMounted(() => {
-  executingNodeId = executionStore.executingNodeId
+  // Get the parent node ID from props if provided
+  // For backward compatibility, fall back to the first executing node
+  parentNodeId = props.nodeId
 })
 
 // Watch for either a new node has starting execution or overall execution ending
 const stopWatching = watch(
-  [() => executionStore.executingNode, () => executionStore.isIdle],
+  [() => executionStore.executingNodeIds, () => executionStore.isIdle],
   () => {
+    if (executionStore.isIdle) {
+      isParentNodeExecuting.value = false
+      stopWatching()
+      return
+    }
+
+    // Check if parent node is no longer in the executing nodes list
     if (
-      executionStore.isIdle ||
-      (executionStore.executingNode &&
-        executionStore.executingNode.id !== executingNodeId)
+      parentNodeId &&
+      !executionStore.executingNodeIds.includes(parentNodeId)
     ) {
       isParentNodeExecuting.value = false
       stopWatching()
     }
-    if (!executingNodeId) {
-      executingNodeId = executionStore.executingNodeId
+
+    // Set parent node ID if not set yet
+    if (!parentNodeId && executionStore.executingNodeIds.length > 0) {
+      parentNodeId = executionStore.executingNodeIds[0]
     }
   }
 )

src/composables/useBrowserTabTitle.ts

@@ -1,6 +1,7 @@
 import { useTitle } from '@vueuse/core'
 import { computed } from 'vue'
 
+import { t } from '@/i18n'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
@@ -36,11 +37,34 @@ export const useBrowserTabTitle = () => {
       : DEFAULT_TITLE
   })
 
-  const nodeExecutionTitle = computed(() =>
-    executionStore.executingNode && executionStore.executingNodeProgress
-      ? `${executionText.value}[${Math.round(executionStore.executingNodeProgress * 100)}%] ${executionStore.executingNode.type}`
-      : ''
-  )
+  const nodeExecutionTitle = computed(() => {
+    // Check if any nodes are in progress
+    const nodeProgressEntries = Object.entries(
+      executionStore.nodeProgressStates
+    )
+    const runningNodes = nodeProgressEntries.filter(
+      ([_, state]) => state.state === 'running'
+    )
+
+    if (runningNodes.length === 0) {
+      return ''
+    }
+
+    // If multiple nodes are running
+    if (runningNodes.length > 1) {
+      return `${executionText.value}[${runningNodes.length} ${t('g.nodesRunning', 'nodes running')}]`
+    }
+
+    // If only one node is running
+    const [nodeId, state] = runningNodes[0]
+    const progress = Math.round((state.value / state.max) * 100)
+    const nodeType =
+      executionStore.activePrompt?.workflow?.changeTracker?.activeState.nodes.find(
+        (n) => String(n.id) === nodeId
+      )?.type || 'Node'
+
+    return `${executionText.value}[${progress}%] ${nodeType}`
+  })
 
   const workflowTitle = computed(
     () =>

src/composables/widgets/useChatHistoryWidget.ts

@@ -3,14 +3,23 @@ import { ref } from 'vue'
 
 import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import {
+  ComponentWidgetImpl,
+  type ComponentWidgetStandardProps,
+  addWidget
+} from '@/scripts/domWidget'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
+type ChatHistoryCustomProps = Omit<
+  InstanceType<typeof ChatHistoryWidget>['$props'],
+  ComponentWidgetStandardProps
+>
+
 const PADDING = 16
 
 export const useChatHistoryWidget = (
   options: {
-    props?: Omit<InstanceType<typeof ChatHistoryWidget>['$props'], 'widget'>
+    props?: ChatHistoryCustomProps
   } = {}
 ) => {
   const widgetConstructor: ComfyWidgetConstructorV2 = (
@@ -20,7 +29,7 @@ export const useChatHistoryWidget = (
     const widgetValue = ref<string>('')
     const widget = new ComponentWidgetImpl<
       string | object,
-      InstanceType<typeof ChatHistoryWidget>['$props']
+      ChatHistoryCustomProps
     >({
       node,
       name: inputSpec.name,

src/composables/widgets/useProgressTextWidget.ts

@@ -3,9 +3,18 @@ import { ref } from 'vue'
 
 import TextPreviewWidget from '@/components/graph/widgets/TextPreviewWidget.vue'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import {
+  ComponentWidgetImpl,
+  type ComponentWidgetStandardProps,
+  addWidget
+} from '@/scripts/domWidget'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
+type TextPreviewCustomProps = Omit<
+  InstanceType<typeof TextPreviewWidget>['$props'],
+  ComponentWidgetStandardProps
+>
+
 const PADDING = 16
 
 export const useTextPreviewWidget = (
@@ -18,11 +27,17 @@ export const useTextPreviewWidget = (
     inputSpec: InputSpec
   ) => {
     const widgetValue = ref<string>('')
-    const widget = new ComponentWidgetImpl<string | object>({
+    const widget = new ComponentWidgetImpl<
+      string | object,
+      TextPreviewCustomProps
+    >({
       node,
       name: inputSpec.name,
       component: TextPreviewWidget,
       inputSpec,
+      props: {
+        nodeId: node.id
+      },
       options: {
         getValue: () => widgetValue.value,
         setValue: (value: string | object) => {

src/config/clientFeatureFlags.json

@@ -1,3 +1,3 @@
 {
-    "supports_preview_metadata": false
+  "supports_preview_metadata": true
 }

src/extensions/core/groupNode.ts

@@ -15,6 +15,7 @@ import {
 } from '@/schemas/comfyWorkflowSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import { useDialogService } from '@/services/dialogService'
+import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useToastStore } from '@/stores/toastStore'
 import { useWidgetStore } from '@/stores/widgetStore'
@@ -1224,9 +1225,10 @@ export class GroupNodeHandler {
     node.onDrawForeground = function (ctx) {
       // @ts-expect-error fixme ts strict error
       onDrawForeground?.apply?.(this, arguments)
+      const progressState = useExecutionStore().nodeProgressStates[this.id]
       if (
-        // @ts-expect-error fixme ts strict error
-        +app.runningNodeId === this.id &&
+        progressState &&
+        progressState.state === 'running' &&
         this.runningInternalNodeId !== null
       ) {
         // @ts-expect-error fixme ts strict error
@@ -1340,6 +1342,7 @@ export class GroupNodeHandler {
     this.node.onRemoved = function () {
       // @ts-expect-error fixme ts strict error
       onRemoved?.apply(this, arguments)
+      // api.removeEventListener('progress_state', progress_state)
       api.removeEventListener('executing', executing)
       api.removeEventListener('executed', executed)
     }

src/locales/en/main.json

@@ -133,7 +133,8 @@
     "copyURL": "Copy URL",
     "releaseTitle": "{package} {version} Release",
     "progressCountOf": "of",
-    "keybindingAlreadyExists": "Keybinding already exists on"
+    "keybindingAlreadyExists": "Keybinding already exists on",
+    "nodesRunning": "nodes running"
   },
   "manager": {
     "title": "Custom Nodes Manager",

src/locales/es/main.json

@@ -336,6 +336,7 @@
     "noTasksFoundMessage": "No hay tareas en la cola.",
     "noWorkflowsFound": "No se encontraron flujos de trabajo.",
     "nodes": "Nodos",
+    "nodesRunning": "nodos en ejecución",
     "ok": "OK",
     "openNewIssue": "Abrir nuevo problema",
     "overwrite": "Sobrescribir",

src/locales/fr/main.json

@@ -336,6 +336,7 @@
     "noTasksFoundMessage": "Il n'y a pas de tâches dans la file d'attente.",
     "noWorkflowsFound": "Aucun flux de travail trouvé.",
     "nodes": "Nœuds",
+    "nodesRunning": "nœuds en cours d’exécution",
     "ok": "OK",
     "openNewIssue": "Ouvrir un nouveau problème",
     "overwrite": "Écraser",