Add MDI and grid layouts if app has existing viewers

glue_solara/app.py

@@ -171,9 +171,26 @@ def GlueApp(app: gj.JupyterApplication):
     requested_viewer_for_data_index = solara.use_reactive(None)
     requested_viewer_typename = solara.use_reactive("Scatter")
 
+    def make_mdi_layout(viewer):
+        class_name = viewer.__class__.__name__
+        title = TITLE_TRANSLATIONS.get(class_name, class_name)
+        return {"title": title, "width": 800, "height": 600}
+
+    def make_grid_layout(viewer_index):
+        return {
+            "h": 18,
+            "i": str(viewer_index),
+            "moved": False,
+            "w": 12,
+            "x": 0,
+            "y": 12 * viewer_index,
+        }
+
     view_type = solara.use_reactive("tabs")  # tabs, grid, mdi
-    mdi_layouts: Reactive[List[MdiWindow]] = solara.use_reactive([])
-    grid_layout: Reactive[List[Dict]] = solara.use_reactive([])
+    mdi_layouts = solara.use_reactive([make_mdi_layout(viewer) for viewer in app.viewers])
+    grid_layout = solara.use_reactive(
+        [make_grid_layout(index) for index in range(len(app.viewers))]
+    )
     mdi_header_size_index = solara.use_reactive(2)
 
     def add_data_viewer(type: str, data: glue.core.Data):
@@ -191,23 +208,8 @@ def add_data_viewer(type: str, data: glue.core.Data):
             # NOTE: some viewers should set x_att or have other checks which this skips
             app.new_data_viewer(viewer_cls, data=data, state=viewer_state_obj, show=False)
         new_viewer_index = len(app.viewers) - 1
-        grid_layout.value = [
-            *grid_layout.value,
-            {
-                "h": 18,
-                "i": str(new_viewer_index),
-                "moved": False,
-                "w": 12,
-                "x": 0,
-                "y": 12 * new_viewer_index,
-            },
-        ]
-        class_name = app.viewers[-1].__class__.__name__
-        title = TITLE_TRANSLATIONS.get(class_name, class_name)
-        mdi_layouts.value = [
-            *mdi_layouts.value,
-            {"title": title, "width": 800, "height": 600},
-        ]
+        grid_layout.value = [*grid_layout.value, make_grid_layout(len(app.viewers) - 1)]
+        mdi_layouts.value = [*mdi_layouts.value, make_mdi_layout(app.viewers[-1])]
         viewer_index.set(new_viewer_index)
 
     def request_viewer_for(data: glue.core.Data):

glue_solara/viewers/mdi/mdi.vue

@@ -2,13 +2,7 @@
   <div
     ref="main"
     @mousemove="(e) => move(e)"
-    style="
-      height: 100%;
-      max-height: 100%;
-      max-width: 100%;
-      position: relative;
-      overflow: hidden;
-    "
+    style="height: 100%; max-height: 100%; max-width: 100%; overflow: hidden"
     @mouseup="mouseup"
   >
     <div