Show node by frequency on empty query (#878)

src/components/graph/GraphCanvas.vue

@@ -22,7 +22,11 @@ import { ref, computed, onUnmounted, onMounted, watchEffect } from 'vue'
 import { app as comfyApp } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import {
+  ComfyNodeDefImpl,
+  useNodeDefStore,
+  useNodeFrequencyStore
+} from '@/stores/nodeDefStore'
 import { useWorkspaceStore } from '@/stores/workspaceStateStore'
 import {
   LiteGraph,
@@ -140,6 +144,8 @@ onMounted(async () => {
   // node search is triggered
   useNodeDefStore().nodeSearchService.endsWithFilterStartSequence('')
 
+  // Non-blocking load of node frequencies
+  useNodeFrequencyStore().loadNodeFrequencies()
   emit('ready')
 })
 

src/components/searchbox/NodeSearchBox.vue

@@ -33,6 +33,7 @@
       :suggestions="suggestions"
       :min-length="0"
       :delay="100"
+      :loading="!nodeFrequencyStore.isLoaded"
       @complete="search($event.query)"
       @option-select="emit('addNode', $event.value)"
       @focused-option-changed="setHoverSuggestion($event)"
@@ -67,7 +68,11 @@ import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
 import { type FilterAndValue } from '@/services/nodeSearchService'
 import NodePreview from '@/components/node/NodePreview.vue'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import {
+  ComfyNodeDefImpl,
+  useNodeDefStore,
+  useNodeFrequencyStore
+} from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useI18n } from 'vue-i18n'
 import SearchFilterChip from '../common/SearchFilterChip.vue'
@@ -98,13 +103,18 @@ const placeholder = computed(() => {
   return props.filters.length === 0 ? t('searchNodes') + '...' : ''
 })
 
+const nodeDefStore = useNodeDefStore()
+const nodeFrequencyStore = useNodeFrequencyStore()
 const search = (query: string) => {
   currentQuery.value = query
-  suggestions.value = [
-    ...useNodeDefStore().nodeSearchService.searchNode(query, props.filters, {
-      limit: props.searchLimit
-    })
-  ]
+  suggestions.value =
+    query === ''
+      ? nodeFrequencyStore.topNodeDefs
+      : [
+          ...nodeDefStore.nodeSearchService.searchNode(query, props.filters, {
+            limit: props.searchLimit
+          })
+        ]
 }
 
 const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])

src/components/searchbox/NodeSearchItem.vue

@@ -33,6 +33,11 @@
         :value="$t('deprecated')"
         severity="danger"
       />
+      <Tag
+        v-if="showNodeFrequency && nodeFrequency > 0"
+        :value="formatNumberWithSuffix(nodeFrequency, { roundToInt: true })"
+        severity="secondary"
+      />
       <NodeSourceChip
         v-if="nodeDef.python_module !== undefined"
         :python_module="nodeDef.python_module"
@@ -44,11 +49,12 @@
 <script setup lang="ts">
 import Tag from 'primevue/tag'
 import NodeSourceChip from '@/components/node/NodeSourceChip.vue'
-import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { ComfyNodeDefImpl, useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import { highlightQuery } from '@/utils/formatUtil'
 import { computed } from 'vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import { formatNumberWithSuffix } from '@/utils/formatUtil'
 
 const settingStore = useSettingStore()
 const showCategory = computed(() =>
@@ -57,6 +63,13 @@ const showCategory = computed(() =>
 const showIdName = computed(() =>
   settingStore.get('Comfy.NodeSearchBoxImpl.ShowIdName')
 )
+const showNodeFrequency = computed(() =>
+  settingStore.get('Comfy.NodeSearchBoxImpl.ShowNodeFrequency')
+)
+const nodeFrequencyStore = useNodeFrequencyStore()
+const nodeFrequency = computed(() =>
+  nodeFrequencyStore.getNodeFrequency(props.nodeDef)
+)
 
 const nodeBookmarkStore = useNodeBookmarkStore()
 const isBookmarked = computed(() =>