fix: resolve subgraph promoted widget panel regressions (#10648)

## Summary Fix four bugs in the subgraph promoted widget panel where linked promotions were not distinguished from independent ones, causing incorrect UI state in both the SubgraphEditor (Settings) panel and the Parameters tab WidgetActions menu. ## Changes - **What**: Add `isLinkedPromotion` helper to correctly identify widgets driven by subgraph input connections. Fix `disambiguatingSourceNodeId` lookup mismatch that broke `isWidgetShownOnParents` and `handleHideInput` for non-nested promoted widgets. Replace fragile CSS icon selectors with `data-testid` attributes. ## Bugs fixed Companion fix PR for #10502 (red-green test PR). All 4 E2E tests from #10502 now pass: | Bug | Root cause | Fix | |-----|-----------|-----| | Linked promoted widgets have hide toggle enabled | `SubgraphEditor` only checked `node.id === -1` (physical) — linked promotions from subgraph input connections were not detected | Added `isLinkedPromotion` helper that checks `input._widget` bindings; `SubgraphNodeWidget` `:is-physical` prop now covers both physical and linked cases | | Linked promoted widgets show eye icon instead of link icon | Same root cause as above — `isPhysical` prop was only true for `node.id === -1` | Extended the `:is-physical` condition to include `isLinkedPromotion` check | | Widget labels show raw names instead of renamed values | `SubgraphEditor` passed `widget.name` instead of `widget.label \|\| widget.name` | Changed `:widget-name` binding to prefer `widget.label` | | WidgetActions menu shows Hide/Show for linked promotions | `v-if="hasParents"` didn't exclude linked promotions | Added `canToggleVisibility` computed that combines `hasParents` with `!isLinked` check via `isLinkedPromotion` | ### Additional bugs discovered and fixed | Bug | Root cause | Fix | |-----|-----------|-----| | "Show input" always displayed instead of "Hide input" for promoted widgets | `SectionWidgets.isWidgetShownOnParents` used `getSourceNodeId(widget)` which falls back to `widget.sourceNodeId` when `disambiguatingSourceNodeId` is undefined — this mismatches the promotion store key (`undefined`) | Changed to `widget.disambiguatingSourceNodeId` directly | | "Hide input" click does nothing | `WidgetActions.handleHideInput` used `getSourceNodeId(widget)` for the same reason — `demote()` couldn't find the entry to remove | Same fix — use `widget.disambiguatingSourceNodeId` directly | ## Tests added ### E2E (Playwright) — `browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts` | Test | What it verifies | |------|-----------------| | linked promoted widgets have hide toggle disabled | All toggle buttons in SubgraphEditor shown section are disabled for linked widgets (covers 1-level and 2-level nested promotions via `subgraph-nested-promotion` fixture) | | linked promoted widgets show link icon instead of eye icon | Link icons appear for linked widgets, no eye icons present | | widget labels display renamed values instead of raw names | `widget.label` is displayed when set, not `widget.name` | | linked promoted widget menu should not show Hide/Show input | Three-dot menu on Parameters tab omits Hide/Show options for linked promotions, Rename is still available | ### Unit (Vitest) — `src/core/graph/subgraph/promotionUtils.test.ts` 7 tests covering `isLinkedPromotion`: basic matching, negative cases, nested subgraph with `disambiguatingSourceNodeId`, multiple inputs, and mixed linked/independent state. ### Unit (Vitest) — `src/components/rightSidePanel/parameters/WidgetActions.test.ts` - Added `isSubgraphNode: () => false` to mock nodes to prevent crash from new `isLinked` computed ## Review Focus - `isLinkedPromotion` reads `input._widget` (WeakRef-backed, non-reactive) directly in the template. This is intentional — `_widget` bindings are set during subgraph initialization before the user opens the panel, so stale reads don't occur in practice. A computed-based approach was attempted but reverted because `_widget` changes cannot trigger Vue reactivity. - `getSourceNodeId` removal in `SectionWidgets` and `WidgetActions` is intentional — the old fallback (`?? widget.sourceNodeId`) caused key mismatches with the promotion store for non-nested widgets. ## Screenshots Before <img width="723" height="935" alt="image" src="https://github.com/user-attachments/assets/09862578-a0d1-45b4-929c-f22f7494ebe2" /> After <img width="999" height="952" alt="image" src="https://github.com/user-attachments/assets/ed8fe604-6b44-46b9-a315-6da31d6b405a" />
2026-05-11 16:30:57 +00:00 · 2026-04-01 17:10:30 +09:00
parent df42b7a2a8
commit bb96e3c95c
12 changed files with 345 additions and 37 deletions
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -51,7 +51,10 @@
        }
      "
    >
-      <div class="flex min-w-40 flex-col gap-2 p-2">
+      <div
+        class="flex min-w-40 flex-col gap-2 p-2"
+        data-testid="more-menu-content"
+      >
        <slot :close="hide" />
      </div>
    </Popover>
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -303,6 +303,7 @@ function handleTitleCancel() {
            v-if="isSingleSubgraphNode"
            variant="secondary"
            size="icon"
+            data-testid="subgraph-editor-toggle"
            :class="cn(isEditingSubgraph && 'bg-secondary-background-selected')"
            @click="
              rightSidePanelStore.openPanel(
--- a/src/components/rightSidePanel/parameters/SectionWidgets.vue
+++ b/src/components/rightSidePanel/parameters/SectionWidgets.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n'

 import Button from '@/components/ui/button/Button.vue'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import { getSourceNodeId } from '@/core/graph/subgraph/promotionUtils'
 import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { usePromotionStore } from '@/stores/promotionStore'
@@ -79,7 +78,6 @@ function isWidgetShownOnParents(
 ): boolean {
  return parents.some((parent) => {
    if (isPromotedWidgetView(widget)) {
-      const sourceNodeId = getSourceNodeId(widget)
      const interiorNodeId =
        String(widgetNode.id) === String(parent.id)
          ? widget.sourceNodeId
@@ -88,7 +86,7 @@ function isWidgetShownOnParents(
      return promotionStore.isPromoted(parent.rootGraph.id, parent.id, {
        sourceNodeId: interiorNodeId,
        sourceWidgetName: widget.sourceWidgetName,
-        disambiguatingSourceNodeId: sourceNodeId
+        disambiguatingSourceNodeId: widget.disambiguatingSourceNodeId
      })
    }
    return promotionStore.isPromoted(parent.rootGraph.id, parent.id, {
--- a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
@@ -14,10 +14,7 @@ import {
 import { useI18n } from 'vue-i18n'

 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import {
-  getSourceNodeId,
-  getWidgetName
-} from '@/core/graph/subgraph/promotionUtils'
+import { getWidgetName } from '@/core/graph/subgraph/promotionUtils'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
@@ -132,7 +129,9 @@ const advancedInputsWidgets = computed((): NodeWidgetsList => {
      !promotionStore.isPromoted(node.rootGraph.id, node.id, {
        sourceNodeId: String(interiorNode.id),
        sourceWidgetName: getWidgetName(widget),
-        disambiguatingSourceNodeId: getSourceNodeId(widget)
+        disambiguatingSourceNodeId: isPromotedWidgetView(widget)
+          ? widget.disambiguatingSourceNodeId
+          : undefined
      })
  )
 })
--- a/src/components/rightSidePanel/parameters/WidgetActions.test.ts
+++ b/src/components/rightSidePanel/parameters/WidgetActions.test.ts
@@ -98,7 +98,8 @@ describe('WidgetActions', () => {
      type: 'TestNode',
      rootGraph: { id: 'graph-test' },
      computeSize: vi.fn(),
-      size: [200, 100]
+      size: [200, 100],
+      isSubgraphNode: () => false
    })
  }

@@ -225,7 +226,8 @@ describe('WidgetActions', () => {
    const node = fromAny<LGraphNode, unknown>({
      id: 4,
      type: 'SubgraphNode',
-      rootGraph: { id: 'graph-test' }
+      rootGraph: { id: 'graph-test' },
+      isSubgraphNode: () => false
    })
    const widget = {
      name: 'text',
--- a/src/components/rightSidePanel/parameters/WidgetActions.vue
+++ b/src/components/rightSidePanel/parameters/WidgetActions.vue
@@ -9,7 +9,7 @@ import type { PromotedWidgetSource } from '@/core/graph/subgraph/promotedWidgetT
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import {
  demoteWidget,
-  getSourceNodeId,
+  isLinkedPromotion,
  promoteWidget
 } from '@/core/graph/subgraph/promotionUtils'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -47,6 +47,11 @@ const promotionStore = usePromotionStore()
 const { t } = useI18n()

 const hasParents = computed(() => parents?.length > 0)
+const isLinked = computed(() => {
+  if (!node.isSubgraphNode() || !isPromotedWidgetView(widget)) return false
+  return isLinkedPromotion(node, widget.sourceNodeId, widget.sourceWidgetName)
+})
+const canToggleVisibility = computed(() => hasParents.value && !isLinked.value)
 const favoriteNode = computed(() =>
  isShownOnParents && hasParents.value ? parents[0] : node
 )
@@ -76,8 +81,6 @@ function handleHideInput() {
  if (!parents?.length) return

  if (isPromotedWidgetView(widget)) {
-    const disambiguatingSourceNodeId = getSourceNodeId(widget)
-
    for (const parent of parents) {
      const source: PromotedWidgetSource = {
        sourceNodeId:
@@ -85,7 +88,7 @@ function handleHideInput() {
            ? widget.sourceNodeId
            : String(node.id),
        sourceWidgetName: widget.sourceWidgetName,
-        disambiguatingSourceNodeId
+        disambiguatingSourceNodeId: widget.disambiguatingSourceNodeId
      }
      promotionStore.demote(parent.rootGraph.id, parent.id, source)
      parent.computeSize(parent.size)
@@ -114,6 +117,7 @@ function handleResetToDefault() {
 <template>
  <MoreButton
    is-vertical
+    data-testid="widget-actions-menu-button"
    class="bg-transparent text-muted-foreground transition-all hover:bg-secondary-background-hover hover:text-base-foreground active:scale-95"
  >
    <template #default="{ close }">
@@ -133,7 +137,7 @@ function handleResetToDefault() {
      </Button>

      <Button
-        v-if="hasParents"
+        v-if="canToggleVisibility"
        variant="textonly"
        size="unset"
        class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
--- a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
@@ -11,6 +11,7 @@ import {
  getPromotableWidgets,
  getSourceNodeId,
  getWidgetName,
+  isLinkedPromotion,
  isRecommendedWidget,
  promoteWidget,
  pruneDisconnected
@@ -88,14 +89,13 @@ const activeWidgets = computed<WidgetItem[]>({
    promotionStore.setPromotions(
      node.rootGraph.id,
      node.id,
-      value.map(([n, w]) => {
-        const sid = getSourceNodeId(w)
-        return {
-          sourceNodeId: String(n.id),
-          sourceWidgetName: getWidgetName(w),
-          ...(sid && { disambiguatingSourceNodeId: sid })
-        }
-      })
+      value.map(([n, w]) => ({
+        sourceNodeId: String(n.id),
+        sourceWidgetName: getWidgetName(w),
+        disambiguatingSourceNodeId: isPromotedWidgetView(w)
+          ? w.disambiguatingSourceNodeId
+          : undefined
+      }))
    )
    refreshPromotedWidgetRendering()
  }
@@ -123,7 +123,9 @@ const candidateWidgets = computed<WidgetItem[]>(() => {
      !promotionStore.isPromoted(node.rootGraph.id, node.id, {
        sourceNodeId: String(n.id),
        sourceWidgetName: getWidgetName(w),
-        disambiguatingSourceNodeId: getSourceNodeId(w)
+        disambiguatingSourceNodeId: isPromotedWidgetView(w)
+          ? w.disambiguatingSourceNodeId
+          : undefined
      })
  )
 })
@@ -162,6 +164,18 @@ function refreshPromotedWidgetRendering() {
  canvasStore.canvas?.setDirty(true, true)
 }

+function isItemLinked([node, widget]: WidgetItem): boolean {
+  return (
+    node.id === -1 ||
+    (!!activeNode.value &&
+      isLinkedPromotion(
+        activeNode.value,
+        String(node.id),
+        getWidgetName(widget)
+      ))
+  )
+}
+
 function toKey(item: WidgetItem) {
  const sid = getSourceNodeId(item[1])
  return sid
@@ -187,8 +201,14 @@ function showAll() {
  }
 }
 function hideAll() {
+  const node = activeNode.value
  for (const item of filteredActive.value) {
    if (String(item[0].id) === '-1') continue
+    if (
+      node &&
+      isLinkedPromotion(node, String(item[0].id), getWidgetName(item[1]))
+    )
+      continue
    demote(item)
  }
 }
@@ -223,6 +243,7 @@ onMounted(() => {

      <div
        v-if="filteredActive.length"
+        data-testid="subgraph-editor-shown-section"
        class="flex flex-col border-b border-interface-stroke"
      >
        <div
@@ -244,8 +265,8 @@ onMounted(() => {
            :key="toKey([node, widget])"
            :class="cn(!searchQuery && dragClass, 'bg-comfy-menu-bg')"
            :node-title="node.title"
-            :widget-name="widget.name"
-            :is-physical="node.id === -1"
+            :widget-name="widget.label || widget.name"
+            :is-physical="isItemLinked([node, widget])"
            :is-draggable="!searchQuery"
            @toggle-visibility="demote([node, widget])"
          />
@@ -254,6 +275,7 @@ onMounted(() => {

      <div
        v-if="filteredCandidates.length"
+        data-testid="subgraph-editor-hidden-section"
        class="flex flex-col border-b border-interface-stroke"
      >
        <div
--- a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 import type { ClassValue } from '@/utils/tailwindUtil'

-const props = defineProps<{
+const {
+  nodeTitle,
+  widgetName,
+  isDraggable = false,
+  isPhysical = false,
+  class: className
+} = defineProps<{
  nodeTitle: string
  widgetName: string
  isDraggable?: boolean
@@ -14,13 +22,13 @@ defineEmits<{
  (e: 'toggleVisibility'): void
 }>()

-function getIcon() {
-  return props.isPhysical
+const icon = computed(() =>
+  isPhysical
    ? 'icon-[lucide--link]'
-    : props.isDraggable
+    : isDraggable
      ? 'icon-[lucide--eye]'
      : 'icon-[lucide--eye-off]'
-}
+)
 </script>

 <template>
@@ -29,8 +37,8 @@ function getIcon() {
      cn(
        'flex items-center gap-1 rounded-sm px-2 py-1 break-all',
        'bg-node-component-surface',
-        props.isDraggable && 'ring-accent-background hover:ring-1',
-        props.class
+        isDraggable && 'ring-accent-background hover:ring-1',
+        className
      )
    "
  >
@@ -38,15 +46,18 @@ function getIcon() {
      <div class="line-clamp-1 text-xs text-text-secondary">
        {{ nodeTitle }}
      </div>
-      <div class="line-clamp-1 text-sm/8">{{ widgetName }}</div>
+      <div class="line-clamp-1 text-sm/8" data-testid="subgraph-widget-label">
+        {{ widgetName }}
+      </div>
    </div>
    <Button
      variant="muted-textonly"
      size="sm"
+      data-testid="subgraph-widget-toggle"
      :disabled="isPhysical"
      @click.stop="$emit('toggleVisibility')"
    >
-      <i :class="getIcon()" />
+      <i :class="icon" :data-testid="isPhysical ? 'icon-link' : 'icon-eye'" />
    </Button>
    <div
      v-if="isDraggable"