Merge branch 'main' into revert-10247-fix/subgraph-viewport-first-visit

test: migrate fromAny to fromPartial for type-checked test mocks (#10788 )
## Summary - Convert `fromAny` → `fromPartial` in 7 test files where object literals or interfaces are passed - `fromPartial` type-checks the provided fields, unlike `fromAny` which bypasses all checking (same as `as unknown as`) - Class-based types (`LGraphNode`, `LGraph`) remain `fromAny` due to shoehorn's `PartialDeep` incompatibility with class constructors ## Changes - **Pure conversions** (all `fromAny` → `fromPartial`): `domWidgetZIndex`, `matchPromotedInput`, `promotionUtils`, `subgraphNavigationStore` - **Mixed** (some converted, some kept): `promotedWidgetView`, `widgetUtil` - **Cleanup**: `nodeOutputStore` type param normalization Follows up on #10761. ## Test plan - [x] `pnpm typecheck` passes - [x] `pnpm vitest run` on all 7 changed files — 169 tests pass - [x] `pnpm lint` passes ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10788-test-migrate-fromAny-to-fromPartial-for-type-checked-test-mocks-3356d73d365081f7bf61d48a47af530c) by [Unito](https://www.unito.io)
2026-04-22 15:29:44 +00:00 · 2026-03-31 21:12:53 -07:00 · 2026-03-31 21:11:50 -07:00 · 2026-03-31 21:08:18 -07:00 · 2026-03-31 19:55:52 +09:00 · 2026-03-31 02:47:27 -07:00
16 changed files with 321 additions and 421 deletions
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -33,7 +33,6 @@ import { FeatureFlagHelper } from '@e2e/fixtures/helpers/FeatureFlagHelper'
 import { KeyboardHelper } from '@e2e/fixtures/helpers/KeyboardHelper'
 import { NodeOperationsHelper } from '@e2e/fixtures/helpers/NodeOperationsHelper'
 import { PerformanceHelper } from '@e2e/fixtures/helpers/PerformanceHelper'
-import { QueueHelper } from '@e2e/fixtures/helpers/QueueHelper'
 import { SettingsHelper } from '@e2e/fixtures/helpers/SettingsHelper'
 import { SubgraphHelper } from '@e2e/fixtures/helpers/SubgraphHelper'
 import { ToastHelper } from '@e2e/fixtures/helpers/ToastHelper'
@@ -200,7 +199,6 @@ export class ComfyPage {
  public readonly queuePanel: QueuePanel
  public readonly perf: PerformanceHelper
  public readonly assets: AssetsHelper
-  public readonly queue: QueueHelper

  /** Worker index to test user ID */
  public readonly userIds: string[] = []
@@ -248,7 +246,6 @@ export class ComfyPage {
    this.queuePanel = new QueuePanel(page)
    this.perf = new PerformanceHelper(page)
    this.assets = new AssetsHelper(page)
-    this.queue = new QueueHelper(page)
  }

  get visibleToasts() {
--- a/browser_tests/fixtures/helpers/BuilderFooterHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderFooterHelper.ts
@@ -30,6 +30,10 @@ export class BuilderFooterHelper {
    return this.page.getByTestId(TestIds.builder.saveButton)
  }

+  get saveGroup(): Locator {
+    return this.page.getByTestId(TestIds.builder.saveGroup)
+  }
+
  get saveAsButton(): Locator {
    return this.page.getByTestId(TestIds.builder.saveAsButton)
  }
--- a/browser_tests/fixtures/helpers/QueueHelper.ts
+++ b/browser_tests/fixtures/helpers/QueueHelper.ts
@@ -1,79 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-
-export class QueueHelper {
-  private queueRouteHandler: ((route: Route) => void) | null = null
-  private historyRouteHandler: ((route: Route) => void) | null = null
-
-  constructor(private readonly page: Page) {}
-
-  /**
-   * Mock the /api/queue endpoint to return specific queue state.
-   */
-  async mockQueueState(
-    running: number = 0,
-    pending: number = 0
-  ): Promise<void> {
-    this.queueRouteHandler = (route: Route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          queue_running: Array.from({ length: running }, (_, i) => [
-            i,
-            `running-${i}`,
-            {},
-            {},
-            []
-          ]),
-          queue_pending: Array.from({ length: pending }, (_, i) => [
-            i,
-            `pending-${i}`,
-            {},
-            {},
-            []
-          ])
-        })
-      })
-    await this.page.route('**/api/queue', this.queueRouteHandler)
-  }
-
-  /**
-   * Mock the /api/history endpoint with completed/failed job entries.
-   */
-  async mockHistory(
-    jobs: Array<{ promptId: string; status: 'success' | 'error' }>
-  ): Promise<void> {
-    const history: Record<string, unknown> = {}
-    for (const job of jobs) {
-      history[job.promptId] = {
-        prompt: [0, job.promptId, {}, {}, []],
-        outputs: {},
-        status: {
-          status_str: job.status === 'success' ? 'success' : 'error',
-          completed: true
-        }
-      }
-    }
-    this.historyRouteHandler = (route: Route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(history)
-      })
-    await this.page.route('**/api/history**', this.historyRouteHandler)
-  }
-
-  /**
-   * Clear all route mocks set by this helper.
-   */
-  async clearMocks(): Promise<void> {
-    if (this.queueRouteHandler) {
-      await this.page.unroute('**/api/queue', this.queueRouteHandler)
-      this.queueRouteHandler = null
-    }
-    if (this.historyRouteHandler) {
-      await this.page.unroute('**/api/history**', this.historyRouteHandler)
-      this.historyRouteHandler = null
-    }
-  }
-}
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -82,6 +82,7 @@ export const TestIds = {
    footerNav: 'builder-footer-nav',
    saveButton: 'builder-save-button',
    saveAsButton: 'builder-save-as-button',
+    saveGroup: 'builder-save-group',
    saveAsChevron: 'builder-save-as-chevron',
    ioItem: 'builder-io-item',
    ioItemTitle: 'builder-io-item-title',
--- a/browser_tests/tests/builderSaveFlow.spec.ts
+++ b/browser_tests/tests/builderSaveFlow.spec.ts
@@ -189,6 +189,41 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
    await expect(saveAs.nameInput).toBeVisible()
  })

+  test('Save button width is consistent across all states', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await comfyPage.workflow.loadWorkflow('default')
+    await fitToViewInstant(comfyPage)
+    await appMode.enterBuilder()
+
+    // State 1: Disabled "Save as" (no outputs selected)
+    const disabledBox = await appMode.footer.saveAsButton.boundingBox()
+    expect(disabledBox).toBeTruthy()
+
+    // Select I/O to enable the button
+    await appMode.steps.goToInputs()
+    const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+    await appMode.select.selectInputWidget(ksampler)
+    await appMode.steps.goToOutputs()
+    await appMode.select.selectOutputNode()
+
+    // State 2: Enabled "Save as" (unsaved, has outputs)
+    const enabledBox = await appMode.footer.saveAsButton.boundingBox()
+    expect(enabledBox).toBeTruthy()
+    expect(enabledBox!.width).toBe(disabledBox!.width)
+
+    // Save the workflow to transition to the Save + chevron state
+    await builderSaveAs(appMode, `${Date.now()} width-test`, 'App')
+    await appMode.saveAs.closeButton.click()
+    await comfyPage.nextFrame()
+
+    // State 3: Save + chevron button group (saved workflow)
+    const saveButtonGroupBox = await appMode.footer.saveGroup.boundingBox()
+    expect(saveButtonGroupBox).toBeTruthy()
+    expect(saveButtonGroupBox!.width).toBe(disabledBox!.width)
+  })
+
  test('Connect output popover appears when no outputs selected', async ({
    comfyPage
  }) => {
--- a/src/components/builder/BuilderFooterToolbar.vue
+++ b/src/components/builder/BuilderFooterToolbar.vue
@@ -33,76 +33,91 @@
        {{ t('g.next') }}
        <i class="icon-[lucide--chevron-right]" aria-hidden="true" />
      </Button>
-      <ConnectOutputPopover
-        v-if="!hasOutputs"
-        :is-select-active="isSelectStep"
-        @switch="navigateToStep('builder:outputs')"
-      >
+      <div class="relative min-w-24">
+        <!--
+          Invisible sizers: both labels rendered with matching button padding
+          so the container's intrinsic width equals the wider label.
+          height:0 + overflow:hidden keeps them invisible without affecting height.
+        -->
+        <div class="max-h-0 overflow-y-hidden" aria-hidden="true">
+          <div class="px-4 py-2 text-sm">{{ t('g.save') }}</div>
+          <div class="px-4 py-2 text-sm">{{ t('builderToolbar.saveAs') }}</div>
+        </div>
+        <ConnectOutputPopover
+          v-if="!hasOutputs"
+          class="w-full"
+          :is-select-active="isSelectStep"
+          @switch="navigateToStep('builder:outputs')"
+        >
+          <Button
+            size="lg"
+            class="w-full"
+            :class="disabledSaveClasses"
+            data-testid="builder-save-as-button"
+          >
+            {{ isSaved ? t('g.save') : t('builderToolbar.saveAs') }}
+          </Button>
+        </ConnectOutputPopover>
+        <ButtonGroup
+          v-else-if="isSaved"
+          data-testid="builder-save-group"
+          class="w-full rounded-lg bg-secondary-background has-[[data-save-chevron]:hover]:bg-secondary-background-hover"
+        >
+          <Button
+            size="lg"
+            :disabled="!isModified"
+            class="flex-1"
+            :class="isModified ? activeSaveClasses : disabledSaveClasses"
+            data-testid="builder-save-button"
+            @click="save()"
+          >
+            {{ t('g.save') }}
+          </Button>
+          <DropdownMenuRoot>
+            <DropdownMenuTrigger as-child>
+              <Button
+                size="lg"
+                :aria-label="t('builderToolbar.saveAs')"
+                data-save-chevron
+                data-testid="builder-save-as-chevron"
+                class="w-6 rounded-l-none border-l border-border-default px-0"
+              >
+                <i
+                  class="icon-[lucide--chevron-down] size-4"
+                  aria-hidden="true"
+                />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuContent
+                align="end"
+                :side-offset="4"
+                class="z-1001 min-w-36 rounded-lg border border-border-subtle bg-base-background p-1 shadow-interface"
+              >
+                <DropdownMenuItem as-child @select="saveAs()">
+                  <Button
+                    variant="secondary"
+                    size="lg"
+                    class="w-full justify-start font-normal"
+                  >
+                    {{ t('builderToolbar.saveAs') }}
+                  </Button>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenuPortal>
+          </DropdownMenuRoot>
+        </ButtonGroup>
        <Button
+          v-else
          size="lg"
-          :class="cn('w-24', disabledSaveClasses)"
+          class="w-full"
+          :class="activeSaveClasses"
          data-testid="builder-save-as-button"
+          @click="saveAs()"
        >
-          {{ isSaved ? t('g.save') : t('builderToolbar.saveAs') }}
+          {{ t('builderToolbar.saveAs') }}
        </Button>
-      </ConnectOutputPopover>
-      <ButtonGroup
-        v-else-if="isSaved"
-        class="w-24 rounded-lg bg-secondary-background has-[[data-save-chevron]:hover]:bg-secondary-background-hover"
-      >
-        <Button
-          size="lg"
-          :disabled="!isModified"
-          class="flex-1"
-          :class="isModified ? activeSaveClasses : disabledSaveClasses"
-          data-testid="builder-save-button"
-          @click="save()"
-        >
-          {{ t('g.save') }}
-        </Button>
-        <DropdownMenuRoot>
-          <DropdownMenuTrigger as-child>
-            <Button
-              size="lg"
-              :aria-label="t('builderToolbar.saveAs')"
-              data-save-chevron
-              data-testid="builder-save-as-chevron"
-              class="w-6 rounded-l-none border-l border-border-default px-0"
-            >
-              <i
-                class="icon-[lucide--chevron-down] size-4"
-                aria-hidden="true"
-              />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuContent
-              align="end"
-              :side-offset="4"
-              class="z-1001 min-w-36 rounded-lg border border-border-subtle bg-base-background p-1 shadow-interface"
-            >
-              <DropdownMenuItem as-child @select="saveAs()">
-                <Button
-                  variant="secondary"
-                  size="lg"
-                  class="w-full justify-start font-normal"
-                >
-                  {{ t('builderToolbar.saveAs') }}
-                </Button>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenuPortal>
-        </DropdownMenuRoot>
-      </ButtonGroup>
-      <Button
-        v-else
-        size="lg"
-        :class="activeSaveClasses"
-        data-testid="builder-save-as-button"
-        @click="saveAs()"
-      >
-        {{ t('builderToolbar.saveAs') }}
-      </Button>
+      </div>
    </nav>
  </div>
 </template>
@@ -126,8 +141,6 @@ import { useAppMode } from '@/composables/useAppMode'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { cn } from '@/utils/tailwindUtil'
-
 import BuilderOpensAsPopover from './BuilderOpensAsPopover.vue'
 import { setWorkflowDefaultView } from './builderViewOptions'
 import ConnectOutputPopover from './ConnectOutputPopover.vue'
--- a/src/components/graph/widgets/domWidgetZIndex.test.ts
+++ b/src/components/graph/widgets/domWidgetZIndex.test.ts
@@ -1,4 +1,4 @@
-import { fromAny } from '@total-typescript/shoehorn'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'

 import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -15,7 +15,7 @@ describe('getDomWidgetZIndex', () => {
    first.order = 0
    second.order = 1

-    const nodes = fromAny<{ _nodes: LGraphNode[] }, unknown>(graph)._nodes
+    const nodes = fromPartial<{ _nodes: LGraphNode[] }>(graph)._nodes
    nodes.splice(nodes.indexOf(first), 1)
    nodes.push(first)

--- a/src/core/graph/subgraph/matchPromotedInput.test.ts
+++ b/src/core/graph/subgraph/matchPromotedInput.test.ts
@@ -1,4 +1,4 @@
-import { fromAny } from '@total-typescript/shoehorn'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'

 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
@@ -31,12 +31,11 @@ describe(matchPromotedInput, () => {
    }

    const matched = matchPromotedInput(
-      fromAny<
+      fromPartial<
        Array<{
          name: string
          _widget?: IBaseWidget
-        }>,
-        unknown
+        }>
      >([aliasInput, exactInput]),
      targetWidget
    )
@@ -51,9 +50,7 @@ describe(matchPromotedInput, () => {
    }

    const matched = matchPromotedInput(
-      fromAny<Array<{ name: string; _widget?: IBaseWidget }>, unknown>([
-        aliasInput
-      ]),
+      fromPartial<Array<{ name: string; _widget?: IBaseWidget }>>([aliasInput]),
      targetWidget
    )

@@ -70,12 +67,11 @@ describe(matchPromotedInput, () => {
    }

    const matched = matchPromotedInput(
-      fromAny<
+      fromPartial<
        Array<{
          name: string
          _widget?: IBaseWidget
-        }>,
-        unknown
+        }>
      >([firstAliasInput, secondAliasInput]),
      targetWidget
    )
--- a/src/core/graph/subgraph/promotedWidgetView.test.ts
+++ b/src/core/graph/subgraph/promotedWidgetView.test.ts
@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
-import { fromAny } from '@total-typescript/shoehorn'
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'

 // Barrel import must come first to avoid circular dependency
 // (promotedWidgetView → widgetMap → BaseWidget → LegacyWidget → barrel)
@@ -293,7 +293,7 @@ describe(createPromotedWidgetView, () => {
      value: 'initial',
      options: {}
    } satisfies Pick<IBaseWidget, 'name' | 'type' | 'value' | 'options'>
-    const fallbackWidget = fromAny<IBaseWidget, unknown>(fallbackWidgetShape)
+    const fallbackWidget = fromPartial<IBaseWidget>(fallbackWidgetShape)
    innerNode.widgets = [fallbackWidget]

    const widgetValueStore = useWidgetValueStore()
--- a/src/core/graph/subgraph/promotionUtils.test.ts
+++ b/src/core/graph/subgraph/promotionUtils.test.ts
@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { fromAny } from '@total-typescript/shoehorn'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

@@ -30,7 +30,7 @@ function widget(
    Pick<IBaseWidget, 'name' | 'serialize' | 'type' | 'options'>
  >
 ): IBaseWidget {
-  return fromAny<IBaseWidget, unknown>({ name: 'widget', ...overrides })
+  return fromPartial<IBaseWidget>({ name: 'widget', ...overrides })
 }

 describe('isPreviewPseudoWidget', () => {
--- a/src/platform/workflow/core/services/workflowService.ts
+++ b/src/platform/workflow/core/services/workflowService.ts
@@ -23,7 +23,6 @@ import type { AppMode } from '@/composables/useAppMode'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import {
@@ -392,9 +391,6 @@ export const useWorkflowService = () => {
      // Capture thumbnail before loading new graph
      void workflowThumbnail.storeThumbnail(activeWorkflow)
      domWidgetStore.clear()
-
-      // Save subgraph viewport before the canvas gets overwritten
-      useSubgraphNavigationStore().saveCurrentViewport()
    }
  }

--- a/src/stores/nodeOutputStore.test.ts
+++ b/src/stores/nodeOutputStore.test.ts
@@ -32,7 +32,7 @@ vi.mock('@/scripts/app', () => ({
 }))

 const createMockNode = (overrides: Record<string, unknown> = {}): LGraphNode =>
-  fromAny<LGraphNode, Record<string, unknown>>({
+  fromAny<LGraphNode, unknown>({
    id: 1,
    type: 'TestNode',
    ...overrides
--- a/src/stores/subgraphNavigationStore.test.ts
+++ b/src/stores/subgraphNavigationStore.test.ts
@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { fromAny } from '@total-typescript/shoehorn'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
@@ -20,7 +20,7 @@ function createMockSubgraph(id: string, rootGraph = app.rootGraph): Subgraph {
    nodes: []
  } satisfies MockSubgraph

-  return fromAny<Subgraph, unknown>(mockSubgraph)
+  return fromPartial<Subgraph>(mockSubgraph)
 }

 vi.mock('@/scripts/app', () => {
--- a/src/stores/subgraphNavigationStore.ts
+++ b/src/stores/subgraphNavigationStore.ts
@@ -9,7 +9,6 @@ import type { Subgraph } from '@/lib/litegraph/src/litegraph'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useLitegraphService } from '@/services/litegraphService'
 import { app } from '@/scripts/app'
 import { findSubgraphPathById } from '@/utils/graphTraversalUtil'
 import { isNonNullish, isSubgraph } from '@/utils/typeGuardUtil'
@@ -35,44 +34,20 @@ export const useSubgraphNavigationStore = defineStore(
    /** The stack of subgraph IDs from the root graph to the currently opened subgraph. */
    const idStack = ref<string[]>([])

-    /** LRU cache for viewport states. Key: `workflowPath:graphId` */
+    /** LRU cache for viewport states. Key: subgraph ID or 'root' for root graph */
    const viewportCache = new QuickLRU<string, DragAndScaleState>({
      maxSize: VIEWPORT_CACHE_MAX_SIZE
    })

-    /** Get the ID of the root graph for the currently active workflow. */
+    /**
+     * Get the ID of the root graph for the currently active workflow.
+     * @returns The ID of the root graph for the currently active workflow.
+     */
    const getCurrentRootGraphId = () => {
      const canvas = canvasStore.getCanvas()
      return canvas.graph?.rootGraph?.id ?? 'root'
    }

-    /**
-     * Set by saveCurrentViewport() (called from beforeLoadNewGraph) to
-     * prevent onNavigated from re-saving a stale viewport during the
-     * workflow switch transition. Uses setTimeout instead of rAF so the
-     * flag resets even when the tab is backgrounded.
-     */
-    let isWorkflowSwitching = false
-    // ── Helpers ──────────────────────────────────────────────────────
-
-    /** Build a workflow-scoped cache key. */
-    function buildCacheKey(
-      graphId: string,
-      workflowRef?: { path?: string } | null
-    ): string {
-      const wf = workflowRef ?? workflowStore.activeWorkflow
-      const prefix = wf?.path ?? ''
-      return `${prefix}:${graphId}`
-    }
-
-    /** ID of the graph currently shown on the canvas. */
-    function getActiveGraphId(): string {
-      const canvas = canvasStore.getCanvas()
-      return canvas?.subgraph?.id ?? getCurrentRootGraphId()
-    }
-
-    // ── Navigation stack ─────────────────────────────────────────────
-
    /**
     * A stack representing subgraph navigation history from the root graph to
     * the current opened subgraph.
@@ -85,6 +60,7 @@ export const useSubgraphNavigationStore = defineStore(

    /**
     * Restore the navigation stack from a list of subgraph IDs.
+     * @param subgraphIds The list of subgraph IDs to restore the navigation stack from.
     * @see exportState
     */
    const restoreState = (subgraphIds: string[]) => {
@@ -94,74 +70,69 @@ export const useSubgraphNavigationStore = defineStore(

    /**
     * Export the navigation stack as a list of subgraph IDs.
+     * @returns The list of subgraph IDs, ending with the currently active subgraph.
     * @see restoreState
     */
    const exportState = () => [...idStack.value]

-    // ── Viewport save / restore ──────────────────────────────────────
-
-    /** Get the current viewport state, or null if the canvas is not available. */
+    /**
+     * Get the current viewport state.
+     * @returns The current viewport state, or null if the canvas is not available.
+     */
    const getCurrentViewport = (): DragAndScaleState | null => {
      const canvas = canvasStore.getCanvas()
      if (!canvas) return null
+
      return {
        scale: canvas.ds.state.scale,
        offset: [...canvas.ds.state.offset]
      }
    }

-    /** Save the current viewport state for a graph. */
-    function saveViewport(graphId: string, workflowRef?: object | null): void {
+    /**
+     * Save the current viewport state.
+     * @param graphId The graph ID to save for. Use 'root' for root graph, or omit to use current context.
+     */
+    const saveViewport = (graphId: string) => {
      const viewport = getCurrentViewport()
      if (!viewport) return
-      viewportCache.set(buildCacheKey(graphId, workflowRef), viewport)
+
+      viewportCache.set(graphId, viewport)
    }

-    /** Apply a viewport state to the canvas. */
-    function applyViewport(viewport: DragAndScaleState): void {
+    /**
+     * Restore viewport state for a graph.
+     * @param graphId The graph ID to restore. Use 'root' for root graph, or omit to use current context.
+     */
+    const restoreViewport = (graphId: string) => {
+      const viewport = viewportCache.get(graphId)
+      if (!viewport) return
+
      const canvas = app.canvas
      if (!canvas) return
+
      canvas.ds.scale = viewport.scale
      canvas.ds.offset[0] = viewport.offset[0]
      canvas.ds.offset[1] = viewport.offset[1]
      canvas.setDirty(true, true)
    }

-    function restoreViewport(graphId: string): void {
-      const canvas = app.canvas
-      if (!canvas) return
-
-      const expectedKey = buildCacheKey(graphId)
-      const viewport = viewportCache.get(expectedKey)
-      if (viewport) {
-        applyViewport(viewport)
-        return
-      }
-
-      // Cache miss — fit to content after the canvas has the new graph.
-      // rAF fires after layout + paint, when nodes are positioned.
-      const expectedGraphId = graphId
-      requestAnimationFrame(() => {
-        if (getActiveGraphId() !== expectedGraphId) return
-        useLitegraphService().fitView()
-      })
-    }
-
-    // ── Navigation handler ───────────────────────────────────────────
-
-    function onNavigated(
+    /**
+     * Update the navigation stack when the active subgraph changes.
+     * @param subgraph The new active subgraph.
+     * @param prevSubgraph The previous active subgraph.
+     */
+    const onNavigated = (
      subgraph: Subgraph | undefined,
      prevSubgraph: Subgraph | undefined
-    ): void {
-      // During a workflow switch, beforeLoadNewGraph already saved the
-      // outgoing viewport — skip the save here to avoid caching stale
-      // canvas state from the transition.
-      if (!isWorkflowSwitching) {
-        if (prevSubgraph) {
-          saveViewport(prevSubgraph.id)
-        } else if (!prevSubgraph && subgraph) {
-          saveViewport(getCurrentRootGraphId())
-        }
+    ) => {
+      // Save viewport state for the graph we're leaving
+      if (prevSubgraph) {
+        // Leaving a subgraph
+        saveViewport(prevSubgraph.id)
+      } else if (!prevSubgraph && subgraph) {
+        // Leaving root graph to enter a subgraph
+        saveViewport(getCurrentRootGraphId())
      }

      const isInRootGraph = !subgraph
@@ -176,22 +147,20 @@ export const useSubgraphNavigationStore = defineStore(
      if (isInReachableSubgraph) {
        idStack.value = [...path]
      } else {
+        // Treat as if opening a new subgraph
        idStack.value = [subgraph.id]
      }

+      // Always try to restore viewport for the target subgraph
      restoreViewport(subgraph.id)
    }

-    // ── Watchers ─────────────────────────────────────────────────────
-
-    // Sync flush ensures we capture the outgoing viewport before any other
-    // watchers or DOM updates from the same state change mutate the canvas.
+    // Update navigation stack when opened subgraph changes (also triggers when switching workflows)
    watch(
      () => workflowStore.activeSubgraph,
      (newValue, oldValue) => {
        onNavigated(newValue, oldValue)
-      },
-      { flush: 'sync' }
+      }
    )

    //Allow navigation with forward/back buttons
@@ -260,16 +229,6 @@ export const useSubgraphNavigationStore = defineStore(
    watch(() => canvasStore.currentGraph, updateHash)
    watch(routeHash, () => navigateToHash(String(routeHash.value)))

-    /** Save the current viewport for the active graph/workflow. Called by
-     *  workflowService.beforeLoadNewGraph() before the canvas is overwritten. */
-    function saveCurrentViewport(): void {
-      saveViewport(getActiveGraphId())
-      isWorkflowSwitching = true
-      setTimeout(() => {
-        isWorkflowSwitching = false
-      }, 0)
-    }
-
    return {
      activeSubgraph,
      navigationStack,
@@ -277,9 +236,7 @@ export const useSubgraphNavigationStore = defineStore(
      exportState,
      saveViewport,
      restoreViewport,
-      saveCurrentViewport,
      updateHash,
-      /** @internal Exposed for test assertions only. */
      viewportCache
    }
  }
--- a/src/stores/subgraphNavigationStore.viewport.test.ts
+++ b/src/stores/subgraphNavigationStore.viewport.test.ts
@@ -18,39 +18,32 @@ const { mockSetDirty } = vi.hoisted(() => ({

 vi.mock('@/scripts/app', () => {
  const mockCanvas = {
-    subgraph: undefined as unknown,
-    graph: undefined as unknown,
+    subgraph: null,
    ds: {
      scale: 1,
      offset: [0, 0],
-      state: { scale: 1, offset: [0, 0] },
-      fitToBounds: vi.fn()
+      state: {
+        scale: 1,
+        offset: [0, 0]
+      }
    },
-    setDirty: mockSetDirty,
-    get empty() {
-      return true
-    }
+    setDirty: mockSetDirty
  }

-  const mockGraph = {
-    _nodes: [],
-    nodes: [],
-    subgraphs: new Map(),
-    getNodeById: vi.fn(),
-    id: 'root'
-  }
-
-  mockCanvas.graph = mockGraph
-
  return {
    app: {
-      graph: mockGraph,
-      rootGraph: mockGraph,
+      graph: {
+        _nodes: [],
+        nodes: [],
+        subgraphs: new Map(),
+        getNodeById: vi.fn()
+      },
      canvas: mockCanvas
    }
  }
 })

+// Mock canvasStore
 vi.mock('@/renderer/core/canvas/canvasStore', () => ({
  useCanvasStore: () => ({
    getCanvas: () => app.canvas
@@ -58,165 +51,141 @@ vi.mock('@/renderer/core/canvas/canvasStore', () => ({
 }))
 vi.mock('@vueuse/router', () => ({ useRouteHash: vi.fn() }))

-const { mockFitView } = vi.hoisted(() => ({
-  mockFitView: vi.fn()
-}))
-vi.mock('@/services/litegraphService', () => ({
-  useLitegraphService: () => ({ fitView: mockFitView })
-}))
-
+// Get reference to mock canvas
 const mockCanvas = app.canvas

-let rafCallbacks: FrameRequestCallback[] = []
-
 describe('useSubgraphNavigationStore - Viewport Persistence', () => {
  beforeEach(() => {
    setActivePinia(createTestingPinia({ stubActions: false }))
-    rafCallbacks = []
-    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
-      rafCallbacks.push(cb)
-      return rafCallbacks.length
-    })
-    mockCanvas.subgraph = undefined
-    mockCanvas.graph = app.graph
+    // Reset canvas state
    mockCanvas.ds.scale = 1
    mockCanvas.ds.offset = [0, 0]
    mockCanvas.ds.state.scale = 1
    mockCanvas.ds.state.offset = [0, 0]
    mockSetDirty.mockClear()
-    mockFitView.mockClear()
-  })
-
-  afterEach(() => {
-    vi.unstubAllGlobals()
-  })
-
-  describe('cache key isolation', () => {
-    it('isolates viewport by workflow — same graphId returns different values', () => {
-      const store = useSubgraphNavigationStore()
-      const workflowStore = useWorkflowStore()
-
-      // Save viewport under workflow A
-      workflowStore.activeWorkflow = {
-        path: 'wfA.json'
-      } as typeof workflowStore.activeWorkflow
-      mockCanvas.ds.state.scale = 2
-      mockCanvas.ds.state.offset = [10, 20]
-      store.saveViewport('root')
-
-      // Save different viewport under workflow B
-      workflowStore.activeWorkflow = {
-        path: 'wfB.json'
-      } as typeof workflowStore.activeWorkflow
-      mockCanvas.ds.state.scale = 5
-      mockCanvas.ds.state.offset = [99, 88]
-      store.saveViewport('root')
-
-      // Restore under A — should get A's values
-      workflowStore.activeWorkflow = {
-        path: 'wfA.json'
-      } as typeof workflowStore.activeWorkflow
-      store.restoreViewport('root')
-
-      expect(mockCanvas.ds.scale).toBe(2)
-      expect(mockCanvas.ds.offset).toEqual([10, 20])
-    })
  })

  describe('saveViewport', () => {
-    it('saves viewport state for root graph', () => {
-      const store = useSubgraphNavigationStore()
+    it('should save viewport state for root graph', () => {
+      const navigationStore = useSubgraphNavigationStore()
+
+      // Set viewport state
      mockCanvas.ds.state.scale = 2
      mockCanvas.ds.state.offset = [100, 200]

-      store.saveViewport('root')
+      // Save viewport for root
+      navigationStore.saveViewport('root')

-      expect(store.viewportCache.get(':root')).toEqual({
+      // Check it was saved
+      const saved = navigationStore.viewportCache.get('root')
+      expect(saved).toEqual({
        scale: 2,
        offset: [100, 200]
      })
    })

-    it('saves viewport state for subgraph', () => {
-      const store = useSubgraphNavigationStore()
+    it('should save viewport state for subgraph', () => {
+      const navigationStore = useSubgraphNavigationStore()
+
+      // Set viewport state
      mockCanvas.ds.state.scale = 1.5
      mockCanvas.ds.state.offset = [50, 75]

-      store.saveViewport('subgraph-123')
+      // Save viewport for subgraph
+      navigationStore.saveViewport('subgraph-123')

-      expect(store.viewportCache.get(':subgraph-123')).toEqual({
+      // Check it was saved
+      const saved = navigationStore.viewportCache.get('subgraph-123')
+      expect(saved).toEqual({
        scale: 1.5,
        offset: [50, 75]
      })
    })
+
+    it('should save viewport for current context when no ID provided', () => {
+      const navigationStore = useSubgraphNavigationStore()
+      const workflowStore = useWorkflowStore()
+
+      // Mock being in a subgraph
+      const mockSubgraph = { id: 'sub-456' }
+      workflowStore.activeSubgraph = mockSubgraph as Subgraph
+
+      // Set viewport state
+      mockCanvas.ds.state.scale = 3
+      mockCanvas.ds.state.offset = [10, 20]
+
+      // Save viewport without ID (should default to root since activeSubgraph is not tracked by navigation store)
+      navigationStore.saveViewport('sub-456')
+
+      // Should save for the specified subgraph
+      const saved = navigationStore.viewportCache.get('sub-456')
+      expect(saved).toEqual({
+        scale: 3,
+        offset: [10, 20]
+      })
+    })
  })

  describe('restoreViewport', () => {
-    it('restores cached viewport', () => {
-      const store = useSubgraphNavigationStore()
-      store.viewportCache.set(':root', { scale: 2.5, offset: [150, 250] })
+    it('should restore viewport state for root graph', () => {
+      const navigationStore = useSubgraphNavigationStore()

-      store.restoreViewport('root')
+      // Save a viewport state
+      navigationStore.viewportCache.set('root', {
+        scale: 2.5,
+        offset: [150, 250]
+      })

+      // Restore it
+      navigationStore.restoreViewport('root')
+
+      // Check canvas was updated
      expect(mockCanvas.ds.scale).toBe(2.5)
      expect(mockCanvas.ds.offset).toEqual([150, 250])
-      expect(mockSetDirty).toHaveBeenCalledWith(true, true)
+      expect(mockCanvas.setDirty).toHaveBeenCalledWith(true, true)
    })

-    it('does not mutate canvas synchronously on cache miss', () => {
-      const store = useSubgraphNavigationStore()
+    it('should restore viewport state for subgraph', () => {
+      const navigationStore = useSubgraphNavigationStore()
+
+      // Save a viewport state
+      navigationStore.viewportCache.set('sub-789', {
+        scale: 0.75,
+        offset: [-50, -100]
+      })
+
+      // Restore it
+      navigationStore.restoreViewport('sub-789')
+
+      // Check canvas was updated
+      expect(mockCanvas.ds.scale).toBe(0.75)
+      expect(mockCanvas.ds.offset).toEqual([-50, -100])
+    })
+
+    it('should do nothing if no saved viewport exists', () => {
+      const navigationStore = useSubgraphNavigationStore()
+
+      // Reset canvas
      mockCanvas.ds.scale = 1
      mockCanvas.ds.offset = [0, 0]
      mockSetDirty.mockClear()

-      store.restoreViewport('non-existent')
+      // Try to restore non-existent viewport
+      navigationStore.restoreViewport('non-existent')

-      // Should not change canvas synchronously
+      // Canvas should not change
      expect(mockCanvas.ds.scale).toBe(1)
      expect(mockCanvas.ds.offset).toEqual([0, 0])
      expect(mockSetDirty).not.toHaveBeenCalled()
-      // But should have scheduled a rAF
-      expect(rafCallbacks).toHaveLength(1)
-    })
-
-    it('calls fitView on cache miss after rAF fires', () => {
-      const store = useSubgraphNavigationStore()
-      // Ensure no cached entry
-      store.viewportCache.delete(':root')
-
-      // Use the root graph ID so the stale-guard passes
-      store.restoreViewport('root')
-
-      expect(mockFitView).not.toHaveBeenCalled()
-      expect(rafCallbacks).toHaveLength(1)
-
-      // Simulate rAF firing — active graph still matches
-      rafCallbacks[0](performance.now())
-
-      expect(mockFitView).toHaveBeenCalledOnce()
-    })
-
-    it('skips fitView if active graph changed before rAF fires', () => {
-      const store = useSubgraphNavigationStore()
-      store.viewportCache.delete(':root')
-
-      store.restoreViewport('root')
-      expect(rafCallbacks).toHaveLength(1)
-
-      // Simulate graph switching away before rAF fires
-      mockCanvas.subgraph = { id: 'different-graph' } as never
-
-      rafCallbacks[0](performance.now())
-
-      expect(mockFitView).not.toHaveBeenCalled()
    })
  })

  describe('navigation integration', () => {
-    it('saves and restores viewport when navigating between subgraphs', async () => {
-      const store = useSubgraphNavigationStore()
+    it('should save and restore viewport when navigating between subgraphs', async () => {
+      const navigationStore = useSubgraphNavigationStore()
      const workflowStore = useWorkflowStore()

+      // Create mock subgraph with both _nodes and nodes properties
      const mockRootGraph = {
        _nodes: [],
        nodes: [],
@@ -230,72 +199,84 @@ describe('useSubgraphNavigationStore - Viewport Persistence', () => {
        nodes: []
      }

+      // Start at root with custom viewport
      mockCanvas.ds.state.scale = 2
      mockCanvas.ds.state.offset = [100, 100]

-      // Enter subgraph
+      // Navigate to subgraph
      workflowStore.activeSubgraph = subgraph1 as Partial<Subgraph> as Subgraph
      await nextTick()

-      // Root viewport saved
-      expect(store.viewportCache.get(':root')).toEqual({
-        scale: 2,
-        offset: [100, 100]
-      })
+      // Root viewport should have been saved automatically
+      const rootViewport = navigationStore.viewportCache.get('root')
+      expect(rootViewport).toBeDefined()
+      expect(rootViewport?.scale).toBe(2)
+      expect(rootViewport?.offset).toEqual([100, 100])

      // Change viewport in subgraph
      mockCanvas.ds.state.scale = 0.5
      mockCanvas.ds.state.offset = [-50, -50]

-      // Exit subgraph
+      // Navigate back to root
      workflowStore.activeSubgraph = undefined
      await nextTick()

-      // Subgraph viewport saved
-      expect(store.viewportCache.get(':sub1')).toEqual({
-        scale: 0.5,
-        offset: [-50, -50]
-      })
+      // Subgraph viewport should have been saved automatically
+      const sub1Viewport = navigationStore.viewportCache.get('sub1')
+      expect(sub1Viewport).toBeDefined()
+      expect(sub1Viewport?.scale).toBe(0.5)
+      expect(sub1Viewport?.offset).toEqual([-50, -50])

-      // Root viewport restored
+      // Root viewport should be restored automatically
      expect(mockCanvas.ds.scale).toBe(2)
      expect(mockCanvas.ds.offset).toEqual([100, 100])
    })

-    it('preserves pre-existing cache entries across workflow switches', async () => {
-      const store = useSubgraphNavigationStore()
+    it('should preserve viewport cache when switching workflows', async () => {
+      const navigationStore = useSubgraphNavigationStore()
      const workflowStore = useWorkflowStore()

-      store.viewportCache.set(':root', { scale: 2, offset: [0, 0] })
-      store.viewportCache.set(':sub1', { scale: 1.5, offset: [10, 10] })
-      expect(store.viewportCache.size).toBe(2)
+      // Add some viewport states
+      navigationStore.viewportCache.set('root', { scale: 2, offset: [0, 0] })
+      navigationStore.viewportCache.set('sub1', {
+        scale: 1.5,
+        offset: [10, 10]
+      })

-      const wf1 = { path: 'wf1.json' } as ComfyWorkflow
-      const wf2 = { path: 'wf2.json' } as ComfyWorkflow
+      expect(navigationStore.viewportCache.size).toBe(2)

-      workflowStore.activeWorkflow = wf1 as typeof workflowStore.activeWorkflow
+      // Switch workflows
+      const workflow1 = { path: 'workflow1.json' } as ComfyWorkflow
+      const workflow2 = { path: 'workflow2.json' } as ComfyWorkflow
+
+      workflowStore.activeWorkflow = workflow1 as ReturnType<
+        typeof useWorkflowStore
+      >['activeWorkflow']
      await nextTick()

-      workflowStore.activeWorkflow = wf2 as typeof workflowStore.activeWorkflow
+      workflowStore.activeWorkflow = workflow2 as ReturnType<
+        typeof useWorkflowStore
+      >['activeWorkflow']
      await nextTick()

-      // Pre-existing entries still in cache
-      expect(store.viewportCache.has(':root')).toBe(true)
-      expect(store.viewportCache.has(':sub1')).toBe(true)
+      // Cache should be preserved (LRU will manage memory)
+      expect(navigationStore.viewportCache.size).toBe(2)
+      expect(navigationStore.viewportCache.has('root')).toBe(true)
+      expect(navigationStore.viewportCache.has('sub1')).toBe(true)
    })

    it('should save/restore viewports correctly across multiple subgraphs', () => {
      const navigationStore = useSubgraphNavigationStore()

-      navigationStore.viewportCache.set(':root', {
+      navigationStore.viewportCache.set('root', {
        scale: 1,
        offset: [0, 0]
      })
-      navigationStore.viewportCache.set(':sub-1', {
+      navigationStore.viewportCache.set('sub-1', {
        scale: 2,
        offset: [100, 200]
      })
-      navigationStore.viewportCache.set(':sub-2', {
+      navigationStore.viewportCache.set('sub-2', {
        scale: 0.5,
        offset: [-50, -75]
      })
@@ -319,18 +300,17 @@ describe('useSubgraphNavigationStore - Viewport Persistence', () => {

      // QuickLRU uses double-buffering: effective capacity is up to 2 * maxSize.
      // Fill enough entries so the earliest ones are fully evicted.
-      // Keys use the workflow-scoped format (`:graphId`) matching production.
      for (let i = 0; i < overflowEntryCount; i++) {
-        navigationStore.viewportCache.set(`:sub-${i}`, {
+        navigationStore.viewportCache.set(`sub-${i}`, {
          scale: i + 1,
          offset: [i * 10, i * 20]
        })
      }

-      expect(navigationStore.viewportCache.has(':sub-0')).toBe(false)
+      expect(navigationStore.viewportCache.has('sub-0')).toBe(false)

      expect(
-        navigationStore.viewportCache.has(`:sub-${overflowEntryCount - 1}`)
+        navigationStore.viewportCache.has(`sub-${overflowEntryCount - 1}`)
      ).toBe(true)

      mockCanvas.ds.scale = 99
--- a/src/utils/widgetUtil.test.ts
+++ b/src/utils/widgetUtil.test.ts
@@ -1,4 +1,4 @@
-import { fromAny } from '@total-typescript/shoehorn'
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
@@ -50,7 +50,7 @@ describe('getWidgetDefaultValue', () => {
 })

 function makeWidget(overrides: Record<string, unknown> = {}): IBaseWidget {
-  return fromAny<IBaseWidget, unknown>({
+  return fromPartial<IBaseWidget>({
    name: 'myWidget',
    type: 'number',
    value: 0,
Author	SHA1	Message	Date
Alexander Brown	b223d8f607	Merge branch 'main' into revert-10247-fix/subgraph-viewport-first-visit	2026-03-31 21:12:53 -07:00
Dante	c77c8a9476	test: migrate fromAny to fromPartial for type-checked test mocks (#10788 ) ## Summary - Convert `fromAny` → `fromPartial` in 7 test files where object literals or interfaces are passed - `fromPartial` type-checks the provided fields, unlike `fromAny` which bypasses all checking (same as `as unknown as`) - Class-based types (`LGraphNode`, `LGraph`) remain `fromAny` due to shoehorn's `PartialDeep` incompatibility with class constructors ## Changes - Pure conversions (all `fromAny` → `fromPartial`): `domWidgetZIndex`, `matchPromotedInput`, `promotionUtils`, `subgraphNavigationStore` - Mixed (some converted, some kept): `promotedWidgetView`, `widgetUtil` - Cleanup: `nodeOutputStore` type param normalization Follows up on #10761. ## Test plan - [x] `pnpm typecheck` passes - [x] `pnpm vitest run` on all 7 changed files — 169 tests pass - [x] `pnpm lint` passes ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10788-test-migrate-fromAny-to-fromPartial-for-type-checked-test-mocks-3356d73d365081f7bf61d48a47af530c) by [Unito](https://www.unito.io)	2026-03-31 21:11:50 -07:00
Alexander Brown	a75e4ddbc8	Revert "fix: persist subgraph viewport across navigation and tab switches (#1…" This reverts commit `7e7e2d5647`.	2026-03-31 21:08:18 -07:00
Dante	380fae9a0d	chore(test): remove dead QueueHelper from browser tests (#10771 ) ## Summary - Remove unused `QueueHelper` class and its `comfyPage.queue` property - `QueueHelper` mocks the legacy `/api/queue` tuple format which the app no longer uses (now `/api/jobs` via `fetchQueue()`) - `comfyPage.queue.*` is never called in any test Fixes #10670 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10771-chore-test-remove-dead-QueueHelper-from-browser-tests-3346d73d36508117bb19db9492bcbed3) by [Unito](https://www.unito.io)	2026-03-31 19:55:52 +09:00
pythongosssss	515f234143	fix: Ensure all save/save as buttons are the same width (#10681 ) ## Summary Makes the save/save as buttons in the builder footer toolbar all a fixed size so when switching states the elements dont jump ## Changes - What: - Apply widths from design to the buttons - Add tests that measure the sizes of the buttons ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10681-fix-Ensure-all-save-save-as-buttons-are-the-same-width-3316d73d36508187bb74c5a977ea876f) by [Unito](https://www.unito.io)	2026-03-31 02:47:27 -07:00