fix: refactor: Rearchitect workflow/graph data sync to prevent desynced state during loading (#9533)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/platform/workflow/core/services/workflowService.ts

@@ -379,6 +379,13 @@ export const useWorkflowService = () => {
       void workflowThumbnail.storeThumbnail(activeWorkflow)
       domWidgetStore.clear()
     }
+
+    // Deactivate the current workflow before the graph is reconfigured.
+    // This ensures there is never a window where activeWorkflow references
+    // the OLD workflow while rootGraph already contains NEW data — any
+    // checkState or data-sync path that reads activeWorkflow will see null
+    // and naturally skip, without needing a guard flag.
+    workflowStore.activeWorkflow = null
   }
 
   /**

src/scripts/app.ts

@@ -9,7 +9,6 @@ import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { flushScheduledSlotLayoutSync } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
 
 import { st, t } from '@/i18n'
-import { ChangeTracker } from '@/scripts/changeTracker'
 import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
 import {
   LGraph,
@@ -1307,143 +1306,136 @@ export class ComfyApp {
       }
     }
 
-    ChangeTracker.isLoadingGraph = true
     try {
-      try {
-        // @ts-expect-error Discrepancies between zod and litegraph - in progress
-        this.rootGraph.configure(graphData)
+      // @ts-expect-error Discrepancies between zod and litegraph - in progress
+      this.rootGraph.configure(graphData)
 
-        // Save original renderer version before scaling (it gets modified during scaling)
-        const originalMainGraphRenderer =
-          this.rootGraph.extra.workflowRendererVersion
+      // Save original renderer version before scaling (it gets modified during scaling)
+      const originalMainGraphRenderer =
+        this.rootGraph.extra.workflowRendererVersion
 
-        // Scale main graph
-        ensureCorrectLayoutScale(originalMainGraphRenderer)
+      // Scale main graph
+      ensureCorrectLayoutScale(originalMainGraphRenderer)
 
-        // Scale all subgraphs that were loaded with the workflow
-        // Use original main graph renderer as fallback (not the modified one)
-        for (const subgraph of this.rootGraph.subgraphs.values()) {
-          ensureCorrectLayoutScale(
-            subgraph.extra.workflowRendererVersion || originalMainGraphRenderer,
-            subgraph
-          )
-        }
-
-        if (canvasVisible) fitView()
-      } catch (error) {
-        useDialogService().showErrorDialog(error, {
-          title: t('errorDialog.loadWorkflowTitle'),
-          reportType: 'loadWorkflowError'
-        })
-        console.error(error)
-        return
+      // Scale all subgraphs that were loaded with the workflow
+      // Use original main graph renderer as fallback (not the modified one)
+      for (const subgraph of this.rootGraph.subgraphs.values()) {
+        ensureCorrectLayoutScale(
+          subgraph.extra.workflowRendererVersion || originalMainGraphRenderer,
+          subgraph
+        )
       }
-      forEachNode(this.rootGraph, (node) => {
-        const size = node.computeSize()
-        size[0] = Math.max(node.size[0], size[0])
-        size[1] = Math.max(node.size[1], size[1])
-        node.setSize(size)
-        if (node.widgets) {
-          // If you break something in the backend and want to patch workflows in the frontend
-          // This is the place to do this
-          for (let widget of node.widgets) {
-            if (node.type == 'KSampler' || node.type == 'KSamplerAdvanced') {
-              if (widget.name == 'sampler_name') {
-                if (
-                  typeof widget.value === 'string' &&
-                  widget.value.startsWith('sample_')
-                ) {
-                  widget.value = widget.value.slice(7)
-                }
-              }
-            }
-            if (
-              node.type == 'KSampler' ||
-              node.type == 'KSamplerAdvanced' ||
-              node.type == 'PrimitiveNode'
-            ) {
-              if (widget.name == 'control_after_generate') {
-                if (widget.value === true) {
-                  widget.value = 'randomize'
-                } else if (widget.value === false) {
-                  widget.value = 'fixed'
-                }
-              }
-            }
-            if (widget.type == 'combo') {
-              const values = widget.options.values as
-                | (string | number | boolean)[]
-                | undefined
+
+      if (canvasVisible) fitView()
+    } catch (error) {
+      useDialogService().showErrorDialog(error, {
+        title: t('errorDialog.loadWorkflowTitle'),
+        reportType: 'loadWorkflowError'
+      })
+      console.error(error)
+      return
+    }
+    forEachNode(this.rootGraph, (node) => {
+      const size = node.computeSize()
+      size[0] = Math.max(node.size[0], size[0])
+      size[1] = Math.max(node.size[1], size[1])
+      node.setSize(size)
+      if (node.widgets) {
+        // If you break something in the backend and want to patch workflows in the frontend
+        // This is the place to do this
+        for (let widget of node.widgets) {
+          if (node.type == 'KSampler' || node.type == 'KSamplerAdvanced') {
+            if (widget.name == 'sampler_name') {
               if (
-                values &&
-                values.length > 0 &&
-                (widget.value == null ||
-                  (reset_invalid_values &&
-                    !values.includes(
-                      widget.value as string | number | boolean
-                    )))
+                typeof widget.value === 'string' &&
+                widget.value.startsWith('sample_')
               ) {
-                widget.value = values[0]
+                widget.value = widget.value.slice(7)
               }
             }
           }
-        }
-
-        useExtensionService().invokeExtensions('loadedGraphNode', node)
-      })
-
-      await useExtensionService().invokeExtensionsAsync(
-        'afterConfigureGraph',
-        missingNodeTypes
-      )
-
-      const telemetryPayload = {
-        missing_node_count: missingNodeTypes.length,
-        missing_node_types: missingNodeTypes.map((node) =>
-          typeof node === 'string' ? node : node.type
-        ),
-        open_source: openSource ?? 'unknown'
-      }
-      useTelemetry()?.trackWorkflowOpened(telemetryPayload)
-      useTelemetry()?.trackWorkflowImported(telemetryPayload)
-      await useWorkflowService().afterLoadNewGraph(
-        workflow,
-        this.rootGraph.serialize() as unknown as ComfyWorkflowJSON
-      )
-
-      // If the canvas was not visible and we're a fresh load, resize the canvas and fit the view
-      // This fixes switching from app mode to a new graph mode workflow (e.g. load template)
-      if (!canvasVisible && (!workflow || typeof workflow === 'string')) {
-        this.canvas.resize()
-        requestAnimationFrame(() => fitView())
-      }
-
-      // Store pending warnings on the workflow for deferred display
-      const activeWf = useWorkspaceStore().workflow.activeWorkflow
-      if (activeWf) {
-        const warnings: PendingWarnings = {}
-        if (missingNodeTypes.length && showMissingNodesDialog) {
-          warnings.missingNodeTypes = missingNodeTypes
-        }
-        if (missingModels.length && showMissingModelsDialog) {
-          const paths = await api.getFolderPaths()
-          warnings.missingModels = { missingModels: missingModels, paths }
-        }
-        if (warnings.missingNodeTypes || warnings.missingModels) {
-          activeWf.pendingWarnings = warnings
+          if (
+            node.type == 'KSampler' ||
+            node.type == 'KSamplerAdvanced' ||
+            node.type == 'PrimitiveNode'
+          ) {
+            if (widget.name == 'control_after_generate') {
+              if (widget.value === true) {
+                widget.value = 'randomize'
+              } else if (widget.value === false) {
+                widget.value = 'fixed'
+              }
+            }
+          }
+          if (widget.type == 'combo') {
+            const values = widget.options.values as
+              | (string | number | boolean)[]
+              | undefined
+            if (
+              values &&
+              values.length > 0 &&
+              (widget.value == null ||
+                (reset_invalid_values &&
+                  !values.includes(widget.value as string | number | boolean)))
+            ) {
+              widget.value = values[0]
+            }
+          }
         }
       }
 
-      if (!deferWarnings) {
-        useWorkflowService().showPendingWarnings()
-      }
+      useExtensionService().invokeExtensions('loadedGraphNode', node)
+    })
 
-      requestAnimationFrame(() => {
-        this.canvas.setDirty(true, true)
-      })
-    } finally {
-      ChangeTracker.isLoadingGraph = false
+    await useExtensionService().invokeExtensionsAsync(
+      'afterConfigureGraph',
+      missingNodeTypes
+    )
+
+    const telemetryPayload = {
+      missing_node_count: missingNodeTypes.length,
+      missing_node_types: missingNodeTypes.map((node) =>
+        typeof node === 'string' ? node : node.type
+      ),
+      open_source: openSource ?? 'unknown'
     }
+    useTelemetry()?.trackWorkflowOpened(telemetryPayload)
+    useTelemetry()?.trackWorkflowImported(telemetryPayload)
+    await useWorkflowService().afterLoadNewGraph(
+      workflow,
+      this.rootGraph.serialize() as unknown as ComfyWorkflowJSON
+    )
+
+    // If the canvas was not visible and we're a fresh load, resize the canvas and fit the view
+    // This fixes switching from app mode to a new graph mode workflow (e.g. load template)
+    if (!canvasVisible && (!workflow || typeof workflow === 'string')) {
+      this.canvas.resize()
+      requestAnimationFrame(() => fitView())
+    }
+
+    // Store pending warnings on the workflow for deferred display
+    const activeWf = useWorkspaceStore().workflow.activeWorkflow
+    if (activeWf) {
+      const warnings: PendingWarnings = {}
+      if (missingNodeTypes.length && showMissingNodesDialog) {
+        warnings.missingNodeTypes = missingNodeTypes
+      }
+      if (missingModels.length && showMissingModelsDialog) {
+        const paths = await api.getFolderPaths()
+        warnings.missingModels = { missingModels: missingModels, paths }
+      }
+      if (warnings.missingNodeTypes || warnings.missingModels) {
+        activeWf.pendingWarnings = warnings
+      }
+    }
+
+    if (!deferWarnings) {
+      useWorkflowService().showPendingWarnings()
+    }
+
+    requestAnimationFrame(() => {
+      this.canvas.setDirty(true, true)
+    })
   }
 
   async graphToPrompt(graph = this.rootGraph) {

src/scripts/changeTracker.ts

@@ -28,14 +28,6 @@ logger.setLevel('info')
 
 export class ChangeTracker {
   static MAX_HISTORY = 50
-  /**
-   * Guard flag to prevent checkState from running during loadGraphData.
-   * Between rootGraph.configure() and afterLoadNewGraph(), the rootGraph
-   * contains the NEW workflow's data while activeWorkflow still points to
-   * the OLD workflow. Any checkState call in that window would serialize
-   * the wrong graph into the old workflow's activeState, corrupting it.
-   */
-  static isLoadingGraph = false
   /**
    * The active state of the workflow.
    */
@@ -139,7 +131,7 @@ export class ChangeTracker {
   }
 
   checkState() {
-    if (!app.graph || this.changeCount || ChangeTracker.isLoadingGraph) return
+    if (!app.graph || this.changeCount) return
     const currentState = clone(app.rootGraph.serialize()) as ComfyWorkflowJSON
     if (!this.activeState) {
       this.activeState = currentState

src/stores/appModeStore.ts

@@ -9,7 +9,6 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { app } from '@/scripts/app'
-import { ChangeTracker } from '@/scripts/changeTracker'
 import { resolveNode } from '@/utils/litegraphUtil'
 
 export function nodeTypeValidForApp(type: string) {
@@ -82,7 +81,7 @@ export const useAppModeStore = defineStore('appMode', () => {
         ? { inputs: selectedInputs, outputs: selectedOutputs }
         : null,
     (data) => {
-      if (!data || ChangeTracker.isLoadingGraph) return
+      if (!data || !workflowStore.activeWorkflow) return
       const graph = app.rootGraph
       if (!graph) return
       const extra = (graph.extra ??= {})