Skip to content

Commit 79c0c03

Browse files
patrickolearypatrickoleary
authored
Merge pull request #45 from patrickoleary/ui/tooltip-fix-and-toggle-outline
fix: add tooltips and improve toolbar UI
2 parents abb7daf + 15819a7 commit 79c0c03

4 files changed

Lines changed: 185 additions & 93 deletions

File tree

‎src/e3sm_quickview/components/file_browser.py‎

Lines changed: 91 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -283,18 +283,24 @@ def ui(self):
283283
with v3.VCard(rounded="lg"):
284284
with v3.VCardTitle("File loading", classes="d-flex align-center px-3"):
285285
v3.VSpacer()
286-
v3.VBtn(
287-
icon="mdi-home",
288-
variant="flat",
289-
size="small",
290-
click=self.goto_home,
291-
)
292-
v3.VBtn(
293-
icon="mdi-folder-upload-outline",
294-
variant="flat",
295-
size="small",
296-
click=self.goto_parent,
297-
)
286+
with v3.VTooltip(text="Go to launched directory"):
287+
with v3.Template(v_slot_activator="{ props }"):
288+
v3.VBtn(
289+
v_bind="props",
290+
icon="mdi-home",
291+
variant="flat",
292+
size="small",
293+
click=self.goto_home,
294+
)
295+
with v3.VTooltip(text="Go up a directory"):
296+
with v3.Template(v_slot_activator="{ props }"):
297+
v3.VBtn(
298+
v_bind="props",
299+
icon="mdi-folder-upload-outline",
300+
variant="flat",
301+
size="small",
302+
click=self.goto_parent,
303+
)
298304
v3.VTextField(
299305
v_model=self.name("filter"),
300306
hide_details=True,
@@ -386,59 +392,77 @@ def ui(self):
386392

387393
v3.VDivider()
388394
with v3.VCardActions(classes="pa-3"):
389-
v3.VBtn(
390-
classes="text-none",
391-
variant="tonal",
392-
text="Simulation",
393-
prepend_icon="mdi-database-plus",
394-
disabled=(
395-
f"{self.name('listing')}[{self.name('active')}]?.type !== 'file'",
396-
),
397-
click=self.set_data_simulation,
398-
)
399-
v3.VBtn(
400-
classes="text-none",
401-
text="Connectivity",
402-
variant="tonal",
403-
prepend_icon="mdi-vector-polyline-plus",
404-
disabled=(
405-
f"{self.name('listing')}[{self.name('active')}]?.type !== 'file'",
406-
),
407-
click=self.set_data_connectivity,
408-
)
409-
v3.VBtn(
410-
classes="text-none",
411-
text="Reset",
412-
variant="tonal",
413-
prepend_icon="mdi-close-octagon-outline",
414-
click=f"{self.name('data_connectivity')}='';{self.name('data_simulation')}='';{self.name('error')}=false",
415-
)
395+
with v3.VTooltip(text="Set selected file as simulation file"):
396+
with v3.Template(v_slot_activator="{ props }"):
397+
v3.VBtn(
398+
v_bind="props",
399+
classes="text-none",
400+
variant="tonal",
401+
text="Simulation",
402+
prepend_icon="mdi-database-plus",
403+
disabled=(
404+
f"{self.name('listing')}[{self.name('active')}]?.type !== 'file'",
405+
),
406+
click=self.set_data_simulation,
407+
)
408+
with v3.VTooltip(text="Set selected file as connectivity file"):
409+
with v3.Template(v_slot_activator="{ props }"):
410+
v3.VBtn(
411+
v_bind="props",
412+
classes="text-none",
413+
text="Connectivity",
414+
variant="tonal",
415+
prepend_icon="mdi-vector-polyline-plus",
416+
disabled=(
417+
f"{self.name('listing')}[{self.name('active')}]?.type !== 'file'",
418+
),
419+
click=self.set_data_connectivity,
420+
)
421+
with v3.VTooltip(text="Clear selected files"):
422+
with v3.Template(v_slot_activator="{ props }"):
423+
v3.VBtn(
424+
v_bind="props",
425+
classes="text-none",
426+
text="Reset",
427+
variant="tonal",
428+
prepend_icon="mdi-close-octagon-outline",
429+
click=f"{self.name('data_connectivity')}='';{self.name('data_simulation')}='';{self.name('error')}=false",
430+
)
416431
v3.VSpacer()
417-
v3.VBtn(
418-
border=True,
419-
classes="text-none",
420-
color="surface",
421-
text="Cancel",
422-
variant="flat",
423-
click=self.cancel,
424-
)
425-
v3.VBtn(
426-
disabled=(f"!{self.name('is_state_file')}",),
427-
loading=(self.name("state_loading"), False),
428-
classes="text-none",
429-
color="primary",
430-
text="Import state file",
431-
variant="flat",
432-
click=self.import_state_file,
433-
)
434-
v3.VBtn(
435-
classes="text-none",
436-
color=(f"{self.name('error')} ? 'error' : 'primary'",),
437-
text="Load files",
438-
variant="flat",
439-
disabled=(
440-
f"!{self.name('data_simulation')} || !{self.name('data_connectivity')} || {self.name('error')}",
441-
),
442-
loading=(self.name("loading"), False),
443-
click=self.load_data_files,
444-
)
432+
with v3.VTooltip(text="Cancel file loading"):
433+
with v3.Template(v_slot_activator="{ props }"):
434+
v3.VBtn(
435+
v_bind="props",
436+
border=True,
437+
classes="text-none",
438+
color="surface",
439+
text="Cancel",
440+
variant="flat",
441+
click=self.cancel,
442+
)
443+
with v3.VTooltip(text="Import previous state file"):
444+
with v3.Template(v_slot_activator="{ props }"):
445+
v3.VBtn(
446+
v_bind="props",
447+
disabled=(f"!{self.name('is_state_file')}",),
448+
loading=(self.name("state_loading"), False),
449+
classes="text-none",
450+
color="primary",
451+
text="Import state file",
452+
variant="flat",
453+
click=self.import_state_file,
454+
)
455+
with v3.VTooltip(text="Load simulation and connectivity files"):
456+
with v3.Template(v_slot_activator="{ props }"):
457+
v3.VBtn(
458+
v_bind="props",
459+
classes="text-none",
460+
color=(f"{self.name('error')} ? 'error' : 'primary'",),
461+
text="Load files",
462+
variant="flat",
463+
disabled=(
464+
f"!{self.name('data_simulation')} || !{self.name('data_connectivity')} || {self.name('error')}",
465+
),
466+
loading=(self.name("loading"), False),
467+
click=self.load_data_files,
468+
)

‎src/e3sm_quickview/components/toolbars.py‎

Lines changed: 70 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -191,11 +191,18 @@ def __init__(self):
191191
super().__init__(**to_kwargs("adjust-databounds"))
192192

193193
with self:
194-
v3.VIcon(
195-
"mdi-web",
196-
classes="pl-6 opacity-50",
197-
click="crop_slider_edit = !crop_slider_edit",
198-
)
194+
with v3.VTooltip(
195+
text=(
196+
"crop_slider_edit ? 'Toggle to text edit' : 'Toggle to slider edit'",
197+
),
198+
):
199+
with v3.Template(v_slot_activator="{ props }"):
200+
v3.VIcon(
201+
"mdi-web",
202+
v_bind="props",
203+
classes="pl-6 opacity-50",
204+
click="crop_slider_edit = !crop_slider_edit",
205+
)
199206
with v3.VRow(
200207
classes="ma-0 px-2 align-center", v_if=("crop_slider_edit", True)
201208
):
@@ -318,9 +325,24 @@ def __init__(self):
318325
super().__init__(**style)
319326

320327
with self:
321-
v3.VIcon("mdi-tune-variant", classes="ml-3 mr-2 opacity-50")
328+
with v3.VTooltip(
329+
text=(
330+
"slice_slider_edit ? 'Toggle to text edit' : 'Toggle to slider edit'",
331+
),
332+
):
333+
with v3.Template(v_slot_activator="{ props }"):
334+
v3.VIcon(
335+
"mdi-tune-variant",
336+
v_bind="props",
337+
classes="ml-3 mr-2 opacity-50",
338+
click="slice_slider_edit = !slice_slider_edit",
339+
)
322340

323-
with v3.VRow(classes="ma-0 pr-2 flex-wrap flex-grow-1", dense=True):
341+
with v3.VRow(
342+
classes="ma-0 pr-2 flex-wrap flex-grow-1",
343+
dense=True,
344+
v_if=("slice_slider_edit", True),
345+
):
324346
# Debug: Show animation_tracks array
325347
# html.Div(
326348
# "Animation Tracks: {{ JSON.stringify(available_animation_tracks) }}",
@@ -344,7 +366,7 @@ def __init__(self):
344366
)
345367
v3.VSpacer()
346368
v3.VLabel(
347-
"{{ parseFloat(t_values[t_idx]).toFixed(2) }} hPa (k={{ t_idx }})",
369+
"{{ t_values ? parseFloat(t_values[t_idx]).toFixed(2) : '' }} hPa (k={{ t_idx }})",
348370
classes="text-body-2",
349371
)
350372
v3.VSlider(
@@ -360,10 +382,49 @@ def __init__(self):
360382
density="compact",
361383
hide_details=True,
362384
)
385+
with v3.VRow(
386+
classes="ma-0 pl-6 pr-2 align-center ga-4",
387+
v_if="!slice_slider_edit",
388+
):
389+
with v3.VCol(
390+
v_for="(track, idx) in available_animation_tracks",
391+
key="idx",
392+
):
393+
with client.Getter(name=("track",), value_name="t_values"):
394+
with client.Getter(
395+
name=("track + '_idx'",), value_name="t_idx"
396+
):
397+
with v3.VRow(classes="ma-0 align-center", dense=True):
398+
v3.VNumberInput(
399+
model_value=("Number(t_idx)",),
400+
update_modelValue=(
401+
self.on_update_slider,
402+
"[track, Number($event)]",
403+
),
404+
key=("track + '_' + t_idx",),
405+
min=[0],
406+
max=["t_values ? t_values.length - 1 : 0"],
407+
step=[1],
408+
hide_details=True,
409+
density="comfortable",
410+
variant="plain",
411+
flat=True,
412+
control_variant="stacked",
413+
style="max-width: 100px;",
414+
reverse=True,
415+
)
416+
v3.VLabel(
417+
"{{track}}",
418+
classes="text-subtitle-2 ml-2 mt-1",
419+
)
420+
v3.VLabel(
421+
"{{ t_values ? parseFloat(t_values[Number(t_idx)]).toFixed(2) : '' }} hPa",
422+
classes="text-body-2 text-no-wrap ml-2 mt-1",
423+
)
363424

364425
def on_update_slider(self, dimension, index, *_, **__):
365426
with self.state:
366-
self.state[f"{dimension}_idx"] = index
427+
self.state[f"{dimension}_idx"] = int(index)
367428

368429

369430
class Animation(v3.VToolbar):

‎src/e3sm_quickview/components/tools.py‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ def __init__(self, compact, title, icon, click, keybinding=None):
6868
keys=keybinding,
6969
variant="contained",
7070
inline=True,
71-
classes="mt-n2",
71+
classes="mt-n2 border-md border-grey-darken-1 border-opacity-100 rounded-lg",
7272
)
7373

7474

@@ -111,6 +111,7 @@ def __init__(self, compact, title, icon, value, disabled=None, keybinding=None):
111111
prepend_icon=icon,
112112
value=value,
113113
title=(f"{compact} ? null : '{title}'",),
114+
active_class="border-primary border-md border-primary border-opacity-100",
114115
**add_on,
115116
):
116117
if keybinding:
@@ -119,7 +120,7 @@ def __init__(self, compact, title, icon, value, disabled=None, keybinding=None):
119120
keys=keybinding,
120121
variant="contained",
121122
inline=True,
122-
classes="mt-n2",
123+
classes="mt-n2 border-md border-grey-darken-1 border-opacity-100 rounded-lg",
123124
)
124125

125126

‎src/e3sm_quickview/components/view.py‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -125,33 +125,37 @@ def create_bottom_bar(config, update_color_preset):
125125
with v3.VCardItem(classes="py-0 px-2"):
126126
with html.Div(classes="d-flex align-center"):
127127
v3.VIconBtn(
128-
raw_attrs=[
129-
'''v-tooltip:bottom="config.color_blind ? 'Colorblind safe presets' : 'All color presets'"'''
130-
],
128+
v_tooltip_bottom=(
129+
"config.color_blind ? 'Toggle for all color presets' : 'Toggle for colorblind safe color presets'",
130+
),
131131
icon=(
132132
"config.color_blind ? 'mdi-shield-check-outline' : 'mdi-palette'",
133133
),
134134
click="config.color_blind = !config.color_blind",
135135
size="small",
136-
text="Colorblind safe",
136+
text=(
137+
"config.color_blind ? 'Colorblind Safe' : 'All Colors'",
138+
),
137139
variant="text",
138140
)
139141
v3.VIconBtn(
140-
raw_attrs=[
141-
'''v-tooltip:bottom="config.invert ? 'Inverted preset' : 'Normal preset'"'''
142-
],
142+
v_tooltip_bottom=(
143+
"config.invert ? 'Toggle to normal preset' : 'Toggle to inverted preset'",
144+
),
143145
icon=(
144146
"config.invert ? 'mdi-invert-colors' : 'mdi-invert-colors-off'",
145147
),
146148
click="config.invert = !config.invert",
147149
size="small",
148-
text="Invert",
150+
text=(
151+
"config.invert ? 'Inverted Preset' : 'Normal Preset'",
152+
),
149153
variant="text",
150154
)
151155
v3.VIconBtn(
152-
raw_attrs=[
153-
'''v-tooltip:bottom="config.use_log_scale ? 'Use log scale' : 'Use linear scale'"'''
154-
],
156+
v_tooltip_bottom=(
157+
"config.use_log_scale ? 'Toggle to linear scale' : 'Toggle to log scale'"
158+
),
155159
icon=(
156160
"config.use_log_scale ? 'mdi-math-log' : 'mdi-stairs'",
157161
),
@@ -163,15 +167,17 @@ def create_bottom_bar(config, update_color_preset):
163167
variant="text",
164168
)
165169
v3.VIconBtn(
166-
raw_attrs=[
167-
'''v-tooltip:bottom="config.override_range ? 'Use custom range' : 'Use data range'"'''
168-
],
170+
v_tooltip_bottom=(
171+
"config.override_range ? 'Toggle to use data range' : 'Toggle to use custom range'",
172+
),
169173
icon=(
170174
"config.override_range ? 'mdi-arrow-expand-horizontal' : 'mdi-pencil'",
171175
),
172176
click="config.override_range = !config.override_range",
173177
size="small",
174-
text="Use data range",
178+
text=(
179+
"config.override_range ? 'Custom Range' : 'Data Range'",
180+
),
175181
variant="text",
176182
)
177183

0 commit comments

Comments
 (0)