From 31576fc87177f9cee40a4eab4ede937483b543ed Mon Sep 17 00:00:00 2001
From: Hatice Karatay <66814693+haticekaratay@users.noreply.github.com>
Date: Tue, 6 Feb 2024 10:31:02 -0500
Subject: [PATCH] Fix data menu cutoff in smaller viewers (#2630)

* Scroll when data menu list gets longer

* Add dynamic menu position update - in progress

* Menu scrolls with the viewer but location needs update

* Sync with the main

* Dynamically position the menu with the button

* Add a change log

* Remove redundant ref

* Add unique viewer IDs to buttons for improved specificity
---
 CHANGES.rst                              |  2 ++
 jdaviz/components/viewer_data_select.vue | 32 ++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/CHANGES.rst b/CHANGES.rst
index cd22e583da..69f883df02 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -116,6 +116,8 @@ Bug Fixes
 * Viewer data-menu is no-longer synced between different instances of the app to avoid recursion
   between click events. [#2670]
 
+* Fix data-menu cutoff in smaller viewers, ensuring full visibility regardless of viewer dimensions. [#2630]
+
 Cubeviz
 ^^^^^^^
 - Fixes Spectral Extraction's assumptions of one data per viewer, and flux data only in
diff --git a/jdaviz/components/viewer_data_select.vue b/jdaviz/components/viewer_data_select.vue
index 29e65c65c4..bde3092dcf 100644
--- a/jdaviz/components/viewer_data_select.vue
+++ b/jdaviz/components/viewer_data_select.vue
@@ -1,8 +1,9 @@
 <template>
   <j-tooltip v-if="menuButtonAvailable()" tipid="viewer-toolbar-data">
-    <v-menu attach offset-y :close-on-content-click="false" v-model="data_menu_open">
+    <v-menu offset-y :close-on-content-click="false" v-model="data_menu_open">
       <template v-slot:activator="{ on, attrs }">
         <v-btn
+          :id="'menu-button-'+ viewer.id"
           text 
           elevation="3" 
           v-bind="attrs" 
@@ -16,7 +17,7 @@
           <v-icon>mdi-format-list-bulleted-square</v-icon>
         </v-btn>
       </template>
-      <v-list style="max-height: 500px; width: 465px; padding-top: 0px" class="overflow-y-auto">
+      <v-list :id="'menu-content-' + viewer.id" style="max-height: 500px; width: 465px; padding-top: 0px" class="overflow-y-auto">
         <v-row key="title" style="padding-left: 25px; margin-right: 0px; background-color: #E3F2FD">
             <span style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px; font-weight: bold; color: black">
               {{viewerTitleCase}}
@@ -107,6 +108,7 @@
         </div>
       </v-list>
     </v-menu>
+    <div :id="'target-' + viewer.id"></div>
   </j-tooltip>
 </template>
 <script>
@@ -142,7 +144,33 @@ module.exports = {
       uncertTrunc: this.uncertainty,
     }
   },
+  mounted() {
+    let element = document.getElementById(`target-${this.viewer.id}`).parentElement
+    while (element["tagName"] !== "BODY") {
+      if (["auto", "scroll"].includes(window.getComputedStyle(element).overflowY)) {
+        element.addEventListener("scroll", this.onScroll);
+      }
+      element = element.parentElement;
+    }
+  },
+  beforeDestroy() {
+    let element = document.getElementById(`target-${this.viewer.id}`).parentElement
+    while (element["tagName"] !== "BODY") {
+      if (["auto", "scroll"].includes(window.getComputedStyle(element).overflowY)) {
+        element.removeEventListener("scroll", this.onScroll);
+      }
+      element = element.parentElement;
+    }
+  },
   methods: {
+    onScroll(e) {
+      const dataMenuHeight = document.getElementById(`menu-button-${this.viewer.id}`).parentElement.getBoundingClientRect().height
+      const top = document.getElementById(`target-${this.viewer.id}`).getBoundingClientRect().y + document.body.parentElement.scrollTop + dataMenuHeight;
+      if (this.data_menu_open && document.getElementById(`target-${this.viewer.id}`)) {
+        const menuContent = document.getElementById(`menu-content-${this.viewer.id}`);
+        menuContent.parentElement.style.top = top + "px";
+      }
+    },
     menuButtonAvailable() {
       if (this.$props.viewer.reference === 'table-viewer') {
         return false