NN-642 fix chat ui tags carousel design

BackofenLab · Jan 8, 2025 · 8639947 · 8639947
1 parent 4243c0e
commit 8639947
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 67 deletions.
diff --git a/frontend/src/components/PersistentWindow.vue b/frontend/src/components/PersistentWindow.vue
@@ -2,12 +2,13 @@
   <Dialog v-model:visible="windowCheck" header="AxoBot" position="bottomright" :closable="false" :minY="60" :minX="60"
     :pt="{
       root: {
+        id: 'scrollBox',
         class:
           '!h-[80vh] w-[25rem] !mt-[60px] !ml-[60px] !bg-white/75 dark:!bg-slate-900/75 !backdrop-blur overflow-y-auto',
       },
       header: { class: 'sticky top-0 !p-2 !px-3 !justify-start gap-3 !font-medium cursor-move backdrop-blur z-[1]' },
       headerActions: { class: '!hidden' },
-      title: { class: '!text-base ' },
+      title: { class: '!text-base' },
       content: { class: '!px-3 !pb-2 !overflow-y-visible' },
       footer: { class: 'sticky bottom-0 !px-2 !pt-1 !pb-2 cursor-move backdrop-blur-xl !mt-auto' },
     }">
@@ -26,6 +27,7 @@
           ${index !== 0 ? 'backdrop-blur shadow-md' : ''}
           ${msg.sender === 'User' ? 'w-11/12 self-end' : ''}
           ${msg.sender === 'Bot' && index !== 0 ? 'my-2 bg-gradient-prime-opacity dark:bg-slate-800' : ''}
+          ${msg.data && msg.data.length > 0 ? '!pt-0' : ''}
           `">
           <!-- First welcome message -->
           <div class="mb-8" v-show="index === 0">
@@ -39,14 +41,15 @@
           <template v-if="index !== 0">
             <div :class="`flex gap-3 ${msg.sender === 'Bot' ? 'mb-5 flex-wrap' : 'gap-1.5 items-center'}`">
               <template v-if="msg.data && msg.data.length">
-                <Carousel :value="msg.data" :numVisible="3" :numScroll="1" :showIndicators="false"
+                <Carousel :value="msg.data" :numVisible="2" :numScroll="1" :showIndicators="false"
                   :prevButtonProps="{ size: 'small', plain: true, text: true, rounded: true }"
                   :nextButtonProps="{ size: 'small', plain: true, text: true, rounded: true }"
-                  :pt="{ viewport: '!flex !items-center' }" class="w-full">
+                  :pt="{ content: '!items-center' }" :class="`${msg.sender === 'Bot' ? '-mx-3' : 'w-[80%] -ml-3'}`">
                   <template #item="slotProps">
-                    <Chip class="cursor-pointer"
-                      :pt="{ root: { class: 'h-6 dark:!bg-slate-700 !px-3 !py-1 !mr-1.5' }, label: { class: '!text-sm' } }"
-                      :label="slotProps.data.id" @click="searchInput(slotProps.data)" />
+                    <Chip class="cursor-pointer" :pt="{
+                      root: { class: 'h-6 !grid grid-cols-[1fr_auto] dark:!bg-slate-700 !px-2 !py-1 !mx-1' },
+                      label: { class: '!text-sm !line-clamp-1' },
+                    }" :label="slotProps.data.id" @click="searchInput(slotProps.data)" />
                   </template>
                 </Carousel>
               </template>
@@ -62,7 +65,7 @@
 
               <Button class="w-6 h-6 !p-1.5 ml-auto" type="button" size="small" text plain rounded
                 v-tooltip.bottom="'Copy to clipboard'" @click="copyToClipboard(msg.text)">
-                <span class="material-symbols-rounded !text-xl"> content_copy </span>
+                <span class="material-symbols-rounded !text-lg"> content_copy </span>
               </Button>
               <Button class="w-6 h-6 !p-1.5" type="button" size="small" text plain rounded
                 v-tooltip.bottom="'Add to AxoWord'" @click="addToWord(msg.text)">
@@ -87,15 +90,16 @@
           </InputGroupAddon>
         </InputGroup>
 
-        <template v-if="tags.length">
+        <template v-if="tags && tags.length > 0">
           <Carousel :value="tags" :numVisible="3" :numScroll="1" :showIndicators="false"
             :prevButtonProps="{ size: 'small', plain: true, text: true, rounded: true }"
             :nextButtonProps="{ size: 'small', plain: true, text: true, rounded: true }"
-            :pt="{ viewport: '!flex !items-center' }">
+            :pt="{ content: '!items-center' }">
             <template #item="slotProps">
-              <Chip class="cursor-pointer"
-                :pt="{ root: { class: 'h-6 dark:!bg-slate-700 !px-3 !py-1 !mr-1.5' }, label: { class: '!text-sm' } }"
-                :label="slotProps.data.id" removable @click="searchInput(slotProps.data)"
+              <Chip class="cursor-pointer" :pt="{
+                root: { class: 'h-6 !grid grid-cols-[1fr_auto] dark:!bg-slate-700 !px-2 !py-1 !mx-1' },
+                label: { class: '!text-sm !line-clamp-1' },
+              }" :label="slotProps.data.id" removable @click="searchInput(slotProps.data)"
                 @remove="removeTag(slotProps.index)" />
             </template>
           </Carousel>
@@ -133,9 +137,7 @@ export default {
   computed: {
     showPersistentComponent() {
       let route = this.$route.name;
-      return (
-        route !== "home"
-      );
+      return route !== "home";
     },
   },
   mounted() {
@@ -151,6 +153,15 @@ export default {
     });
   },
   methods: {
+    scrollToEnd() {
+      setTimeout(() => {
+        const box = document.getElementById("scrollBox");
+        box.scrollTo({
+          top: box.scrollHeight,
+          behavior: "smooth", // Add smooth scrolling
+        });
+      }, 1); // 1ms delay to render new item and allow the scroll to complete
+    },
     copyToClipboard(text) {
       navigator.clipboard
         .writeText(text)
@@ -163,6 +174,7 @@ export default {
     },
     addToWord(text) {
       this.emitter.emit("addToWord", text);
+      this.toast.add({ severity: 'success', detail: 'Message added to AxoWord.', life: 4000 });
     },
     addLink(tag) {
       if (!this.windowCheck) this.windowCheck = true;
@@ -223,6 +235,7 @@ export default {
         });
         this.getAnswer(message);
         this.user_input = '';
+        this.scrollToEnd();
       }
     },
     getAnswer(message) {

diff --git a/frontend/src/components/toolbar/modules/ProteinList.vue b/frontend/src/components/toolbar/modules/ProteinList.vue
@@ -1,11 +1,13 @@
 <template>
-  <h6 class="mb-2 text-sm text-slate-300">
-    To find multiple nodes separate each node in a new line.
-  </h6>
-  <Textarea v-model="raw_text" rows="4" fluid autofocus placeholder="Search by gene..." class="text-center"/>
-  <Button label="Apply & Create subset" severity="secondary" size="small" fluid type="button" class="mt-2.5 !rounded-lg"
-    @click="highlight(raw_text)">
-  </Button>
+  <div>
+    <h6 class="mb-2 text-sm text-slate-300">
+      To find multiple nodes separate each node in a new line.
+    </h6>
+    <Textarea v-model="raw_text" rows="4" fluid autofocus placeholder="Search by gene..." class="text-center" />
+    <Button label="Apply & Create subset" severity="secondary" size="small" fluid type="button"
+      class="mt-2.5 !rounded-lg" @click="highlight(raw_text)">
+    </Button>
+  </div>
 </template>
 
 <script>

diff --git a/frontend/src/components/visualization/MainVis.vue b/frontend/src/components/visualization/MainVis.vue
@@ -126,6 +126,7 @@ export default {
     "active_decoloumn_changed",
     "active_termlayers_changed",
     "subactive_subset_changed",
+    "active_layer_changed"
   ],
   data() {
     return {

diff --git a/frontend/src/layout/VerticalPane.vue b/frontend/src/layout/VerticalPane.vue
@@ -10,7 +10,8 @@
         <span class="material-symbols-rounded !text-lg"> keep_off </span>
       </Button>
       <Button v-if="!is_minimized" class="w-5 h-5 !p-1.5" type="button" size="small" severity="success" rounded
-        v-tooltip.bottom="'Stack pane right'" @click="changePanePosition">
+        v-tooltip.bottom="`${stacked === 'left' ? 'Stack pane right' : 'Stack pane left'}`"
+        @click="changePanePosition">
         <span class="material-symbols-rounded !text-lg">
           {{ stacked === "left" ? "arrow_right_alt" : "arrow_left_alt" }}
         </span>

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -4,39 +4,36 @@
 
     <section class="container flex h-full mx-auto 2xl:items-center">
       <div
-        class="max-w-full max-h-full 2xl:min-h-[800px] w-[590px] flex flex-col p-6 rounded-3xl border border-[#074a42] bg-slate-900/75 !backdrop-blur overflow-auto"
-      >
+        class="max-w-full max-h-full 2xl:min-h-[75vh] w-[590px] flex flex-col p-6 rounded-3xl border border-[#074a42] bg-slate-900/75 !backdrop-blur overflow-auto">
         <header class="flex items-center gap-8">
           <img class="w-14" src="@/assets/logo-grad.svg" />
           <h1 class="mt-3 text-2xl font-bold">
             Welcome to <span class="text-primary-500">Protein Graph Database </span>
-            <span class="block text-base font-normal text-slate-400"
-              >Select a option to get started and generate graph</span
-            >
+            <span class="block text-base font-normal text-slate-400">Select a option to get started and generate
+              graph</span>
           </h1>
         </header>
 
         <Tabs class="mt-8 tab-active-grad" v-model:value="activeTab">
-          <TabList
-            :pt="{
-              tabList: { class: 'w-full!inline-flex !border-none !bg-slate-800/50 !rounded' },
-              activeBar: { class: '!h-full !rounded !bg-none border !border-primary-500' },
-            }"
-          >
+          <TabList :pt="{
+            tabList: { class: 'w-full!inline-flex !border-none !bg-slate-800/50 !rounded' },
+            activeBar: { class: '!h-full !rounded !bg-none border !border-primary-500' },
+          }">
             <Tab value="0" class="flex-1 flex justify-center items-center gap-3 !py-1.5 !px-3 !border-none !z-[2]">
               <span :class="`material-symbols-rounded ${activeTab === '0' ? 'text-primary-500' : 'text-slate-400'}`">
                 family_history
               </span>
               <span class="font-bold whitespace-nowrap">Input</span>
             </Tab>
             <Tab value="1" class="flex-1 flex justify-center items-center gap-3 !py-1.5 !px-3 !border-none !z-[2]">
-              <span :class="`material-symbols-rounded ${activeTab === '1' ? 'text-primary-500' : 'text-slate-400'}`"> flowsheet </span>
+              <span :class="`material-symbols-rounded ${activeTab === '1' ? 'text-primary-500' : 'text-slate-400'}`">
+                flowsheet </span>
               <span class="font-bold whitespace-nowrap">File</span>
             </Tab>
-            <Tab
-              value="2"
-              class="flex-1 flex justify-center items-center gap-3 !py-1.5 !px-3 !border-none !z-[2] has:!text-white"
-              ><span :class="`material-symbols-rounded ${activeTab === '2' ? 'text-primary-500' : 'text-slate-400'}`"> scatter_plot </span>
+            <Tab value="2"
+              class="flex-1 flex justify-center items-center gap-3 !py-1.5 !px-3 !border-none !z-[2] has:!text-white">
+              <span :class="`material-symbols-rounded ${activeTab === '2' ? 'text-primary-500' : 'text-slate-400'}`">
+                scatter_plot </span>
               <span class="font-bold whitespace-nowrap">Import</span>
             </Tab>
           </TabList>
@@ -55,34 +52,14 @@
         </Tabs>
 
         <footer class="flex items-center justify-center gap-3 pt-8 mt-auto">
-          <Button
-            class="animate__animated animate__bounce"
-            icon="pi pi-youtube"
-            severity="secondary"
-            rounded
-            aria-label="Youtube"
-          />
-          <Button
-            class="animate__animated animate__bounce animate__fast"
-            icon="pi pi-github"
-            severity="secondary"
-            rounded
-            aria-label="Github"
-          />
-          <Button
-            class="animate__animated animate__bounce animate__slow"
-            icon="pi pi-reddit"
-            severity="secondary"
-            rounded
-            aria-label="Reddit"
-          />
-          <Button
-            class="animate__animated animate__bounce animate__slower"
-            icon="pi pi-linkedin"
-            severity="secondary"
-            rounded
-            aria-label="Linkedin"
-          />
+          <Button class="animate__animated animate__bounce" icon="pi pi-youtube" severity="secondary" rounded
+            aria-label="Youtube" />
+          <Button class="animate__animated animate__bounce animate__fast" icon="pi pi-github" severity="secondary"
+            rounded aria-label="Github" />
+          <Button class="animate__animated animate__bounce animate__slow" icon="pi pi-reddit" severity="secondary"
+            rounded aria-label="Reddit" />
+          <Button class="animate__animated animate__bounce animate__slower" icon="pi pi-linkedin" severity="secondary"
+            rounded aria-label="Linkedin" />
         </footer>
       </div>
     </section>