From d3a41a614747c54e18344cf567c7b10f7c1481c1 Mon Sep 17 00:00:00 2001
From: Ricky O'Steen <39831871+rosteen@users.noreply.github.com>
Date: Mon, 18 Nov 2024 12:58:49 -0500
Subject: [PATCH] Manual Backport: fix: golden layout not rendering when
 created outside 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 <rosteen@stsci.edu>
(cherry picked from commit 7e5ddfa4ceabc73d683b4153e45057875a611c51)

* Fix changelog header

---------

Co-authored-by: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
---
 CHANGES.rst    |  6 ++++--
 jdaviz/app.vue | 13 +++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/CHANGES.rst b/CHANGES.rst
index f7e7de9e5c..9c63d69827 100644
--- 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
index 6ca646dc6f..cca52dd6ae 100644
--- 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>