fix(toolbars): sliders and drop down for data selection and animation toolbars

Author: jourdain

src/e3sm_quickview/app.py

@@ -1,7 +1,9 @@
 import asyncio
 import datetime
 import json
+import math
 import os
+from functools import partial
 from pathlib import Path
 
 from trame.app import TrameApp, asynchronous, file_upload
@@ -420,22 +422,18 @@ async def data_loading_open(self, simulation, connectivity):
                         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})
+                        available_tracks.append(name)
                 self.state.toolbar_slider_cols = 12 / n_cols if n_cols else 12
                 self.state.animation_tracks = available_tracks
                 self.state.animation_track = (
-                    self.state.animation_tracks[0]["value"]
-                    if available_tracks
-                    else None
+                    self.state.animation_tracks[0] 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"]
+                for dim_name in available_tracks:
                     index_var = f"{dim_name}_idx"
                     if "time" in index_var:
                         self.state[index_var] = 50
@@ -461,6 +459,19 @@ 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]
 
+        # Compute used dimensions
+        used_dims = set()
+        for dims in self.selected_variables.keys():
+            used_dims.update(dims)
+        self.state.available_animation_tracks = [
+            n for n in self.state.animation_tracks if n in used_dims
+        ]
+        self.state.animation_track = (
+            self.state.available_animation_tracks[0]
+            if self.state.available_animation_tracks
+            else None
+        )
+
         self.source.LoadVariables(flattened_vars)
 
         # Trigger source update + compute avg
@@ -498,13 +509,21 @@ async def _on_projection(self, projection, **_):
                 await asyncio.sleep(0.1)
                 self.view_manager.reset_camera()
 
-    @change("active_tools", "animation_tracks")
+    @change("active_tools", "available_animation_tracks")
     def _on_toolbar_change(self, active_tools, **_):
         top_padding = 0
         for name in 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
+                track_count = len(self.state.available_animation_tracks or [])
+                rows_needed = 1
+                if track_count > 3:
+                    if track_count % 3 == 0 or (track_count + 1) % 3 == 0:
+                        rows_needed = math.ceil(track_count / 3)
+                    elif track_count % 2 == 0:
+                        rows_needed = track_count / 2
+                    else:
+                        rows_needed = math.ceil(track_count / 3)
+
                 top_padding += 70 * rows_needed
             else:
                 top_padding += toolbars.SIZES.get(name, 0)

src/e3sm_quickview/components/toolbars.py

@@ -322,21 +322,24 @@ def __init__(self):
 
             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")
+                # html.Div(
+                #     "Animation Tracks: {{ JSON.stringify(available_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",
+                    cols=("utils.quickview.cols(available_animation_tracks.length)",),
+                    v_for="(track, idx) in available_animation_tracks",
                     key="idx",
                     classes="pa-2",
                 ):
-                    with client.Getter(name=("track.value",), value_name="t_values"):
+                    with client.Getter(name=("track",), value_name="t_values"):
                         with client.Getter(
-                            name=("track.value + '_idx'",), value_name="t_idx"
+                            name=("track + '_idx'",), value_name="t_idx"
                         ):
                             with v3.VRow(classes="ma-0 align-center", dense=True):
                                 v3.VLabel(
-                                    "{{track.title}}",
+                                    "{{track}}",
                                     classes="text-subtitle-2",
                                 )
                                 v3.VSpacer()
@@ -348,7 +351,7 @@ def __init__(self):
                                 model_value=("t_idx",),
                                 update_modelValue=(
                                     self.on_update_slider,
-                                    "[track.value, $event]",
+                                    "[track, $event]",
                                 ),
                                 min=0,
                                 # max=100,#("get(track.value).length - 1",),
@@ -375,7 +378,7 @@ def __init__(self):
             with v3.VRow(classes="ma-0 px-2 align-center"):
                 v3.VSelect(
                     v_model=("animation_track", "timestamps"),
-                    items=("animation_tracks", []),
+                    items=("available_animation_tracks", []),
                     flat=True,
                     variant="plain",
                     hide_details=True,

src/e3sm_quickview/module/serve/utils.js

@@ -1,11 +1,29 @@
 window.trame.utils.quickview = {
-    formatRange(value, useLog) {
-        if (value === null || value === undefined || isNaN(value)) {
-            return 'Auto';
-        }
-        if (useLog && value > 0) {
-            return `10^(${Math.log10(value).toFixed(1)})`;
-        }
-        return value.toExponential(1);
-    }
-}
+  formatRange(value, useLog) {
+    if (value === null || value === undefined || isNaN(value)) {
+      return "Auto";
+    }
+    if (useLog && value > 0) {
+      return `10^(${Math.log10(value).toFixed(1)})`;
+    }
+    return value.toExponential(1);
+  },
+  cols(size) {
+    if (size === 1) {
+      return 12;
+    }
+    if (size === 2) {
+      return 6;
+    }
+    if (size === 3) {
+      return 4;
+    }
+    if (size % 3 === 0 || (size + 1) % 3 === 0) {
+      return 4;
+    }
+    if (size % 2 === 0) {
+      return 6;
+    }
+    return 4;
+  },
+};