From 2cfca5037ed78da59f4f9a504c827b99dc2704d9 Mon Sep 17 00:00:00 2001
From: anlisha-maharjan <anlishamaharjan@gmail.com>
Date: Fri, 17 Jan 2025 09:52:44 +0100
Subject: [PATCH] NN-647 fix scroll height in lists and recenter graph button

---
 frontend/src/App.vue                          |   6 +-
 .../{PersistentWindow.vue => AxoChatBot.vue}  |  35 ++---
 frontend/src/components/DraggableView.vue     | 122 ++++++++++++++++++
 .../citation/CitationCommunities.vue          |   4 +-
 .../src/components/citation/CitationList.vue  |   4 +-
 .../src/components/enrichment/PathwayList.vue |   4 +-
 .../pathwaytools/PathwayGraphList.vue         |   4 +-
 frontend/src/layout/AppBar.vue                |   2 +-
 frontend/src/layout/MainToolBar.vue           |   2 +-
 9 files changed, 148 insertions(+), 35 deletions(-)
 rename frontend/src/components/{PersistentWindow.vue => AxoChatBot.vue} (90%)
 create mode 100644 frontend/src/components/DraggableView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 207aece0..20beefd5 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <PersistentWindow />
+  <AxoChatBot />
   <DocumentWindow />
   <Toast />
   <router-view v-slot="{ Component }">
@@ -14,7 +14,7 @@ import TermView from "@/views/TermView.vue";
 import CitationView from "@/views/CitationView.vue";
 import ProteinView from "@/views/ProteinView.vue";
 import HomeView from "@/views/HomeView.vue";
-import PersistentWindow from "@/components/PersistentWindow.vue";
+import AxoChatBot from "@/components/AxoChatBot.vue";
 import DocumentWindow from "@/components/DocumentWindow.vue";
 import Toast from 'primevue/toast';
 
@@ -25,7 +25,7 @@ export default {
     ProteinView,
     HomeView,
     CitationView,
-    PersistentWindow,
+    AxoChatBot,
     DocumentWindow,
     Toast
   },
diff --git a/frontend/src/components/PersistentWindow.vue b/frontend/src/components/AxoChatBot.vue
similarity index 90%
rename from frontend/src/components/PersistentWindow.vue
rename to frontend/src/components/AxoChatBot.vue
index aa6695e5..f1ec03d2 100644
--- a/frontend/src/components/PersistentWindow.vue
+++ b/frontend/src/components/AxoChatBot.vue
@@ -1,24 +1,18 @@
 <template>
-  <Dialog v-model:visible="windowCheck" header="AxoBot" position="bottomright" :closable="false" :minY="60" :minX="60"
+  <!-- :minY="60" :minX="60" -->
+  <Dialog v-model:visible="windowCheck" header="AxoBot" position="bottomright" :maximizable="true" 
     :pt="{
       root: {
         id: 'scrollBox',
         class:
-          '!h-full w-[26rem] !mt-[60px] !ml-[60px] !bg-white/75 dark:!bg-slate-900/75 !backdrop-blur overflow-y-auto',
+          '!h-full w-[26rem] !bg-white/75 dark:!bg-slate-900/75 !backdrop-blur overflow-y-auto', // !mt-[60px] !ml-[60px]
       },
       header: { class: 'sticky top-0 !p-2 !px-3 !justify-start gap-3 !font-medium cursor-move backdrop-blur z-[1]' },
-      headerActions: { class: '!hidden' },
+      headerActions: { class: '!ml-auto' },
       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' },
-    }">
-    <template #header>
-      AxoBot
-      <Button class="ml-auto" size="small" text plain rounded @click="windowCheck = false">
-        <span class="material-symbols-rounded"> close </span>
-      </Button>
-    </template>
-
+    }" @hide="windowCheck = false">
     <main class="flex flex-col">
       <ul class="flex flex-col gap-1.5">
         <li v-for="(msg, index) in messages" :key="index" :class="`flex flex-col p-3 rounded-lg
@@ -39,12 +33,12 @@
           <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">
-                <Splide :options="{ autoWidth: true, pagination: false }"
+                <Splide :options="{ autoWidth: true, pagination: false, gap: '8px' }"
                   :class="`mb-1.5 ${msg.sender === 'Bot' ? 'w-[calc(100%+(12px*2))] -mx-3' : 'w-[80%] -ml-3'}`">
                   <SplideSlide v-for="(element, index) in msg.data" :key="index">
                     <Chip class="cursor-pointer" :pt="{
-                      root: { class: 'h-6 !grid grid-cols-[1fr_auto] dark:!bg-slate-700 !px-2 !py-1' },
-                      label: { class: 'max-w-[150px] !text-sm !line-clamp-1' },
+                      root: { class: 'h-6 dark:!bg-slate-700 !px-2' },
+                      label: { class: '!text-sm' },
                     }" :label="element.id" @click="searchInput(element)" />
                   </SplideSlide>
                 </Splide>
@@ -87,15 +81,12 @@
         </fieldset>
 
         <template v-if="tags && tags.length">
-          <Splide :options="{ autoWidth: true, pagination: false }">
+          <Splide :options="{ autoWidth: true, pagination: false, gap: '8px' }">
             <SplideSlide v-for="(tag, index) in tags" :key="index">
-              <Chip class="cursor-pointer" :pt="{
-                root: { class: 'h-6 !grid grid-cols-[1fr_auto] dark:!bg-slate-700 !px-2 !py-1' },
-                label: { class: 'max-w-[150px] !text-sm !line-clamp-1' },
-              }" :label="tag.id">
-                <span @click="searchInput(tag)">{{ tag.id }}</span>
+              <div class="flex items-center gap-2 rounded-2xl cursor-pointer !h-6 dark:!bg-slate-700 !px-2">
+                <span @click="searchInput(tag)" class="!text-sm">{{ tag.id }}</span>
                 <span class="material-symbols-rounded !text-lg" @click="removeTag(index)"> cancel </span>
-              </Chip>
+              </div>
             </SplideSlide>
           </Splide>
         </template>
@@ -116,7 +107,7 @@
 import { useToast } from "primevue/usetoast";
 import { Splide, SplideSlide } from "@splidejs/vue-splide";
 export default {
-  name: "PersistentWindow",
+  name: "AxoChatBot",
   components: {
     Splide,
     SplideSlide,
diff --git a/frontend/src/components/DraggableView.vue b/frontend/src/components/DraggableView.vue
new file mode 100644
index 00000000..53b44481
--- /dev/null
+++ b/frontend/src/components/DraggableView.vue
@@ -0,0 +1,122 @@
+<template>
+  <section :class="`absolute peer select-none z-[9] ${wrapperClass}`"
+    :style="{ top: `${position.top}px`, left: `${position.left}px` }" ref="dragWrapper">
+    <header :class="`cursor-grab ${handlerClass}`" @mousedown="onMouseDown" ref="draggable">
+      <slot name="handler" />
+    </header>
+    <div v-if="$slots.content" :class="contentClass">
+      <slot name="content" />
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    wrapperClass: {
+      type: String,
+      default: "",
+    },
+    handlerClass: {
+      type: String,
+      default: "",
+    },
+    contentClass: {
+      type: String,
+      default: "",
+    },
+    initialPosition: {
+      type: Object,
+      default: () => ({ top: 100, left: 100 }),
+    },
+    minX: {
+      type: Number,
+      default: 0, // Minimum left coordinate
+    },
+    minY: {
+      type: Number,
+      default: 0, // Minimum top coordinate
+    },
+    dragHandle: {
+      type: String,
+      default: null, // CSS selector for the drag handle
+    },
+  },
+  data() {
+    return {
+      position: { ...this.initialPosition },
+      isDragging: false,
+      dragOffset: { x: 0, y: 0 },
+    };
+  },
+  mounted() {
+    // Safely access the handler element after DOM updates
+    this.$nextTick(() => {
+      if (this.dragHandle && this.$refs.handler) {
+        const handle = this.$refs.handler.querySelector(this.dragHandle);
+        if (handle) {
+          // Add mousedown listener only to the handle
+          handle.addEventListener("mousedown", this.onMouseDown);
+        }
+      }
+    });
+  },
+  beforeUnmount() {
+    // Remove event listener safely if handler exists
+    if (this.dragHandle && this.$refs.handler) {
+      const handle = this.$refs.handler.querySelector(this.dragHandle);
+      if (handle) {
+        handle.removeEventListener("mousedown", this.onMouseDown);
+      }
+    }
+  },
+  methods: {
+    onMouseDown(event) {
+      // Prevent default behavior (like clicking) when dragging starts
+      event.preventDefault();
+
+      // Ensure the drag starts only from the handle and avoid errors
+      if (this.dragHandle && this.$refs.handler) {
+        const handle = this.$refs.handler.querySelector(this.dragHandle);
+        if (!handle || !handle.contains(event.target)) {
+          return; // Stop if the event is not from the handle
+        }
+      }
+
+      this.isDragging = true;
+      this.dragOffset.x = event.clientX - this.position.left;
+      this.dragOffset.y = event.clientY - this.position.top;
+
+      // Add listeners for drag movement and release
+      window.addEventListener("mousemove", this.onMouseMove);
+      window.addEventListener("mouseup", this.onMouseUp);
+    },
+    onMouseMove(event) {
+      if (!this.isDragging) return;
+
+      const handler = this.$refs.draggable.querySelector(this.dragHandle);
+
+      let newTop = event.clientY - this.dragOffset.y;
+      let newLeft = event.clientX - this.dragOffset.x;
+
+      const rect = this.$refs.dragWrapper.getBoundingClientRect();
+      const containerWidth = window.innerWidth;
+      const containerHeight = window.innerHeight;
+
+      handler.classList.add("!pointer-events-none");
+
+      newTop = Math.max(this.minY, Math.min(newTop, containerHeight - rect.height));
+      newLeft = Math.max(this.minX, Math.min(newLeft, containerWidth - rect.width));
+
+      this.position.top = newTop;
+      this.position.left = newLeft;
+    },
+    onMouseUp() {
+      this.isDragging = false;
+      this.$refs.draggable.querySelector(this.dragHandle).classList.remove("!pointer-events-none");
+      window.removeEventListener("mousemove", this.onMouseMove);
+      window.removeEventListener("mouseup", this.onMouseUp);
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/citation/CitationCommunities.vue b/frontend/src/components/citation/CitationCommunities.vue
index 2a02373f..3c6a45d2 100644
--- a/frontend/src/components/citation/CitationCommunities.vue
+++ b/frontend/src/components/citation/CitationCommunities.vue
@@ -14,14 +14,14 @@
 
   <Listbox v-if="citation_data?.community_scores?.length != 0 && !await_load" v-model="selected_citation"
     optionLabel="name" :options="filt_communities" :pt="{
-      listContainer: { class: 'order-2' },
+      listContainer: { class: '!h-full !order-2' },
       list: { class: '!p-0' },
       emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
       option: {
         class:
           '!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
       },
-    }" :virtualScrollerOptions="{ itemSize: 28 }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
+    }" :virtualScrollerOptions="{ itemSize: 28 }"  scrollHeight="100%" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
     @update:modelValue="select_community" :tabindex="0" emptyMessage="No communities available.">
 
     <template #footer>
diff --git a/frontend/src/components/citation/CitationList.vue b/frontend/src/components/citation/CitationList.vue
index 1b320ac7..3604e6a6 100644
--- a/frontend/src/components/citation/CitationList.vue
+++ b/frontend/src/components/citation/CitationList.vue
@@ -14,14 +14,14 @@
 
   <Listbox v-if="citation_data?.nodes?.length != 0 && !await_load" v-model="selected_citation" optionLabel="id"
     :options="filt_abstracts" :pt="{
-      listContainer: { class: 'order-2' },
+      listContainer: { class: '!h-full !order-2' },
       list: { class: '!p-0' },
       emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
       option: {
         class:
           '!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
       },
-    }" :virtualScrollerOptions="{ itemSize: 28 }" listStyle="max-height:100%"
+    }" :virtualScrollerOptions="{ itemSize: 28 }"  scrollHeight="100%" listStyle="max-height:100%"
     class="h-full flex flex-col !p-0 !bg-transparent !border-0" @update:modelValue="select_abstract" :tabindex="0"
     emptyMessage="No abstracts available.">
 
diff --git a/frontend/src/components/enrichment/PathwayList.vue b/frontend/src/components/enrichment/PathwayList.vue
index 5c881c46..4ebaeb09 100644
--- a/frontend/src/components/enrichment/PathwayList.vue
+++ b/frontend/src/components/enrichment/PathwayList.vue
@@ -13,14 +13,14 @@
   </EmptyState>
 
   <Listbox v-if="terms !== null && !await_load" v-model="selected_pathway" optionLabel="name" :options="filt_terms" :pt="{
-    listContainer: { class: 'order-2' },
+    listContainer: { class: '!h-full !order-2' },
     list: { class: '!p-0' },
     emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
     option: {
       class:
         '!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
     },
-  }" :virtualScrollerOptions="{ itemSize: 28 }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
+  }" :virtualScrollerOptions="{ itemSize: 28 }" scrollHeight="100%" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
     @value-change="select_term" :tabindex="0" emptyMessage="No terms available.">
 
     <template #footer>
diff --git a/frontend/src/components/pathwaytools/PathwayGraphList.vue b/frontend/src/components/pathwaytools/PathwayGraphList.vue
index 86d39d70..b8131f8d 100644
--- a/frontend/src/components/pathwaytools/PathwayGraphList.vue
+++ b/frontend/src/components/pathwaytools/PathwayGraphList.vue
@@ -3,14 +3,14 @@
   </EmptyState>
 
   <Listbox v-if="term_data !== null" v-model="selected_pathway" optionLabel="name" :options="filt_terms" :pt="{
-    listContainer: { class: 'order-2' },
+    listContainer: { class: '!h-full !order-2' },
     list: { class: '!p-0' },
     emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
     option: {
       class:
         '!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
     },
-  }" :virtualScrollerOptions="{ itemSize: 28 }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
+  }" :virtualScrollerOptions="{ itemSize: 28 }" scrollHeight="100%" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
     @update:modelValue="select_term" :tabindex="0" emptyMessage="No terms available.">
 
     <template #footer>
diff --git a/frontend/src/layout/AppBar.vue b/frontend/src/layout/AppBar.vue
index bf3df277..5c4306d0 100644
--- a/frontend/src/layout/AppBar.vue
+++ b/frontend/src/layout/AppBar.vue
@@ -17,7 +17,7 @@
 
     <template #center>
       <Button @click="center" plain text class="capitalize">
-        <span class="material-symbols-rounded">center_focus_strong</span>
+        <span class="material-symbols-rounded">fullscreen</span>
         Recenter graph
       </Button>
     </template>
diff --git a/frontend/src/layout/MainToolBar.vue b/frontend/src/layout/MainToolBar.vue
index f8c65535..50738031 100644
--- a/frontend/src/layout/MainToolBar.vue
+++ b/frontend/src/layout/MainToolBar.vue
@@ -29,7 +29,7 @@
       </Button>
 
       <Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Recenter graph'" @click="center">
-        <span class="material-symbols-rounded group-hover:font-variation-ico-filled">center_focus_strong</span>
+        <span class="material-symbols-rounded group-hover:font-variation-ico-filled">fullscreen</span>
       </Button>
 
       <Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Open AxoBot'" @click="chatbot">