From ff539cc762578e9461f76abc0c6413678dcc6c95 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 11 Sep 2024 18:10:08 -0400
Subject: [PATCH 1/3] Fix model run list overflowing the page

---
 vue/src/components/ModelRunList.vue | 15 ++++-----------
 vue/src/components/SideBar.vue      |  7 +++++--
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/vue/src/components/ModelRunList.vue b/vue/src/components/ModelRunList.vue
index bed8c36e4..b42330f93 100755
--- a/vue/src/components/ModelRunList.vue
+++ b/vue/src/components/ModelRunList.vue
@@ -223,8 +223,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 +271,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 +303,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 +324,6 @@ onMounted(() => loadModelRuns());
 </template>
 
 <style scoped>
-.modelRuns {
-  height: calc(100vh - 350px);
-}
-.compactModelRuns {
-  height: calc(100vh - 150px);
-}
 .outlined {
   background-color: orange;
   border: 3px solid orange;
diff --git a/vue/src/components/SideBar.vue b/vue/src/components/SideBar.vue
index 14d7f0500..f9b620b75 100644
--- a/vue/src/components/SideBar.vue
+++ b/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 {

From 603d31b6b150a05a83967adfb56bddca948eba78 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 11 Sep 2024 18:16:50 -0400
Subject: [PATCH 2/3] Fix pagination not working

The list_model_runs endpoint uses PageNumberPagination, not
LimitOffsetPagination.
---
 rdwatch/core/views/model_run.py     |  4 +++-
 vue/src/components/ModelRunList.vue | 10 ++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/rdwatch/core/views/model_run.py b/rdwatch/core/views/model_run.py
index 7d05ab4b7..14fd54c5c 100644
--- a/rdwatch/core/views/model_run.py
+++ b/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
diff --git a/vue/src/components/ModelRunList.vue b/vue/src/components/ModelRunList.vue
index b42330f93..2503ea014 100755
--- a/vue/src/components/ModelRunList.vue
+++ b/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();
     }

From 50503509f83da2d649224aebcad982a90f746295 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 12 Sep 2024 12:10:48 -0400
Subject: [PATCH 3/3] Fix list test to conform to a page

---
 rdwatch/core/tests/test_model_runs.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/rdwatch/core/tests/test_model_runs.py b/rdwatch/core/tests/test_model_runs.py
index ccfc644d7..1ebdb8136 100644
--- a/rdwatch/core/tests/test_model_runs.py
+++ b/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}')