From a095e7ecae86da7cc8cd59df6ccf84ae4235112d Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Sat, 10 Aug 2024 14:52:37 -0400
Subject: [PATCH] Show category in node search box instead of description
 (#360)

---
 src/components/node/NodePreview.vue        |  1 +
 src/components/searchbox/NodeSearchBox.vue | 12 +++---------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index 1bf8c35b0..8cefb389e 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -178,6 +178,7 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
   font-style: italic;
   font-weight: 500;
   font-size: 0.9rem;
+  word-break: break-word;
 }
 
 ._sb_table {
diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 1b7ca08f3..2375471e5 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -34,8 +34,8 @@
               :python_module="option.python_module"
             />
           </div>
-          <div v-if="option.description" class="option-description">
-            {{ option.description }}
+          <div class="option-category">
+            {{ option.category.replaceAll('/', ' > ') }}
           </div>
         </div>
       </template>
@@ -144,17 +144,11 @@ const setHoverSuggestion = (index: number) => {
   @apply flex flex-col px-4 py-2 cursor-pointer overflow-hidden w-full;
 }
 
-.option-container:hover .option-description {
-  @apply overflow-visible;
-  /* Allows text to wrap */
-  white-space: normal;
-}
-
 .option-display-name {
   @apply font-semibold;
 }
 
-.option-description {
+.option-category {
   @apply text-sm text-gray-400 overflow-hidden text-ellipsis;
   /* Keeps the text on a single line by default */
   white-space: nowrap;