store page and page size state in globalstate and persist

Author: Dylan Huang

vite-app/src/GlobalState.tsx

@@ -12,6 +12,12 @@ const DEFAULT_PIVOT_CONFIG: PivotConfig = {
   filters: [],
 };
 
+// Default pagination configuration
+const DEFAULT_PAGINATION_CONFIG = {
+  currentPage: 1,
+  pageSize: 25,
+};
+
 export class GlobalState {
   isConnected: boolean = false;
   // rollout_id -> EvaluationRow
@@ -20,10 +26,17 @@ export class GlobalState {
   expandedRows: Record<string, boolean> = {};
   // Pivot configuration
   pivotConfig: PivotConfig;
+  // Pagination configuration
+  currentPage: number;
+  pageSize: number;
 
   constructor() {
     // Load pivot config from localStorage or use defaults
     this.pivotConfig = this.loadPivotConfig();
+    // Load pagination config from localStorage or use defaults
+    const paginationConfig = this.loadPaginationConfig();
+    this.currentPage = paginationConfig.currentPage;
+    this.pageSize = paginationConfig.pageSize;
     makeAutoObservable(this);
   }
 
@@ -42,6 +55,21 @@ export class GlobalState {
     return { ...DEFAULT_PIVOT_CONFIG };
   }
 
+  // Load pagination configuration from localStorage
+  private loadPaginationConfig() {
+    try {
+      const stored = localStorage.getItem("paginationConfig");
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        // Merge with defaults to handle any missing properties
+        return { ...DEFAULT_PAGINATION_CONFIG, ...parsed };
+      }
+    } catch (error) {
+      console.warn("Failed to load pagination config from localStorage:", error);
+    }
+    return { ...DEFAULT_PAGINATION_CONFIG };
+  }
+
   // Save pivot configuration to localStorage
   private savePivotConfig() {
     try {
@@ -51,12 +79,35 @@ export class GlobalState {
     }
   }
 
+  // Save pagination configuration to localStorage
+  private savePaginationConfig() {
+    try {
+      localStorage.setItem("paginationConfig", JSON.stringify({
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+      }));
+    } catch (error) {
+      console.warn("Failed to save pagination config to localStorage:", error);
+    }
+  }
+
   // Update pivot configuration and save to localStorage
   updatePivotConfig(updates: Partial<PivotConfig>) {
     Object.assign(this.pivotConfig, updates);
     this.savePivotConfig();
   }
 
+  // Update pagination configuration and save to localStorage
+  updatePaginationConfig(updates: Partial<{ currentPage: number; pageSize: number }>) {
+    if (updates.currentPage !== undefined) {
+      this.currentPage = updates.currentPage;
+    }
+    if (updates.pageSize !== undefined) {
+      this.pageSize = updates.pageSize;
+    }
+    this.savePaginationConfig();
+  }
+
   // Reset pivot configuration to defaults
   resetPivotConfig() {
     this.pivotConfig = {
@@ -66,13 +117,36 @@ export class GlobalState {
     this.savePivotConfig();
   }
 
+  // Reset pagination configuration to defaults
+  resetPaginationConfig() {
+    this.currentPage = DEFAULT_PAGINATION_CONFIG.currentPage;
+    this.pageSize = DEFAULT_PAGINATION_CONFIG.pageSize;
+    this.savePaginationConfig();
+  }
+
+  // Set current page
+  setCurrentPage(page: number) {
+    this.currentPage = page;
+    this.savePaginationConfig();
+  }
+
+  // Set page size
+  setPageSize(size: number) {
+    this.pageSize = size;
+    this.currentPage = 1; // Reset to first page when changing page size
+    this.savePaginationConfig();
+  }
+
   upsertRows(dataset: EvaluationRow[]) {
     dataset.forEach((row) => {
       if (!row.execution_metadata?.rollout_id) {
         return;
       }
       this.dataset[row.execution_metadata.rollout_id] = row;
     });
+    // Reset to first page when dataset changes
+    this.currentPage = 1;
+    this.savePaginationConfig();
   }
 
   toggleRowExpansion(rolloutId?: string) {
@@ -122,4 +196,16 @@ export class GlobalState {
   get totalCount() {
     return Object.keys(this.dataset).length;
   }
+
+  get totalPages() {
+    return Math.ceil(this.totalCount / this.pageSize);
+  }
+
+  get startRow() {
+    return (this.currentPage - 1) * this.pageSize + 1;
+  }
+
+  get endRow() {
+    return Math.min(this.currentPage * this.pageSize, this.totalCount);
+  }
 }

vite-app/src/components/EvaluationTable.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import { useState, useEffect } from "react";
 import { state } from "../App";
 import { EvaluationRow } from "./EvaluationRow";
 import Button from "./Button";
@@ -32,28 +31,19 @@ const TableBody = observer(
 
 // Dedicated component for rendering the list - following MobX best practices
 export const EvaluationTable = observer(() => {
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(25);
-
   const totalRows = state.sortedDataset.length;
-  const totalPages = Math.ceil(totalRows / pageSize);
-  const startRow = (currentPage - 1) * pageSize + 1;
-  const endRow = Math.min(currentPage * pageSize, totalRows);
+  const totalPages = state.totalPages;
+  const startRow = state.startRow;
+  const endRow = state.endRow;
 
   const handlePageChange = (page: number) => {
-    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+    state.setCurrentPage(Math.max(1, Math.min(page, totalPages)));
   };
 
   const handlePageSizeChange = (newPageSize: number) => {
-    setPageSize(newPageSize);
-    setCurrentPage(1); // Reset to first page when changing page size
+    state.setPageSize(newPageSize);
   };
 
-  // Reset to first page when dataset changes
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [totalRows]);
-
   return (
     <div className="bg-white border border-gray-200">
       {/* Pagination Controls - Fixed outside scrollable area */}
@@ -65,7 +55,7 @@ export const EvaluationTable = observer(() => {
           <div className="flex items-center gap-2">
             <label className="text-xs text-gray-600">Page size:</label>
             <Select
-              value={pageSize}
+              value={state.pageSize}
               onChange={(e) => handlePageSizeChange(Number(e.target.value))}
               size="sm"
             >
@@ -79,34 +69,34 @@ export const EvaluationTable = observer(() => {
         <div className="flex items-center gap-2">
           <Button
             onClick={() => handlePageChange(1)}
-            disabled={currentPage === 1}
+            disabled={state.currentPage === 1}
             size="sm"
             variant="secondary"
           >
             First
           </Button>
           <Button
-            onClick={() => handlePageChange(currentPage - 1)}
-            disabled={currentPage === 1}
+            onClick={() => handlePageChange(state.currentPage - 1)}
+            disabled={state.currentPage === 1}
             size="sm"
             variant="secondary"
           >
             Previous
           </Button>
           <span className="text-xs text-gray-600 px-2">
-            Page {currentPage} of {totalPages}
+            Page {state.currentPage} of {totalPages}
           </span>
           <Button
-            onClick={() => handlePageChange(currentPage + 1)}
-            disabled={currentPage === totalPages}
+            onClick={() => handlePageChange(state.currentPage + 1)}
+            disabled={state.currentPage === totalPages}
             size="sm"
             variant="secondary"
           >
             Next
           </Button>
           <Button
             onClick={() => handlePageChange(totalPages)}
-            disabled={currentPage === totalPages}
+            disabled={state.currentPage === totalPages}
             size="sm"
             variant="secondary"
           >
@@ -132,7 +122,10 @@ export const EvaluationTable = observer(() => {
           </TableHead>
 
           {/* Table Body */}
-          <TableBody currentPage={currentPage} pageSize={pageSize} />
+          <TableBody
+            currentPage={state.currentPage}
+            pageSize={state.pageSize}
+          />
         </table>
       </div>
     </div>