Aggregated metrics part 9 (pivot table UI)

vite-app/src/GlobalState.tsx

@@ -1,17 +1,71 @@
 import { makeAutoObservable } from "mobx";
 import type { EvaluationRow } from "./types/eval-protocol";
+import type { PivotConfig } from "./types/filters";
+import flattenJson from "./util/flatten-json";
+
+// Default pivot configuration
+const DEFAULT_PIVOT_CONFIG: PivotConfig = {
+  selectedRowFields: ["$.eval_metadata.name"],
+  selectedColumnFields: ["$.input_metadata.completion_params.model"],
+  selectedValueField: "$.evaluation_result.score",
+  selectedAggregator: "avg",
+  filters: [],
+};
 
 export class GlobalState {
   isConnected: boolean = false;
   // rollout_id -> EvaluationRow
   dataset: Record<string, EvaluationRow> = {};
   // rollout_id -> expanded
   expandedRows: Record<string, boolean> = {};
+  // Pivot configuration
+  pivotConfig: PivotConfig;
 
   constructor() {
+    // Load pivot config from localStorage or use defaults
+    this.pivotConfig = this.loadPivotConfig();
     makeAutoObservable(this);
   }
 
+  // Load pivot configuration from localStorage
+  private loadPivotConfig(): PivotConfig {
+    try {
+      const stored = localStorage.getItem("pivotConfig");
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        // Merge with defaults to handle any missing properties
+        return { ...DEFAULT_PIVOT_CONFIG, ...parsed };
+      }
+    } catch (error) {
+      console.warn("Failed to load pivot config from localStorage:", error);
+    }
+    return { ...DEFAULT_PIVOT_CONFIG };
+  }
+
+  // Save pivot configuration to localStorage
+  private savePivotConfig() {
+    try {
+      localStorage.setItem("pivotConfig", JSON.stringify(this.pivotConfig));
+    } catch (error) {
+      console.warn("Failed to save pivot config to localStorage:", error);
+    }
+  }
+
+  // Update pivot configuration and save to localStorage
+  updatePivotConfig(updates: Partial<PivotConfig>) {
+    Object.assign(this.pivotConfig, updates);
+    this.savePivotConfig();
+  }
+
+  // Reset pivot configuration to defaults
+  resetPivotConfig() {
+    this.pivotConfig = {
+      ...DEFAULT_PIVOT_CONFIG,
+      filters: [], // Ensure filters is an empty array of FilterGroups
+    };
+    this.savePivotConfig();
+  }
+
   upsertRows(dataset: EvaluationRow[]) {
     dataset.forEach((row) => {
       if (!row.execution_metadata?.rollout_id) {
@@ -53,6 +107,18 @@ export class GlobalState {
     );
   }
 
+  get flattenedDataset() {
+    return this.sortedDataset.map((row) => flattenJson(row));
+  }
+
+  get flattenedDatasetKeys() {
+    const keySet = new Set<string>();
+    this.flattenedDataset.forEach((row) => {
+      Object.keys(row).forEach((key) => keySet.add(key));
+    });
+    return Array.from(keySet);
+  }
+
   get totalCount() {
     return Object.keys(this.dataset).length;
   }

vite-app/src/components/Button.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { commonStyles } from "../styles/common";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary";
@@ -10,23 +11,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     { className = "", variant = "secondary", size = "sm", children, ...props },
     ref
   ) => {
-    const baseClasses = "border text-xs font-medium focus:outline-none";
-
-    const variantClasses = {
-      primary: "border-gray-300 bg-gray-100 text-gray-700 hover:bg-gray-200",
-      secondary: "border-gray-300 bg-gray-100 text-gray-700 hover:bg-gray-200",
-    };
-
-    const sizeClasses = {
-      sm: "px-2 py-0.5",
-      md: "px-3 py-1",
-    };
-
     return (
       <button
         ref={ref}
-        className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
-        style={{ boxShadow: "none" }}
+        className={`${commonStyles.button.base} ${commonStyles.button.variant[variant]} ${commonStyles.button.size[size]} ${className}`}
+        style={{ boxShadow: commonStyles.button.shadow }}
         {...props}
       >
         {children}

vite-app/src/components/Dashboard.tsx

@@ -1,12 +1,11 @@
 import { observer } from "mobx-react";
-import { useMemo, useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { state } from "../App";
 import Button from "./Button";
 import { EvaluationTable } from "./EvaluationTable";
-import PivotTable from "./PivotTable";
+import PivotTab from "./PivotTab";
 import TabButton from "./TabButton";
-import flattenJson from "../util/flatten-json";
 
 interface DashboardProps {
   onRefresh: () => void;
@@ -68,11 +67,6 @@ const Dashboard = observer(({ onRefresh }: DashboardProps) => {
     setActiveTab(deriveTabFromPath(location.pathname));
   }, [location.pathname]);
 
-  const flattened = useMemo(() => {
-    const flattenedDataset = state.sortedDataset.map((row) => flattenJson(row));
-    return flattenedDataset;
-  }, [state.sortedDataset]);
-
   return (
     <div className="text-sm">
       {/* Summary */}
@@ -129,33 +123,7 @@ const Dashboard = observer(({ onRefresh }: DashboardProps) => {
 
           {/* Tab content */}
           <div className="p-3">
-            {activeTab === "table" ? (
-              <EvaluationTable />
-            ) : (
-              <div>
-                <div className="text-xs text-gray-600 mb-2">
-                  Showing pivot of flattened rows (JSONPath keys). Defaults:
-                  rows by eval name and status; columns by model; values average
-                  score.
-                </div>
-                <PivotTable
-                  data={flattened}
-                  rowFields={[
-                    "$.eval_metadata.name" as keyof (typeof flattened)[number],
-                    "$.eval_metadata.status" as keyof (typeof flattened)[number],
-                  ]}
-                  columnFields={[
-                    "$.input_metadata.completion_params.model" as keyof (typeof flattened)[number],
-                  ]}
-                  valueField={
-                    "$.evaluation_result.score" as keyof (typeof flattened)[number]
-                  }
-                  aggregator="avg"
-                  showRowTotals
-                  showColumnTotals
-                />
-              </div>
-            )}
+            {activeTab === "table" ? <EvaluationTable /> : <PivotTab />}
           </div>
         </div>
       )}

vite-app/src/components/FilterInput.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import type { FilterConfig } from "../types/filters";
+import { commonStyles } from "../styles/common";
+
+interface FilterInputProps {
+  filter: FilterConfig;
+  onUpdate: (updates: Partial<FilterConfig>) => void;
+}
+
+const FilterInput = ({ filter, onUpdate }: FilterInputProps) => {
+  const fieldType = filter.type || "text";
+
+  if (fieldType === "date") {
+    return (
+      <div className="flex space-x-2">
+        <input
+          type="date"
+          value={filter.value}
+          onChange={(e) => onUpdate({ value: e.target.value })}
+          className={`${commonStyles.input.base} ${commonStyles.input.size.sm} ${commonStyles.width.sm}`}
+          style={{ boxShadow: commonStyles.input.shadow }}
+        />
+        {filter.operator === "between" && (
+          <input
+            type="date"
+            value={filter.value2 || ""}
+            onChange={(e) => onUpdate({ value2: e.target.value })}
+            className={`${commonStyles.input.base} ${commonStyles.input.size.sm} ${commonStyles.width.sm}`}
+            placeholder="End date"
+            style={{ boxShadow: commonStyles.input.shadow }}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <input
+      type="text"
+      value={filter.value}
+      onChange={(e) => onUpdate({ value: e.target.value })}
+      placeholder="Value"
+      className={`${commonStyles.input.base} ${commonStyles.input.size.sm} ${commonStyles.width.sm}`}
+      style={{ boxShadow: commonStyles.input.shadow }}
+    />
+  );
+};
+
+export default FilterInput;