Merge pull request #71 from JPL-Devin/devin/1778524166-fix-globe-render-on-toggle

fix: render Globe panel immediately on first open without window resize

Author: tariqksoliman

configure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "configure",
-  "version": "5.0.2-20260511",
+  "version": "5.0.3-20260511",
   "homepage": "./configure/build",
   "private": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mmgis",
-  "version": "5.0.2-20260511",
+  "version": "5.0.3-20260511",
   "description": "A web-based mapping and localization solution for science operation on planetary missions.",
   "homepage": "build",
   "repository": {

src/essence/Basics/UserInterface_/components/TopBar/TopBar.jsx

@@ -244,22 +244,38 @@ function TopBar({ userInterface }) {
         if (userInterface && userInterface.setPanelPercents) {
             const Globe_ = require('../../../Globe_/Globe_').default
             const newState = !(useUIStore.getState().pxIsGlobe > 0)
-            if (newState && !Globe_.hasBeenOpened) {
-                Globe_.init()
-                Globe_.hasBeenOpened = true
-            }
+
             if (isMobile) {
                 const isOpen = useUIStore.getState().pxIsGlobe > 0
                 if (!isOpen) {
                     userInterface.setPanelPercents(0, 0, 100)
+                    if (!Globe_.hasBeenOpened) {
+                        requestAnimationFrame(() => {
+                            Globe_.init()
+                            Globe_.hasBeenOpened = true
+                            requestAnimationFrame(() => {
+                                if (Globe_.litho) Globe_.litho.invalidateSize()
+                            })
+                        })
+                    }
                 }
                 return
             }
+
             const pp = userInterface.getPanelPercents()
             if (newState) {
                 const viewerAmt = pp.viewer > 0 ? 33 : 0
                 const mapAmt = 100 - 33 - viewerAmt
                 userInterface.setPanelPercents(viewerAmt, mapAmt, 33)
+                if (!Globe_.hasBeenOpened) {
+                    requestAnimationFrame(() => {
+                        Globe_.init()
+                        Globe_.hasBeenOpened = true
+                        requestAnimationFrame(() => {
+                            if (Globe_.litho) Globe_.litho.invalidateSize()
+                        })
+                    })
+                }
             } else {
                 if (pp.map > 0 && pp.viewer > 0) {
                     userInterface.setPanelPercents(pp.viewer + pp.globe / 2, pp.map + pp.globe / 2, 0)

src/essence/Basics/UserInterface_/store/uiStore.js

@@ -195,12 +195,19 @@ const useUIStore = create((set, get) => ({
                 const current = get()
                 if (current._Globe && !current._Globe.hasBeenOpened) {
                     current._Globe.hasBeenOpened = true
+                    current._Globe.init()
                     if (current._L && current._L.FUTURES.globeView == null) {
                         setTimeout(() => {
                             current._Globe.syncToMapCenter()
                         }, 100)
                     }
                 }
+                // Always invalidateSize when globe opens, even if already initialized
+                if (current._Globe && current._Globe.litho) {
+                    requestAnimationFrame(() => {
+                        current._Globe.litho.invalidateSize()
+                    })
+                }
             }, 0)
         }
     },