fix: hide local values for linked standard widgets

browser_tests/assets/vueNodes/linked-standard-widgets.json

@@ -0,0 +1,134 @@
+{
+  "id": "bc8526ee-e7ce-4b81-9a55-12a34d43cc3a",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "DevToolsLinkedStandardWidgetSource",
+      "pos": [-1600, 100],
+      "size": [360, 270],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "plain_text", "type": "STRING", "links": [1] },
+        { "name": "integer", "type": "INT", "links": [2] },
+        { "name": "number", "type": "FLOAT", "links": [3] },
+        { "name": "slider", "type": "FLOAT", "links": [4] },
+        { "name": "switch", "type": "BOOLEAN", "links": [5] },
+        { "name": "labeled_toggle", "type": "BOOLEAN", "links": [6] },
+        { "name": "select", "type": "COMBO", "links": [7] },
+        { "name": "color", "type": "COLOR", "links": [8] },
+        { "name": "textarea", "type": "STRING", "links": [9] }
+      ],
+      "properties": {
+        "Node name for S&R": "DevToolsLinkedStandardWidgetSource"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 2,
+      "type": "DevToolsLinkedStandardWidgets",
+      "pos": [200, 100],
+      "size": [560, 620],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "plain_text",
+          "type": "STRING",
+          "widget": { "name": "plain_text" },
+          "link": 1
+        },
+        {
+          "name": "integer",
+          "type": "INT",
+          "widget": { "name": "integer" },
+          "link": 2
+        },
+        {
+          "name": "number",
+          "type": "FLOAT",
+          "widget": { "name": "number" },
+          "link": 3
+        },
+        {
+          "name": "slider",
+          "type": "FLOAT",
+          "widget": { "name": "slider" },
+          "link": 4
+        },
+        {
+          "name": "switch",
+          "type": "BOOLEAN",
+          "widget": { "name": "switch" },
+          "link": 5
+        },
+        {
+          "name": "labeled_toggle",
+          "type": "BOOLEAN",
+          "widget": { "name": "labeled_toggle" },
+          "link": 6
+        },
+        {
+          "name": "select",
+          "type": "COMBO",
+          "widget": { "name": "select" },
+          "link": 7
+        },
+        {
+          "name": "color",
+          "type": "COLOR",
+          "widget": { "name": "color" },
+          "link": 8
+        },
+        {
+          "name": "textarea",
+          "type": "STRING",
+          "widget": { "name": "textarea" },
+          "link": 9
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsLinkedStandardWidgets"
+      },
+      "widgets_values": [
+        "STALE PLAIN TEXT",
+        314,
+        9.875,
+        0.73,
+        true,
+        false,
+        "STALE SELECT VALUE",
+        "#22c55d",
+        "STALE MULTILINE PROMPT"
+      ]
+    }
+  ],
+  "links": [
+    [1, 1, 0, 2, 0, "STRING"],
+    [2, 1, 1, 2, 1, "INT"],
+    [3, 1, 2, 2, 2, "FLOAT"],
+    [4, 1, 3, 2, 3, "FLOAT"],
+    [5, 1, 4, 2, 4, "BOOLEAN"],
+    [6, 1, 5, 2, 5, "BOOLEAN"],
+    [7, 1, 6, 2, 6, "COMBO"],
+    [8, 1, 7, 2, 7, "COLOR"],
+    [9, 1, 8, 2, 8, "STRING"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "frontendVersion": "1.28.6"
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/linked_multiline_string.json

@@ -0,0 +1,72 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CLIPTextEncode",
+      "pos": [440, 80],
+      "size": [520, 280],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": null
+        },
+        {
+          "name": "text",
+          "type": "STRING",
+          "widget": {
+            "name": "text"
+          },
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": ["stale local prompt"]
+    },
+    {
+      "id": 2,
+      "type": "PrimitiveString",
+      "pos": [40, 120],
+      "size": [315, 58],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [1]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PrimitiveString"
+      },
+      "widgets_values": ["authoritative upstream prompt"]
+    }
+  ],
+  "links": [[1, 2, 0, 1, 1, "STRING"]],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/selectors.ts

@@ -168,6 +168,8 @@ export const TestIds = {
   widgets: {
     container: 'node-widgets',
     widget: 'node-widget',
+    linkedContent: 'linked-widget-content',
+    linkedPlaceholder: 'linked-widget-placeholder',
     layoutFieldLabel: 'widget-layout-field-label',
     formDropdownMenu: 'form-dropdown-menu',
     decrement: 'decrement',

browser_tests/fixtures/utils/promotedMissingModel.ts

@@ -235,18 +235,23 @@ export async function expectResolvedPromotedModelSuppressesStaleInteriorErrors(
     const node = comfyPage.vueNodes.getNodeByTitle(step.nodeTitle)
     await expect(node).toBeVisible()
 
-    const staleCombo = node.getByRole('combobox', {
-      name: PROMOTED_MODEL_WIDGET_NAME,
+    const linkedStatus = node.getByRole('img', {
+      name: `${PROMOTED_MODEL_WIDGET_NAME}: Linked input`,
       exact: true
     })
     await expect(
-      staleCombo,
-      `${step.nodeTitle} should expose the stale linked interior widget`
-    ).toBeDisabled()
+      linkedStatus,
+      `${step.nodeTitle} should expose the linked interior status`
+    ).toBeVisible()
+    const staleValue = node.getByText(staleModelName, { exact: true })
     await expect(
-      staleCombo,
-      `${step.nodeTitle} should keep the stale interior value`
-    ).toContainText(staleModelName)
+      staleValue,
+      `${step.nodeTitle} should retain the stale interior value`
+    ).toBeAttached()
+    await expect(
+      staleValue,
+      `${step.nodeTitle} should hide the stale interior value`
+    ).toBeHidden()
     await expectNoMissingModelUi(comfyPage)
   }
 }

browser_tests/tests/subgraph/subgraphNested.spec.ts

@@ -64,13 +64,21 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         await comfyExpect(innerNode).toBeVisible()
 
         const innerTextboxes = innerNode.getByRole('textbox')
-        await comfyExpect(innerTextboxes).toHaveCount(2)
-        const innerValues = await innerTextboxes.evaluateAll<
-          string[],
-          HTMLInputElement
-        >((boxes) => boxes.map((b) => b.value))
-        comfyExpect(innerValues).toContain('11111111111')
-        comfyExpect(innerValues).toContain('22222222222')
+        await comfyExpect(innerTextboxes).toHaveCount(1)
+        await comfyExpect(innerTextboxes).toHaveValue('11111111111')
+
+        await comfyExpect(
+          innerNode.getByRole('img', {
+            name: 'text_1: Linked input',
+            exact: true
+          })
+        ).toBeVisible()
+        const linkedTextbox = innerNode.getByTestId(
+          TestIds.widgets.linkedContent
+        )
+        await comfyExpect(linkedTextbox).toHaveCount(1)
+        await comfyExpect(linkedTextbox).toHaveValue('22222222222')
+        await comfyExpect(linkedTextbox).toBeHidden()
       })
     }
   )

browser_tests/tests/subgraph/subgraphPromotion.spec.ts

@@ -377,12 +377,18 @@ test.describe(
             .toEqual(expect.arrayContaining(['string_a', 'value']))
 
           const subgraphNode = comfyPage.vueNodes.getNodeLocator('5')
-          const linkedTextarea = subgraphNode.getByRole('textbox', {
-            name: 'string_a',
-            exact: true
-          })
-          await expect(linkedTextarea).toBeVisible()
+          await expect(
+            subgraphNode.getByRole('img', {
+              name: 'string_a: Linked input',
+              exact: true
+            })
+          ).toBeVisible()
+          const linkedTextarea = subgraphNode.getByTestId(
+            TestIds.widgets.linkedContent
+          )
+          await expect(linkedTextarea).toHaveCount(1)
           await expect(linkedTextarea).toBeDisabled()
+          await expect(linkedTextarea).toBeHidden()
 
           const allTextareas = subgraphNode.getByRole('textbox')
           await expect(allTextareas.first()).toBeVisible()

browser_tests/tests/subgraph/subgraphPromotionDom.spec.ts

@@ -152,10 +152,15 @@ test.describe(
 
           await openSubgraphById(comfyPage, '11')
 
-          const interiorTextareas = comfyPage.page
-            .locator('[data-node-id]')
-            .getByRole('textbox')
-          await expect(interiorTextareas).toHaveCount(2)
+          const interiorNodes = comfyPage.page.locator('[data-node-id]')
+          await expect(interiorNodes.locator('textarea')).toHaveCount(2)
+          await expect(interiorNodes.getByRole('textbox')).toHaveCount(0)
+          await expect(
+            interiorNodes.getByRole('img', {
+              name: 'text: Linked input',
+              exact: true
+            })
+          ).toHaveCount(2)
 
           await comfyPage.subgraph.exitViaBreadcrumb()
 

browser_tests/tests/subgraph/subgraphSerialization.spec.ts

@@ -733,11 +733,16 @@ test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
         const outerNode = comfyPage.vueNodes.getNodeLocator('5')
         await expect(outerNode).toBeVisible()
 
-        const textarea = outerNode
-          .getByRole('textbox', { name: 'string_a' })
-          .first()
-        await expect(textarea).toBeVisible()
+        await expect(
+          outerNode.getByRole('img', {
+            name: 'string_a: Linked input',
+            exact: true
+          })
+        ).toBeVisible()
+        const textarea = outerNode.getByTestId(TestIds.widgets.linkedContent)
+        await expect(textarea).toHaveCount(1)
         await expect(textarea).toBeDisabled()
+        await expect(textarea).toBeHidden()
       })
 
       test('No legacy-prefixed or disconnected widgets remain on the node', async ({

browser_tests/tests/subgraph/subgraphSlots.spec.ts

@@ -419,9 +419,12 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = comfyPage.vueNodes.getNodeLocator('19')
       await expect(subgraphNode).toBeVisible()
 
-      const seedWidget = subgraphNode.getByLabel('seed', { exact: true })
-      await expect(seedWidget).toBeVisible()
-      await SubgraphHelper.expectWidgetBelowHeader(subgraphNode, seedWidget)
+      const seedStatus = subgraphNode.getByRole('img', {
+        name: 'renamed_seed: Linked input',
+        exact: true
+      })
+      await expect(seedStatus).toBeVisible()
+      await SubgraphHelper.expectWidgetBelowHeader(subgraphNode, seedStatus)
 
       await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
 
@@ -475,16 +478,17 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
         )
         .toBe(RENAMED_LABEL)
 
-      const seedWidgetAfter = subgraphNodeAfter.getByLabel('seed', {
+      const seedStatusAfter = subgraphNodeAfter.getByRole('img', {
+        name: `${RENAMED_LABEL}: Linked input`,
         exact: true
       })
-      await expect(seedWidgetAfter).toBeVisible()
+      await expect(seedStatusAfter).toBeVisible()
       await expect(
         subgraphNodeAfter.getByText(RENAMED_LABEL, { exact: true })
       ).toBeVisible()
       await SubgraphHelper.expectWidgetBelowHeader(
         subgraphNodeAfter,
-        seedWidgetAfter
+        seedStatusAfter
       )
     })
   })