Add FullScreenResizeHandler to resize GUI views (#18)

Author: alejoe91

Dockerfile

@@ -23,19 +23,13 @@ RUN wget "https://www.wavpack.com/wavpack-${WAVPACK_VERSION}.tar.bz2" && \
 RUN pip install wavpack-numcodecs
 
 # Install spikeinterface from source
-RUN git clone https://github.com/SpikeInterface/spikeinterface.git && \
-    cd spikeinterface && \
-    git checkout f732780fd88f5802033b57c9bb9b06229ec7de30 && \
-    pip install . && cd ..
+RUN pip install spikeinterface==0.104.1
 
 # Force scikit-learn to 1.6.1 to avoid issues with newer versions
 RUN pip install scikit-learn==1.6.1
 
 # Install spikeinterface-gui from source
-RUN git clone https://github.com/alejoe91/spikeinterface-gui.git && \
-    cd spikeinterface-gui && \
-    git checkout 47999372e405f5d7a435072ca3015a9fd1b9812c && \
-    pip install . && cd ..
+RUN pip install spikeinterface-gui==0.13.1
 
 
 ENV PYTHONUNBUFFERED=1

src/aind_ephys_portal/panel/ephys_gui.py

@@ -18,7 +18,7 @@
 from spikeinterface.curation import validate_curation_dict
 
 from aind_ephys_portal.panel.logging import setup_logging, local_log_context
-from aind_ephys_portal.panel.utils import PostMessageListener
+from aind_ephys_portal.panel.utils import PostMessageListener, FullscreenResizeHandler
 
 
 displayed_unit_properties = [
@@ -111,6 +111,9 @@ def delayed_init():
                 sizing_mode="stretch_both",
             )
 
+    def create_fullscreen_resize_listener(self):
+        return FullscreenResizeHandler()
+
     def create_post_message_listener(self):
         if self.identifier is not None:
             listener = PostMessageListener()
@@ -212,13 +215,15 @@ def _initialize(self):
                         # Add custom curation callback to send data to parent window
                         self.submit_trigger = self.create_submit_trigger()
                         # Add postMessage listener to receive data from parent window
-                        self.listener = self.create_post_message_listener()
+                        self.curation_listener = self.create_post_message_listener()
+                        self.fullscreen_listener = self.create_fullscreen_resize_listener()
 
                     self.win_layout = self._create_main_window()
                     self.layout[0] = self.win_layout
                     if self.identifier is not None:
                         self.layout.append(self.submit_trigger)
-                        self.layout.append(self.listener)
+                        self.layout.append(self.curation_listener)
+                        self.layout.append(self.fullscreen_listener)
 
                     print("\nEphys GUI initialized successfully!")
                     t_stop = time.perf_counter()
@@ -231,7 +236,9 @@ def _initialize(self):
 
             if error is not None:
                 print(f"Error during initialization: {error}")
-                self.layout[0] = pn.pane.Markdown(f"⚠️ Error during initialization: {error}", sizing_mode="stretch_both")
+                self.layout = pn.Column(
+                    pn.pane.Markdown(f"⚠️ Error during initialization: {error}", sizing_mode="stretch_both")
+                )
             else:
                 final_mem = psutil.virtual_memory()
                 final_ram_usage = final_mem.used / (1024**3)
@@ -320,8 +327,9 @@ def cleanup(self):
         current_ram_usage = initial_mem.used / (1024**3)
         print(f"\nRAM Usage before cleanup: {current_ram_usage:.2f} / {total_ram:.2f} GB\n")
 
-        # 1) Clear postMessage listener and submit trigger (they hold bound-method back-refs to self)
-        self.listener = None
+        # 1) Clear postMessage listeners and submit trigger (they hold bound-method back-refs to self)
+        self.curation_listener = None
+        self.fullscreen_listener = None
         self.submit_trigger = None
 
         # 2) Release GUI controller and all its data

src/aind_ephys_portal/panel/utils.py

@@ -59,6 +59,72 @@ def format_css_background():
 
 
 
+class FullscreenResizeHandler(ReactComponent):
+    """
+    Pure-JS component that listens for 'fullscreen-resize' postMessages and
+    forces Bokeh to re-measure canvas sizes without any Python layout rebuild.
+
+    Bokeh 3.x uses ResizeObserver (not window.resize events) to detect size
+    changes. We trigger it by briefly collapsing the Bokeh root element to 1px
+    then removing the override — ResizeObserver fires on the size delta, Bokeh
+    re-renders at the new (fullscreen) container dimensions.
+
+    This avoids the destructive Python layout swap (remove + re-add) which
+    loses Bokeh event handler routing (e.g. selectiongeometry) and resets
+    toolbar.active_drag, breaking the lasso selection tool.
+    """
+
+    _esm = """
+    export function render({ model }) {
+      React.useEffect(() => {
+        function triggerResize() {
+          // 1) BokehJS API — invalidate layout on all registered views.
+          //    Bokeh.index is a plain object in Bokeh 3.x ({id: view, ...}).
+          try {
+            if (window.Bokeh && window.Bokeh.index) {
+              Object.values(window.Bokeh.index).forEach(view => {
+                if (view) {
+                  view.invalidate_layout?.();
+                  view.invalidate_render?.();
+                }
+              });
+            }
+          } catch(e) {
+            console.warn("[FullscreenResizeHandler] BokehJS API error:", e);
+          }
+
+          // 2) Force ResizeObserver to fire by briefly collapsing the Bokeh
+          //    root element then removing the override (one animation frame)
+          const roots = document.querySelectorAll("[data-root-id]");
+          roots.forEach(el => {
+            el.style.setProperty("width",  "1px", "important");
+            el.style.setProperty("height", "1px", "important");
+          });
+          requestAnimationFrame(() => {
+            roots.forEach(el => {
+              el.style.removeProperty("width");
+              el.style.removeProperty("height");
+            });
+            // 3) window.resize fallback for older Bokeh / Panel versions
+            window.dispatchEvent(new Event("resize"));
+          });
+        }
+
+        function onMessage(event) {
+          const data = event.data;
+          if (!data || data.type !== "fullscreen-resize") return;
+          triggerResize();
+          setTimeout(triggerResize, 300);
+        }
+
+        window.addEventListener("message", onMessage);
+        return () => window.removeEventListener("message", onMessage);
+      }, []);
+      return <></>;
+    }
+    """
+
+
 class PostMessageListener(ReactComponent):
     """
     Listen to window.postMessage events and forward them to Python via on_msg().