diff --git a/src/e3sm_quickview/app.py b/src/e3sm_quickview/app.py index d86c8b6..d0c1d7a 100644 --- a/src/e3sm_quickview/app.py +++ b/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) diff --git a/src/e3sm_quickview/components/css.py b/src/e3sm_quickview/components/css.py index 0c80d8c..e9c2048 100644 --- a/src/e3sm_quickview/components/css.py +++ b/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));" ) diff --git a/src/e3sm_quickview/components/doc.py b/src/e3sm_quickview/components/doc.py index 9a96823..ab297b5 100644 --- a/src/e3sm_quickview/components/doc.py +++ b/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. - """ - ) + """) diff --git a/src/e3sm_quickview/module/serve/utils.js b/src/e3sm_quickview/module/serve/utils.js index a0a8012..d95c036 100644 --- a/src/e3sm_quickview/module/serve/utils.js +++ b/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); diff --git a/src/e3sm_quickview/view_manager.py b/src/e3sm_quickview/view_manager.py index 054c957..174dd10 100644 --- a/src/e3sm_quickview/view_manager.py +++ b/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(): diff --git a/src/e3sm_quickview/view_panel.py b/src/e3sm_quickview/view_panel.py index 596dc2d..964ea68 100644 --- a/src/e3sm_quickview/view_panel.py +++ b/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"):