Auto expand tree on search in node library tab (#558)

* Add custom nodelib searchbox

* Auto expand on search

* Support alphabetical sort in filtered tree

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -14,13 +14,17 @@
       </ToggleButton>
     </template>
     <template #body>
+      <SearchBox
+        class="node-lib-search-box"
+        v-model:modelValue="searchQuery"
+        @search="handleSearch"
+        :placeholder="$t('searchNodes') + '...'"
+      />
       <TreePlus
         class="node-lib-tree"
         v-model:expandedKeys="expandedKeys"
         selectionMode="single"
         :value="renderedRoot.children"
-        :filter="true"
-        filterMode="lenient"
         dragSelector=".p-tree-node-leaf"
         :pt="{
           nodeLabel: 'node-lib-tree-node-label',
@@ -85,10 +89,11 @@ import { computed, ref, nextTick } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import TreePlus from '@/components/primevueOverride/TreePlus.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { app } from '@/scripts/app'
-import { ComfyNodeDef } from '@/types/apiTypes'
+import { buildTree, sortedTree } from '@/utils/treeUtil'
 
 const nodeDefStore = useNodeDefStore()
 const alphabeticalSort = ref(false)
@@ -101,6 +106,7 @@ const hoveredComfyNode = computed<ComfyNodeDefImpl | null>(() => {
   return nodeDefStore.nodeDefsByName[hoveredComfyNodeName.value] || null
 })
 const previewRef = ref<InstanceType<typeof NodePreview> | null>(null)
+const searchQuery = ref<string>('')
 
 const settingStore = useSettingStore()
 const sidebarLocation = computed<'left' | 'right'>(() =>
@@ -112,9 +118,10 @@ const nodePreviewStyle = ref<Record<string, string>>({
   left: '0px'
 })
 
-const root = computed(() =>
-  alphabeticalSort.value ? nodeDefStore.sortedNodeTree : nodeDefStore.nodeTree
-)
+const root = computed(() => {
+  const root = filteredRoot.value || nodeDefStore.nodeTree
+  return alphabeticalSort.value ? sortedTree(root) : root
+})
 const renderedRoot = computed(() => {
   return fillNodeInfo(root.value)
 })
@@ -176,6 +183,35 @@ const toggleNode = (id: string) => {
 const insertNode = (nodeDef: ComfyNodeDefImpl) => {
   app.addNodeOnGraph(nodeDef, { pos: app.getCanvasCenter() })
 }
+
+const filteredRoot = ref<TreeNode | null>(null)
+const handleSearch = (query: string) => {
+  if (query.length < 3) {
+    filteredRoot.value = null
+    expandedKeys.value = {}
+    return
+  }
+
+  const matchedNodes = nodeDefStore.nodeSearchService.searchNode(query, [], {
+    limit: 64
+  })
+
+  filteredRoot.value = buildTree(matchedNodes, (nodeDef: ComfyNodeDefImpl) => [
+    ...nodeDef.category.split('/'),
+    nodeDef.display_name
+  ])
+  expandNode(filteredRoot.value)
+}
+
+const expandNode = (node: TreeNode) => {
+  if (node.children && node.children.length) {
+    expandedKeys.value[node.key] = true
+
+    for (let child of node.children) {
+      expandNode(child)
+    }
+  }
+}
 </script>
 
 <style>
@@ -185,3 +221,9 @@ const insertNode = (nodeDef: ComfyNodeDefImpl) => {
   margin-left: var(--p-tree-node-gap);
 }
 </style>
+
+<style scoped>
+:deep(.node-lib-search-box) {
+  @apply mx-4 mt-4;
+}
+</style>