Manual Backport: fix: golden layout not rendering when created outsid…

…e viewport (#3299) (#3302) * fix: golden layout not rendering when created outside viewport (#3299) * fix: golden layout not rendering when created outside viewport Since Lab 4.2 cells outside the viewport get the style "display: none" which causes the content to not have height. This causes an error in size calculations of golden layout from which it doesn't recover. * Add changelog --------- Co-authored-by: Ricky O'Steen <[email protected]> (cherry picked from commit 7e5ddfa) * Fix changelog header --------- Co-authored-by: Mario Buikhuizen <[email protected]>
spacetelescope · Nov 18, 2024 · d3a41a6 · d3a41a6
1 parent 9992cf1
commit d3a41a6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -1,4 +1,4 @@
-A.B.1 (unreleased)
+4.0.1 (unreleased)
 ==================
 
 Bug Fixes
@@ -14,12 +14,14 @@ Bug Fixes
 
 - Added ``nbclassic`` dependency to fix ``solara``-based popouts. [#3282]
 
+- Fixed viewer widgets displaying improperly if initialized out of view in Jupyter Lab. [#3299]
+
 Cubeviz
 ^^^^^^^
 
 - Add missing styling to API hints entry for aperture_method in the spectral extraction plugin. [#3231]
 
-- Fixed "spectrum at spaxel" tool so it no longer resets spectral axis zoom. [#3249] 
+- Fixed "spectrum at spaxel" tool so it no longer resets spectral axis zoom. [#3249]
 
 - Fixed initializing a Gaussian1D model component when ``Cube Fit`` is toggled on. [#3295]
 

diff --git a/jdaviz/app.vue b/jdaviz/app.vue
@@ -76,6 +76,7 @@
         <splitpanes>
           <pane size="75">
             <golden-layout
+              v-if="outputCellHasHeight"
               style="height: 100%;"
               :has-headers="state.settings.visible.tab_headers"
               @state="onLayoutChange"
@@ -162,6 +163,11 @@
 
 <script>
 export default {
+  data() {
+    return {
+      outputCellHasHeight: false,
+    };
+  },
   methods: {
     checkNotebookContext() {
       this.notebook_context = document.getElementById("ipython-main-app")
@@ -188,6 +194,13 @@ export default {
     if (jpOutputElem) {
       jpOutputElem.classList.remove('jupyter-widgets');
     }
+    /* Workaround for Lab 4.2: cells outside the viewport get the style "display: none" which causes the content to not
+     * have height. This causes an error in size calculations of golden layout from which it doesn't recover.
+     */
+    new ResizeObserver(entries => {
+      this.outputCellHasHeight = entries[0].contentRect.height > 0;
+    }).observe(this.$refs.mainapp.$el);
+    this.outputCellHasHeight = this.$refs.mainapp.$el.offsetHeight > 0
   }
 };
 </script>