fix(topPadding): better size handling

Author: jourdain

src/e3sm_quickview/app2.py

@@ -127,6 +127,7 @@ def _build_ui(self, **_):
                 ProjectionEquidistant="projection = ['Cyl. Equidistant']",
                 ProjectionRobinson="projection = ['Robinson']",
                 ProjectionMollweide="projection = ['Mollweide']",
+                ToggleViewLock="lock_views = !lock_views",
             ) as mt:
                 mt.bind(["r"], "ResetCamera")
                 mt.bind(["alt+0", "0"], "SizeAuto")
@@ -146,7 +147,9 @@ def _build_ui(self, **_):
                 mt.bind("f", "ToolbarAnimation")
                 mt.bind("g", "ToggleGroups")
 
-                mt.bind("space", "ToggleVariableSelection")
+                mt.bind("?", "ToggleVariableSelection")
+
+                mt.bind("space", "ToggleViewLock", stop_propagation=True)
 
                 mt.bind("esc", "RemoveAllToolbars")
 
@@ -163,12 +166,7 @@ def _build_ui(self, **_):
                     with v3.VContainer(classes="h-100 pa-0", fluid=True):
                         with client.SizeObserver("main_size"):
                             # Take space to push content below the fixed overlay
-                            for value in toolbars.VALUES:
-                                v3.VToolbar(
-                                    v_show=js.is_active(value),
-                                    density=toolbars.DENSITY[value],
-                                    **toolbars.DEFAULT_STYLES,
-                                )
+                            html.Div(style=("`height: ${top_padding}px`",))
 
                             # Fixed overlay for toolbars
                             with html.Div(style=css.TOOLBARS_FIXED_OVERLAY):
@@ -432,6 +430,14 @@ async def _on_projection(self, projection, **_):
                 await asyncio.sleep(0.1)
                 self.view_manager.reset_camera()
 
+    @change("active_tools")
+    def _on_toolbar_change(self, active_tools, **_):
+        top_padding = 0
+        for name in active_tools:
+            top_padding += toolbars.SIZES.get(name, 0)
+
+        self.state.top_padding = top_padding
+
     @change(
         "variables_loaded",
         "time_idx",

src/e3sm_quickview/components/doc.py

@@ -38,7 +38,7 @@ def __init__(self):
             """,
         )
         with self, v3.Template(v_slot_append=True):
-            v3.VHotkey(keys="space", variant="contained", inline=True)
+            v3.VHotkey(keys="?", variant="contained", inline=True)
 
 
 class ToolResetCamera(Tool):
@@ -215,6 +215,11 @@ def __init__(self):
                         v3.VSpacer()
                         v3.VHotkey(keys="r", variant="contained", inline=True)
 
+                    with v3.VRow(classes="ma-0 pb-4"):
+                        v3.VLabel("Toggle view interaction lock")
+                        v3.VSpacer()
+                        v3.VHotkey(keys="space", variant="contained", inline=True)
+
                     v3.VDivider(classes="mb-4")
 
                     with v3.VRow(classes="ma-0 pb-4"):
@@ -244,7 +249,7 @@ def __init__(self):
                     with v3.VRow(classes="ma-0 pb-4"):
                         v3.VLabel("Toggle variable selection drawer")
                         v3.VSpacer()
-                        v3.VHotkey(keys="space", variant="contained", inline=True)
+                        v3.VHotkey(keys="?", variant="contained", inline=True)
 
                     v3.VDivider(classes="mb-4")
 

src/e3sm_quickview/components/toolbars.py

@@ -13,6 +13,13 @@
     "animation-controls": "compact",
 }
 
+SIZES = {
+    "adjust-layout": 49,
+    "adjust-databounds": 65,
+    "select-slice-time": 65,
+    "animation-controls": 49,
+}
+
 VALUES = list(DENSITY.keys())
 
 DEFAULT_STYLES = {

src/e3sm_quickview/view_manager2.py

@@ -183,8 +183,8 @@ def _build_ui(self):
             self.ui.root.classes = "h-100"
             with v3.VCard(
                 variant="tonal",
-                classes=(
-                    "active_layout !== 'auto_layout' ? 'h-100' : 'overflow-hidden'",
+                style=(
+                    "active_layout !== 'auto_layout' ? `height: calc(100% - ${top_padding}px;` : 'overflow-hidden'",
                 ),
                 tile=("active_layout !== 'auto_layout'",),
             ):
@@ -312,6 +312,12 @@ def _build_ui(self):
                                         ),
                                     )
 
+                    v3.VIcon(
+                        "mdi-lock-outline",
+                        size="x-small",
+                        v_show=("lock_views", False),
+                    )
+
                     v3.VSpacer()
                     html.Div(
                         "t = {{ time_idx }}",
@@ -344,6 +350,7 @@ def _build_ui(self):
                         {
                             aspectRatio: active_layout === 'auto_layout' ? aspect_ratio : null,
                             height: active_layout !== 'auto_layout' ? 'calc(100% - 2.4rem)' : null,
+                            pointerEvents: lock_views ? 'none': null,
                         }
                         """,
                     ),