Fix compare graph layout refresh

Author: quic-boyuc

devtools/fx_viewer/templates/canvas_renderer.js

@@ -49,6 +49,13 @@ class CanvasRenderer {
         this.viewer.renderAll();
     }
 
+    resetInteractionState() {
+        this.isDragging = false;
+        this.dragMoved = false;
+        this.lastMousePos = { x: 0, y: 0 };
+        this.viewer.controller.handleHover(null, null);
+    }
+
     destroy() {
         if (this._resizeObserver) {
             this._resizeObserver.disconnect();

devtools/fx_viewer/templates/compare.js

@@ -72,6 +72,10 @@ class FXGraphCompare {
         this._followSelection = true;
         this._openPortalMenus = [];
         this._currentTheme = this.viewers[0]?.controller?.state?.themeName || 'light';
+        this._layoutRefreshQueued = false;
+        this._layoutRefreshAgain = false;
+        this._pendingRefreshAgainResetView = false;
+        this._needsResetOnNextVisibleLayout = false;
 
         if (this.container) {
             this._buildCompareDOM();
@@ -166,11 +170,11 @@ class FXGraphCompare {
 
             // ResizeObserver on canvas cell
             if (typeof ResizeObserver !== 'undefined') {
-                const ro = new ResizeObserver(() => {
-                    viewer.canvasRenderer.resize();
-                    viewer.renderAll();
-                });
+                const ro = new ResizeObserver(() => this._scheduleLayoutRefresh());
                 ro.observe(canvasCell);
+                if (viewer.minimapRenderer) {
+                    ro.observe(minimapCell);
+                }
                 this._colResizeObservers.push(ro);
             }
         });
@@ -183,21 +187,67 @@ class FXGraphCompare {
 
         this._applyCompareTheme(this.viewers[0]?.controller?.state?.themeName || 'light');
 
-        // Resize all viewers after DOM settles (double-rAF ensures grid layout is complete)
+        this._scheduleLayoutRefresh({ resetView: true });
+    }
+
+    _scheduleLayoutRefresh(options = {}) {
+        if (!this._root) return;
+        if (this._layoutRefreshQueued) {
+            this._layoutRefreshAgain = true;
+            this._pendingRefreshAgainResetView = this._pendingRefreshAgainResetView || !!options.resetView;
+            return;
+        }
+        this._pendingRefreshResetView = this._pendingRefreshResetView || !!options.resetView;
+        this._layoutRefreshQueued = true;
         requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-                this.viewers.forEach((v) => {
-                    v.canvasRenderer.resize();
-                    if (v.minimapRenderer) {
-                        v.minimapRenderer.resize();
-                        v.minimapRenderer.generateThumbnail();
-                    }
-                    v.init();
-                });
+                this._layoutRefreshQueued = false;
+                if (!this._root) return;
+                const resetView = !!this._pendingRefreshResetView || this._needsResetOnNextVisibleLayout;
+                this._pendingRefreshResetView = false;
+                this._refreshViewerLayout({ resetView });
+                if (this._layoutRefreshAgain) {
+                    const resetAgain = this._pendingRefreshAgainResetView;
+                    this._layoutRefreshAgain = false;
+                    this._pendingRefreshAgainResetView = false;
+                    this._scheduleLayoutRefresh({ resetView: resetAgain });
+                }
             });
         });
     }
 
+    _refreshViewerLayout(options = {}) {
+        const resetView = !!options.resetView;
+        let sawInvalidLayout = false;
+        this.viewers.forEach((viewer, i) => {
+            if (!this._visibleViewers.has(this._viewerNames[i])) return;
+            if (viewer.canvasRenderer && typeof viewer.canvasRenderer.resetInteractionState === 'function') {
+                viewer.canvasRenderer.resetInteractionState();
+            }
+            if (viewer.minimapRenderer && typeof viewer.minimapRenderer.resetInteractionState === 'function') {
+                viewer.minimapRenderer.resetInteractionState();
+            }
+
+            const canvasRect = viewer.canvasContainer && viewer.canvasContainer.getBoundingClientRect();
+            const minimapRect = viewer.minimapRenderer && viewer.minimapRenderer.container.getBoundingClientRect();
+            const hasCanvasLayout = canvasRect && canvasRect.width > 0 && canvasRect.height > 0;
+            const hasMinimapLayout = !viewer.minimapRenderer || (minimapRect && minimapRect.width > 0 && minimapRect.height > 0);
+            if (!hasCanvasLayout || !hasMinimapLayout) {
+                sawInvalidLayout = true;
+                return;
+            }
+
+            if (viewer.canvasRenderer) viewer.canvasRenderer.resize();
+            if (viewer.minimapRenderer) {
+                viewer.minimapRenderer.resize();
+                viewer.minimapRenderer.generateThumbnail();
+            }
+            if (resetView) viewer.init();
+            else viewer.renderAll();
+        });
+        this._needsResetOnNextVisibleLayout = sawInvalidLayout;
+    }
+
     _buildSidebar(sidebar) {
         // Layers button + menu (portal pattern — menu appended to document.body when open)
         const layersWrap = document.createElement('div');
@@ -489,15 +539,24 @@ class FXGraphCompare {
             }
             if (isVis) {
                 colIdx++;
-                v.canvasRenderer.resize();
-                v.renderAll();
             }
         });
 
+        this._scheduleLayoutRefresh();
+
         if (visible) {
             const newViewer = this.viewers[this._viewerNames.indexOf(name)];
             requestAnimationFrame(() => {
-                newViewer.canvasRenderer.resize();
+                const canvasRect = newViewer.canvasContainer && newViewer.canvasContainer.getBoundingClientRect();
+                if (!canvasRect || canvasRect.width <= 0 || canvasRect.height <= 0) {
+                    this._needsResetOnNextVisibleLayout = true;
+                    return;
+                }
+                if (newViewer.canvasRenderer) newViewer.canvasRenderer.resize();
+                if (newViewer.minimapRenderer) {
+                    newViewer.minimapRenderer.resize();
+                    newViewer.minimapRenderer.generateThumbnail();
+                }
                 let srcViewer = null, srcNodeId = null;
                 this.viewers.forEach((v, i) => {
                     if (v === newViewer || !this._visibleViewers.has(this._viewerNames[i])) return;
@@ -994,6 +1053,10 @@ class FXGraphCompare {
         this._setViewerVisible(name, visible);
     }
 
+    refreshLayout(options = {}) {
+        this._scheduleLayoutRefresh(options);
+    }
+
     destroy() {
         this._teardownCompareDOM();
         this._offs.forEach((off) => {

devtools/fx_viewer/templates/minimap_renderer.js

@@ -168,6 +168,10 @@ class MinimapRenderer {
         this.viewer.renderAll();
     }
 
+    resetInteractionState() {
+        this.isDragging = false;
+    }
+
     render() {
         const dpr = window.devicePixelRatio || 1;
         if (this.canvas.width === 0 || this.canvas.height === 0) return;

devtools/observatory/templates/js/03_blocks.js

@@ -14,6 +14,31 @@
     evictViewerCache,
   } = OBS.utils;
 
+  function refreshCompareLayouts(container, options) {
+    if (!container || !(state.graphCompareInstances instanceof Map)) return;
+    for (const [, inst] of state.graphCompareInstances) {
+      const compare = inst && inst.compare;
+      if (!compare || !compare._root || !compare._root.isConnected) continue;
+      if (container !== compare._root && !container.contains(compare._root)) continue;
+      try {
+        if (typeof compare.refreshLayout === 'function') {
+          compare.refreshLayout(options || {});
+        } else {
+          for (const v of compare.viewers || []) {
+            try { v.canvasRenderer.resize(); } catch (_) {}
+            try {
+              if (v.minimapRenderer) {
+                v.minimapRenderer.resize();
+                v.minimapRenderer.generateThumbnail();
+              }
+            } catch (_) {}
+            try { v.renderAll(); } catch (_) {}
+          }
+        }
+      } catch (_) {}
+    }
+  }
+
   function createSection(title, storageKey, collapsible) {
     const isCollapsible = collapsible !== false;
     const isCollapsed = isCollapsible && state.viewPrefs[storageKey] === false;
@@ -36,8 +61,12 @@
       header.onclick = () => {
         content.classList.toggle('hidden');
         header.classList.toggle('collapsed');
-        state.viewPrefs[storageKey] = content.classList.contains('hidden') ? false : true;
+        const isExpanded = !content.classList.contains('hidden');
+        state.viewPrefs[storageKey] = isExpanded;
         localStorage.setItem('graphCollectorViewPrefs', JSON.stringify(state.viewPrefs));
+        if (isExpanded) {
+          requestAnimationFrame(() => refreshCompareLayouts(content));
+        }
       };
     }
 
@@ -369,8 +398,18 @@
     if (cached) {
       content.appendChild(cached.compare._root);
       requestAnimationFrame(() => {
+        if (typeof cached.compare.refreshLayout === 'function') {
+          try { cached.compare.refreshLayout(); } catch (_) {}
+          return;
+        }
         for (const v of cached.compare.viewers) {
           try { v.canvasRenderer.resize(); } catch (_) {}
+          try {
+            if (v.minimapRenderer) {
+              v.minimapRenderer.resize();
+              v.minimapRenderer.generateThumbnail();
+            }
+          } catch (_) {}
           try { v.renderAll(); } catch (_) {}
         }
       });