add filtering to table

Author: Dylan Huang

vite-app/src/GlobalState.tsx

@@ -1,6 +1,6 @@
 import { makeAutoObservable, runInAction } from "mobx";
 import type { EvaluationRow } from "./types/eval-protocol";
-import type { PivotConfig } from "./types/filters";
+import type { PivotConfig, FilterGroup } from "./types/filters";
 import flattenJson from "./util/flatten-json";
 
 // Default pivot configuration
@@ -12,6 +12,9 @@ const DEFAULT_PIVOT_CONFIG: PivotConfig = {
   filters: [],
 };
 
+// Default table filter configuration
+const DEFAULT_TABLE_FILTER_CONFIG: FilterGroup[] = [];
+
 // Default pagination configuration
 const DEFAULT_PAGINATION_CONFIG = {
   currentPage: 1,
@@ -26,6 +29,8 @@ export class GlobalState {
   expandedRows: Record<string, boolean> = {};
   // Pivot configuration
   pivotConfig: PivotConfig;
+  // Table filter configuration
+  tableFilterConfig: FilterGroup[];
   // Pagination configuration
   currentPage: number;
   pageSize: number;
@@ -35,6 +40,8 @@ export class GlobalState {
   constructor() {
     // Load pivot config from localStorage or use defaults
     this.pivotConfig = this.loadPivotConfig();
+    // Load table filter config from localStorage or use defaults
+    this.tableFilterConfig = this.loadTableFilterConfig();
     // Load pagination config from localStorage or use defaults
     const paginationConfig = this.loadPaginationConfig();
     this.currentPage = paginationConfig.currentPage;
@@ -57,6 +64,23 @@ export class GlobalState {
     return { ...DEFAULT_PIVOT_CONFIG };
   }
 
+  // Load table filter configuration from localStorage
+  private loadTableFilterConfig(): FilterGroup[] {
+    try {
+      const stored = localStorage.getItem("tableFilterConfig");
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        return Array.isArray(parsed) ? parsed : DEFAULT_TABLE_FILTER_CONFIG;
+      }
+    } catch (error) {
+      console.warn(
+        "Failed to load table filter config from localStorage:",
+        error
+      );
+    }
+    return DEFAULT_TABLE_FILTER_CONFIG;
+  }
+
   // Load pagination configuration from localStorage
   private loadPaginationConfig() {
     try {
@@ -84,6 +108,21 @@ export class GlobalState {
     }
   }
 
+  // Save table filter configuration to localStorage
+  private saveTableFilterConfig() {
+    try {
+      localStorage.setItem(
+        "tableFilterConfig",
+        JSON.stringify(this.tableFilterConfig)
+      );
+    } catch (error) {
+      console.warn(
+        "Failed to save table filter config to localStorage:",
+        error
+      );
+    }
+  }
+
   // Save pagination configuration to localStorage
   private savePaginationConfig() {
     try {
@@ -105,6 +144,12 @@ export class GlobalState {
     this.savePivotConfig();
   }
 
+  // Update table filter configuration and save to localStorage
+  updateTableFilterConfig(filters: FilterGroup[]) {
+    this.tableFilterConfig = filters;
+    this.saveTableFilterConfig();
+  }
+
   // Update pagination configuration and save to localStorage
   updatePaginationConfig(
     updates: Partial<{ currentPage: number; pageSize: number }>
@@ -127,6 +172,12 @@ export class GlobalState {
     this.savePivotConfig();
   }
 
+  // Reset table filter configuration to defaults
+  resetTableFilterConfig() {
+    this.tableFilterConfig = [...DEFAULT_TABLE_FILTER_CONFIG];
+    this.saveTableFilterConfig();
+  }
+
   // Reset pagination configuration to defaults
   resetPaginationConfig() {
     this.currentPage = DEFAULT_PAGINATION_CONFIG.currentPage;
@@ -213,6 +264,27 @@ export class GlobalState {
     return this.sortedDataset.map((row) => flattenJson(row));
   }
 
+  get filteredFlattenedDataset() {
+    if (this.tableFilterConfig.length === 0) {
+      return this.flattenedDataset;
+    }
+
+    const filterFunction = this.createFilterFunction(this.tableFilterConfig);
+    return this.flattenedDataset.filter(filterFunction);
+  }
+
+  get filteredOriginalDataset() {
+    if (this.tableFilterConfig.length === 0) {
+      return this.sortedDataset;
+    }
+
+    const filterFunction = this.createFilterFunction(this.tableFilterConfig);
+    return this.sortedDataset.filter((row) => {
+      const flattened = flattenJson(row);
+      return filterFunction(flattened);
+    });
+  }
+
   get flattenedDatasetKeys() {
     const keySet = new Set<string>();
     this.flattenedDataset.forEach((row) => {
@@ -222,7 +294,7 @@ export class GlobalState {
   }
 
   get totalCount() {
-    return Object.keys(this.dataset).length;
+    return this.filteredFlattenedDataset.length;
   }
 
   get totalPages() {
@@ -236,4 +308,93 @@ export class GlobalState {
   get endRow() {
     return Math.min(this.currentPage * this.pageSize, this.totalCount);
   }
+
+  // Create filter function from filter group configuration
+  private createFilterFunction(filterGroups: FilterGroup[]) {
+    if (filterGroups.length === 0) return () => true;
+
+    return (record: any) => {
+      return filterGroups.every((group) => {
+        if (group.filters.length === 0) return true;
+
+        if (group.logic === "OR") {
+          // For OR logic, at least one filter must pass
+          return group.filters.some((filter) =>
+            this.evaluateFilter(filter, record)
+          );
+        } else {
+          // For AND logic, all filters must pass
+          return group.filters.every((filter) =>
+            this.evaluateFilter(filter, record)
+          );
+        }
+      });
+    };
+  }
+
+  // Helper function to evaluate a single filter
+  private evaluateFilter(filter: any, record: any): boolean {
+    if (!filter.field || !filter.value) return true; // Skip incomplete filters
+
+    const fieldValue = record[filter.field];
+    const filterValue = filter.value;
+    const filterValue2 = filter.value2;
+
+    // Handle date filtering
+    if (filter.type === "date" || filter.type === "date-range") {
+      const fieldDate = new Date(fieldValue);
+      const valueDate = new Date(filterValue);
+
+      if (isNaN(fieldDate.getTime()) || isNaN(valueDate.getTime())) {
+        return true; // Skip invalid dates
+      }
+
+      switch (filter.operator) {
+        case "==":
+          return fieldDate.toDateString() === valueDate.toDateString();
+        case "!=":
+          return fieldDate.toDateString() !== valueDate.toDateString();
+        case ">=":
+          return fieldDate >= valueDate;
+        case "<=":
+          return fieldDate <= valueDate;
+        case "between":
+          if (filterValue2) {
+            const valueDate2 = new Date(filterValue2);
+            if (!isNaN(valueDate2.getTime())) {
+              return fieldDate >= valueDate && fieldDate <= valueDate2;
+            }
+          }
+          return true; // Skip incomplete between filter
+        default:
+          return true;
+      }
+    }
+
+    // Handle text/numeric filtering
+    switch (filter.operator) {
+      case "==":
+        return String(fieldValue) === filterValue;
+      case "!=":
+        return String(fieldValue) !== filterValue;
+      case ">":
+        return Number(fieldValue) > Number(filterValue);
+      case "<":
+        return Number(fieldValue) < Number(filterValue);
+      case ">=":
+        return Number(fieldValue) >= Number(filterValue);
+      case "<=":
+        return Number(fieldValue) <= Number(filterValue);
+      case "contains":
+        return String(fieldValue)
+          .toLowerCase()
+          .includes(filterValue.toLowerCase());
+      case "!contains":
+        return !String(fieldValue)
+          .toLowerCase()
+          .includes(filterValue.toLowerCase());
+      default:
+        return true;
+    }
+  }
 }

vite-app/src/components/Dashboard.tsx

@@ -136,6 +136,15 @@ const Dashboard = observer(({ onRefresh }: DashboardProps) => {
                   <Button onClick={collapseAll} size="sm" variant="secondary">
                     Collapse All
                   </Button>
+                  {state.tableFilterConfig.length > 0 && (
+                    <Button
+                      onClick={() => state.resetTableFilterConfig()}
+                      size="sm"
+                      variant="secondary"
+                    >
+                      Reset Filters
+                    </Button>
+                  )}
                 </div>
               )}
             </div>

vite-app/src/components/EvaluationTable.tsx

@@ -3,6 +3,7 @@ import { state } from "../App";
 import { EvaluationRow } from "./EvaluationRow";
 import Button from "./Button";
 import Select from "./Select";
+import FilterSelector from "./FilterSelector";
 import {
   TableHeader,
   TableHead,
@@ -13,7 +14,9 @@ const TableBody = observer(
   ({ currentPage, pageSize }: { currentPage: number; pageSize: number }) => {
     const startIndex = (currentPage - 1) * pageSize;
     const endIndex = startIndex + pageSize;
-    const paginatedData = state.sortedDataset.slice(startIndex, endIndex);
+    // Use filtered original data for pagination
+    const filteredData = state.filteredOriginalDataset;
+    const paginatedData = filteredData.slice(startIndex, endIndex);
 
     return (
       <TableBodyBase>
@@ -31,10 +34,10 @@ const TableBody = observer(
 
 // Dedicated component for rendering the list - following MobX best practices
 export const EvaluationTable = observer(() => {
-  const totalRows = state.sortedDataset.length;
-  const totalPages = state.totalPages;
-  const startRow = state.startRow;
-  const endRow = state.endRow;
+  const totalRows = state.filteredOriginalDataset.length;
+  const totalPages = Math.ceil(totalRows / state.pageSize);
+  const startRow = (state.currentPage - 1) * state.pageSize + 1;
+  const endRow = Math.min(state.currentPage * state.pageSize, totalRows);
 
   const handlePageChange = (page: number) => {
     state.setCurrentPage(Math.max(1, Math.min(page, totalPages)));
@@ -44,8 +47,53 @@ export const EvaluationTable = observer(() => {
     state.setPageSize(newPageSize);
   };
 
+  const handleFiltersChange = (filters: any[]) => {
+    state.updateTableFilterConfig(filters);
+  };
+
+  const resetFilters = () => {
+    state.resetTableFilterConfig();
+  };
+
   return (
     <div className="bg-white border border-gray-200">
+      {/* Filter Controls */}
+      <div className="px-3 py-3 border-b border-gray-200 bg-white">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-4">
+            <h3 className="text-sm font-medium text-gray-700">Table Filters</h3>
+            <div className="text-xs text-gray-600">
+              {state.tableFilterConfig.length > 0 ? (
+                <>
+                  Showing {totalRows} of {state.sortedDataset.length} rows
+                  {totalRows !== state.sortedDataset.length && (
+                    <span className="text-blue-600 ml-1">(filtered)</span>
+                  )}
+                </>
+              ) : (
+                `Showing all ${state.sortedDataset.length} rows`
+              )}
+            </div>
+          </div>
+          <Button
+            onClick={resetFilters}
+            size="sm"
+            variant="secondary"
+            disabled={state.tableFilterConfig.length === 0}
+          >
+            Reset Filters
+          </Button>
+        </div>
+        <div className="border border-gray-200 rounded-lg p-4 bg-white">
+          <FilterSelector
+            filters={state.tableFilterConfig}
+            onFiltersChange={handleFiltersChange}
+            availableKeys={state.flattenedDatasetKeys}
+            title=""
+          />
+        </div>
+      </div>
+
       {/* Pagination Controls - Fixed outside scrollable area */}
       <div className="px-3 py-2 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
         <div className="flex items-center gap-4">