Fix unrecognized bookmark node crash the node library sidebar (#614)

* Add playwright test

* nit

browser_tests/ComfyPage.ts

@@ -74,8 +74,16 @@ class NodeLibrarySidebarTab {
     await this.nodeLibraryTree.waitFor({ state: 'visible' })
   }
 
-  async toggleFirstFolder() {
+  getFolder(folderName: string) {
-    await this.page.locator('.p-tree-node-toggle-button').nth(0).click()
+    return this.page.locator(
+      `.p-tree-node-content:has(> .node-lib-tree-node-label:has(.folder-label:has-text("${folderName}")))`
+    )
+  }
+
+  getNode(nodeName: string) {
+    return this.page.locator(
+      `.p-tree-node-content:has(> .node-lib-tree-node-label:has(.node-label:has-text("${nodeName}")))`
+    )
   }
 }
 

browser_tests/menu.spec.ts

@@ -59,29 +59,65 @@ test.describe('Menu', () => {
     expect(newChildrenCount).toBe(initialChildrenCount + 1)
   })
 
-  test('Sidebar node preview and drag to canvas', async ({ comfyPage }) => {
+  test.describe('Node library sidebar', () => {
-    // Open the sidebar
+    test('Node preview and drag to canvas', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTab
+      // Open the sidebar
-    await tab.open()
+      const tab = comfyPage.menu.nodeLibraryTab
-    await tab.toggleFirstFolder()
+      await tab.open()
+      await tab.getFolder('sampling').click()
 
-    // Hover over a node to display the preview
+      // Hover over a node to display the preview
-    const nodeSelector = '.p-tree-node-leaf'
+      const nodeSelector = '.p-tree-node-leaf'
-    await comfyPage.page.hover(nodeSelector)
+      await comfyPage.page.hover(nodeSelector)
 
-    // Verify the preview is displayed
+      // Verify the preview is displayed
-    const previewVisible = await comfyPage.page.isVisible(
+      const previewVisible = await comfyPage.page.isVisible(
-      '.node-lib-node-preview'
+        '.node-lib-node-preview'
-    )
+      )
-    expect(previewVisible).toBe(true)
+      expect(previewVisible).toBe(true)
 
-    const count = await comfyPage.getGraphNodesCount()
+      const count = await comfyPage.getGraphNodesCount()
-    // Drag the node onto the canvas
+      // Drag the node onto the canvas
-    const canvasSelector = '#graph-canvas'
+      const canvasSelector = '#graph-canvas'
-    await comfyPage.page.dragAndDrop(nodeSelector, canvasSelector)
+      await comfyPage.page.dragAndDrop(nodeSelector, canvasSelector)
 
-    // Verify the node is added to the canvas
+      // Verify the node is added to the canvas
-    expect(await comfyPage.getGraphNodesCount()).toBe(count + 1)
+      expect(await comfyPage.getGraphNodesCount()).toBe(count + 1)
+    })
+
+    test('Bookmark node', async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', [])
+
+      // Open the sidebar
+      const tab = comfyPage.menu.nodeLibraryTab
+      await tab.open()
+      await tab.getFolder('sampling').click()
+
+      // Bookmark the node
+      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')).toEqual(
+        ['KSampler (Advanced)']
+      )
+      // Verify the bookmark node with the same name is added to the tree.
+      expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
+    })
+
+    test('Ignores unrecognized node', async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo'])
+
+      // Open the sidebar
+      const tab = comfyPage.menu.nodeLibraryTab
+      await tab.open()
+
+      expect(await tab.getFolder('sampling').count()).toBe(1)
+      expect(await tab.getNode('foo').count()).toBe(0)
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', [])
+    })
   })
 
   test('Can change canvas zoom speed setting', async ({ comfyPage }) => {

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -148,14 +148,20 @@ const toggleBookmark = (bookmark: string) => {
   }
 }
 const bookmarkedRoot = computed<TreeNode>(() => {
-  const bookmarkNodes = bookmarks.value.map((bookmark: string) => {
+  const bookmarkNodes = bookmarks.value
-    const parts = bookmark.split('/')
+    .map((bookmark: string) => {
-    const nodeName = parts.pop()
+      const parts = bookmark.split('/')
-    const category = parts.join('/')
+      const displayName = parts.pop()
-    const nodeDef = _.clone(nodeDefStore.nodeDefsByDisplayName[nodeName])
+      const category = parts.join('/')
-    nodeDef.category = category
+      const srcNodeDef = nodeDefStore.nodeDefsByDisplayName[displayName]
-    return nodeDef
+      if (!srcNodeDef) {
-  })
+        return null
+      }
+      const nodeDef = _.clone(srcNodeDef)
+      nodeDef.category = category
+      return nodeDef
+    })
+    .filter((nodeDef) => nodeDef !== null)
   return buildNodeDefTree(bookmarkNodes)
 })