Merge branch 'quickview'

Author: willdunklin

docs/setup/for_app_developers.md

@@ -33,12 +33,12 @@ pip install -e .
 
 To launch the EAM QuickView GUI in its dedicated window, use
 ```
-python -m quickview.app --data /path/to/your/data.nc --conn /path/to/connectivity.nc
+quickview -data /path/to/your/data.nc --con /path/to/connectivity.nc
 ```
 
 To launch server only (no browser popup), use
 ```
-python -m quickview.app --data /path/to/your/data.nc --conn /path/to/connectivity.nc --server
+quickview -df /path/to/your/data.nc -cf /path/to/connectivity.nc --server
 ```
 
 ----

pyproject.toml

@@ -40,6 +40,9 @@ tauri = [
 vue2 = [
     "trame-grid-layout>=1.0.3",
 ]
+jupyter = [
+    "jupyter-server-proxy>=4.0.0",
+]
 
 
 [build-system]
@@ -53,6 +56,7 @@ include = [
   "/src/e3sm_quickview/data/**",
   "/src/e3sm_quickview/assets/**",
   "/src/e3sm_quickview/module/**",
+  "/src/e3sm_quickview/jupyter/**",
 ]
 
 [tool.hatch.build.targets.wheel]
@@ -64,6 +68,9 @@ packages = [
 quickview-vue2 = "e3sm_quickview.app:main"
 quickview = "e3sm_quickview.app:main"
 
+[project.entry-points."jupyter_serverproxy_servers"]
+quickview = "e3sm_quickview.jupyter:setup_quickview"
+
 [tool.ruff.lint.per-file-ignores]
 # Ignore star import issues in ParaView plugins
 "e3sm_quickview/plugins/*.py" = ["F403", "F405"]

src/e3sm_quickview/app.py

@@ -1,23 +1,23 @@
 import asyncio
-import json
 import datetime
+import json
 import os
-
 from pathlib import Path
 
 from trame.app import TrameApp, asynchronous, file_upload
+from trame.decorators import change, controller, life_cycle, trigger
 from trame.ui.vuetify3 import VAppLayout
-from trame.widgets import vuetify3 as v3, client, html, dataclass, trame as tw, tauri
-from trame.decorators import controller, change, trigger, life_cycle
+from trame.widgets import client, dataclass, html, tauri
+from trame.widgets import trame as tw
+from trame.widgets import vuetify3 as v3
 
 from e3sm_quickview import module as qv_module
 from e3sm_quickview.assets import ASSETS
-from e3sm_quickview.components import doc, file_browser, css, toolbars, dialogs, drawers
+from e3sm_quickview.components import css, dialogs, doc, drawers, file_browser, toolbars
 from e3sm_quickview.pipeline import EAMVisSource
-from e3sm_quickview.utils import compute, cli
+from e3sm_quickview.utils import cli, compute
 from e3sm_quickview.view_manager import ViewManager
 
-
 v3.enable_lab()
 
 
@@ -138,7 +138,7 @@ def _build_ui(self, **_):
                 UploadState="utils.get('document').querySelector('#fileUpload').click()",
                 ToggleHelp="compact_drawer = !compact_drawer",
             ) as mt:
-                mt.bind(["r"], "ResetCamera")
+                mt.bind(["z"], "ResetCamera")
                 mt.bind(["alt+0", "0"], "SizeAuto")
                 mt.bind(["alt+1", "1"], "Size1")
                 mt.bind(["alt+2", "2"], "Size2")
@@ -147,17 +147,17 @@ def _build_ui(self, **_):
                 mt.bind(["alt+6", "6"], "Size6")
                 mt.bind(["="], "SizeFlow")
 
-                mt.bind("e", "ProjectionEquidistant")
-                mt.bind("b", "ProjectionRobinson")
+                mt.bind("c", "ProjectionEquidistant")
+                mt.bind("r", "ProjectionRobinson")
                 mt.bind("m", "ProjectionMollweide")
 
                 mt.bind("f", "FileOpen")
                 mt.bind("d", "SaveState")
                 mt.bind("u", "UploadState")
                 mt.bind("h", "ToggleHelp")
 
-                mt.bind("l", "ToolbarLayout")
-                mt.bind("c", "ToolbarCrop")
+                mt.bind("p", "ToolbarLayout")
+                mt.bind("l", "ToolbarCrop")
                 mt.bind("s", "ToolbarSelect")
                 mt.bind("a", "ToolbarAnimation")
                 mt.bind("g", "ToggleGroups")
@@ -388,7 +388,7 @@ async def data_loading_open(self, simulation_files, connectivity):
                     *(
                         {
                             "name": var.name,
-                            "type": str(var.dimensions),
+                            "type": ", ".join(var.dimensions),
                             "id": f"{var.name}",
                         }
                         for _, var in self.source.varmeta.items()
@@ -399,7 +399,10 @@ async def data_loading_open(self, simulation_files, connectivity):
                 from e3sm_quickview.utils.colors import get_type_color
 
                 dim_types = sorted(
-                    set(str(var.dimensions) for var in self.source.varmeta.values())
+                    set(
+                        ", ".join(var.dimensions)
+                        for var in self.source.varmeta.values()
+                    )
                 )
                 self.state.variable_types = [
                     {"name": t, "color": get_type_color(i)}

src/e3sm_quickview/components/doc.py

@@ -1,6 +1,7 @@
-from trame.widgets import vuetify3 as v3, html
-from e3sm_quickview.assets import ASSETS
+from trame.widgets import html
+from trame.widgets import vuetify3 as v3
 
+from e3sm_quickview.assets import ASSETS
 
 # -----------------------------------------------------------------------------
 # Tools
@@ -22,7 +23,7 @@ def __init__(self, icon, title, description):
 class ToolFileLoading(Tool):
     def __init__(self):
         super().__init__(
-            icon="mdi-file-document-outline",
+            icon="mdi-file-upload-outline",
             title="File loading",
             description="Load files to explore. Those could be simulation and connectivity files or even a state file pointing to those files.",
         )
@@ -34,9 +35,9 @@ class ToolFieldSelection(Tool):
     def __init__(self):
         super().__init__(
             icon="mdi-list-status",
-            title="Fields selection",
+            title="Variable selection",
             description="""
-                Select the variables to visualize. You need to load files prior any field selection.
+                Select the variables to visualize. You need to load files prior any variable selection.
             """,
         )
         with self, v3.Template(v_slot_append=True):
@@ -46,12 +47,12 @@ def __init__(self):
 class ToolResetCamera(Tool):
     def __init__(self):
         super().__init__(
-            icon="mdi-crop-free",
-            title="Reset camera",
+            icon="mdi-fit-to-page-outline",
+            title="Auto zoom",
             description="Recenter the visualizations to the full data.",
         )
         with self, v3.Template(v_slot_append=True):
-            v3.VHotkey(keys="r", variant="contained", inline=True)
+            v3.VHotkey(keys="z", variant="contained", inline=True)
 
 
 class ToolStateImportExport(Tool):
@@ -74,31 +75,31 @@ def __init__(self):
             description="Select projection to use for the visualizations. (Cylindrical Equidistant, Robinson, Mollweide)",
         )
         with self, v3.Template(v_slot_append=True):
-            v3.VHotkey(keys="e", variant="contained", inline=True)
-            v3.VHotkey(keys="b", variant="contained", inline=True)
+            v3.VHotkey(keys="c", variant="contained", inline=True)
+            v3.VHotkey(keys="r", variant="contained", inline=True)
             v3.VHotkey(keys="m", variant="contained", inline=True)
 
 
 class ToolLayoutManagement(Tool):
     def __init__(self):
         super().__init__(
             icon="mdi-collage",
-            title="Layout management",
-            description="Toggle layout toolbar for adjusting aspect-ratio, width and grouping options.",
+            title="Viewport layout",
+            description="Toggle viewport layout toolbar for adjusting aspect-ratio, width and grouping options.",
         )
         with self, v3.Template(v_slot_append=True):
-            v3.VHotkey(keys="l", variant="contained", inline=True)
+            v3.VHotkey(keys="p", variant="contained", inline=True)
 
 
 class ToolCropping(Tool):
     def __init__(self):
         super().__init__(
-            icon="mdi-crop",
+            icon="mdi-web",
             title="Lat/Long cropping",
             description="Toggle cropping toolbar for adjusting spacial bounds.",
         )
         with self, v3.Template(v_slot_append=True):
-            v3.VHotkey(keys="c", variant="contained", inline=True)
+            v3.VHotkey(keys="l", variant="contained", inline=True)
 
 
 class ToolDataSelection(Tool):
@@ -115,7 +116,7 @@ def __init__(self):
 class ToolAnimation(Tool):
     def __init__(self):
         super().__init__(
-            icon="mdi-movie-open-cog-outline",
+            icon="mdi-video",
             title="Animation controls",
             description="Toggle animation toolbar.",
         )
@@ -184,7 +185,7 @@ def __init__(self):
                 {Bold("EAM QuickView")} is an open-source, interactive visualization
                 tool designed for scientists working with the atmospheric component
                 of the {Link("Energy Exascale Earth System Model (E3SM)", "https://e3sm.org/")},
-                known as the E3SM Atmosphere Model (EAM). 
+                known as the E3SM Atmosphere Model (EAM).
                 Its Python- and {Link("Trame", "https://www.kitware.com/trame/")}-based
                 Graphical User Interface (GUI) provides intuitive access to {Link("ParaView's", "https://www.paraview.org/")} powerful analysis
                 and visualization capabilities, without the steep learning curve.
@@ -221,9 +222,9 @@ def __init__(self):
                         v3.VHotkey(keys="h", variant="contained", inline=True)
 
                     with v3.VRow(classes="ma-0 pb-4"):
-                        v3.VLabel("Reset Camera")
+                        v3.VLabel("Auto zoom")
                         v3.VSpacer()
-                        v3.VHotkey(keys="r", variant="contained", inline=True)
+                        v3.VHotkey(keys="z", variant="contained", inline=True)
 
                     with v3.VRow(classes="ma-0 pb-4"):
                         v3.VLabel("Toggle view interaction lock")
@@ -250,13 +251,13 @@ def __init__(self):
                     v3.VDivider(classes="mb-4")
 
                     with v3.VRow(classes="ma-0 pb-4"):
-                        v3.VLabel("Toggle Layout management toolbar")
+                        v3.VLabel("Toggle viewport layout toolbar")
                         v3.VSpacer(classes="mt-2")
-                        v3.VHotkey(keys="l", variant="contained", inline=True)
+                        v3.VHotkey(keys="p", variant="contained", inline=True)
                     with v3.VRow(classes="ma-0 pb-4"):
                         v3.VLabel("Toggle Lat/Long cropping toolbar")
                         v3.VSpacer()
-                        v3.VHotkey(keys="c", variant="contained", inline=True)
+                        v3.VHotkey(keys="l", variant="contained", inline=True)
                     with v3.VRow(classes="ma-0 pb-4"):
                         v3.VLabel("Toggle Slice selection toolbar")
                         v3.VSpacer()
@@ -292,10 +293,10 @@ def __init__(self):
                     with v3.VList(density="compact", classes="pa-0 ma-0"):
                         with v3.VListItem(subtitle="Cylindrical Equidistant"):
                             with v3.Template(v_slot_append="True"):
-                                v3.VHotkey(keys="e", variant="contained", inline=True)
+                                v3.VHotkey(keys="c", variant="contained", inline=True)
                         with v3.VListItem(subtitle="Robinson"):
                             with v3.Template(v_slot_append="True"):
-                                v3.VHotkey(keys="b", variant="contained", inline=True)
+                                v3.VHotkey(keys="r", variant="contained", inline=True)
                         with v3.VListItem(subtitle="Mollweide"):
                             with v3.Template(v_slot_append="True"):
                                 v3.VHotkey(keys="m", variant="contained", inline=True)
@@ -334,7 +335,7 @@ def __init__(self):
                 """
                 QuickView has been developed using EAM's history output on
                 the physics grids (pg2 grids) written by EAMv2, v3, and an
-                intermediate version towards v4 (EAMxx). 
+                intermediate version towards v4 (EAMxx).
                 Those sample output files can be found on Zenodo.
                 """
             )

src/e3sm_quickview/components/drawers.py

@@ -1,9 +1,10 @@
 from trame.decorators import change
-from trame.widgets import html, vuetify3 as v3
+from trame.widgets import html
+from trame.widgets import vuetify3 as v3
 
 from e3sm_quickview import __version__ as quickview_version
 from e3sm_quickview.components import css, tools
-from e3sm_quickview.utils import js, constants
+from e3sm_quickview.utils import constants, js
 
 
 class Tools(v3.VNavigationDrawer):
@@ -24,24 +25,28 @@ def __init__(self, reset_camera=None):
                     v_model_selected=("active_tools", ["load-data"]),
                 ):
                     tools.AppLogo()
-                    tools.OpenFile()
-                    tools.FieldSelection()
-                    tools.MapProjection()
                     tools.ResetCamera(click=reset_camera)
 
                     v3.VDivider(classes="my-1")  # ---------------------
 
-                    tools.LayoutManagement()
-                    tools.Cropping()
+                    tools.StateImportExport()
+                    tools.OpenFile()
+
+                    v3.VDivider(classes="my-1")  # ---------------------
+
+                    tools.FieldSelection()
                     tools.DataSelection()
                     tools.Animation()
 
                     v3.VDivider(classes="my-1")  # ---------------------
 
-                    tools.StateImportExport()
+                    tools.LayoutManagement()
+                    tools.MapProjection()
+                    tools.Cropping()
 
                     # dev add-on ui reload
                     if self.server.hot_reload:
+                        v3.VDivider(classes="my-1")  # ---------------------
                         tools.ActionButton(
                             compact="compact_drawer",
                             title="Refresh UI",
@@ -112,7 +117,8 @@ def __init__(self, load_variables=None):
                             hide_details=True,
                         )
 
-                with v3.VCardActions(classes="px-2"):
+                # with v3.VCardActions(classes="px-2"):
+                with v3.VCardActions(classes="pb-0", style="min-height: 0;"):
                     v3.VBtn(
                         classes="text-none",
                         color="primary",
@@ -126,6 +132,27 @@ def __init__(self, load_variables=None):
                             "variables_selected.length === 0 || variables_loaded",
                         ),
                         click=load_variables,
+                        block=True,
+                    )
+                with v3.VCardActions(
+                    key="variables_selected.length",
+                    classes="flex-wrap py-1",
+                    style="overflow-y: auto; max-height: 100px; min-height: 42px;",
+                ):
+                    v3.VChip(
+                        "{{ variables_selected.filter(id => variables_listing.find(v => v.id === id)?.type === vtype.name).length }} {{ vtype.name }}",
+                        v_for="(vtype, idx) in variable_types",
+                        key="idx",
+                        color=("vtype.color",),
+                        v_show=(
+                            "variables_selected.filter(id => variables_listing.find(v => v.id === id)?.type === vtype.name).length",
+                        ),
+                        size="small",
+                        closable=True,
+                        click_close=(
+                            "variables_selected = variables_selected.filter(id => variables_listing.find(v => v.id === id)?.type !== vtype.name)"
+                        ),
+                        classes="ma-1",
                     )
 
                 v3.VTextField(