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

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