- {{ $t('g.resultsCount', { count: searchResults.length }) }}
+ {{ $t('g.resultsCount', { count: searchResults?.length || 0 }) }}
@@ -40,34 +37,25 @@
import IconField from 'primevue/iconfield'
import InputIcon from 'primevue/inputicon'
import InputText from 'primevue/inputtext'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import SearchFilterDropdown from '@/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue'
import type { PackField, SearchOption } from '@/types/comfyManagerTypes'
import { components } from '@/types/comfyRegistryTypes'
-const DEFAULT_SORT: PackField = 'downloads'
-const DEFAULT_FILTER = 'nodePack'
-
const props = defineProps<{
- searchQuery: string
searchResults?: components['schemas']['Node'][]
}>()
+const searchQuery = defineModel('searchQuery')
+const searchMode = defineModel('searchMode', { default: 'packs' })
+const sortField = defineModel('sortField', { default: 'downloads' })
+
const { t } = useI18n()
-const currentSort = ref(DEFAULT_SORT)
-const currentFilter = ref(DEFAULT_FILTER)
-
-const emit = defineEmits<{
- 'update:searchQuery': [value: string]
- 'update:sortBy': [value: PackField]
- 'update:filterBy': [value: string]
-}>()
-
const hasResults = computed(
- () => props.searchQuery.trim() && props.searchResults?.length
+ () => searchQuery.value?.trim() && props.searchResults?.length
)
const sortOptions: SearchOption[] = [
@@ -77,16 +65,7 @@ const sortOptions: SearchOption[] = [
{ id: 'category', label: t('g.category') }
]
const filterOptions: SearchOption[] = [
- { id: 'nodePack', label: t('manager.filter.nodePack') },
- { id: 'node', label: t('g.nodes') }
+ { id: 'packs', label: t('manager.filter.nodePack') },
+ { id: 'nodes', label: t('g.nodes') }
]
-
-const handleSortChange = () => {
- // TODO: emit to Algolia service
- emit('update:sortBy', currentSort.value)
-}
-const handleFilterChange = () => {
- // TODO: emit to Algolia service
- emit('update:filterBy', currentFilter.value)
-}
diff --git a/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue b/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
index 3032aaa09..392ed6b6b 100644
--- a/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
+++ b/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
@@ -2,12 +2,12 @@
{{ label }}:
import Dropdown from 'primevue/dropdown'
-import { computed } from 'vue'
import type { SearchOption } from '@/types/comfyManagerTypes'
-const { modelValue, options, label } = defineProps<{
- modelValue: T
+defineProps<{
options: SearchOption[]
label: string
+ modelValue: T
}>()
-const emit = defineEmits<{
+defineEmits<{
'update:modelValue': [value: T]
}>()
-
-const selectedValue = computed({
- get: () => modelValue,
- set: (value) => emit('update:modelValue', value)
-})
-
-const handleChange = () => {
- emit('update:modelValue', selectedValue.value)
-}
diff --git a/src/composables/useRegistrySearch.ts b/src/composables/useRegistrySearch.ts
index 1b4d70c68..7c5750654 100644
--- a/src/composables/useRegistrySearch.ts
+++ b/src/composables/useRegistrySearch.ts
@@ -1,72 +1,77 @@
-import { debounce } from 'lodash'
-import { onUnmounted, ref, watch } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { memoize } from 'lodash'
+import { computed, ref, watch } from 'vue'
-import { useComfyRegistryService } from '@/services/comfyRegistryService'
-import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import type { components } from '@/types/comfyRegistryTypes'
+import {
+ AlgoliaNodePack,
+ SearchAttribute,
+ useAlgoliaSearchService
+} from '@/services/algoliaSearchService'
+import { PackField } from '@/types/comfyManagerTypes'
-const SEARCH_DEBOUNCE_TIME = 256
-const DEFAULT_PAGE_SIZE = 60
-const DEFAULT_SORT_FIELD: keyof components['schemas']['Node'] = 'downloads'
+const SEARCH_DEBOUNCE_TIME = 16
+const DEFAULT_PAGE_SIZE = 64
/**
* 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 isLoading = ref(false)
+ const sortField = ref('downloads')
+ const searchMode = ref<'nodes' | 'packs'>('packs')
const pageSize = ref(DEFAULT_PAGE_SIZE)
- const sortField = ref(DEFAULT_SORT_FIELD)
- const searchResults = ref([])
+ const pageNumber = ref(0)
+ const searchQuery = ref('')
+ const results = ref([])
- const search = async () => {
- try {
- const isEmptySearch = searchQuery.value === ''
- const result = isEmptySearch
- ? await registryStore.listAllPacks({
- page: pageNumber.value,
- limit: pageSize.value,
- sort: [sortField.value]
- })
- : await registryService.search({
- search: searchQuery.value,
- page: pageNumber.value,
- limit: pageSize.value
- })
+ const searchAttributes = computed(() =>
+ searchMode.value === 'nodes' ? ['comfy_nodes'] : ['name', 'description']
+ )
- if (result) {
- searchResults.value = result.nodes || []
- } else {
- searchResults.value = []
- }
- } catch (err) {
- console.error('Error loading packs:', err)
- searchResults.value = []
- }
+ const resultsAsRegistryPacks = computed(() =>
+ results.value ? results.value.map(algoliaToRegistry) : []
+ )
+ const resultsAsNodes = computed(() =>
+ results.value
+ ? results.value.reduce(
+ (acc, hit) => acc.concat(hit.comfy_nodes),
+ [] as string[]
+ )
+ : []
+ )
+
+ const { searchPacks, toRegistryPack } = useAlgoliaSearchService()
+
+ const algoliaToRegistry = memoize(
+ toRegistryPack,
+ (algoliaNode: AlgoliaNodePack) => algoliaNode.id
+ )
+
+ const onQueryChange = async () => {
+ isLoading.value = true
+ results.value = await searchPacks(searchQuery.value, {
+ pageSize: pageSize.value,
+ pageNumber: pageNumber.value,
+ restrictSearchableAttributes: searchAttributes.value
+ })
+ isLoading.value = false
}
- const debouncedSearch = debounce(search, SEARCH_DEBOUNCE_TIME)
-
- // Debounce search when query changes
- watch(() => searchQuery.value, debouncedSearch)
-
- watch(() => [pageNumber.value, sortField.value], search, { immediate: true })
-
- onUnmounted(() => {
- debouncedSearch.cancel() // Cancel debounced searches
- registryStore.cancelRequests() // Cancel in-flight requests
+ watch([pageNumber, sortField, searchMode], onQueryChange, {
+ immediate: true
+ })
+ watchDebounced(searchQuery, onQueryChange, {
+ debounce: SEARCH_DEBOUNCE_TIME
})
return {
+ isLoading,
pageNumber,
pageSize,
sortField,
+ searchMode,
searchQuery,
- searchResults,
- isLoading: registryService.isLoading,
- error: registryService.error
+ searchResults: resultsAsRegistryPacks,
+ nodeSearchResults: resultsAsNodes
}
}
diff --git a/src/services/algoliaSearchService.ts b/src/services/algoliaSearchService.ts
new file mode 100644
index 000000000..e3268205d
--- /dev/null
+++ b/src/services/algoliaSearchService.ts
@@ -0,0 +1,153 @@
+import type {
+ BaseSearchParamsWithoutQuery,
+ Hit
+} from 'algoliasearch/dist/lite/browser'
+import { liteClient as algoliasearch } from 'algoliasearch/dist/lite/builds/browser'
+import { omit } from 'lodash'
+
+import { components } from '@/types/comfyRegistryTypes'
+
+declare const __ALGOLIA_APP_ID__: string
+declare const __ALGOLIA_API_KEY__: string
+
+type SafeNestedProperty<
+ T,
+ K1 extends keyof T,
+ K2 extends keyof NonNullable
+> = T[K1] extends undefined | null ? undefined : NonNullable[K2]
+
+type RegistryNodePack = components['schemas']['Node']
+
+export interface AlgoliaNodePack {
+ objectID: RegistryNodePack['id']
+ name: RegistryNodePack['name']
+ publisher_id: SafeNestedProperty
+ description: RegistryNodePack['description']
+ comfy_nodes: string[]
+ total_install: RegistryNodePack['downloads']
+ id: RegistryNodePack['id']
+ create_time: string
+ update_time: SafeNestedProperty<
+ RegistryNodePack,
+ 'latest_version',
+ 'createdAt'
+ >
+ license: RegistryNodePack['license']
+ repository_url: RegistryNodePack['repository']
+ status: RegistryNodePack['status']
+ latest_version: SafeNestedProperty<
+ RegistryNodePack,
+ 'latest_version',
+ 'version'
+ >
+ latest_version_status: SafeNestedProperty<
+ RegistryNodePack,
+ 'latest_version',
+ 'status'
+ >
+ comfy_node_extract_status: SafeNestedProperty<
+ RegistryNodePack,
+ 'latest_version',
+ 'comfy_node_extract_status'
+ >
+}
+
+export type SearchAttribute = keyof AlgoliaNodePack
+
+const RETRIEVE_ATTRIBUTES: SearchAttribute[] = [
+ 'comfy_nodes',
+ 'name',
+ 'description',
+ 'latest_version',
+ 'status',
+ 'publisher_id',
+ 'total_install',
+ 'update_time',
+ 'license',
+ 'repository_url',
+ 'latest_version_status',
+ 'comfy_node_extract_status',
+ 'id'
+]
+
+type SearchNodePacksParams = BaseSearchParamsWithoutQuery & {
+ pageSize: number
+ pageNumber: number
+ restrictSearchableAttributes: SearchAttribute[]
+}
+
+export const useAlgoliaSearchService = () => {
+ const searchClient = algoliasearch(__ALGOLIA_APP_ID__, __ALGOLIA_API_KEY__)
+
+ const toRegistryLatestVersion = (
+ algoliaNode: AlgoliaNodePack
+ ): RegistryNodePack['latest_version'] => {
+ return {
+ version: algoliaNode.latest_version,
+ createdAt: algoliaNode.update_time,
+ status: algoliaNode.latest_version_status,
+ comfy_node_extract_status:
+ algoliaNode.comfy_node_extract_status ?? undefined
+ }
+ }
+
+ const toRegistryPublisher = (
+ algoliaNode: AlgoliaNodePack
+ ): RegistryNodePack['publisher'] => {
+ return {
+ id: algoliaNode.publisher_id,
+ name: algoliaNode.publisher_id
+ }
+ }
+
+ /**
+ * Convert from node pack in Algolia format to Comfy Registry format
+ */
+ function toRegistryPack(algoliaNode: AlgoliaNodePack): RegistryNodePack {
+ return {
+ id: algoliaNode.id ?? algoliaNode.objectID,
+ name: algoliaNode.name,
+ description: algoliaNode.description,
+ repository: algoliaNode.repository_url,
+ license: algoliaNode.license,
+ downloads: algoliaNode.total_install,
+ status: algoliaNode.status,
+ latest_version: toRegistryLatestVersion(algoliaNode),
+ publisher: toRegistryPublisher(algoliaNode)
+ }
+ }
+
+ /**
+ * Search for node packs in Algolia
+ */
+ const searchPacks = async (
+ query: string,
+ params: SearchNodePacksParams
+ ): Promise[]> => {
+ const { pageSize, pageNumber } = params
+ const rest = omit(params, ['pageSize', 'pageNumber'])
+
+ const { results } = await searchClient.search({
+ requests: [
+ {
+ query,
+ indexName: 'nodes_index',
+ attributesToRetrieve: RETRIEVE_ATTRIBUTES,
+ ...rest,
+ hitsPerPage: pageSize,
+ length: pageSize,
+ page: pageNumber
+ }
+ ],
+ strategy: 'none'
+ })
+
+ // Narrow from `SearchResponse | SearchForFacetValuesResponse` to `SearchResponse`
+ return 'hits' in results[0] ? results[0].hits : [] // Only querying a single index for now
+ }
+
+ return {
+ searchPacks,
+ toRegistryPack
+ }
+}
diff --git a/src/types/algoliasearch-lite.d.ts b/src/types/algoliasearch-lite.d.ts
new file mode 100644
index 000000000..1514d272a
--- /dev/null
+++ b/src/types/algoliasearch-lite.d.ts
@@ -0,0 +1,19 @@
+declare module 'algoliasearch/dist/lite/builds/browser' {
+ import { LiteClient, ClientOptions } from 'algoliasearch/dist/lite/browser'
+
+ /**
+ * Creates a new Algolia Search client that uses the Lite API Client (Browser version)
+ *
+ * @param appId - Your Algolia Application ID
+ * @param apiKey - Your Algolia API Key
+ * @param options - Options for the client
+ * @returns An Algolia Search client instance
+ */
+ export function liteClient(
+ appId: string,
+ apiKey: string,
+ options?: ClientOptions
+ ): LiteClient
+
+ export const apiClientVersion: string
+}
diff --git a/vite.config.mts b/vite.config.mts
index 2cbb7280e..3678c70f4 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -182,7 +182,9 @@ export default defineConfig({
__SENTRY_ENABLED__: JSON.stringify(
!(process.env.NODE_ENV === 'development' || !process.env.SENTRY_DSN)
),
- __SENTRY_DSN__: JSON.stringify(process.env.SENTRY_DSN || '')
+ __SENTRY_DSN__: JSON.stringify(process.env.SENTRY_DSN || ''),
+ __ALGOLIA_APP_ID__: JSON.stringify(process.env.VITE_ALGOLIA_APP_ID || ''),
+ __ALGOLIA_API_KEY__: JSON.stringify(process.env.VITE_ALGOLIA_API_KEY || '')
},
resolve: {