fix : Adding UI fixes for arbitrary dimension selections

Author: ayenpure

src/e3sm_quickview/app.py

@@ -14,7 +14,7 @@
 from e3sm_quickview.assets import ASSETS
 from e3sm_quickview.components import doc, file_browser, css, toolbars, dialogs, drawers
 from e3sm_quickview.pipeline import EAMVisSource
-from e3sm_quickview.utils import compute, js, constants, cli
+from e3sm_quickview.utils import compute, cli
 from e3sm_quickview.view_manager import ViewManager
 
 
@@ -45,6 +45,8 @@ def __init__(self, server=None):
                 "variables_selected": [],
                 # Control 'Load Variables' button availability
                 "variables_loaded": False,
+                # Dynamic type-color mapping (populated when data loads)
+                "variable_types": [],
                 # Dimension arrays (will be populated dynamically)
                 "midpoints": [],
                 "interfaces": [],
@@ -205,6 +207,7 @@ def _build_ui(self, **_):
     @property
     def selected_variables(self):
         from collections import defaultdict
+
         vars_per_type = defaultdict(list)
         for var in self.state.variables_selected:
             type = self.source.varmeta[var].dimensions
@@ -365,18 +368,39 @@ async def data_loading_open(self, simulation, connectivity):
                 self.state.variables_filter = ""
                 self.state.variables_listing = [
                     *(
-                        {"name": var.name, "type": str(var.dimensions), "id": f"{var.name}"}
+                        {
+                            "name": var.name,
+                            "type": str(var.dimensions),
+                            "id": f"{var.name}",
+                        }
                         for _, var in self.source.varmeta.items()
                     ),
                 ]
 
+                # Build dynamic type-color mapping
+                from e3sm_quickview.utils.colors import get_type_color
+
+                dim_types = sorted(
+                    set(str(var.dimensions) for var in self.source.varmeta.values())
+                )
+                self.state.variable_types = [
+                    {"name": t, "color": get_type_color(i)}
+                    for i, t in enumerate(dim_types)
+                ]
+
                 # Update Layer/Time values and ui layout
                 n_cols = 0
                 available_tracks = []
                 for name, dim in self.source.dimmeta.items():
                     values = dim.data
                     # Convert to list for JSON serialization
-                    self.state[name] = values.tolist() if hasattr(values, 'tolist') else list(values) if values is not None else []
+                    self.state[name] = (
+                        values.tolist()
+                        if hasattr(values, "tolist")
+                        else list(values)
+                        if values is not None
+                        else []
+                    )
                     if values is not None and len(values) > 1:
                         n_cols += 1
                         available_tracks.append({"title": name, "value": name})
@@ -387,8 +411,9 @@ async def data_loading_open(self, simulation, connectivity):
                     if available_tracks
                     else None
                 )
-                
+
                 from functools import partial
+
                 # Initialize dynamic index variables for each dimension
                 for track in available_tracks:
                     dim_name = track["value"]
@@ -397,7 +422,9 @@ async def data_loading_open(self, simulation, connectivity):
                         self.state[index_var] = 50
                     else:
                         self.state[index_var] = 0
-                    self.state.change(index_var)(partial(self._on_slicing_change, dim_name, index_var))
+                    self.state.change(index_var)(
+                        partial(self._on_slicing_change, dim_name, index_var)
+                    )
 
     @controller.set("file_selection_cancel")
     def data_loading_hide(self):
@@ -414,10 +441,8 @@ async def _data_load_variables(self):
 
         # Flatten the list of lists
         flattened_vars = [var for var_list in vars_to_show.values() for var in var_list]
-        
-        self.source.LoadVariables(
-            flattened_vars
-        )
+
+        self.source.LoadVariables(flattened_vars)
 
         # Trigger source update + compute avg
         with self.state:
@@ -461,7 +486,7 @@ def _on_toolbar_change(self, active_tools, **_):
             if name == "select-slice-time":
                 track_count = len(self.state.animation_tracks or [])
                 rows_needed = max(1, (track_count + 2) // 3)  # 3 sliders per row
-                top_padding += 65 * rows_needed
+                top_padding += 70 * rows_needed
             else:
                 top_padding += toolbars.SIZES.get(name, 0)
 

src/e3sm_quickview/components/drawers.py

@@ -68,20 +68,26 @@ def __init__(self, load_variables=None):
 
         with self:
             with html.Div(style="position:fixed;top:0;width: 500px;"):
-                with v3.VCardActions(key="variables_selected.length"):
-                    for name, color in [
-                        ("surfaces", "success"),
-                        ("interfaces", "info"),
-                        ("midpoints", "warning"),
-                    ]:
-                        v3.VChip(
-                            js.var_title(name),
-                            color=color,
-                            v_show=js.var_count(name),
-                            size="small",
-                            closable=True,
-                            click_close=js.var_remove(name),
-                        )
+                with v3.VCardActions(
+                    key="variables_selected.length",
+                    classes="flex-wrap",
+                    style="overflow-y: auto; max-height: 100px;",
+                ):
+                    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.VSpacer()
                     v3.VBtn(

src/e3sm_quickview/components/toolbars.py

@@ -5,7 +5,7 @@
 from trame.widgets import html, vuetify3 as v3, client
 
 
-from e3sm_quickview.utils import js, constants
+from e3sm_quickview.utils import js
 
 DENSITY = {
     "adjust-layout": "compact",
@@ -17,7 +17,7 @@
 SIZES = {
     "adjust-layout": 49,
     "adjust-databounds": 65,
-    "select-slice-time": 65,
+    "select-slice-time": 70,
     "animation-controls": 49,
 }
 
@@ -236,24 +236,30 @@ def __init__(self):
 class DataSelection(html.Div):
     def __init__(self):
         style = to_kwargs("select-slice-time")
-        style["classes"] = style["classes"] # + " d-flex align-center"
+        # Use style instead of d-flex class to avoid !important override of v-show
+        # Add background color to match VToolbar appearance
+        style["style"] = (
+            "display: flex; align-items: center; background: rgb(var(--v-theme-surface));"
+        )
         super().__init__(**style)
 
         with self:
-            v3.VIcon("mdi-tune-variant", classes="ml-3 opacity-50")
-        
-            with v3.VRow(classes="ma-0 pr-2 flex-wrap", dense=True):
+            v3.VIcon("mdi-tune-variant", classes="ml-3 mr-2 opacity-50")
+
+            with v3.VRow(classes="ma-0 pr-2 flex-wrap flex-grow-1", dense=True):
                 # Debug: Show animation_tracks array
                 # html.Div("Animation Tracks: {{ JSON.stringify(animation_tracks) }}", classes="col-12")
                 # Each track gets a column (3 per row)
                 with v3.VCol(
                     cols=4,
                     v_for="(track, idx) in animation_tracks",
                     key="idx",
-                    classes="pa-2"
+                    classes="pa-2",
                 ):
                     with client.Getter(name=("track.value",), value_name="t_values"):
-                        with client.Getter(name=("track.value + '_idx'",), value_name="t_idx"):
+                        with client.Getter(
+                            name=("track.value + '_idx'",), value_name="t_idx"
+                        ):
                             with v3.VRow(classes="ma-0 align-center", dense=True):
                                 v3.VLabel(
                                     "{{track.title}}",
@@ -266,9 +272,12 @@ def __init__(self):
                                 )
                             v3.VSlider(
                                 model_value=("t_idx",),
-                                update_modelValue=(self.on_update_slider, "[track.value, $event]"),
+                                update_modelValue=(
+                                    self.on_update_slider,
+                                    "[track.value, $event]",
+                                ),
                                 min=0,
-                                #max=100,#("get(track.value).length - 1",),
+                                # max=100,#("get(track.value).length - 1",),
                                 max=("t_values.length - 1",),
                                 step=1,
                                 density="compact",

src/e3sm_quickview/pipeline.py

@@ -1,6 +1,5 @@
 import fnmatch
 import json
-import numpy as np
 import os
 
 
@@ -12,12 +11,11 @@
     LegacyVTKReader,
 )
 
-from paraview import servermanager as sm
-from paraview.vtk.numpy_interface import dataset_adapter as dsa
 from vtkmodules.vtkCommonCore import vtkLogger
 
 from collections import defaultdict
 
+
 # Define a VTK error observer
 class ErrorObserver:
     def __init__(self):
@@ -151,7 +149,6 @@ def UpdateSlicing(self, dimension, slice):
                 x = json.dumps(self.slicing)
                 self.data.Slicing = x
 
-
     def Update(self, data_file, conn_file, force_reload=False):
         # Check if we need to reload
         if (
@@ -165,7 +162,7 @@ def Update(self, data_file, conn_file, force_reload=False):
         self.conn_file = conn_file
 
         if self.data is None:
-            data = EAMSliceDataReader(
+            data = EAMSliceDataReader(  # noqa: F821
                 registrationName="AtmosReader",
                 ConnectivityFile=conn_file,
                 DataFile=data_file,
@@ -180,7 +177,6 @@ def Update(self, data_file, conn_file, force_reload=False):
             for dim in self.dimmeta.keys():
                 self.slicing[dim] = 0
 
-            print(self.slicing)
             self.observer.clear()
         else:
             self.data.DataFile = data_file
@@ -196,7 +192,7 @@ def Update(self, data_file, conn_file, force_reload=False):
                     "Please check if the data and connectivity files exist "
                     "and are compatible"
                 )
-            
+
             # Ensure TimestepValues is always a list
             timestep_values = self.data.TimestepValues
             if isinstance(timestep_values, (list, tuple)):
@@ -213,7 +209,7 @@ def Update(self, data_file, conn_file, force_reload=False):
                 )
 
             # Step 1: Extract and transform atmospheric data
-            atmos_extract = EAMTransformAndExtract(
+            atmos_extract = EAMTransformAndExtract(  # noqa: F821
                 registrationName="AtmosExtract", Input=self.data
             )
             atmos_extract.LongitudeRange = [-180.0, 180.0]
@@ -222,7 +218,7 @@ def Update(self, data_file, conn_file, force_reload=False):
             self.extents = atmos_extract.GetDataInformation().GetBounds()
 
             # Step 2: Apply map projection to atmospheric data
-            atmos_proj = EAMProject(
+            atmos_proj = EAMProject(  # noqa: F821
                 registrationName="AtmosProj", Input=OutputPort(atmos_extract, 0)
             )
             atmos_proj.Projection = self.projection
@@ -247,26 +243,26 @@ def Update(self, data_file, conn_file, force_reload=False):
                 self.globe = cont_contour
 
             # Step 4: Extract and transform continent data
-            cont_extract = EAMTransformAndExtract(
+            cont_extract = EAMTransformAndExtract(  # noqa: F821
                 registrationName="ContExtract", Input=self.globe
             )
             cont_extract.LongitudeRange = [-180.0, 180.0]
             cont_extract.LatitudeRange = [-90.0, 90.0]
 
             # Step 5: Apply map projection to continents
-            cont_proj = EAMProject(
+            cont_proj = EAMProject(  # noqa: F821
                 registrationName="ContProj", Input=OutputPort(cont_extract, 0)
             )
             cont_proj.Projection = self.projection
             cont_proj.Translate = 0
             cont_proj.UpdatePipeline()
 
             # Step 6: Generate lat/lon grid lines
-            grid_gen = EAMGridLines(registrationName="GridGen")
+            grid_gen = EAMGridLines(registrationName="GridGen")  # noqa: F821
             grid_gen.UpdatePipeline()
 
             # Step 7: Apply map projection to grid lines
-            grid_proj = EAMProject(
+            grid_proj = EAMProject(  # noqa: F821
                 registrationName="GridProj", Input=OutputPort(grid_gen, 0)
             )
             grid_proj.Projection = self.projection
@@ -289,10 +285,10 @@ def Update(self, data_file, conn_file, force_reload=False):
         return self.valid
 
     def LoadVariables(self, vars):
-        print(f"Gonna Load {vars}")
         if not self.valid:
             return
         self.data.Variables = vars
 
+
 if __name__ == "__main__":
     e = EAMVisSource()