Fix descriptions on core blueprints (#12220)

Core blueprints were storing the description under a different key than
expected, which resulted in them displaying a placeholder description.
When initializing the description for a subgraph, this alternative field
is also checked.

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/ed51c4a8-00cf-4927-9cba-880532a9e926"
/> | <img width="360" alt="after"
src="https://github.com/user-attachments/assets/f19bf80d-adcc-4e9b-a9ba-a5ac8e089e2d"
/>|

Resolves FE-681

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-12220-Austin-blueprint-descriptions-35f6d73d3650812fa04df48c203bebd1)
by [Unito](https://www.unito.io)

Author: AustinMroz

browser_tests/fixtures/components/SidebarTab.ts

@@ -95,6 +95,7 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
   public readonly allTab: Locator
   public readonly blueprintsTab: Locator
   public readonly sortButton: Locator
+  public readonly nodePreview: Locator
 
   constructor(public override readonly page: Page) {
     super(page, 'node-library')
@@ -103,6 +104,7 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
     this.allTab = this.getTab('All')
     this.blueprintsTab = this.getTab('Blueprints')
     this.sortButton = this.sidebarContent.getByRole('button', { name: 'Sort' })
+    this.nodePreview = page.getByTestId(TestIds.sidebar.nodePreviewCard)
   }
 
   getTab(name: string) {

browser_tests/fixtures/selectors.ts

@@ -8,6 +8,7 @@ export const TestIds = {
     toolbar: 'side-toolbar',
     nodeLibrary: 'node-library-tree',
     nodeLibrarySearch: 'node-library-search',
+    nodePreviewCard: 'node-preview-card',
     workflows: 'workflows-sidebar',
     modeToggle: 'mode-toggle'
   },

browser_tests/tests/sidebar/nodeLibraryV2.spec.ts

@@ -120,4 +120,13 @@ test.describe('Node library sidebar V2', () => {
     await expect(options.first()).toBeVisible()
     await expect.poll(() => options.count()).toBeGreaterThanOrEqual(2)
   })
+
+  test('Blueprint previews include description', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+    await tab.blueprintsTab.click()
+
+    await tab.getNode('test blueprint').hover()
+    await expect(tab.nodePreview, 'Preview displays on hover').toBeVisible()
+    await expect(tab.nodePreview).toContainText('Inverts the image')
+  })
 })

src/components/node/NodePreviewCard.vue

@@ -2,6 +2,7 @@
   <div
     class="flex flex-col overflow-hidden rounded-lg border border-border-default bg-base-background"
     :style="{ width: `${BASE_WIDTH_PX * (scaleFactor / BASE_SCALE)}px` }"
+    data-testid="node-preview-card"
   >
     <div ref="previewContainerRef" class="overflow-hidden p-3">
       <div

src/stores/subgraphStore.ts

@@ -289,7 +289,9 @@ export const useSubgraphStore = defineStore('subgraph', () => {
     )
     const workflowExtra = workflow.initialState.extra
     const description =
-      workflowExtra?.BlueprintDescription ?? 'User generated subgraph blueprint'
+      workflowExtra?.BlueprintDescription ??
+      workflow.initialState?.definitions?.subgraphs[0].description ??
+      'User generated subgraph blueprint'
     const search_aliases = workflowExtra?.BlueprintSearchAliases
     const subgraphDefCategory =
       workflow.initialState.definitions?.subgraphs?.[0]?.category

tools/devtools/subgraphs/test blueprint.json

@@ -0,0 +1,133 @@
+{
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "d0056772-3aca-4bc2-9971-8781df454c2b",
+      "pos": [470.93671874999995, 461],
+      "size": [225, 100],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "proxyWidgets": []
+      },
+      "widgets_values": [],
+      "title": "test blueprint"
+    }
+  ],
+  "links": [],
+  "version": 0.4,
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "d0056772-3aca-4bc2-9971-8781df454c2b",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 2,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "test blueprint",
+        "inputNode": {
+          "id": -10,
+          "bounding": [240.43671874999995, 435, 128, 68]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [713.43671875, 435, 128, 68]
+        },
+        "inputs": [
+          {
+            "id": "d291ee9e-b1a6-4a9b-8163-ae7980ad312d",
+            "name": "image",
+            "type": "IMAGE",
+            "linkIds": [1],
+            "pos": [344.43671874999995, 459]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "4836730c-14a8-487d-9009-594b7e745076",
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "linkIds": [2],
+            "pos": [737.43671875, 459]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "ImageInvert",
+            "pos": [428.43671874999995, 438],
+            "size": [225, 72],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "image",
+                "name": "image",
+                "type": "IMAGE",
+                "link": 1
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "IMAGE",
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "ImageInvert"
+            }
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "IMAGE"
+          }
+        ],
+        "extra": {},
+        "description": "Inverts the image"
+      }
+    ]
+  },
+  "extra": {}
+}