Fix ModelRunList styles and pagination

rdwatch/core/tests/test_model_runs.py

@@ -9,6 +9,7 @@
 
 from rdwatch.core.models import ModelRun, Performer, Region
 from rdwatch.core.tasks import collect_garbage_task
+from rdwatch.core.views.model_run import MODEL_RUN_PAGE_SIZE
 
 
 @pytest.mark.django_db(databases=['default'])
@@ -114,7 +115,7 @@ def test_model_run_rest_list(test_client: TestClient, region: Region) -> None:
                 region=new_region,
                 parameters={},
             )
-            for _ in range(20)
+            for _ in range(MODEL_RUN_PAGE_SIZE)
         ]
     )
     res = test_client.get(f'/model-runs/?region={new_region.name}')

rdwatch/core/views/model_run.py

@@ -54,6 +54,8 @@
 from rdwatch.core.views.performer import PerformerSchema
 from rdwatch.core.views.site_observation import GenerateImagesSchema
 
+MODEL_RUN_PAGE_SIZE = 10
+
 router = RouterPaginated()
 
 
@@ -389,7 +391,7 @@ def _get_model_runs_cache_key(params: dict) -> str:
 
 
 @router.get('/', response={200: list[ModelRunListSchema]})
-@paginate(ModelRunPagination)
+@paginate(ModelRunPagination, page_size=MODEL_RUN_PAGE_SIZE)
 def list_model_runs(
     request: HttpRequest,
     filters: ModelRunFilterSchema = Query(...),  # noqa: B008

vue/src/components/ModelRunList.vue

@@ -13,7 +13,9 @@ import { ApiService } from "../client";
 import { filteredSatelliteTimeList, state, updateCameraBoundsBasedOnModelRunList } from "../store";
 import type { KeyedModelRun } from '../store'
 import { hoveredInfo } from "../interactions/mouseEvents";
-const limit = 10;
+
+// This must match the page_size parameter for the list_model_runs endpoint
+const PAGE_SIZE = 10;
 
 interface Props {
   filters: QueryArguments;
@@ -48,7 +50,7 @@ async function loadModelRuns() {
   }
   const { mode, performer } = props.filters; // unwrap performer and mode arrays
   request = ApiService.getModelRuns({
-    limit,
+    page: page.value,
     ...props.filters,
     mode,
     performer,
@@ -120,7 +122,7 @@ const checkDownloading = async () => {
   }
   const { mode, performer } = props.filters; // unwrap performer and mode arrays
   request = ApiService.getModelRuns({
-    limit,
+    page: page.value,
     ...props.filters,
     mode,
     performer,
@@ -200,7 +202,7 @@ async function handleScroll(event: Event) {
   // fetch, bump the current page to trigger the loadMore function via a watcher.
   const heightPosCheck = Math.floor(target.scrollHeight - target.scrollTop) <= target.clientHeight;
   if (!loading.value && heightPosCheck && state.modelRuns.length < totalModelRuns.value) {
-    if (page.value !== undefined && Math.ceil(totalModelRuns.value / limit) > page.value ) {
+    if (page.value !== undefined && Math.ceil(totalModelRuns.value / PAGE_SIZE) > page.value ) {
       page.value += 1;
       loadModelRuns();
     }
@@ -223,8 +225,8 @@ onMounted(() => loadModelRuns());
 </script>
 
 <template>
-  <div>
-    <v-row>
+  <div class="d-flex flex-column overflow-hidden">
+    <div class="d-flex flex-wrap flex-grow-0 pa-1 pb-2">
       <v-chip
         v-if="!loading && !loadingSatelliteTimestamps"
         style="font-size: 0.75em"
@@ -271,7 +273,7 @@ onMounted(() => loadModelRuns());
         <b>Satellite Timestamps</b>
         <v-progress-linear indeterminate />
       </div>
-    </v-row>
+    </div>
     <div
       v-if="state.satellite.loadingSatelliteImages"
       class="mt-5"
@@ -303,8 +305,7 @@ onMounted(() => loadModelRuns());
       </v-alert>
     </div>
     <v-container
-      class="overflow-y-auto p-5 mt-5"
-      :class="{ modelRuns: !compact, compactModelRuns: compact}"
+      class="overflow-y-auto flex-grow-1 flex-shrink-1"
       @scroll="handleScroll"
     >
       <ModelRunCard
@@ -325,12 +326,6 @@ onMounted(() => loadModelRuns());
 </template>
 
 <style scoped>
-.modelRuns {
-  height: calc(100vh - 350px);
-}
-.compactModelRuns {
-  height: calc(100vh - 150px);
-}
 .outlined {
   background-color: orange;
   border: 3px solid orange;

vue/src/components/SideBar.vue

@@ -165,7 +165,7 @@ const satelliteLoadingColor = computed(() => {
 
 <template>
   <v-card
-    class="pa-5 overflow-y-hidden"
+    class="pa-5 pb-1 overflow-y-hidden d-flex flex-column"
     style="max-height:100vh; min-height:100vh;"
   >
     <div>
@@ -416,7 +416,10 @@ const satelliteLoadingColor = computed(() => {
 }
 
 .modelRuns {
-  margin-top: 2em
+  margin-top: 1em;
+  overflow: hidden;
+  /* wrapping results in overflows being ignored */
+  flex-wrap: nowrap;
 }
 
 .sidebar-icon {