Add executionStore (#827)

* Extract execution store

* Fix executing nodes highlight

* nit

* nit

* nit

src/scripts/app.ts

@@ -1591,23 +1591,11 @@ export class ComfyApp {
     )
 
     api.addEventListener('progress', ({ detail }) => {
-      if (
-        this.workflowManager.activePrompt?.workflow &&
-        this.workflowManager.activePrompt.workflow !==
-          this.workflowManager.activeWorkflow
-      )
-        return
       this.progress = detail
       this.graph.setDirtyCanvas(true, false)
     })
 
     api.addEventListener('executing', ({ detail }) => {
-      if (
-        this.workflowManager.activePrompt?.workflow &&
-        this.workflowManager.activePrompt.workflow !==
-          this.workflowManager.activeWorkflow
-      )
-        return
       this.progress = null
       this.runningNodeId = detail
       this.graph.setDirtyCanvas(true, false)
@@ -1615,12 +1603,6 @@ export class ComfyApp {
     })
 
     api.addEventListener('executed', ({ detail }) => {
-      if (
-        this.workflowManager.activePrompt?.workflow &&
-        this.workflowManager.activePrompt.workflow !==
-          this.workflowManager.activeWorkflow
-      )
-        return
       const output = this.nodeOutputs[detail.display_node || detail.node]
       if (detail.merge && output) {
         for (const k in detail.output ?? {}) {

src/scripts/changeTracker.ts

@@ -204,7 +204,8 @@ export class ChangeTracker {
 
     // Store node outputs
     api.addEventListener('executed', ({ detail }) => {
-      const prompt = app.workflowManager.queuedPrompts[detail.prompt_id]
+      const prompt =
+        app.workflowManager.executionStore.queuedPrompts[detail.prompt_id]
       if (!prompt?.workflow) return
       const nodeOutputs = (prompt.workflow.changeTracker.nodeOutputs ??= {})
       const output = nodeOutputs[detail.node]

src/scripts/ui/menu/workflows.ts

@@ -71,17 +71,6 @@ export class ComfyWorkflowsMenu {
     })
   }
 
-  #updateProgress = () => {
-    const prompt = this.app.workflowManager.activePrompt
-    let percent = 0
-    if (this.app.workflowManager.activeWorkflow === prompt?.workflow) {
-      const total = Object.values(prompt.nodes)
-      const done = total.filter(Boolean)
-      percent = (done.length / total.length) * 100
-    }
-    this.buttonProgress.style.width = percent + '%'
-  }
-
   #updateActive = () => {
     const active = this.app.workflowManager.activeWorkflow
     this.button.tooltip = active.path
@@ -93,8 +82,6 @@ export class ComfyWorkflowsMenu {
       this.#first = false
       this.content.load()
     }
-
-    this.#updateProgress()
   }
 
   #bindEvents() {
@@ -109,10 +96,6 @@ export class ComfyWorkflowsMenu {
       this.unsaved = this.app.workflowManager.activeWorkflow.unsaved
     })
 
-    this.app.workflowManager.addEventListener('execute', (e) => {
-      this.#updateProgress()
-    })
-
     api.addEventListener('graphChanged', () => {
       this.unsaved = true
     })
@@ -371,9 +354,6 @@ export class ComfyWorkflowsContent {
       app.workflowManager.addEventListener(e, () => this.updateOpen())
     }
     this.app.workflowManager.addEventListener('rename', () => this.load())
-    this.app.workflowManager.addEventListener('execute', (e) =>
-      this.#updateActive()
-    )
   }
 
   async load() {

src/scripts/workflows.ts

@@ -17,17 +17,14 @@ export function trimJsonExt(path: string) {
 }
 
 export class ComfyWorkflowManager extends EventTarget {
-  #activePromptId: string | null = null
+  executionStore: any = null
+
   #unsavedCount = 0
   #activeWorkflow: ComfyWorkflow
 
   workflowLookup: Record<string, ComfyWorkflow> = {}
   workflows: Array<ComfyWorkflow> = []
   openWorkflows: Array<ComfyWorkflow> = []
-  queuedPrompts: Record<
-    string,
-    { workflow?: ComfyWorkflow; nodes?: Record<string, boolean> }
-  > = {}
   app: ComfyApp
 
   get activeWorkflow() {
@@ -35,62 +32,17 @@ export class ComfyWorkflowManager extends EventTarget {
   }
 
   get activePromptId() {
-    return this.#activePromptId
+    return this.executionStore?.activePromptId
   }
 
   get activePrompt() {
-    return this.queuedPrompts[this.#activePromptId]
+    return this.executionStore?.activePrompt
   }
 
   constructor(app: ComfyApp) {
     super()
     this.app = app
     ChangeTracker.init(app)
-
-    this.#bindExecutionEvents()
-  }
-
-  #bindExecutionEvents() {
-    // TODO: on reload, set active prompt based on the latest ws message
-
-    const emit = () =>
-      this.dispatchEvent(
-        new CustomEvent('execute', { detail: this.activePrompt })
-      )
-    let executing = null
-    api.addEventListener('execution_start', (e) => {
-      this.#activePromptId = e.detail.prompt_id
-
-      // This event can fire before the event is stored, so put a placeholder
-      this.queuedPrompts[this.#activePromptId] ??= { nodes: {} }
-      emit()
-    })
-    api.addEventListener('execution_cached', (e) => {
-      if (!this.activePrompt) return
-      for (const n of e.detail.nodes) {
-        this.activePrompt.nodes[n] = true
-      }
-      emit()
-    })
-    api.addEventListener('executed', (e) => {
-      if (!this.activePrompt) return
-      this.activePrompt.nodes[e.detail.node] = true
-      emit()
-    })
-    api.addEventListener('executing', (e) => {
-      if (!this.activePrompt) return
-
-      if (executing) {
-        // Seems sometimes nodes that are cached fire executing but not executed
-        this.activePrompt.nodes[executing] = true
-      }
-      executing = e.detail
-      if (!executing) {
-        delete this.queuedPrompts[this.#activePromptId]
-        this.#activePromptId = null
-      }
-      emit()
-    })
   }
 
   async loadWorkflows() {
@@ -174,15 +126,11 @@ export class ComfyWorkflowManager extends EventTarget {
   }
 
   storePrompt({ nodes, id }) {
-    this.queuedPrompts[id] ??= {}
-    this.queuedPrompts[id].nodes = {
-      ...nodes.reduce((p, n) => {
-        p[n] = false
-        return p
-      }, {}),
-      ...this.queuedPrompts[id].nodes
-    }
-    this.queuedPrompts[id].workflow = this.activeWorkflow
+    this.executionStore?.storePrompt({
+      nodes,
+      id,
+      workflow: this.activeWorkflow
+    })
   }
 
   /**