Fix sticky toolbar

src/e3sm_quickview/app.py

@@ -61,6 +61,8 @@ def __init__(self, server=None):
                 "timestamps": [],
                 # Fields summaries
                 "fields_avgs": {},
+                # Screenshot scaling
+                "scale": 1,
             }
         )
 
@@ -234,23 +236,27 @@ def _build_ui(self, **_):
                     drawers.FieldSelection(load_variables=self.data_load_variables)
 
                     with v3.VContainer(classes="h-100 pa-0", fluid=True):
-                        with client.SizeObserver("main_size"):
-                            # Sticky toolbar overlay
-                            with html.Div(style=css.TOOLBARS_FIXED_OVERLAY):
-                                client.SizeObserver(
-                                    "toolbar_size",
-                                    style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;",
-                                )
-                                toolbars.Layout(
-                                    apply_size=self.view_manager.apply_size,
-                                    zoom=self.view_manager.zoom,
-                                    pan=self.view_manager.pan,
-                                    reset_camera=self.view_manager.reset_camera,
-                                )
-                                toolbars.Cropping()
-                                toolbars.DataSelection()
-                                toolbars.Animation()
-
+                        # Sticky toolbar overlay
+                        with html.Div(style=css.TOOLBARS_FIXED_OVERLAY):
+                            client.SizeObserver(
+                                "toolbar_size",
+                                style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;",
+                            )
+                            toolbars.Layout(
+                                apply_size=self.view_manager.apply_size,
+                                zoom=self.view_manager.zoom,
+                                pan=self.view_manager.pan,
+                                reset_camera=self.view_manager.reset_camera,
+                            )
+                            toolbars.Cropping()
+                            toolbars.DataSelection()
+                            toolbars.Animation()
+
+                        with html.Div(
+                            style=(
+                                "`height: calc(100vh - ${toolbar_size?.size?.height || 0}px`",
+                            )
+                        ):
                             # View of all the variables
                             if self.view_manager.use_image_stream:
                                 with rca.ImageStream(
@@ -730,6 +736,7 @@ def toggle_toolbar(self, toolbar_name=None):
 # -------------------------------------------------------------------------
 def main():
     app = EAMApp()
+    app.server.cli.set_defaults(port=0)
     app.server.start(show_connection_info=False, open_browser=False)
 
 

src/e3sm_quickview/components/css.py

@@ -4,7 +4,7 @@
 )
 
 TOOLBARS_FIXED_OVERLAY = (
-    "`position:sticky;top:0;width:${Math.floor(main_size?.size?.width || 0)}px;z-index:1;background:rgb(var(--v-theme-surface));`",
+    "position:relative;width:100%;z-index:1;background:rgb(var(--v-theme-surface));"
 )
 
 

src/e3sm_quickview/components/doc.py

@@ -168,7 +168,10 @@ def __str__(self):
 
 class LandingPage(v3.VContainer):
     def __init__(self):
-        super().__init__(classes="pa-6 pa-md-12")
+        super().__init__(
+            classes="pa-6 pa-md-12 overflow-auto",
+            style=("`height: calc(100vh - ${toolbar_size?.size?.height || 0}px`",),
+        )
 
         with self:
             with html.P(
@@ -188,23 +191,22 @@ def __init__(self):
                 The physical quantities are presented in the form of global or regional maps.
                 Currently, QuickView supports only the cubed-sphere "physics" grids,
                 i.e., the ne*pg2 meshes used by the atmosphere component of the
-                {Link("Energy Exascale Earth System Model (E3SM)","https://e3sm.org/")},
-                but extensions to other grids are underway. 
+                {Link("Energy Exascale Earth System Model (E3SM)", "https://e3sm.org/")},
+                but extensions to other grids are underway.
                 QuickView's Python and {Link("trame", "https://www.kitware.com/trame/")}-based
                 graphical User Interface (UI) provides the users with intuitive access to
                 {Link("ParaView", "https://www.paraview.org/")}'s powerful analysis
                 and visualization capabilities without requiring a steep learning curve.
                 A detailed {Bold("User's Guide")} can be found through
-                {Link("this link","https://kitware.github.io/QuickView/guides/quickview/")}.
+                {Link("this link", "https://kitware.github.io/QuickView/guides/quickview/")}.
                 {Bold("Bug reports")} and feature requests can be submitted on
-                {Link("GitHub","https://github.com/Kitware/QuickView/issues")}.
+                {Link("GitHub", "https://github.com/Kitware/QuickView/issues")}.
             """)
 
-#           v3.VImg(
-#               classes="rounded-lg",
-#               src=ASSETS.banner,
-#           )
-
+            # v3.VImg(
+            #     classes="rounded-lg",
+            #     src=ASSETS.banner,
+            # )
 
             Title("Toolbar Icons")
 
@@ -236,10 +238,10 @@ def __init__(self):
                         v3.VSpacer()
                         v3.VHotkey(keys="z", 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)
+                    # 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")
 
@@ -347,16 +349,22 @@ def __init__(self):
                 {Link("Pacific Northwest National Laboratory", "https://www.pnnl.gov/")}
                 using funding from the U.S. Department of Energy's SciDAC program
                 through a partnership between
-                the {Link("Advanced Scientific Computing Reaserch (ASCR)",
-                "https://www.energy.gov/science/ascr/advanced-scientific-computing-research")} program and
-                the {Link("Biological and Environmental Research (BER)",
-                "https://www.energy.gov/science/ber/biological-and-environmental-research")} program.
-            """
-            )
+                the {
+                Link(
+                    "Advanced Scientific Computing Reaserch (ASCR)",
+                    "https://www.energy.gov/science/ascr/advanced-scientific-computing-research",
+                )
+            } program and
+                the {
+                Link(
+                    "Biological and Environmental Research (BER)",
+                    "https://www.energy.gov/science/ber/biological-and-environmental-research",
+                )
+            } program.
+            """)
 
             Paragraph(f"""
                 The development of QuickView used resources of the
-                {Link("National Energy Research Scientific Computing Center (NERSC)","https://www.nersc.gov/")},
+                {Link("National Energy Research Scientific Computing Center (NERSC)", "https://www.nersc.gov/")},
                 a U.S. Department of Energy User Facility.
-            """
-            )
+            """)

src/e3sm_quickview/module/serve/utils.js

@@ -334,7 +334,9 @@ window.trame.utils.quickview = {
   },
   async capturePanel(fieldName) {
     const fileName = getFileName(fieldName);
-    const canvas = await html2canvas(findContainerToCapture(fieldName));
+    const canvas = await html2canvas(findContainerToCapture(fieldName), {
+      // scale: trame.state.state.scale,
+    });
     const dataURL = canvas.toDataURL("image/png");
     if (isTauri) {
       tauriSave("Save screenshot", dataURL, fileName);

src/e3sm_quickview/view_manager.py

@@ -304,6 +304,7 @@ def compute_layout(self, variables=None):
 
         views = []
         view_size = [0, 0]
+        scale = self.state.scale
         fullscreen_view = None
         fullscreen_view_name = self.state.active_layout
         for var_type, var_names in variables.items():
@@ -335,8 +336,8 @@ def compute_layout(self, variables=None):
         width_count = math.ceil(math.sqrt(size))
         height_count = math.ceil(size / width_count)
         full_size = [
-            view_size[0] * width_count,
-            view_size[1] * height_count,
+            view_size[0] * width_count * scale,
+            view_size[1] * height_count * scale,
         ]
 
         # Update RenderView
@@ -404,7 +405,11 @@ def build_auto_layout(self, variables=None):
         # Vuetify color per dimension type (e.g. midpoint, interface) via utils/colors.py
         type_to_color = {vt["name"]: vt["color"] for vt in self.state.variable_types}
         with DivLayout(self.server, template_name="auto_layout") as self.ui:
-            self.ui.root.classes = "all-variables"
+            self.ui.root.classes = "all-variables overflow-auto"
+            self.ui.root.style = (
+                "`height: calc(100vh - ${toolbar_size?.size?.height || 0}px`",
+            )
+
             if self.state.layout_grouped:
                 with v3.VCol(classes="pa-1"):
                     for var_type in variables.keys():

src/e3sm_quickview/view_panel.py

@@ -111,7 +111,7 @@ def _build_ui(self):
             with v3.VCard(
                 variant="tonal",
                 style=(
-                    "active_layout !== 'auto_layout' ? `height: calc(100% - ${toolbar_size?.size?.height || 0}px)` : 'overflow-hidden'",
+                    "active_layout !== 'auto_layout' ? `height: 100%` : 'overflow-hidden'",
                 ),
                 tile=("active_layout !== 'auto_layout'",),
                 raw_attrs=[f'data-field-name="{self.variable_name}"'],
@@ -225,7 +225,7 @@ def _build_ui(self):
                                 send_mouse_move=(
                                     f"picking_mode === 'hover' && hover_info === '{self.variable_name}'",
                                 ),
-                                v_on_wheel="window.scrollBy(0, $event.deltaY)",
+                                v_on_wheel="window.document.querySelector('.all-variables')?.scrollBy(0, $event.deltaY)",
                             )
 
                     with v3.VTable(density="compact", theme="dark", striped="even"):