fix: golden layout not rendering when created outside viewport (space…

…telescope#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>

CHANGES.rst

@@ -84,6 +84,8 @@ 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
 ^^^^^^^
 

jdaviz/app.vue

@@ -81,6 +81,7 @@
         <splitpanes>
           <pane size="75">
             <golden-layout
+              v-if="outputCellHasHeight"
               style="height: 100%;"
               :has-headers="state.settings.visible.tab_headers"
               @state="onLayoutChange"
@@ -174,6 +175,11 @@
 
 <script>
 export default {
+  data() {
+    return {
+      outputCellHasHeight: false,
+    };
+  },
   methods: {
     checkNotebookContext() {
       this.notebook_context = document.getElementById("ipython-main-app")
@@ -200,6 +206,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>
@@ -214,4 +227,4 @@ export default {
 .plugin-title.v-list-item:after {
   display: none !important;
 }
-</style>
+</style>