Files
ComfyUI_frontend/src/services/nodeSearchService.ts
AustinMroz 97c7aef72d Update Search Box IO filters to support multitype (#7542)
It doesn't feel like this further hurts the lackluster responsiveness of
the searchbox, but second opinions would be appreciated.

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/fb4b81f7-6eac-45bd-9bc8-17aebf739f0c"/>|
<img width="360" alt="after"
src="https://github.com/user-attachments/assets/7844cab4-0f73-4a3f-beb0-850efc09497a"
/>|

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7542-Update-Search-Box-IO-filters-to-support-multitype-2cb6d73d365081ccbeabf1a891351996)
by [Unito](https://www.unito.io)
2025-12-17 19:52:14 -07:00

114 lines
3.4 KiB
TypeScript

import type { FuseSearchOptions } from 'fuse.js'
import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
import type { FuseFilterWithValue } from '@/utils/fuseUtil'
import { FuseFilter, FuseSearch } from '@/utils/fuseUtil'
export class NodeSearchService {
public readonly nodeFuseSearch: FuseSearch<ComfyNodeDefImpl>
public readonly inputTypeFilter: FuseFilter<ComfyNodeDefImpl, string>
public readonly outputTypeFilter: FuseFilter<ComfyNodeDefImpl, string>
public readonly nodeCategoryFilter: FuseFilter<ComfyNodeDefImpl, string>
public readonly nodeSourceFilter: FuseFilter<ComfyNodeDefImpl, string>
constructor(data: ComfyNodeDefImpl[]) {
this.nodeFuseSearch = new FuseSearch(data, {
fuseOptions: {
keys: ['name', 'display_name'],
includeScore: true,
threshold: 0.3,
shouldSort: false,
useExtendedSearch: true
},
createIndex: true,
advancedScoring: true
})
const fuseOptions = {
includeScore: true,
threshold: 0.3,
shouldSort: true
}
this.inputTypeFilter = new FuseFilter<ComfyNodeDefImpl, string>(data, {
id: 'input',
name: 'Input Type',
invokeSequence: 'i',
getItemOptions: (node) =>
Object.values(node.inputs ?? []).flatMap((input) =>
input.type.split(',')
),
fuseOptions
})
this.outputTypeFilter = new FuseFilter<ComfyNodeDefImpl, string>(data, {
id: 'output',
name: 'Output Type',
invokeSequence: 'o',
getItemOptions: (node) =>
node.outputs.flatMap((output) => output.type.split(',')),
fuseOptions
})
this.nodeCategoryFilter = new FuseFilter<ComfyNodeDefImpl, string>(data, {
id: 'category',
name: 'Category',
invokeSequence: 'c',
getItemOptions: (node) => [node.category],
fuseOptions
})
this.nodeSourceFilter = new FuseFilter<ComfyNodeDefImpl, string>(data, {
id: 'source',
name: 'Source',
invokeSequence: 's',
getItemOptions: (node) => [node.nodeSource.displayText],
fuseOptions
})
}
public searchNode(
query: string,
filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[] = [],
options?: FuseSearchOptions,
extraOptions: {
matchWildcards?: boolean
} = {}
): ComfyNodeDefImpl[] {
const { matchWildcards = true } = extraOptions
const wildcard = matchWildcards ? '*' : undefined
const matchedNodes = this.nodeFuseSearch.search(query)
const results = matchedNodes.filter((node) => {
return filters.every((filterAndValue) => {
const { filterDef, value } = filterAndValue
return filterDef.matches(node, value)
})
})
if (matchWildcards) {
const alreadyValid = new Set(results.map((result) => result.name))
results.push(
...matchedNodes
.filter((node) => !alreadyValid.has(node.name))
.filter((node) => {
return filters.every((filterAndValue) => {
const { filterDef, value } = filterAndValue
return filterDef.matches(node, value, { wildcard })
})
})
)
}
return options?.limit ? results.slice(0, options.limit) : results
}
get nodeFilters(): FuseFilter<ComfyNodeDefImpl, string>[] {
return [
this.inputTypeFilter,
this.outputTypeFilter,
this.nodeCategoryFilter,
this.nodeSourceFilter
]
}
}