From 6993a56c2d710a74ad5429fe3bf16e7553a1e849 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Wed, 14 Aug 2024 10:28:17 -0400
Subject: [PATCH] Highlight query in search result in node searchbox (#420)

* min match set to 2

* Highlight query in search result

* nit
---
 src/components/searchbox/NodeSearchBox.vue | 21 ++++++++++++++++++++-
 src/services/nodeSearchService.ts          |  2 +-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 2375471e5f..18f7e739b4 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -28,7 +28,9 @@
       <template v-slot:option="{ option }">
         <div class="option-container">
           <div class="option-display-name">
-            {{ option.display_name }}
+            <span
+              v-html="highlightQuery(option.display_name, currentQuery)"
+            ></span>
             <NodeSourceChip
               v-if="option.python_module !== undefined"
               :python_module="option.python_module"
@@ -76,11 +78,13 @@ const props = defineProps({
 const inputId = `comfy-vue-node-search-box-input-${Math.random()}`
 const suggestions = ref<ComfyNodeDefImpl[]>([])
 const hoveredSuggestion = ref<ComfyNodeDefImpl | null>(null)
+const currentQuery = ref('')
 const placeholder = computed(() => {
   return props.filters.length === 0 ? 'Search for nodes' : ''
 })
 
 const search = (query: string) => {
+  currentQuery.value = query
   suggestions.value = useNodeDefStore().nodeSearchService.searchNode(
     query,
     props.filters,
@@ -90,6 +94,12 @@ const search = (query: string) => {
   )
 }
 
+const highlightQuery = (text: string, query: string) => {
+  if (!query) return text
+  const regex = new RegExp(`(${query})`, 'gi')
+  return text.replace(regex, '<span class="highlight">$1</span>')
+}
+
 const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])
 
 const reFocusInput = () => {
@@ -169,4 +179,13 @@ const setHoverSuggestion = (index: number) => {
 .s-badge {
   @apply bg-yellow-500;
 }
+
+:deep(.highlight) {
+  background-color: var(--p-primary-color);
+  color: var(--p-primary-contrast-color);
+  font-weight: bold;
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  margin: -0.125rem 0.125rem;
+}
 </style>
diff --git a/src/services/nodeSearchService.ts b/src/services/nodeSearchService.ts
index 1d9029aa4a..0840e46d66 100644
--- a/src/services/nodeSearchService.ts
+++ b/src/services/nodeSearchService.ts
@@ -111,7 +111,7 @@ export class NodeSearchService {
 
   constructor(data: ComfyNodeDefImpl[]) {
     this.nodeFuseSearch = new FuseSearch(data, {
-      keys: ['name', 'display_name', 'description'],
+      keys: ['name', 'display_name'],
       includeScore: true,
       threshold: 0.3,
       shouldSort: true,