Files
ComfyUI_frontend/src/composables/useRegistrySearch.ts
2025-03-04 16:33:46 -05:00

70 lines
2.0 KiB
TypeScript

import { debounce } from 'lodash'
import { onUnmounted, ref, watch } from 'vue'
import { useComfyRegistryService } from '@/services/comfyRegistryService'
import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
import type { components } from '@/types/comfyRegistryTypes'
const SEARCH_DEBOUNCE_TIME = 256
const DEFAULT_PAGE_SIZE = 60
/**
* Composable for managing UI state of Comfy Node Registry search.
*/
export function useRegistrySearch() {
const registryStore = useComfyRegistryStore()
const registryService = useComfyRegistryService()
const searchQuery = ref('')
const pageNumber = ref(1)
const pageSize = ref(DEFAULT_PAGE_SIZE)
const searchResults = ref<components['schemas']['Node'][]>([])
const search = async () => {
try {
const isEmptySearch = searchQuery.value === ''
const result = isEmptySearch
? await registryStore.listAllPacks({
page: pageNumber.value,
limit: pageSize.value
})
: await registryService.search({
search: searchQuery.value,
page: pageNumber.value,
limit: pageSize.value
})
if (result) {
searchResults.value = result.nodes || []
} else {
searchResults.value = []
}
} catch (err) {
console.error('Error loading packs:', err)
searchResults.value = []
}
}
// Debounce search when query changes
const debouncedSearch = debounce(search, SEARCH_DEBOUNCE_TIME)
watch(() => searchQuery.value, debouncedSearch)
// Normal search when page number changes and on load
watch(() => pageNumber.value, search, { immediate: true })
onUnmounted(() => {
debouncedSearch.cancel() // Cancel debounced searches
registryStore.cancelRequests() // Cancel in-flight requests
registryStore.clearCache() // Clear cached responses
})
return {
pageNumber,
pageSize,
searchQuery,
searchResults,
isLoading: registryService.isLoading,
error: registryService.error
}
}