Add test for for editor toggling of linked widgets

There's some chicken and egg problem of: VueNodeFixture feels awful to
use because it's almost devoid of functionality. This makes me reluctant
to require people jump through a inconvenient hoop to add new
functionality. I am trusting Alex's superior architectural vision here.

(And, to be fair, it is fewer lines)

browser_tests/fixtures/ComfyMouse.ts

@@ -66,6 +66,12 @@ export class ComfyMouse implements Omit<Mouse, 'move'> {
     await this.drop(options)
   }
 
+  async getCenter(locator: Locator): Promise<Position> {
+    const bounds = await locator.boundingBox()
+    if (!bounds) throw new Error('Failed to get bounds' + locator)
+    return { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 }
+  }
+
   /** @see {@link Mouse.move} */
   async move(to: Position, options = ComfyMouse.defaultOptions) {
     await this.mouse.move(to.x, to.y, options)

browser_tests/fixtures/VueNodeHelpers.ts

@@ -91,6 +91,9 @@ export class VueNodeHelpers {
       .locator(`[data-node-id="${nodeId}"] .lg-node-header`)
       .click()
   }
+  async selectNodeByLocator(node: Locator) {
+    await node.locator('.lg-node-header').click()
+  }
 
   /**
    * Select multiple Vue nodes by IDs using Ctrl+click
@@ -246,4 +249,18 @@ export class VueNodeHelpers {
       position: { x: box.width / 2, y: box.height * 0.75 }
     })
   }
+  async isSlotConnected(slot: Locator) {
+    const key = await slot.getByTestId('slot-dot').getAttribute('data-slot-key')
+    if (!key) return false
+
+    return await this.page.evaluate((key) => {
+      const [nodeId, type, slotId] = key.split('-')
+      const node = app?.canvas?.graph?.getNodeById(nodeId)
+      if (!node) return false
+
+      return type === 'in'
+        ? node.inputs[Number(slotId)]?.link !== null
+        : !!node.outputs[Number(slotId)].links?.length
+    }, key)
+  }
 }

browser_tests/fixtures/components/ContextMenu.ts

@@ -6,12 +6,16 @@ export class ContextMenu {
   public readonly litegraphMenu: Locator
   public readonly litegraphContextMenu: Locator
   public readonly menuItems: Locator
+  public readonly anyMenu: Locator
 
   constructor(public readonly page: Page) {
     this.primeVueMenu = page.locator('.p-contextmenu, .p-menu')
     this.litegraphMenu = page.locator('.litemenu')
     this.litegraphContextMenu = page.locator('.litecontextmenu')
     this.menuItems = page.locator('.p-menuitem, .litemenu-entry')
+    this.anyMenu = this.primeVueMenu
+      .or(this.litegraphMenu)
+      .or(this.litegraphContextMenu)
   }
 
   async clickMenuItem(name: string): Promise<void> {
@@ -36,16 +40,7 @@ export class ContextMenu {
   }
 
   async isVisible(): Promise<boolean> {
-    const primeVueVisible = await this.primeVueMenu
-      .isVisible()
-      .catch(() => false)
-    const litegraphVisible = await this.litegraphMenu
-      .isVisible()
-      .catch(() => false)
-    const litegraphContextVisible = await this.litegraphContextMenu
-      .isVisible()
-      .catch(() => false)
-    return primeVueVisible || litegraphVisible || litegraphContextVisible
+    return await this.anyMenu.isVisible()
   }
 
   async assertHasItems(items: string[]): Promise<void> {
@@ -58,7 +53,7 @@ export class ContextMenu {
 
   async openFor(locator: Locator): Promise<this> {
     await locator.click({ button: 'right' })
-    await expect.poll(() => this.isVisible()).toBe(true)
+    await expect(this.anyMenu).toBeVisible()
     return this
   }
 
@@ -74,6 +69,12 @@ export class ContextMenu {
     return this
   }
 
+  async openForWidget(widget: Locator): Promise<this> {
+    await widget.click({ button: 'right' })
+    await this.primeVueMenu.waitFor({ state: 'visible' })
+    return this
+  }
+
   async waitForHidden(): Promise<void> {
     await Promise.all([
       this.primeVueMenu.waitFor({ state: 'hidden' }),

browser_tests/fixtures/components/SubgraphEditor.ts

@@ -0,0 +1,82 @@
+import type { Locator } from '@playwright/test'
+
+import { comfyExpect as expect } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { dragByIndex } from '@e2e/fixtures/utils/dragAndDrop'
+
+export class SubgraphEditor {
+  public readonly root
+  public readonly promotionItems
+
+  constructor(protected readonly comfyPage: ComfyPage) {
+    this.root = this.comfyPage.menu.propertiesPanel.root
+    this.promotionItems = this.root.getByTestId(
+      TestIds.subgraphEditor.widgetItem
+    )
+  }
+
+  async open(subgraphNode: Locator) {
+    await this.comfyPage.vueNodes.selectNodeByLocator(subgraphNode)
+    // TODO: don't use commands for this
+    await this.comfyPage.command.executeCommand(
+      'Comfy.Graph.EditSubgraphWidgets'
+    )
+    await expect(this.root, 'Open Properties Panel').toBeVisible()
+  }
+
+  resolvePromotionItem(options: {
+    nodeName?: string
+    nodeId?: string
+    widgetName: string
+  }): Locator {
+    const nodeItems =
+      options.nodeId !== undefined
+        ? this.comfyPage.page.locator(`[data-nodeid="${options.nodeId}"]`)
+        : options.nodeName !== undefined
+          ? this.promotionItems.filter({
+              has: this.comfyPage.page
+                .getByTestId(TestIds.subgraphEditor.nodeName)
+                .filter({ hasText: options.nodeName })
+            })
+          : this.promotionItems
+
+    return nodeItems.filter({
+      has: this.comfyPage.page
+        .getByTestId(TestIds.subgraphEditor.widgetLabel)
+        .filter({ hasText: options.widgetName })
+    })
+  }
+
+  getToggleButton(item: Locator) {
+    return item.getByTestId(TestIds.subgraphEditor.widgetToggle)
+  }
+
+  async togglePromotionOnItem(item: Locator, toState?: boolean) {
+    const toggleIcon = item.getByTestId(TestIds.subgraphEditor.iconEye)
+    if (toState !== undefined) {
+      const expectedIcon = `icon-[lucide--eye${toState ? '-off' : ''}]`
+      await expect(toggleIcon).toContainClass(expectedIcon)
+    }
+    await toggleIcon.click()
+  }
+
+  async togglePromotion(
+    subgraphNode: Locator,
+    options: {
+      nodeName?: string
+      nodeId?: string
+      widgetName: string
+      toState?: boolean
+    }
+  ) {
+    await this.open(subgraphNode)
+
+    const item = this.resolvePromotionItem(options)
+    await this.togglePromotionOnItem(item, options.toState)
+  }
+  async dragItem(fromIndex: number, toIndex: number) {
+    await dragByIndex(this.promotionItems, fromIndex, toIndex)
+    await this.comfyPage.nextFrame()
+  }
+}

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -2,34 +2,7 @@ import type { Locator, Page } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-
-/**
- * Drag an element from one index to another within a list of locators.
- * Uses mousedown/mousemove/mouseup to trigger the DraggableList library.
- *
- * DraggableList toggles position when the dragged item's center crosses
- * past an idle item's center. To reliably land at the target position,
- * we overshoot slightly past the target's far edge.
- */
-async function dragByIndex(items: Locator, fromIndex: number, toIndex: number) {
-  const fromBox = await items.nth(fromIndex).boundingBox()
-  const toBox = await items.nth(toIndex).boundingBox()
-  if (!fromBox || !toBox) throw new Error('Item not visible for drag')
-
-  const draggingDown = toIndex > fromIndex
-  const targetY = draggingDown
-    ? toBox.y + toBox.height * 0.9
-    : toBox.y + toBox.height * 0.1
-
-  const page = items.page()
-  await page.mouse.move(
-    fromBox.x + fromBox.width / 2,
-    fromBox.y + fromBox.height / 2
-  )
-  await page.mouse.down()
-  await page.mouse.move(toBox.x + toBox.width / 2, targetY, { steps: 10 })
-  await page.mouse.up()
-}
+import { dragByIndex } from '@e2e/fixtures/utils/dragAndDrop'
 
 export class BuilderSelectHelper {
   /** All IoItem locators in the current step sidebar. */

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -9,12 +9,17 @@ import type { ComfyWorkflow } from '@/platform/workflow/management/stores/comfyW
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { SubgraphEditor } from '@e2e/fixtures/components/SubgraphEditor'
 import { TestIds } from '@e2e/fixtures/selectors'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 import { SubgraphSlotReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 export class SubgraphHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
+  public readonly editor: SubgraphEditor
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.editor = new SubgraphEditor(comfyPage)
+  }
 
   private get page(): Page {
     return this.comfyPage.page
@@ -327,6 +332,23 @@ export class SubgraphHelper {
     await this.comfyPage.nextFrame()
   }
 
+  async promoteWidget(nodeLocator: Locator, widgetName: string): Promise<void> {
+    const widget = nodeLocator.getByLabel(widgetName, { exact: true })
+    await this.comfyPage.contextMenu
+      .openForWidget(widget)
+      .then((m) => m.clickMenuItemExact(`Promote Widget: ${widgetName}`))
+  }
+
+  async unpromoteWidget(
+    nodeLocator: Locator,
+    widgetName: string
+  ): Promise<void> {
+    const widget = nodeLocator.getByLabel(widgetName, { exact: true })
+    await this.comfyPage.contextMenu
+      .openForWidget(widget)
+      .then((m) => m.clickMenuItemExact(`Un-Promote Widget: ${widgetName}`))
+  }
+
   async isInSubgraph(): Promise<boolean> {
     return this.page.evaluate(() => {
       const graph = window.app!.canvas.graph

browser_tests/fixtures/selectors.ts

@@ -103,14 +103,16 @@ export const TestIds = {
     errorsTab: 'panel-tab-errors'
   },
   subgraphEditor: {
-    toggle: 'subgraph-editor-toggle',
-    shownSection: 'subgraph-editor-shown-section',
     hiddenSection: 'subgraph-editor-hidden-section',
-    widgetToggle: 'subgraph-widget-toggle',
-    widgetLabel: 'subgraph-widget-label',
-    iconLink: 'icon-link',
     iconEye: 'icon-eye',
-    widgetActionsMenuButton: 'widget-actions-menu-button'
+    iconLink: 'icon-link',
+    nodeName: 'subgraph-widget-node-name',
+    shownSection: 'subgraph-editor-shown-section',
+    toggle: 'subgraph-editor-toggle',
+    widgetActionsMenuButton: 'widget-actions-menu-button',
+    widgetItem: 'subgraph-widget-item',
+    widgetLabel: 'subgraph-widget-label',
+    widgetToggle: 'subgraph-widget-toggle'
   },
   node: {
     titleInput: 'node-title-input',

browser_tests/fixtures/utils/dragAndDrop.ts

@@ -0,0 +1,32 @@
+import type { Locator } from '@playwright/test'
+/**
+ * Drag an element from one index to another within a list of locators.
+ * Uses mousedown/mousemove/mouseup to trigger the DraggableList library.
+ *
+ * DraggableList toggles position when the dragged item's center crosses
+ * past an idle item's center. To reliably land at the target position,
+ * we overshoot slightly past the target's far edge.
+ */
+export async function dragByIndex(
+  items: Locator,
+  fromIndex: number,
+  toIndex: number
+) {
+  const fromBox = await items.nth(fromIndex).boundingBox()
+  const toBox = await items.nth(toIndex).boundingBox()
+  if (!fromBox || !toBox) throw new Error('Item not visible for drag')
+
+  const draggingDown = toIndex > fromIndex
+  const targetY = draggingDown
+    ? toBox.y + toBox.height * 0.9
+    : toBox.y + toBox.height * 0.1
+
+  const page = items.page()
+  await page.mouse.move(
+    fromBox.x + fromBox.width / 2,
+    fromBox.y + fromBox.height / 2
+  )
+  await page.mouse.down()
+  await page.mouse.move(toBox.x + toBox.width / 2, targetY, { steps: 10 })
+  await page.mouse.up()
+}

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -14,6 +14,7 @@ export class VueNodeFixture {
   public readonly collapseIcon: Locator
   public readonly root: Locator
   public readonly widgets: Locator
+  public readonly content
 
   constructor(private readonly locator: Locator) {
     this.header = locator.locator('[data-testid^="node-header-"]')
@@ -25,6 +26,7 @@ export class VueNodeFixture {
     this.collapseIcon = this.collapseButton.locator('i')
     this.root = locator
     this.widgets = this.locator.locator('.lg-node-widget')
+    this.content = locator.locator('.lg-node-content')
   }
 
   async getTitle(): Promise<string> {
@@ -58,4 +60,14 @@ export class VueNodeFixture {
   boundingBox(): ReturnType<Locator['boundingBox']> {
     return this.locator.boundingBox()
   }
+  getSlot(name: string | Locator) {
+    const slotLocators = this.root
+      .getByTestId('node-widget')
+      .or(this.root.locator('.lg-slot'))
+    const filteredLocator =
+      typeof name === 'string'
+        ? slotLocators.filter({ hasText: name })
+        : slotLocators.filter({ has: name })
+    return filteredLocator.getByTestId('slot-dot').locator('..')
+  }
 }

browser_tests/tests/subgraph/subgraphPromotion.spec.ts

@@ -607,3 +607,218 @@ test.describe(
     )
   }
 )
+
+test('Promote/Demote by Context Menu @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const ksampler = comfyPage.vueNodes.getNodeLocator('1')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+
+  await test.step('Promote widget', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    await comfyPage.subgraph.promoteWidget(ksampler, 'steps')
+    await comfyPage.subgraph.exitViaBreadcrumb()
+
+    await expect(steps).toBeVisible()
+  })
+
+  await test.step('Un-promote widget', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    await comfyPage.subgraph.unpromoteWidget(ksampler, 'steps')
+    await comfyPage.subgraph.exitViaBreadcrumb()
+
+    await expect(subgraphNode).toBeVisible()
+    await expect(steps).toBeHidden()
+  })
+})
+
+test('Properties panel operations @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+  const cfg = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'cfg')
+
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: true
+  })
+  await expect(steps, 'Promote widget').toBeVisible()
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'cfg',
+    toState: true
+  })
+  await expect(cfg, 'Promote widget').toBeVisible()
+
+  await test.step('widgets display in order promoted', async () => {
+    await expect(editor.promotionItems.first()).toContainText('steps')
+    await expect(subgraphNode.locator('.lg-node-widget').first()).toHaveText(
+      'steps'
+    )
+  })
+
+  await test.step('Reorder widgets', async () => {
+    await editor.dragItem(0, 1)
+    await expect(editor.promotionItems.first()).toContainText('cfg')
+    await expect(subgraphNode.locator('.lg-node-widget').first()).toHaveText(
+      'cfg'
+    )
+  })
+
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: false
+  })
+  await expect(steps, 'Un-promote widget').toBeHidden()
+})
+
+test('Can intermix linked and proxy @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await comfyPage.subgraph.promoteWidget(ksampler.root, 'cfg')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
+
+  await expect(
+    subgraphNode.locator('.lg-node-widget').first(),
+    'linked widgets are first by default'
+  ).toHaveText('steps')
+
+  await editor.open(subgraphNode)
+
+  await editor.dragItem(0, 1)
+  await expect(
+    editor.promotionItems.first(),
+    'Swap widget order'
+  ).toContainText('cfg')
+
+  // FIXME: solve actual bug and remove the not
+  await expect(
+    subgraphNode.locator('.lg-node-widget').first(),
+    'Linked widget is first on node'
+  ).not.toHaveText('cfg')
+})
+
+test('Link already promoted widget @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: true
+  })
+  await expect(steps, 'Promote widget').toBeVisible()
+
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
+
+  await expect(steps).toHaveCount(1)
+})
+
+test('Can promote multiple previews @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
+  await comfyPage.menu.topbar.newWorkflowButton.click()
+  await comfyPage.nextFrame()
+
+  await test.step('Add and rename a Load Image node', async () => {
+    await comfyPage.page.mouse.dblclick(300, 300, { delay: 5 })
+    await comfyPage.searchBox.fillAndSelectFirstNode('Load Image')
+    const loadImage = await comfyPage.vueNodes.getFixtureByTitle('Load Image')
+    await loadImage.setTitle('Character Reference')
+  })
+
+  await test.step('Add a second Load Image node', async () => {
+    await comfyPage.page.mouse.dblclick(600, 300, { delay: 5 })
+    await comfyPage.searchBox.fillAndSelectFirstNode('Load Image')
+  })
+
+  await test.step('Convert both nodes to subgraph', async () => {
+    await comfyPage.canvas.focus()
+    await comfyPage.page.keyboard.press('Control+a')
+    await comfyPage.contextMenu
+      .openFor(comfyPage.vueNodes.getNodeLocator('1'))
+      .then((m) => m.clickMenuItemExact('Convert to Subgraph'))
+  })
+
+  const { editor } = comfyPage.subgraph
+  const subgraph = await comfyPage.vueNodes.getFixtureByTitle('New Subgraph')
+
+  await test.step('Promote both image previews', async () => {
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '1',
+      widgetName: '$$canvas-image-preview',
+      toState: true
+    })
+    await expect(subgraph.content).toHaveCount(1)
+
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '2',
+      widgetName: '$$canvas-image-preview',
+      toState: true
+    })
+
+    await expect(subgraph.content).toHaveCount(2)
+  })
+  // FUTURE: Add test for re-ordering previews?
+
+  await test.step('Demote image', async () => {
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '1',
+      widgetName: '$$canvas-image-preview',
+      toState: false
+    })
+    await expect(subgraph.content).toHaveCount(1)
+  })
+})
+
+test('Linked widgets can not be demoted @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
+
+  await editor.open(subgraphNode)
+  const stepsItem = await editor.resolvePromotionItem({ widgetName: 'steps' })
+  await expect(editor.getToggleButton(stepsItem)).toBeDisabled()
+})

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -263,6 +263,7 @@ onMounted(() => {
           <SubgraphNodeWidget
             v-for="[node, widget] in filteredActive"
             :key="toKey([node, widget])"
+            :data-nodeid="node.id"
             :class="cn(!searchQuery && dragClass, 'bg-comfy-menu-bg')"
             :node-title="node.title"
             :widget-name="widget.label || widget.name"
@@ -295,6 +296,7 @@ onMounted(() => {
           <SubgraphNodeWidget
             v-for="[node, widget] in filteredCandidates"
             :key="toKey([node, widget])"
+            :data-nodeid="node.id"
             class="bg-comfy-menu-bg"
             :node-title="node.title"
             :widget-name="widget.name"

src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue

@@ -41,9 +41,13 @@ const icon = computed(() =>
         className
       )
     "
+    data-testid="subgraph-widget-item"
   >
     <div class="pointer-events-none flex-1">
-      <div class="line-clamp-1 text-xs text-text-secondary">
+      <div
+        class="line-clamp-1 text-xs text-text-secondary"
+        data-testid="subgraph-widget-node-name"
+      >
         {{ nodeTitle }}
       </div>
       <div class="line-clamp-1 text-sm/8" data-testid="subgraph-widget-label">

src/lib/litegraph/src/LGraphCanvas.ts

@@ -1825,6 +1825,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     // this.offset = [0,0];
     this.dragging_rectangle = null
 
+    for (const item of this.selectedItems.keys()) item.selected = undefined
     this.selected_nodes = {}
     this.selected_group = null
     this.selectedItems.clear()