Update cross-run-trace-analysis.tsx

web/components/cross-run-trace-analysis.tsx

@@ -43,6 +43,11 @@ const COLORS = [
 
 type AxisMode = "relative" | "absolute";
 
+const ALL_EQUIPMENT = "__all_equipment__";
+const UNASSIGNED_EQUIPMENT = "__unassigned_equipment__";
+const ALL_PROJECTS = "__all_projects__";
+const UNASSIGNED_PROJECT = "__unassigned_project__";
+
 async function boundedMap<T, R>(
   values: T[],
   task: (value: T) => Promise<R>,
@@ -91,6 +96,8 @@ export function CrossRunTraceAnalysis() {
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
   const [traces, setTraces] = useState<V2RunTrace[]>([]);
   const [selectedParameter, setSelectedParameter] = useState("");
+  const [selectedEquipment, setSelectedEquipment] = useState(ALL_EQUIPMENT);
+  const [selectedProject, setSelectedProject] = useState(ALL_PROJECTS);
   const [axisMode, setAxisMode] = useState<AxisMode>("relative");
   const [smoothEdges, setSmoothEdges] = useState(false);
   const [showTrend, setShowTrend] = useState(false);
@@ -142,6 +149,69 @@ export function CrossRunTraceAnalysis() {
     };
   }, [selectedIds]);
 
+  const equipmentOptions = useMemo(() => {
+    const byId = new Map<string, string>();
+    runs.forEach((run) => {
+      if (!run.equipment_id) return;
+      if (!byId.has(run.equipment_id)) {
+        byId.set(
+          run.equipment_id,
+          run.equipment_name || run.equipment_id,
+        );
+      }
+    });
+    return [...byId.entries()]
+      .map(([id, name]) => ({ id, name }))
+      .sort((left, right) =>
+        left.name.localeCompare(right.name, undefined, { numeric: true }),
+      );
+  }, [runs]);
+
+  const projectOptions = useMemo(() => {
+    const byId = new Map<string, string>();
+    runs.forEach((run) => {
+      if (!run.project_id) return;
+      if (!byId.has(run.project_id)) {
+        byId.set(run.project_id, run.project_name || run.project_id);
+      }
+    });
+    return [...byId.entries()]
+      .map(([id, name]) => ({ id, name }))
+      .sort((left, right) =>
+        left.name.localeCompare(right.name, undefined, { numeric: true }),
+      );
+  }, [runs]);
+
+  const hasUnassignedEquipment = useMemo(
+    () => runs.some((run) => !run.equipment_id),
+    [runs],
+  );
+
+  const hasUnassignedProject = useMemo(
+    () => runs.some((run) => !run.project_id),
+    [runs],
+  );
+
+  const filteredRuns = useMemo(
+    () =>
+      runs.filter((run) => {
+        const equipmentMatches =
+          selectedEquipment === ALL_EQUIPMENT ||
+          (selectedEquipment === UNASSIGNED_EQUIPMENT
+            ? !run.equipment_id
+            : run.equipment_id === selectedEquipment);
+
+        const projectMatches =
+          selectedProject === ALL_PROJECTS ||
+          (selectedProject === UNASSIGNED_PROJECT
+            ? !run.project_id
+            : run.project_id === selectedProject);
+
+        return equipmentMatches && projectMatches;
+      }),
+    [runs, selectedEquipment, selectedProject],
+  );
+
   const visibleTraces = useMemo(
     () => (selectedIds.length === 0 ? [] : traces),
     [selectedIds.length, traces],
@@ -317,39 +387,99 @@ export function CrossRunTraceAnalysis() {
               <Loader2 className="h-4 w-4 animate-spin" /> Loading runs…
             </p>
           ) : (
-            <div className="max-h-[36rem] space-y-1 overflow-y-auto">
-              {runs.map((run) => {
-                const checked = selectedIds.includes(run.run_id);
-                const disabled =
-                  !checked && selectedIds.length >= MAX_SELECTED_RUNS;
-                return (
-                  <label
-                    key={run.run_id}
-                    className={`flex gap-2 rounded-md p-2 text-sm ${
-                      disabled
-                        ? "cursor-not-allowed opacity-50"
-                        : "cursor-pointer hover:bg-[hsl(var(--accent))]"
-                    }`}
+            <>
+              <div className="mb-3 grid gap-2">
+                <label className="text-xs">
+                  Equipment Registry
+                  <select
+                    value={selectedEquipment}
+                    onChange={(event) =>
+                      setSelectedEquipment(event.target.value)
+                    }
+                    className="mt-1 block w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] p-2 text-sm"
                   >
-                    <input
-                      type="checkbox"
-                      checked={checked}
-                      disabled={disabled}
-                      onChange={() => toggle(run.run_id)}
-                    />
-                    <span className="min-w-0">
-                      <span className="block truncate">
-                        {run.lot_name || `Catalog ${run.run_id}`}
-                      </span>
-                      <span className="text-xs text-[hsl(var(--muted-foreground))]">
-                        GLANCE {run.source_run_id ?? "—"} ·{" "}
-                        {(run.trace_sample_count ?? 0).toLocaleString()} samples
-                      </span>
-                    </span>
-                  </label>
-                );
-              })}
-            </div>
+                    <option value={ALL_EQUIPMENT}>All equipment</option>
+                    {equipmentOptions.map((equipment) => (
+                      <option key={equipment.id} value={equipment.id}>
+                        {equipment.name}
+                      </option>
+                    ))}
+                    {hasUnassignedEquipment && (
+                      <option value={UNASSIGNED_EQUIPMENT}>
+                        Unassigned equipment
+                      </option>
+                    )}
+                  </select>
+                </label>
+
+                <label className="text-xs">
+                  Project
+                  <select
+                    value={selectedProject}
+                    onChange={(event) => setSelectedProject(event.target.value)}
+                    className="mt-1 block w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] p-2 text-sm"
+                  >
+                    <option value={ALL_PROJECTS}>All projects</option>
+                    {projectOptions.map((project) => (
+                      <option key={project.id} value={project.id}>
+                        {project.name}
+                      </option>
+                    ))}
+                    {hasUnassignedProject && (
+                      <option value={UNASSIGNED_PROJECT}>
+                        No project / Unassigned
+                      </option>
+                    )}
+                  </select>
+                </label>
+
+                <p className="text-xs text-[hsl(var(--muted-foreground))]">
+                  Showing {filteredRuns.length.toLocaleString()} of{" "}
+                  {runs.length.toLocaleString()} trace-enabled runs.
+                </p>
+              </div>
+
+              <div className="max-h-[30rem] space-y-1 overflow-y-auto">
+                {filteredRuns.length > 0 ? (
+                  filteredRuns.map((run) => {
+                    const checked = selectedIds.includes(run.run_id);
+                    const disabled =
+                      !checked && selectedIds.length >= MAX_SELECTED_RUNS;
+                    return (
+                      <label
+                        key={run.run_id}
+                        className={`flex gap-2 rounded-md p-2 text-sm ${
+                          disabled
+                            ? "cursor-not-allowed opacity-50"
+                            : "cursor-pointer hover:bg-[hsl(var(--accent))]"
+                        }`}
+                      >
+                        <input
+                          type="checkbox"
+                          checked={checked}
+                          disabled={disabled}
+                          onChange={() => toggle(run.run_id)}
+                        />
+                        <span className="min-w-0">
+                          <span className="block truncate">
+                            {run.lot_name || `Catalog ${run.run_id}`}
+                          </span>
+                          <span className="text-xs text-[hsl(var(--muted-foreground))]">
+                            GLANCE {run.source_run_id ?? "—"} ·{" "}
+                            {(run.trace_sample_count ?? 0).toLocaleString()} samples
+                          </span>
+                        </span>
+                      </label>
+                    );
+                  })
+                ) : (
+                  <p className="rounded-md border border-dashed border-[hsl(var(--border))] p-3 text-xs text-[hsl(var(--muted-foreground))]">
+                    No trace-enabled runs match the selected equipment and
+                    project filters.
+                  </p>
+                )}
+              </div>
+            </>
           )}
         </section>