From 3d89c245e5a45e2a612e7009a8b8de56151c8a16 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Tue, 20 Aug 2024 17:35:23 -0400
Subject: [PATCH] Add experimental/deprecated tags to search result / node
 library (#564)

---
 src/components/searchbox/NodeSearchBox.vue    | 21 +++++++++++++++----
 .../sidebar/tabs/NodeLibrarySidebarTab.vue    | 11 ++++++++++
 src/i18n.ts                                   |  1 +
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 0991975ae..e19963745 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -36,10 +36,22 @@
               {{ option.category.replaceAll('/', ' > ') }}
             </div>
           </div>
-          <NodeSourceChip
-            v-if="option.python_module !== undefined"
-            :python_module="option.python_module"
-          />
+          <div class="option-badges">
+            <Tag
+              v-if="option.experimental"
+              :value="$t('experimental')"
+              severity="primary"
+            />
+            <Tag
+              v-if="option.deprecated"
+              :value="$t('deprecated')"
+              severity="danger"
+            />
+            <NodeSourceChip
+              v-if="option.python_module !== undefined"
+              :python_module="option.python_module"
+            />
+          </div>
         </div>
       </template>
       <!-- FilterAndValue -->
@@ -60,6 +72,7 @@ import { computed, onMounted, ref } from 'vue'
 import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
 import Chip from 'primevue/chip'
 import Badge from 'primevue/badge'
+import Tag from 'primevue/tag'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSourceChip from '@/components/node/NodeSourceChip.vue'
 import { type FilterAndValue } from '@/services/nodeSearchService'
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
index 69f9b7797..e58c2ca3e 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -63,6 +63,16 @@
           ></Badge>
         </template>
         <template #node="{ node }">
+          <Tag
+            v-if="node.data.experimental"
+            :value="$t('experimental')"
+            severity="primary"
+          />
+          <Tag
+            v-if="node.data.deprecated"
+            :value="$t('deprecated')"
+            severity="danger"
+          />
           <span class="node-label">{{ node.label }}</span>
         </template>
       </TreePlus>
@@ -83,6 +93,7 @@
 
 <script setup lang="ts">
 import Badge from 'primevue/badge'
+import Tag from 'primevue/tag'
 import ToggleButton from 'primevue/togglebutton'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { computed, ref, nextTick } from 'vue'
diff --git a/src/i18n.ts b/src/i18n.ts
index c3e4cb364..21b8b5945 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -7,6 +7,7 @@ const messages = {
     reconnected: 'Reconnected',
     delete: 'Delete',
     experimental: 'BETA',
+    deprecated: 'DEPR',
     loadWorkflow: 'Load Workflow',
     settings: 'Settings',
     searchSettings: 'Search Settings',