Migrate node library sidebar to use unique name instead of display name (#702)

* Migrate node library sidebar to use unique name instead of display name

* Break word

browser_tests/menu.spec.ts

@@ -61,7 +61,7 @@ test.describe('Menu', () => {
 
   test.describe('Node library sidebar', () => {
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', [])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
       await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {})
       // Open the sidebar
       const tab = comfyPage.menu.nodeLibraryTab
@@ -96,17 +96,14 @@ test.describe('Menu', () => {
       await tab.getFolder('sampling').click()
 
       // Bookmark the node
-      await tab
-        .getNode('KSampler (Advanced)')
-        .locator('.bookmark-button')
-        .click()
+      await tab.getNode('KSamplerAdvanced').locator('.bookmark-button').click()
 
       // Verify the bookmark is added to the bookmarks tab
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        ['KSampler (Advanced)']
-      )
+      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('KSampler (Advanced)').count()).toBe(2)
+      expect(await tab.getNode('KSamplerAdvanced').count()).toBe(2)
 
       // Hover on the bookmark node to display the preview
       await comfyPage.page.hover('.node-lib-bookmark-tree-explorer .tree-leaf')
@@ -116,7 +113,7 @@ test.describe('Menu', () => {
     })
 
     test('Ignores unrecognized node', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo'])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo'])
 
       const tab = comfyPage.menu.nodeLibraryTab
       expect(await tab.getFolder('sampling').count()).toBe(1)
@@ -124,7 +121,7 @@ test.describe('Menu', () => {
     })
 
     test('Displays empty bookmarks folder', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo/'])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       const tab = comfyPage.menu.nodeLibraryTab
       expect(await tab.getFolder('foo').count()).toBe(1)
     })
@@ -134,13 +131,13 @@ test.describe('Menu', () => {
       await tab.newFolderButton.click()
       await comfyPage.page.keyboard.press('Enter')
       expect(await tab.getFolder('New Folder').count()).toBe(1)
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        ['New Folder/']
-      )
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual(['New Folder/'])
     })
 
     test('Can add nested bookmark folder', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo/'])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       const tab = comfyPage.menu.nodeLibraryTab
 
       await tab.getFolder('foo').click({ button: 'right' })
@@ -149,25 +146,25 @@ test.describe('Menu', () => {
       await comfyPage.page.keyboard.press('Enter')
 
       expect(await tab.getFolder('bar').count()).toBe(1)
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        ['foo/', 'foo/bar/']
-      )
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual(['foo/', 'foo/bar/'])
     })
 
     test('Can delete bookmark folder', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo/'])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       const tab = comfyPage.menu.nodeLibraryTab
 
       await tab.getFolder('foo').click({ button: 'right' })
       await comfyPage.page.getByLabel('Delete').click()
 
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        []
-      )
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual([])
     })
 
     test('Can rename bookmark folder', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo/'])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       const tab = comfyPage.menu.nodeLibraryTab
 
       await tab.getFolder('foo').click({ button: 'right' })
@@ -175,24 +172,24 @@ test.describe('Menu', () => {
       await comfyPage.page.keyboard.insertText('bar')
       await comfyPage.page.keyboard.press('Enter')
 
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        ['bar/']
-      )
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual(['bar/'])
     })
 
     test('Can add bookmark by dragging node to bookmark folder', async ({
       comfyPage
     }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo/'])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.getFolder('sampling').click()
       await comfyPage.page.dragAndDrop(
-        tab.nodeSelector('KSampler (Advanced)'),
+        tab.nodeSelector('KSamplerAdvanced'),
         tab.folderSelector('foo')
       )
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        ['foo/', 'foo/KSampler (Advanced)']
-      )
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual(['foo/', 'foo/KSamplerAdvanced'])
     })
 
     test('Can add bookmark by clicking bookmark button', async ({
@@ -200,48 +197,42 @@ test.describe('Menu', () => {
     }) => {
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.getFolder('sampling').click()
-      await tab
-        .getNode('KSampler (Advanced)')
-        .locator('.bookmark-button')
-        .click()
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        ['KSampler (Advanced)']
-      )
+      await tab.getNode('KSamplerAdvanced').locator('.bookmark-button').click()
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual(['KSamplerAdvanced'])
     })
 
     test('Can unbookmark node (Top level bookmark)', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', [
-        'KSampler (Advanced)'
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
+        'KSamplerAdvanced'
       ])
       const tab = comfyPage.menu.nodeLibraryTab
-      await tab
-        .getNode('KSampler (Advanced)')
-        .locator('.bookmark-button')
-        .click()
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        []
-      )
+      await tab.getNode('KSamplerAdvanced').locator('.bookmark-button').click()
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual([])
     })
 
     test('Can unbookmark node (Library node bookmark)', async ({
       comfyPage
     }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', [
-        'KSampler (Advanced)'
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
+        'KSamplerAdvanced'
       ])
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.getFolder('sampling').click()
       await comfyPage.page
-        .locator(tab.nodeSelector('KSampler (Advanced)'))
+        .locator(tab.nodeSelector('KSamplerAdvanced'))
         .nth(1)
         .locator('.bookmark-button')
         .click()
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        []
-      )
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual([])
     })
     test('Can customize icon', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo/'])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.getFolder('foo').click({ button: 'right' })
       await comfyPage.page.getByLabel('Customize').click()
@@ -264,7 +255,7 @@ test.describe('Menu', () => {
     })
     // If color is left as default, it should not be saved
     test('Can customize icon (default field)', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo/'])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.getFolder('foo').click({ button: 'right' })
       await comfyPage.page.getByLabel('Customize').click()
@@ -282,7 +273,7 @@ test.describe('Menu', () => {
       })
     })
     test('Can rename customized bookmark folder', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo/'])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {
         'foo/': {
           icon: 'pi-folder',
@@ -295,9 +286,9 @@ test.describe('Menu', () => {
       await comfyPage.page.keyboard.insertText('bar')
       await comfyPage.page.keyboard.press('Enter')
       await comfyPage.nextFrame()
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        ['bar/']
-      )
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual(['bar/'])
       expect(
         await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
       ).toEqual({
@@ -309,7 +300,7 @@ test.describe('Menu', () => {
     })
 
     test('Can delete customized bookmark folder', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo/'])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {
         'foo/': {
           icon: 'pi-folder',
@@ -320,18 +311,18 @@ test.describe('Menu', () => {
       await tab.getFolder('foo').click({ button: 'right' })
       await comfyPage.page.getByLabel('Delete').click()
       await comfyPage.nextFrame()
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        []
-      )
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual([])
       expect(
         await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
       ).toEqual({})
     })
 
     test('Can filter nodes in both trees', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', [
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
         'foo/',
-        'foo/KSampler (Advanced)',
+        'foo/KSamplerAdvanced',
         'KSampler'
       ])
 
@@ -339,7 +330,23 @@ 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('KSampler (Advanced)').count()).toBe(2)
+      expect(await tab.getNode('KSamplerAdvanced').count()).toBe(2)
+    })
+
+    test('Can migrate legacy bookmarks', async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', [
+        'foo/',
+        'foo/KSampler (Advanced)'
+      ])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
+      await comfyPage.page.reload()
+      await comfyPage.setup()
+      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
+        []
+      )
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual(['foo/', 'foo/KSamplerAdvanced'])
     })
   })
 

src/components/common/TreeExplorerTreeNode.vue

@@ -141,4 +141,7 @@ onUnmounted(() => {
 .leaf-label {
   margin-left: 0.5rem;
 }
+:deep(.editable-text span) {
+  word-break: break-all;
+}
 </style>

src/components/graph/GraphCanvas.vue

@@ -35,6 +35,7 @@ import {
   ContextMenu
 } from '@comfyorg/litegraph'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
@@ -145,6 +146,9 @@ onMounted(async () => {
       }
     }
   })
+
+  // Migrate legacy bookmarks
+  useNodeBookmarkStore().migrateLegacyBookmarks()
   emit('ready')
 })
 

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -60,7 +60,7 @@ import {
   ComfyNodeDefImpl,
   useNodeDefStore
 } from '@/stores/nodeDefStore'
-import { computed, nextTick, ref, Ref } from 'vue'
+import { computed, nextTick, onMounted, ref, Ref } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import Popover from 'primevue/popover'
 import Divider from 'primevue/divider'

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -65,9 +65,7 @@ const bookmarkedRoot = computed<TreeNode>(() => {
   const filterTree = (node: TreeNode): TreeNode | null => {
     if (node.leaf) {
       // Check if the node's display_name is in the filteredNodeDefs list
-      return props.filteredNodeDefs.some(
-        (def) => def.display_name === node.data.display_name
-      )
+      return props.filteredNodeDefs.some((def) => def.name === node.data.name)
         ? node
         : null
     }
@@ -145,8 +143,7 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
             nodeBookmarkStore.toggleBookmark(nodeDefToAdd)
           }
           const folderNodeDef = node.data as ComfyNodeDefImpl
-          const nodePath =
-            folderNodeDef.category + '/' + nodeDefToAdd.display_name
+          const nodePath = folderNodeDef.category + '/' + nodeDefToAdd.name
           nodeBookmarkStore.addBookmark(nodePath)
         },
         ...(node.leaf

src/components/sidebar/tabs/queue/ResultGallery.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import Galleria from 'primevue/galleria'
 import { ResultItemImpl } from '@/stores/queueStore'
 import ComfyImage from '@/components/common/ComfyImage.vue'

src/stores/nodeBookmarkStore.ts

@@ -8,12 +8,33 @@ import type { TreeNode } from 'primevue/treenode'
 import _ from 'lodash'
 import type { BookmarkCustomization } from '@/types/apiTypes'
 
+export const BOOKMARK_SETTING_ID = 'Comfy.NodeLibrary.Bookmarks.V2'
+
 export const useNodeBookmarkStore = defineStore('nodeBookmark', () => {
   const settingStore = useSettingStore()
   const nodeDefStore = useNodeDefStore()
 
+  const migrateLegacyBookmarks = () => {
+    settingStore
+      .get('Comfy.NodeLibrary.Bookmarks')
+      .forEach((bookmark: string) => {
+        // If the bookmark is a folder, add it as a bookmark
+        if (bookmark.endsWith('/')) {
+          addBookmark(bookmark)
+          return
+        }
+        const category = bookmark.split('/').slice(0, -1).join('/')
+        const displayName = bookmark.split('/').pop()
+        const nodeDef = nodeDefStore.nodeDefsByDisplayName[displayName]
+
+        if (!nodeDef) return
+        addBookmark(`${category}/${nodeDef.name}`)
+      })
+    settingStore.set('Comfy.NodeLibrary.Bookmarks', [])
+  }
+
   const bookmarks = computed<string[]>(() =>
-    settingStore.get('Comfy.NodeLibrary.Bookmarks')
+    settingStore.get(BOOKMARK_SETTING_ID)
   )
 
   const bookmarksSet = computed<Set<string>>(() => new Set(bookmarks.value))
@@ -25,8 +46,7 @@ export const useNodeBookmarkStore = defineStore('nodeBookmark', () => {
   // For a node in custom bookmark folders, check if its nodePath is in bookmarksSet
   // For a node in the nodeDefStore, check if its name is bookmarked at top level
   const isBookmarked = (node: ComfyNodeDefImpl) =>
-    bookmarksSet.value.has(node.nodePath) ||
-    bookmarksSet.value.has(node.display_name)
+    bookmarksSet.value.has(node.nodePath) || bookmarksSet.value.has(node.name)
 
   const toggleBookmark = (node: ComfyNodeDefImpl) => {
     if (isBookmarked(node)) {
@@ -34,9 +54,9 @@ export const useNodeBookmarkStore = defineStore('nodeBookmark', () => {
       // Delete the bookmark at the top level if it exists
       // This is used for clicking the bookmark button in the node library, i.e.
       // the node is inside original/standard node library tree node
-      deleteBookmark(node.display_name)
+      deleteBookmark(node.name)
     } else {
-      addBookmark(node.display_name)
+      addBookmark(node.name)
     }
   }
 
@@ -46,9 +66,9 @@ export const useNodeBookmarkStore = defineStore('nodeBookmark', () => {
         if (bookmark.endsWith('/')) return createDummyFolderNodeDef(bookmark)
 
         const parts = bookmark.split('/')
-        const displayName = parts.pop()
+        const name = parts.pop()
         const category = parts.join('/')
-        const srcNodeDef = nodeDefStore.nodeDefsByDisplayName[displayName]
+        const srcNodeDef = nodeDefStore.nodeDefsByName[name]
         if (!srcNodeDef) {
           return null
         }
@@ -61,15 +81,12 @@ export const useNodeBookmarkStore = defineStore('nodeBookmark', () => {
   }
 
   const addBookmark = (nodePath: string) => {
-    settingStore.set('Comfy.NodeLibrary.Bookmarks', [
-      ...bookmarks.value,
-      nodePath
-    ])
+    settingStore.set(BOOKMARK_SETTING_ID, [...bookmarks.value, nodePath])
   }
 
   const deleteBookmark = (nodePath: string) => {
     settingStore.set(
-      'Comfy.NodeLibrary.Bookmarks',
+      BOOKMARK_SETTING_ID,
       bookmarks.value.filter((b: string) => b !== nodePath)
     )
   }
@@ -107,7 +124,7 @@ export const useNodeBookmarkStore = defineStore('nodeBookmark', () => {
     }
 
     settingStore.set(
-      'Comfy.NodeLibrary.Bookmarks',
+      BOOKMARK_SETTING_ID,
       bookmarks.value.map((b: string) =>
         b.startsWith(folderNode.nodePath)
           ? b.replace(folderNode.nodePath, newNodePath)
@@ -122,7 +139,7 @@ export const useNodeBookmarkStore = defineStore('nodeBookmark', () => {
       throw new Error('Cannot delete non-folder node')
     }
     settingStore.set(
-      'Comfy.NodeLibrary.Bookmarks',
+      BOOKMARK_SETTING_ID,
       bookmarks.value.filter(
         (b: string) =>
           b !== folderNode.nodePath && !b.startsWith(folderNode.nodePath)
@@ -201,6 +218,8 @@ export const useNodeBookmarkStore = defineStore('nodeBookmark', () => {
     deleteBookmarkCustomization,
     renameBookmarkCustomization,
     defaultBookmarkIcon,
-    defaultBookmarkColor
+    defaultBookmarkColor,
+
+    migrateLegacyBookmarks
   }
 })

src/stores/nodeDefStore.ts

@@ -207,7 +207,7 @@ export class ComfyNodeDefImpl {
   }
 
   get nodePath(): string {
-    return (this.category ? this.category + '/' : '') + this.display_name
+    return (this.category ? this.category + '/' : '') + this.name
   }
 
   get isDummyFolder(): boolean {

src/stores/settingStore.ts

@@ -208,7 +208,14 @@ export const useSettingStore = defineStore('setting', {
       // Bookmarks are in format of category/display_name. e.g. "conditioning/CLIPTextEncode"
       app.ui.settings.addSetting({
         id: 'Comfy.NodeLibrary.Bookmarks',
-        name: 'Node library bookmarks',
+        name: 'Node library bookmarks with display name (deprecated)',
+        type: 'hidden',
+        defaultValue: []
+      })
+
+      app.ui.settings.addSetting({
+        id: 'Comfy.NodeLibrary.Bookmarks.V2',
+        name: 'Node library bookmarks v2 with unique name',
         type: 'hidden',
         defaultValue: []
       })

src/types/apiTypes.ts

@@ -439,6 +439,7 @@ const zSettings = z.record(z.any()).and(
       'Comfy.InvertMenuScrolling': z.boolean(),
       'Comfy.Logging.Enabled': z.boolean(),
       'Comfy.NodeLibrary.Bookmarks': z.array(z.string()),
+      'Comfy.NodeLibrary.Bookmarks.V2': z.array(z.string()),
       'Comfy.NodeLibrary.BookmarksCustomization': z.record(
         z.string(),
         zBookmarkCustomization