From a4a298924ef058a6b2843bf07b377cd711f95415 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Sun, 1 Sep 2024 18:12:27 -0400
Subject: [PATCH] Show node id name in node searchbox (#703)

* Show node unique name in node searchbox

* nit
---
 src/components/searchbox/NodeSearchBox.vue | 15 ++++++++++++---
 src/stores/settingStore.ts                 |  9 +++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 07fcc2bfd..4e790e468 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -44,9 +44,15 @@
       <template v-slot:option="{ option }">
         <div class="option-container">
           <div class="option-display-name">
-            <span
-              v-html="highlightQuery(option.display_name, currentQuery)"
-            ></span>
+            <div>
+              <span
+                v-html="highlightQuery(option.display_name, currentQuery)"
+              ></span>
+              <span>&nbsp;</span>
+              <Tag v-if="showIdName" severity="secondary">
+                <span v-html="highlightQuery(option.name, currentQuery)"></span>
+              </Tag>
+            </div>
             <div v-if="showCategory" class="option-category">
               {{ option.category.replaceAll('/', ' > ') }}
             </div>
@@ -106,6 +112,9 @@ const enableNodePreview = computed(() =>
 const showCategory = computed(() =>
   settingStore.get('Comfy.NodeSearchBoxImpl.ShowCategory')
 )
+const showIdName = computed(() =>
+  settingStore.get('Comfy.NodeSearchBoxImpl.ShowIdName')
+)
 
 const props = defineProps({
   filters: {
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index 98e4ffb3a..37fe23464 100644
--- a/src/stores/settingStore.ts
+++ b/src/stores/settingStore.ts
@@ -107,6 +107,15 @@ export const useSettingStore = defineStore('setting', {
         defaultValue: true
       })
 
+      app.ui.settings.addSetting({
+        id: 'Comfy.NodeSearchBoxImpl.ShowIdName',
+        category: ['Comfy', 'Node Search Box', 'ShowIdName'],
+        name: 'Show node id name in search results',
+        tooltip: 'Only applies to the default implementation',
+        type: 'boolean',
+        defaultValue: false
+      })
+
       app.ui.settings.addSetting({
         id: 'Comfy.Sidebar.Location',
         category: ['Comfy', 'Sidebar', 'Location'],