Skip to content

Commit

Permalink
Fix scrolling model lists and local layers (#546)
Browse files Browse the repository at this point in the history 
* Fix scrolling model lists and local layers

* Prevent model run list header items from expanding

* Fix scrolling for AnnotationViewer
  • Loading branch information
@floryst
floryst authored Nov 20, 2024
1 parent fa61a4a commit 37b0e24
Show file tree
Hide file tree
Showing 8 changed files with 171 additions and 154 deletions.
6 changes: 3 additions & 3 deletions vue/src/components/LocalLayers.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ const localLayers = computed(() => {
</script>

<template>
<div class="h-100 overflow-y-auto">
<div class="text-center">
<div class="h-100 overflow-y-auto d-flex flex-column">
<div class="text-center py-2">
<v-btn
variant="flat"
color="secondary"
Expand All @@ -79,7 +79,7 @@ const localLayers = computed(() => {
No local layers
</div>
</div>
<v-list>
<v-list class="overflow-y-auto">
<v-list-item
v-for="layer in localLayers"
:key="layer.id"
Expand Down
2 changes: 1 addition & 1 deletion vue/src/components/ModelRunList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ onMounted(() => loadModelRuns('firstPage'));
</script>

<template>
<div class="d-flex flex-column overflow-hidden">
<div class="d-flex flex-column overflow-hidden h-inherit pr-2">
<div class="d-flex flex-wrap flex-grow-0">
<v-chip
v-if="!loading && !loadingSatelliteTimestamps"
Expand Down
294 changes: 152 additions & 142 deletions vue/src/components/SideBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,8 +164,7 @@ const tab = ref();

<template>
<v-card
class="pa-5 pb-1 overflow-y-hidden d-flex flex-column"
style="max-height:100vh; min-height:100vh; height: 100vh;"
class="pa-5 pb-1 h-100 overflow-y-hidden d-flex flex-column"
>
<v-row
dense
Expand Down Expand Up @@ -195,151 +194,156 @@ const tab = ref();
</v-tabs>
<v-window
v-model="tab"
class="overflow-visible h-100"
class="overflow-hidden flex-grow-1 flex-shrink-1 h-100"
>
<v-window-item value="model-runs">
<mode-selector />
<v-row>
<TimeSlider
:min="state.timeMin"
:max="Math.floor(Date.now() / 1000)"
/>
</v-row>
<v-row
dense
align="center"
class="py-2"
>
<v-spacer />
<v-btn
variant="tonal"
density="compact"
class="pa-0 ma-1 sidebar-icon"
:color="drawMap ? 'primary' : 'black'"
@click="drawMap = !drawMap"
<v-window-item
value="model-runs"
class="window-item-flex-container pt-2"
>
<div class="flex-grow-0">
<mode-selector />
<v-row>
<TimeSlider
:min="state.timeMin"
:max="Math.floor(Date.now() / 1000)"
/>
</v-row>
<v-row
dense
align="center"
class="py-2"
>
<v-icon>mdi-road</v-icon>
</v-btn>
<v-btn
v-if="selectedRegion !== null && !(filteredSatelliteTimeList.length === 0 && state.satellite.satelliteSources.length !== 0)"
variant="tonal"
density="compact"
class="pa-0 ma-1 sidebar-icon"
:class="{
'animate-flicker': state.satellite.loadingSatelliteImages,
}"
:color="imagesOn ? 'primary' : 'black'"
:disabled="selectedRegion === null || (filteredSatelliteTimeList.length === 0 && state.satellite.satelliteSources.length !== 0)"
@click="imagesOn = selectedRegion !== null && (filteredSatelliteTimeList.length !== 0 || state.satellite.satelliteSources.length === 0) ? !imagesOn : imagesOn"
<v-spacer />
<v-btn
variant="tonal"
density="compact"
class="pa-0 ma-1 sidebar-icon"
:color="drawMap ? 'primary' : 'black'"
@click="drawMap = !drawMap"
>
<v-icon>mdi-road</v-icon>
</v-btn>
<v-btn
v-if="selectedRegion !== null && !(filteredSatelliteTimeList.length === 0 && state.satellite.satelliteSources.length !== 0)"
variant="tonal"
density="compact"
class="pa-0 ma-1 sidebar-icon"
:class="{
'animate-flicker': state.satellite.loadingSatelliteImages,
}"
:color="imagesOn ? 'primary' : 'black'"
:disabled="selectedRegion === null || (filteredSatelliteTimeList.length === 0 && state.satellite.satelliteSources.length !== 0)"
@click="imagesOn = selectedRegion !== null && (filteredSatelliteTimeList.length !== 0 || state.satellite.satelliteSources.length === 0) ? !imagesOn : imagesOn"
>
<v-icon>mdi-image</v-icon>
</v-btn>
<v-tooltip v-else>
<template #activator="{ props: props }">
<v-btn
variant="tonal"
v-bind="props"
:disabled="!selectedRegion"
density="compact"
:class="{
'animate-flicker': loadingSatelliteTimestamps,
}"
class="pa-0 ma-1 sidebar-icon"
:color="satelliteLoadingColor"
@click="askDownloadSatelliteTimestamps = true"
>
<v-icon>mdi-satellite-variant</v-icon>
</v-btn>
</template>
<v-alert
v-if="!satelliteRegionTooLarge"
type="warning"
title="Fetch Region Satellite Timestamps"
text="This is a long running process that could cause instability on the server. Please only run this if you are sure you need to use the region satellite feature."
/>
<v-alert
v-else
type="warning"
title="Region Too Large to Fetch Timestamps"
text="The Region is too large to fetch timestamps for."
/>
</v-tooltip>
<v-btn
:color="state.filters.showText ? 'primary' : 'gray'"
variant="tonal"
class="pa-0 ma-1 sidebar-icon"
density="compact"
@click="toggleText()"
>
<v-icon>mdi-format-text</v-icon>
</v-btn>
<v-btn
:color="state.mapLegend ? 'primary' : 'gray'"
variant="tonal"
class="pa-0 ma-1 sidebar-icon"
density="compact"
@click="state.mapLegend = !state.mapLegend"
>
<v-icon>mdi-map-legend</v-icon>
</v-btn>
<v-tooltip>
<template #activator="{ props: props }">
<v-btn
variant="tonal"
v-bind="props"
density="compact"
class="pa-0 ma-1 sidebar-icon"
:color="groundtruth ? 'primary' : 'gray'"
@click="groundtruth = !groundtruth"
>
<v-icon>mdi-check-decagram</v-icon>
</v-btn>
</template>
<span> Toggle Ground Truth in the list</span>
</v-tooltip>
<v-btn
:color="expandSettings ? 'primary' : 'gray'"
variant="tonal"
class="pa-0 ma-1 sidebar-icon"
density="compact"
@click="expandSettings = !expandSettings"
>
<v-icon>mdi-cog</v-icon>
</v-btn>
</v-row>
<v-row
dense
class="mt-3"
>
<v-icon>mdi-image</v-icon>
</v-btn>
<v-tooltip v-else>
<template #activator="{ props: props }">
<v-btn
variant="tonal"
v-bind="props"
:disabled="!selectedRegion"
density="compact"
:class="{
'animate-flicker': loadingSatelliteTimestamps,
}"
class="pa-0 ma-1 sidebar-icon"
:color="satelliteLoadingColor"
@click="askDownloadSatelliteTimestamps = true"
>
<v-icon>mdi-satellite-variant</v-icon>
</v-btn>
</template>
<v-alert
v-if="!satelliteRegionTooLarge"
type="warning"
title="Fetch Region Satellite Timestamps"
text="This is a long running process that could cause instability on the server. Please only run this if you are sure you need to use the region satellite feature."
<PerformerFilter
v-model="selectedPerformer"
cols="6"
class="px-1"
hide-details
/>
<v-alert
v-else
type="warning"
title="Region Too Large to Fetch Timestamps"
text="The Region is too large to fetch timestamps for."
<RegionFilter
v-model="selectedRegion"
cols="6"
class="px-1"
hide-details
/>
</v-tooltip>
<v-btn
:color="state.filters.showText ? 'primary' : 'gray'"
variant="tonal"
class="pa-0 ma-1 sidebar-icon"
density="compact"
@click="toggleText()"
>
<v-icon>mdi-format-text</v-icon>
</v-btn>
<v-btn
:color="state.mapLegend ? 'primary' : 'gray'"
variant="tonal"
class="pa-0 ma-1 sidebar-icon"
density="compact"
@click="state.mapLegend = !state.mapLegend"
>
<v-icon>mdi-map-legend</v-icon>
</v-btn>
<v-tooltip>
<template #activator="{ props: props }">
<v-btn
variant="tonal"
v-bind="props"
density="compact"
class="pa-0 ma-1 sidebar-icon"
:color="groundtruth ? 'primary' : 'gray'"
@click="groundtruth = !groundtruth"
>
<v-icon>mdi-check-decagram</v-icon>
</v-btn>
</template>
<span> Toggle Ground Truth in the list</span>
</v-tooltip>
<v-btn
:color="expandSettings ? 'primary' : 'gray'"
variant="tonal"
class="pa-0 ma-1 sidebar-icon"
density="compact"
@click="expandSettings = !expandSettings"
</v-row>
<v-row
v-if="ApiService.isScoring()"
class="pt-2"
dense
>
<v-icon>mdi-cog</v-icon>
</v-btn>
</v-row>
<v-row
dense
class="mt-3"
>
<PerformerFilter
v-model="selectedPerformer"
cols="6"
class="px-1"
hide-details
/>
<RegionFilter
v-model="selectedRegion"
cols="6"
class="px-1"
hide-details
/>
</v-row>
<v-row
v-if="ApiService.isScoring()"
class="pt-2"
dense
>
<ModeFilter
v-model="selectedModes"
class="px-1"
hide-details
/>
<EvalFilter
v-model="selectedEval"
class="px-1"
hide-details
/>
</v-row>
<ModeFilter
v-model="selectedModes"
class="px-1"
hide-details
/>
<EvalFilter
v-model="selectedEval"
class="px-1"
hide-details
/>
</v-row>
</div>
<v-row
dense
class="modelRuns"
Expand All @@ -355,7 +359,7 @@ const tab = ref();
</v-window-item>
<v-window-item
value="local-layers"
class="h-100"
class="h-100 window-item-flex-container"
>
<local-layers />
</v-window-item>
Expand Down Expand Up @@ -440,4 +444,10 @@ const tab = ref();
min-width: 40px;
min-height: 40px;;
}
.window-item-flex-container {
height: inherit;
display: flex;
flex-flow: column;
}
</style>
6 changes: 5 additions & 1 deletion vue/src/components/TimeSlider.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const maxDate = computed(() => convertUnixToDate(props.max));
</script>

<template>
<v-container class="mr-2">
<v-container class="mr-2 time-slider">
<v-row
align="center"
justify="center"
Expand Down Expand Up @@ -89,4 +89,8 @@ const maxDate = computed(() => convertUnixToDate(props.max));
.calendar {
opacity: 1.0;
}
.time-slider {
box-sizing: content-box;
}
</style>
7 changes: 3 additions & 4 deletions vue/src/components/annotationViewer/SideBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,9 @@ const satelliteLoadingColor = computed(() => {

<template>
<v-card
class="pa-5 overflow-y-hidden"
style="max-height:100vh; min-height:100vh;"
class="pa-5 pb-1 h-100 overflow-hidden d-flex flex-column"
>
<div>
<div class="flex-grow-0">
<v-row
dense
>
Expand Down Expand Up @@ -255,7 +254,7 @@ const satelliteLoadingColor = computed(() => {
</div>
<v-row
dense
class="modelRuns"
class="modelRuns h-inherit overflow-hidden"
>
<ModelRunListVue
:filters="queryFilters"
Expand Down
Loading

0 comments on commit 37b0e24

Please sign in to comment.