From 75e91137f05eb04c045f17e06b40668754dc24bd Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Sun, 1 Sep 2024 18:33:19 -0400
Subject: [PATCH] Display node display_name instead of name (#704)

---
 browser_tests/menu.spec.ts                    | 23 +++++++++++++------
 .../sidebar/tabs/NodeLibrarySidebarTab.vue    |  2 +-
 .../nodeLibrary/NodeBookmarkTreeExplorer.vue  |  2 +-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts
index 5fd5bb40b..039c9bd10 100644
--- a/browser_tests/menu.spec.ts
+++ b/browser_tests/menu.spec.ts
@@ -96,14 +96,17 @@ test.describe('Menu', () => {
       await tab.getFolder('sampling').click()
 
       // Bookmark the node
-      await tab.getNode('KSamplerAdvanced').locator('.bookmark-button').click()
+      await tab
+        .getNode('KSampler (Advanced)')
+        .locator('.bookmark-button')
+        .click()
 
       // Verify the bookmark is added to the bookmarks tab
       expect(
         await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
       ).toEqual(['KSamplerAdvanced'])
       // Verify the bookmark node with the same name is added to the tree.
-      expect(await tab.getNode('KSamplerAdvanced').count()).toBe(2)
+      expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
 
       // Hover on the bookmark node to display the preview
       await comfyPage.page.hover('.node-lib-bookmark-tree-explorer .tree-leaf')
@@ -184,7 +187,7 @@ test.describe('Menu', () => {
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.getFolder('sampling').click()
       await comfyPage.page.dragAndDrop(
-        tab.nodeSelector('KSamplerAdvanced'),
+        tab.nodeSelector('KSampler (Advanced)'),
         tab.folderSelector('foo')
       )
       expect(
@@ -197,7 +200,10 @@ test.describe('Menu', () => {
     }) => {
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.getFolder('sampling').click()
-      await tab.getNode('KSamplerAdvanced').locator('.bookmark-button').click()
+      await tab
+        .getNode('KSampler (Advanced)')
+        .locator('.bookmark-button')
+        .click()
       expect(
         await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
       ).toEqual(['KSamplerAdvanced'])
@@ -208,7 +214,10 @@ test.describe('Menu', () => {
         'KSamplerAdvanced'
       ])
       const tab = comfyPage.menu.nodeLibraryTab
-      await tab.getNode('KSamplerAdvanced').locator('.bookmark-button').click()
+      await tab
+        .getNode('KSampler (Advanced)')
+        .locator('.bookmark-button')
+        .click()
       expect(
         await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
       ).toEqual([])
@@ -223,7 +232,7 @@ test.describe('Menu', () => {
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.getFolder('sampling').click()
       await comfyPage.page
-        .locator(tab.nodeSelector('KSamplerAdvanced'))
+        .locator(tab.nodeSelector('KSampler (Advanced)'))
         .nth(1)
         .locator('.bookmark-button')
         .click()
@@ -330,7 +339,7 @@ test.describe('Menu', () => {
       await tab.nodeLibrarySearchBoxInput.fill('KSampler')
       // Node search box is debounced and may take some time to update.
       await comfyPage.page.waitForTimeout(1000)
-      expect(await tab.getNode('KSamplerAdvanced').count()).toBe(2)
+      expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
     })
 
     test('Can migrate legacy bookmarks', async ({ comfyPage }) => {
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
index f49217a0a..0fcf6e300 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -104,7 +104,7 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
 
     return {
       key: node.key,
-      label: node.label,
+      label: node.leaf ? node.data.display_name : node.label,
       leaf: node.leaf,
       data: node.data,
       getIcon: (node: TreeExplorerNode<ComfyNodeDefImpl>) => {
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue b/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
index 99e4498c0..b2e4ebaee 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
@@ -117,7 +117,7 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
 
       return {
         key: node.key,
-        label: node.label,
+        label: node.leaf ? node.data.display_name : node.label,
         leaf: node.leaf,
         data: node.data,
         getIcon: (node: TreeExplorerNode<ComfyNodeDefImpl>) => {