From 6590146d55502cacb870a3b08723d3502cde20fb Mon Sep 17 00:00:00 2001
From: Hatice Karatay <haticekaraty@gmail.com>
Date: Wed, 31 Jan 2024 15:52:51 -0500
Subject: [PATCH] Add dynamic menu position update - in progress

---
 jdaviz/components/viewer_data_select.vue |   4 +-
 jdaviz/container.vue                     | 105 ++++++++++++++---------
 2 files changed, 66 insertions(+), 43 deletions(-)

diff --git a/jdaviz/components/viewer_data_select.vue b/jdaviz/components/viewer_data_select.vue
index f826d0a4ec..a345cdc097 100644
--- a/jdaviz/components/viewer_data_select.vue
+++ b/jdaviz/components/viewer_data_select.vue
@@ -1,6 +1,6 @@
 <template>
   <j-tooltip v-if="menuButtonAvailable()" tipid="viewer-toolbar-data">
-    <v-menu attach offset-y :close-on-content-click="false" v-model="viewer.data_open">
+    <v-menu :attach="'#target-' + viewer.id" offset-y :close-on-content-click="false" v-model="viewer.data_open">
       <template v-slot:activator="{ on, attrs }">
         <v-btn 
           text 
@@ -57,7 +57,7 @@
           ></j-viewer-data-select-item>
         </v-row>
 
-        <div v-if="extraDataItems.length" style="margin-bottom: -100px; height: 200px">
+        <div v-if="extraDataItems.length" style="margin-bottom: -8px">
           <v-row key="extra-items-expand" style="padding-left: 25px; margin-right: 0px; padding-bottom: 4px; background-color: #E3F2FD"> 
             <span 
               @click="toggleShowExtraItems"
diff --git a/jdaviz/container.vue b/jdaviz/container.vue
index 03171c4813..9f06c9510c 100644
--- a/jdaviz/container.vue
+++ b/jdaviz/container.vue
@@ -1,44 +1,44 @@
 <template>
   <component :is="stack.container">
-    <g-viewer-tab
-      v-for="(child, index) in stack.children"
-      :stack="child"
-      :key="index"
-      :data_items="data_items"
-      :app_settings="app_settings"
-      :icons="icons"
-      :viewer_icons="viewer_icons"
-      :layer_icons="layer_icons"
-      @resize="(e) => $emit('resize', e)"
-      :closefn="closefn"
-      @data-item-visibility="$emit('data-item-visibility', $event)"
-      @data-item-unload="$emit('data-item-unload', $event)"
-      @data-item-remove="$emit('data-item-remove', $event)"
-      @call-viewer-method="$emit('call-viewer-method', $event)"
-    ></g-viewer-tab>
-    <gl-component
-      v-for="(viewer, index) in stack.viewers"
-      :key="viewer.id"
-      :title="viewer.reference || viewer.id"
-      :tab-id="viewer.id"
-      @resize="(e) => $emit('resize', e)"
-      @destroy="destroy($event, viewer.id)"
-      style="display: flex; flex-flow: column; height: 100%; overflow-y: auto; overflow-x: hidden"
-    >
+    <div id="scrollable-container" style="position: relative; overflow: auto;">
+      <g-viewer-tab
+        v-for="(child, index) in stack.children" 
+        :stack="child" 
+        :key="index" 
+        :data_items="data_items"
+        :app_settings="app_settings" 
+        :icons="icons" 
+        :viewer_icons="viewer_icons" 
+        :layer_icons="layer_icons"
+        @resize="(e) => $emit('resize', e)" 
+        :closefn="closefn"
+        @data-item-visibility="$emit('data-item-visibility', $event)"
+        @data-item-unload="$emit('data-item-unload', $event)" 
+        @data-item-remove="$emit('data-item-remove', $event)"
+        @call-viewer-method="$emit('call-viewer-method', $event)"
+      ></g-viewer-tab>
+      <gl-component 
+        v-for="(viewer, index) in stack.viewers" 
+        :key="viewer.id" 
+        :title="viewer.reference || viewer.id"
+        :tab-id="viewer.id" 
+        @resize="(e) => $emit('resize', e)"
+        @destroy="destroy($event, viewer.id)"
+        style="display: flex; flex-flow: column; height: 100%; overflow-y: auto; overflow-x: hidden"
+        >
         <div>
           <v-row dense style="background-color: #205f76; margin: 0px" class="jdaviz-viewer-toolbar">
-            <j-viewer-data-select
-              :data_items="data_items" 
-              :viewer="viewer"
-              :app_settings="app_settings"
-              :layer_icons="layer_icons"
-              :icons="icons"
-              @data-item-visibility="$emit('data-item-visibility', $event)"
-              @data-item-unload="$emit('data-item-unload', $event)"
-              @data-item-remove="$emit('data-item-remove', $event)"
+            <j-viewer-data-select 
+            :data_items="data_items" 
+            :viewer="viewer" 
+            :app_settings="app_settings"
+            :layer_icons="layer_icons" 
+            :icons="icons" 
+            @data-item-visibility="$emit('data-item-visibility', $event)"
+            @data-item-unload="$emit('data-item-unload', $event)"
+            @data-item-remove="$emit('data-item-remove', $event)"
             ></j-viewer-data-select>
 
-
             <v-toolbar-items v-if="viewer.reference === 'table-viewer'">
               <j-tooltip tipid='table-prev'>
                 <v-btn icon @click="$emit('call-viewer-method', {'id': viewer.id, 'method': 'prev_row'})" color="white">
@@ -55,7 +55,6 @@
             <v-spacer></v-spacer>
             <jupyter-widget class='jdaviz-nested-toolbar' :widget="viewer.toolbar"></jupyter-widget>
           </v-row>
-
         </div>
 
         <v-card tile flat style="flex: 1; margin-top: -2px; overflow: hidden;">
@@ -80,13 +79,15 @@
             </div>
           </div>
 
-          <jupyter-widget
-            :widget="viewer.widget"
+          <jupyter-widget 
+            :widget="viewer.widget" 
             :ref="'viewer-widget-'+viewer.id"
             :style="'width: 100%; height: 100%; overflow: hidden; transform: rotateY('+viewer_rotateY(viewer.canvas_flip_horizontal)+') rotate('+viewer.canvas_angle+'deg)'"
-          ></jupyter-widget>
+            ></jupyter-widget>
         </v-card>
-    </gl-component>
+        <div ref="menuAttachTarget" :id="'target-' + viewer.id" style="position: absolute;"></div>
+      </gl-component>
+    </div>
   </component>
 </template>
 
@@ -112,7 +113,7 @@
 .viewer-label:hover {
   background-color: #e5e5e5;
   width: auto;
-  border-bottom-left-radius: 4px; 
+  border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
 }
 .imviz div.v-card.v-card--flat.v-sheet.v-sheet--tile {
@@ -135,7 +136,29 @@ module.exports = {
       this.$emit('resize')
     }
   },
+  mounted() {
+    let menuAttachTarget = this.$refs.menuAttachTarget[0]
+    while (menuAttachTarget && menuAttachTarget.className !== "lm_items") {
+      if (["auto"].includes(window.getComputedStyle(menuAttachTarget).overflowY)) {
+        menuAttachTarget.addEventListener("scroll", this.onScroll);
+      }
+      menuAttachTarget = menuAttachTarget.parentElement;
+    }
+  },
+
+  beforeDestroy() {
+    let menuAttachTarget = this.$refs.menuAttachTarget[0]
+    while (menuAttachTarget && menuAttachTarget.className !== "lm_items") {
+      if (["auto"].includes(window.getComputedStyle(menuAttachTarget).overflowY)) {
+        menuAttachTarget.removeEventListener("scroll", this.onScroll);
+      }
+      menuAttachTarget = menuAttachTarget.parentElement;
+    }
+  },
   methods: {
+    onScroll(e) {
+      // TODO: Complete scroll logic for the menu
+    },
     computeChildrenPath() {
       return this.$parent.computeChildrenPath();
     },