[Refactor/TS] Simplify node filter logic (#3275)

src/components/searchbox/NodeSearchBox.vue

@@ -60,12 +60,17 @@
       <!-- FilterAndValue -->
       <template v-slot:chip="{ value }">
         <SearchFilterChip
-          v-if="Array.isArray(value) && value.length === 2"
-          :key="`${value[0].id}-${value[1]}`"
-          @remove="onRemoveFilter($event, value as FilterAndValue)"
-          :text="value[1]"
-          :badge="value[0].invokeSequence.toUpperCase()"
-          :badge-class="value[0].invokeSequence + '-badge'"
+          v-if="value.filterDef && value.value"
+          :key="`${value.filterDef.id}-${value.value}`"
+          @remove="
+            onRemoveFilter(
+              $event,
+              value as FuseFilterWithValue<ComfyNodeDefImpl, string>
+            )
+          "
+          :text="value.value"
+          :badge="value.filterDef.invokeSequence.toUpperCase()"
+          :badge-class="value.filterDef.invokeSequence + '-badge'"
         />
       </template>
     </AutoCompletePlus>
@@ -82,13 +87,13 @@ import NodePreview from '@/components/node/NodePreview.vue'
 import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
-import { type FilterAndValue } from '@/services/nodeSearchService'
 import {
   ComfyNodeDefImpl,
   useNodeDefStore,
   useNodeFrequencyStore
 } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
+import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import SearchFilterChip from '../common/SearchFilterChip.vue'
 
@@ -100,7 +105,7 @@ const enableNodePreview = computed(() =>
 )
 
 const { filters, searchLimit = 64 } = defineProps<{
-  filters: FilterAndValue[]
+  filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
   searchLimit?: number
 }>()
 
@@ -139,11 +144,16 @@ const reFocusInput = () => {
 }
 
 onMounted(reFocusInput)
-const onAddFilter = (filterAndValue: FilterAndValue) => {
+const onAddFilter = (
+  filterAndValue: FuseFilterWithValue<ComfyNodeDefImpl, string>
+) => {
   nodeSearchFilterVisible.value = false
   emit('addFilter', filterAndValue)
 }
-const onRemoveFilter = (event: Event, filterAndValue: FilterAndValue) => {
+const onRemoveFilter = (
+  event: Event,
+  filterAndValue: FuseFilterWithValue<ComfyNodeDefImpl, string>
+) => {
   event.stopPropagation()
   event.preventDefault()
   emit('removeFilter', filterAndValue)

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -46,13 +46,13 @@ import Dialog from 'primevue/dialog'
 import { computed, ref, toRaw, watchEffect } from 'vue'
 
 import { useLitegraphService } from '@/services/litegraphService'
-import { FilterAndValue } from '@/services/nodeSearchService'
 import { useCanvasStore } from '@/stores/graphStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { ConnectingLinkImpl } from '@/types/litegraphTypes'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
+import { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodeSearchBox from './NodeSearchBox.vue'
 
@@ -71,11 +71,13 @@ const getNewNodeLocation = (): Vector2 => {
     .originalEvent
   return [originalEvent.canvasX, originalEvent.canvasY]
 }
-const nodeFilters = ref<FilterAndValue[]>([])
-const addFilter = (filter: FilterAndValue) => {
+const nodeFilters = ref<FuseFilterWithValue<ComfyNodeDefImpl, string>[]>([])
+const addFilter = (filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) => {
   nodeFilters.value.push(filter)
 }
-const removeFilter = (filter: FilterAndValue) => {
+const removeFilter = (
+  filter: FuseFilterWithValue<ComfyNodeDefImpl, string>
+) => {
   nodeFilters.value = nodeFilters.value.filter(
     (f) => toRaw(f) !== toRaw(filter)
   )
@@ -136,13 +138,16 @@ const showNewSearchBox = (e: LiteGraphCanvasEvent) => {
       return
     }
     const firstLink = ConnectingLinkImpl.createFromPlainObject(links[0])
-    const filter = nodeDefStore.nodeSearchService.getFilterById(
-      firstLink.releaseSlotType
-    )
-    // @ts-expect-error fixme ts strict error
-    const dataType = firstLink.type.toString()
-    // @ts-expect-error fixme ts strict error
-    addFilter([filter, dataType])
+    const filter =
+      firstLink.releaseSlotType === 'input'
+        ? nodeDefStore.nodeSearchService.inputTypeFilter
+        : nodeDefStore.nodeSearchService.outputTypeFilter
+
+    const dataType = firstLink.type?.toString() ?? ''
+    addFilter({
+      filterDef: filter,
+      value: dataType
+    })
   }
 
   visible.value = true

src/components/searchbox/NodeSearchFilter.vue

@@ -27,11 +27,11 @@ import Select from 'primevue/select'
 import SelectButton from 'primevue/selectbutton'
 import { computed, onMounted, ref } from 'vue'
 
-import { type FilterAndValue, NodeFilter } from '@/services/nodeSearchService'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
 
 const filters = computed(() => nodeDefStore.nodeSearchService.nodeFilters)
-const selectedFilter = ref<NodeFilter>()
+const selectedFilter = ref<FuseFilter<ComfyNodeDefImpl, string>>()
 const filterValues = computed(() => selectedFilter.value?.fuseSearch.data ?? [])
 const selectedFilterValue = ref<string>('')
 
@@ -43,7 +43,10 @@ onMounted(() => {
 })
 
 const emit = defineEmits<{
-  (event: 'addFilter', filterAndValue: FilterAndValue): void
+  (
+    event: 'addFilter',
+    filterAndValue: FuseFilterWithValue<ComfyNodeDefImpl, string>
+  ): void
 }>()
 
 const updateSelectedFilterValue = () => {
@@ -54,10 +57,13 @@ const updateSelectedFilterValue = () => {
 }
 
 const submit = () => {
-  emit('addFilter', [
-    selectedFilter.value,
-    selectedFilterValue.value
-  ] as FilterAndValue)
+  if (!selectedFilter.value) {
+    return
+  }
+  emit('addFilter', {
+    filterDef: selectedFilter.value,
+    value: selectedFilterValue.value
+  })
 }
 </script>
 

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -76,7 +76,6 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
-import { FilterAndValue } from '@/services/nodeSearchService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import {
   ComfyNodeDefImpl,
@@ -85,6 +84,7 @@ import {
 } from '@/stores/nodeDefStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
+import { FuseFilterWithValue } from '@/utils/fuseUtil'
 import { sortedTree } from '@/utils/treeUtil'
 
 import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'
@@ -150,8 +150,9 @@ const filteredRoot = computed<TreeNode | null>(() => {
   }
   return buildNodeDefTree(filteredNodeDefs.value)
 })
-const filters: Ref<Array<SearchFilter & { filter: FilterAndValue<string> }>> =
-  ref([])
+const filters: Ref<
+  (SearchFilter & { filter: FuseFilterWithValue<ComfyNodeDefImpl, string> })[]
+> = ref([])
 const handleSearch = (query: string) => {
   // Don't apply a min length filter because it does not make sense in
   // multi-byte languages like Chinese, Japanese, Korean, etc.
@@ -161,7 +162,7 @@ const handleSearch = (query: string) => {
     return
   }
 
-  const f = filters.value.map((f) => f.filter as FilterAndValue<string>)
+  const f = filters.value.map((f) => f.filter)
   filteredNodeDefs.value = nodeDefStore.nodeSearchService.searchNode(
     query,
     f,
@@ -179,12 +180,14 @@ const handleSearch = (query: string) => {
   })
 }
 
-const onAddFilter = (filterAndValue: FilterAndValue) => {
+const onAddFilter = (
+  filterAndValue: FuseFilterWithValue<ComfyNodeDefImpl, string>
+) => {
   filters.value.push({
     filter: filterAndValue,
-    badge: filterAndValue[0].invokeSequence.toUpperCase(),
-    badgeClass: filterAndValue[0].invokeSequence + '-badge',
-    text: filterAndValue[1],
+    badge: filterAndValue.filterDef.invokeSequence.toUpperCase(),
+    badgeClass: filterAndValue.filterDef.invokeSequence + '-badge',
+    text: filterAndValue.value,
     id: +new Date()
   })