Skip to content

fix: add tooltips and improve toolbar UI #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
patrickoleary merged 3 commits into from
Apr 16, 2026
Merged

fix: add tooltips and improve toolbar UI #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
323acd9
fix: add tooltips and improve toolbar UI
olearypatrick Apr 14, 2026
25dd5b7
fix: replace raw_attrs tooltips with v_tooltip_bottom and fix VNumber…
olearypatrick Apr 16, 2026
15819a7
fix: correct VNumberInput max expression syntax
olearypatrick Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 91 additions & 67 deletions src/e3sm_quickview/components/file_browser.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,18 +283,24 @@ def ui(self):
with v3.VCard(rounded="lg"):
with v3.VCardTitle("File loading", classes="d-flex align-center px-3"):
v3.VSpacer()
v3.VBtn(
icon="mdi-home",
variant="flat",
size="small",
click=self.goto_home,
)
v3.VBtn(
icon="mdi-folder-upload-outline",
variant="flat",
size="small",
click=self.goto_parent,
)
with v3.VTooltip(text="Go to launched directory"):
with v3.Template(v_slot_activator="{ props }"):
v3.VBtn(
v_bind="props",
icon="mdi-home",
variant="flat",
size="small",
click=self.goto_home,
)
with v3.VTooltip(text="Go up a directory"):
with v3.Template(v_slot_activator="{ props }"):
v3.VBtn(
v_bind="props",
icon="mdi-folder-upload-outline",
variant="flat",
size="small",
click=self.goto_parent,
)
v3.VTextField(
v_model=self.name("filter"),
hide_details=True,
Expand Down Expand Up @@ -386,59 +392,77 @@ def ui(self):

v3.VDivider()
with v3.VCardActions(classes="pa-3"):
v3.VBtn(
classes="text-none",
variant="tonal",
text="Simulation",
prepend_icon="mdi-database-plus",
disabled=(
f"{self.name('listing')}[{self.name('active')}]?.type !== 'file'",
),
click=self.set_data_simulation,
)
v3.VBtn(
classes="text-none",
text="Connectivity",
variant="tonal",
prepend_icon="mdi-vector-polyline-plus",
disabled=(
f"{self.name('listing')}[{self.name('active')}]?.type !== 'file'",
),
click=self.set_data_connectivity,
)
v3.VBtn(
classes="text-none",
text="Reset",
variant="tonal",
prepend_icon="mdi-close-octagon-outline",
click=f"{self.name('data_connectivity')}='';{self.name('data_simulation')}='';{self.name('error')}=false",
)
with v3.VTooltip(text="Set selected file as simulation file"):
with v3.Template(v_slot_activator="{ props }"):
v3.VBtn(
v_bind="props",
classes="text-none",
variant="tonal",
text="Simulation",
prepend_icon="mdi-database-plus",
disabled=(
f"{self.name('listing')}[{self.name('active')}]?.type !== 'file'",
),
click=self.set_data_simulation,
)
with v3.VTooltip(text="Set selected file as connectivity file"):
with v3.Template(v_slot_activator="{ props }"):
v3.VBtn(
v_bind="props",
classes="text-none",
text="Connectivity",
variant="tonal",
prepend_icon="mdi-vector-polyline-plus",
disabled=(
f"{self.name('listing')}[{self.name('active')}]?.type !== 'file'",
),
click=self.set_data_connectivity,
)
with v3.VTooltip(text="Clear selected files"):
with v3.Template(v_slot_activator="{ props }"):
v3.VBtn(
v_bind="props",
classes="text-none",
text="Reset",
variant="tonal",
prepend_icon="mdi-close-octagon-outline",
click=f"{self.name('data_connectivity')}='';{self.name('data_simulation')}='';{self.name('error')}=false",
)
v3.VSpacer()
v3.VBtn(
border=True,
classes="text-none",
color="surface",
text="Cancel",
variant="flat",
click=self.cancel,
)
v3.VBtn(
disabled=(f"!{self.name('is_state_file')}",),
loading=(self.name("state_loading"), False),
classes="text-none",
color="primary",
text="Import state file",
variant="flat",
click=self.import_state_file,
)
v3.VBtn(
classes="text-none",
color=(f"{self.name('error')} ? 'error' : 'primary'",),
text="Load files",
variant="flat",
disabled=(
f"!{self.name('data_simulation')} || !{self.name('data_connectivity')} || {self.name('error')}",
),
loading=(self.name("loading"), False),
click=self.load_data_files,
)
with v3.VTooltip(text="Cancel file loading"):
with v3.Template(v_slot_activator="{ props }"):
v3.VBtn(
v_bind="props",
border=True,
classes="text-none",
color="surface",
text="Cancel",
variant="flat",
click=self.cancel,
)
with v3.VTooltip(text="Import previous state file"):
with v3.Template(v_slot_activator="{ props }"):
v3.VBtn(
v_bind="props",
disabled=(f"!{self.name('is_state_file')}",),
loading=(self.name("state_loading"), False),
classes="text-none",
color="primary",
text="Import state file",
variant="flat",
click=self.import_state_file,
)
with v3.VTooltip(text="Load simulation and connectivity files"):
with v3.Template(v_slot_activator="{ props }"):
v3.VBtn(
v_bind="props",
classes="text-none",
color=(f"{self.name('error')} ? 'error' : 'primary'",),
text="Load files",
variant="flat",
disabled=(
f"!{self.name('data_simulation')} || !{self.name('data_connectivity')} || {self.name('error')}",
),
loading=(self.name("loading"), False),
click=self.load_data_files,
)
79 changes: 70 additions & 9 deletions src/e3sm_quickview/components/toolbars.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,11 +191,18 @@ def __init__(self):
super().__init__(**to_kwargs("adjust-databounds"))

with self:
v3.VIcon(
"mdi-web",
classes="pl-6 opacity-50",
click="crop_slider_edit = !crop_slider_edit",
)
with v3.VTooltip(
text=(
"crop_slider_edit ? 'Toggle to text edit' : 'Toggle to slider edit'",
),
):
with v3.Template(v_slot_activator="{ props }"):
v3.VIcon(
"mdi-web",
v_bind="props",
classes="pl-6 opacity-50",
click="crop_slider_edit = !crop_slider_edit",
)
with v3.VRow(
classes="ma-0 px-2 align-center", v_if=("crop_slider_edit", True)
):
Expand Down Expand Up @@ -318,9 +325,24 @@ def __init__(self):
super().__init__(**style)

with self:
v3.VIcon("mdi-tune-variant", classes="ml-3 mr-2 opacity-50")
with v3.VTooltip(
text=(
"slice_slider_edit ? 'Toggle to text edit' : 'Toggle to slider edit'",
),
):
with v3.Template(v_slot_activator="{ props }"):
v3.VIcon(
"mdi-tune-variant",
v_bind="props",
classes="ml-3 mr-2 opacity-50",
click="slice_slider_edit = !slice_slider_edit",
)

with v3.VRow(classes="ma-0 pr-2 flex-wrap flex-grow-1", dense=True):
with v3.VRow(
classes="ma-0 pr-2 flex-wrap flex-grow-1",
dense=True,
v_if=("slice_slider_edit", True),
):
# Debug: Show animation_tracks array
# html.Div(
# "Animation Tracks: {{ JSON.stringify(available_animation_tracks) }}",
Expand All @@ -344,7 +366,7 @@ def __init__(self):
)
v3.VSpacer()
v3.VLabel(
"{{ parseFloat(t_values[t_idx]).toFixed(2) }} hPa (k={{ t_idx }})",
"{{ t_values ? parseFloat(t_values[t_idx]).toFixed(2) : '' }} hPa (k={{ t_idx }})",
classes="text-body-2",
)
v3.VSlider(
Expand All @@ -360,10 +382,49 @@ def __init__(self):
density="compact",
hide_details=True,
)
with v3.VRow(
classes="ma-0 pl-6 pr-2 align-center ga-4",
v_if="!slice_slider_edit",
):
with v3.VCol(
v_for="(track, idx) in available_animation_tracks",
key="idx",
):
with client.Getter(name=("track",), value_name="t_values"):
with client.Getter(
name=("track + '_idx'",), value_name="t_idx"
):
with v3.VRow(classes="ma-0 align-center", dense=True):
v3.VNumberInput(
model_value=("Number(t_idx)",),
update_modelValue=(
self.on_update_slider,
"[track, Number($event)]",
),
key=("track + '_' + t_idx",),
min=[0],
max=["t_values ? t_values.length - 1 : 0"],
step=[1],
hide_details=True,
density="comfortable",
variant="plain",
flat=True,
control_variant="stacked",
style="max-width: 100px;",
reverse=True,
)
v3.VLabel(
"{{track}}",
classes="text-subtitle-2 ml-2 mt-1",
)
v3.VLabel(
"{{ t_values ? parseFloat(t_values[Number(t_idx)]).toFixed(2) : '' }} hPa",
classes="text-body-2 text-no-wrap ml-2 mt-1",
)

def on_update_slider(self, dimension, index, *_, **__):
with self.state:
self.state[f"{dimension}_idx"] = index
self.state[f"{dimension}_idx"] = int(index)


class Animation(v3.VToolbar):
Expand Down
5 changes: 3 additions & 2 deletions src/e3sm_quickview/components/tools.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ def __init__(self, compact, title, icon, click, keybinding=None):
keys=keybinding,
variant="contained",
inline=True,
classes="mt-n2",
classes="mt-n2 border-md border-grey-darken-1 border-opacity-100 rounded-lg",
)


Expand Down Expand Up @@ -111,6 +111,7 @@ def __init__(self, compact, title, icon, value, disabled=None, keybinding=None):
prepend_icon=icon,
value=value,
title=(f"{compact} ? null : '{title}'",),
active_class="border-primary border-md border-primary border-opacity-100",
**add_on,
):
if keybinding:
Expand All @@ -119,7 +120,7 @@ def __init__(self, compact, title, icon, value, disabled=None, keybinding=None):
keys=keybinding,
variant="contained",
inline=True,
classes="mt-n2",
classes="mt-n2 border-md border-grey-darken-1 border-opacity-100 rounded-lg",
)


Expand Down
36 changes: 21 additions & 15 deletions src/e3sm_quickview/components/view.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,33 +125,37 @@ def create_bottom_bar(config, update_color_preset):
with v3.VCardItem(classes="py-0 px-2"):
with html.Div(classes="d-flex align-center"):
v3.VIconBtn(
raw_attrs=[
'''v-tooltip:bottom="config.color_blind ? 'Colorblind safe presets' : 'All color presets'"'''
],
v_tooltip_bottom=(
"config.color_blind ? 'Toggle for all color presets' : 'Toggle for colorblind safe color presets'",
),
icon=(
"config.color_blind ? 'mdi-shield-check-outline' : 'mdi-palette'",
),
click="config.color_blind = !config.color_blind",
size="small",
text="Colorblind safe",
text=(
"config.color_blind ? 'Colorblind Safe' : 'All Colors'",
),
variant="text",
)
v3.VIconBtn(
raw_attrs=[
'''v-tooltip:bottom="config.invert ? 'Inverted preset' : 'Normal preset'"'''
],
v_tooltip_bottom=(
"config.invert ? 'Toggle to normal preset' : 'Toggle to inverted preset'",
),
icon=(
"config.invert ? 'mdi-invert-colors' : 'mdi-invert-colors-off'",
),
click="config.invert = !config.invert",
size="small",
text="Invert",
text=(
"config.invert ? 'Inverted Preset' : 'Normal Preset'",
),
variant="text",
)
v3.VIconBtn(
raw_attrs=[
'''v-tooltip:bottom="config.use_log_scale ? 'Use log scale' : 'Use linear scale'"'''
],
v_tooltip_bottom=(
"config.use_log_scale ? 'Toggle to linear scale' : 'Toggle to log scale'"
),
icon=(
"config.use_log_scale ? 'mdi-math-log' : 'mdi-stairs'",
),
Expand All @@ -163,15 +167,17 @@ def create_bottom_bar(config, update_color_preset):
variant="text",
)
v3.VIconBtn(
raw_attrs=[
'''v-tooltip:bottom="config.override_range ? 'Use custom range' : 'Use data range'"'''
],
v_tooltip_bottom=(
"config.override_range ? 'Toggle to use data range' : 'Toggle to use custom range'",
),
icon=(
"config.override_range ? 'mdi-arrow-expand-horizontal' : 'mdi-pencil'",
),
click="config.override_range = !config.override_range",
size="small",
text="Use data range",
text=(
"config.override_range ? 'Custom Range' : 'Data Range'",
),
variant="text",
)

Expand Down
Loading