[UI] Optimize Graph page with per-test caching, hard cap, and POST /query

Restructure the Graph page data loading to fetch only the tests being
displayed instead of all data for a machine+metric:

- Discover matching test names server-side via GET /tests with machine,
  metric, and name_contains filters
- Fetch data only for discovered tests via POST /query with multi-value
  test in the JSON body (eliminates URL length limits)
- Cache data per (machine, metric, test) with LRU eviction at 500
  entries -- filter changes only fetch uncached tests (the delta)
- Enforce a hard cap of 50 displayed tests (replaces soft cap of 20)
- Case-sensitive test filtering (matches server-side SQL LIKE behavior)
- Baseline data fetching scoped to discovered tests only

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Author: ldionne

lnt/server/ui/v5/frontend/src/__tests__/api.test.ts

@@ -892,7 +892,7 @@ describe('updateOrderTag', () => {
 });
 
 describe('queryDataPoints', () => {
-  it('passes machine and metric as query params', async () => {
+  it('sends POST with JSON body containing machine and metric', async () => {
     const pt: QueryDataPoint = {
       test: 't1', machine: 'm1', metric: 'exec_time', value: 1.0,
       order: { rev: '100' }, run_uuid: 'r1', timestamp: null,
@@ -904,35 +904,40 @@ describe('queryDataPoints', () => {
     expect(result).toHaveLength(1);
     const url = new URL(mockFetch.mock.calls[0][0]);
     expect(url.pathname).toBe('/api/v5/nts/query');
-    expect(url.searchParams.get('machine')).toBe('m1');
-    expect(url.searchParams.get('metric')).toBe('exec_time');
+    const init = mockFetch.mock.calls[0][1] as RequestInit;
+    expect(init.method).toBe('POST');
+    const body = JSON.parse(init.body as string);
+    expect(body.machine).toBe('m1');
+    expect(body.metric).toBe('exec_time');
   });
 
-  it('passes optional filter params', async () => {
+  it('passes optional filter params in POST body', async () => {
     mockFetch.mockResolvedValueOnce(mockResponse(cursorPage([])));
 
     await queryDataPoints('nts', {
       machine: 'm1', metric: 'exec_time',
       test: 't1', afterOrder: '100', beforeOrder: '200',
     });
 
-    const url = new URL(mockFetch.mock.calls[0][0]);
-    expect(url.searchParams.get('test')).toBe('t1');
-    expect(url.searchParams.get('after_order')).toBe('100');
-    expect(url.searchParams.get('before_order')).toBe('200');
+    const init = mockFetch.mock.calls[0][1] as RequestInit;
+    const body = JSON.parse(init.body as string);
+    expect(body.test).toEqual(['t1']);
+    expect(body.after_order).toBe('100');
+    expect(body.before_order).toBe('200');
   });
 
-  it('passes order exact-match param', async () => {
+  it('passes order exact-match param in POST body', async () => {
     mockFetch.mockResolvedValueOnce(mockResponse(cursorPage([])));
 
     await queryDataPoints('nts', {
       machine: 'm1', metric: 'exec_time', order: '100',
     });
 
-    const url = new URL(mockFetch.mock.calls[0][0]);
-    expect(url.searchParams.get('order')).toBe('100');
-    expect(url.searchParams.has('after_order')).toBe(false);
-    expect(url.searchParams.has('before_order')).toBe(false);
+    const init = mockFetch.mock.calls[0][1] as RequestInit;
+    const body = JSON.parse(init.body as string);
+    expect(body.order).toBe('100');
+    expect(body.after_order).toBeUndefined();
+    expect(body.before_order).toBeUndefined();
   });
 
   it('auto-paginates across multiple pages', async () => {
@@ -948,6 +953,10 @@ describe('queryDataPoints', () => {
 
     expect(result).toHaveLength(2);
     expect(mockFetch).toHaveBeenCalledTimes(2);
+    // Second call should include cursor in body
+    const init2 = mockFetch.mock.calls[1][1] as RequestInit;
+    const body2 = JSON.parse(init2.body as string);
+    expect(body2.cursor).toBe('cursor-2');
   });
 });
 

lnt/server/ui/v5/frontend/src/__tests__/pages/graph.test.ts

@@ -86,7 +86,7 @@ describe('buildTraces', () => {
       makePoint('test-B', '100', 3.0),
     ];
 
-    const traces = buildTraces(points, '', 'median', 'median');
+    const traces = buildTraces(points, 'median', 'median');
 
     expect(traces).toHaveLength(2);
     expect(traces[0].testName).toBe('test-A');
@@ -95,17 +95,16 @@ describe('buildTraces', () => {
     expect(traces[1].points).toHaveLength(1);
   });
 
-  it('applies test filter (case-insensitive substring)', () => {
+  it('handles pre-filtered input (single test)', () => {
     const points = [
       makePoint('compile/test-A', '100', 1.0),
-      makePoint('exec/test-B', '100', 2.0),
-      makePoint('compile/test-C', '100', 3.0),
+      makePoint('compile/test-A', '101', 2.0),
     ];
 
-    const traces = buildTraces(points, 'compile', 'median', 'median');
+    const traces = buildTraces(points, 'median', 'median');
 
-    expect(traces).toHaveLength(2);
-    expect(traces.map(t => t.testName).sort()).toEqual(['compile/test-A', 'compile/test-C']);
+    expect(traces).toHaveLength(1);
+    expect(traces[0].testName).toBe('compile/test-A');
   });
 
   it('aggregates multiple runs at same order using run aggregation', () => {
@@ -116,7 +115,7 @@ describe('buildTraces', () => {
     ];
 
     // Median of [1.0, 3.0, 5.0] = 3.0
-    const traces = buildTraces(points, '', 'median', 'median');
+    const traces = buildTraces(points, 'median', 'median');
     expect(traces).toHaveLength(1);
     expect(traces[0].points).toHaveLength(1);
     expect(traces[0].points[0].value).toBe(3.0);
@@ -130,19 +129,17 @@ describe('buildTraces', () => {
     ];
 
     // Mean of [1.0, 3.0] = 2.0
-    const traces = buildTraces(points, '', 'mean', 'median');
+    const traces = buildTraces(points, 'mean', 'median');
     expect(traces[0].points[0].value).toBe(2.0);
   });
 
-  it('returns empty array when no points match filter', () => {
-    const points = [makePoint('test-A', '100', 1.0)];
-
-    const traces = buildTraces(points, 'nonexistent', 'median', 'median');
-    expect(traces).toHaveLength(0);
+  it('returns empty array for single empty-points input', () => {
+    const traces = buildTraces([makePoint('test-A', '100', 1.0)], 'median', 'median');
+    expect(traces).toHaveLength(1);
   });
 
   it('returns empty array for empty input', () => {
-    const traces = buildTraces([], '', 'median', 'median');
+    const traces = buildTraces([], 'median', 'median');
     expect(traces).toHaveLength(0);
   });
 
@@ -153,7 +150,7 @@ describe('buildTraces', () => {
       makePoint('middle', '100', 3.0),
     ];
 
-    const traces = buildTraces(points, '', 'median', 'median');
+    const traces = buildTraces(points, 'median', 'median');
     expect(traces.map(t => t.testName)).toEqual(['alpha', 'middle', 'zebra']);
   });
 
@@ -164,7 +161,7 @@ describe('buildTraces', () => {
       makePoint('test-A', '102', 3.0),
     ];
 
-    const traces = buildTraces(points, '', 'median', 'median');
+    const traces = buildTraces(points, 'median', 'median');
     const orderValues = traces[0].points.map(p => p.orderValue);
     expect(orderValues).toEqual(['100', '101', '102']);
   });
@@ -176,7 +173,7 @@ describe('buildTraces', () => {
       makePoint('test-A', '100', 1.0),
     ];
 
-    const traces = buildTraces(points, '', 'median', 'median');
+    const traces = buildTraces(points, 'median', 'median');
     // buildTraces preserves Map insertion order, so reversed input stays reversed
     const orderValues = traces[0].points.map(p => p.orderValue);
     expect(orderValues).toEqual(['102', '101', '100']);
@@ -192,7 +189,7 @@ describe('buildTraces', () => {
       makePoint('test-B', '100', 4.0),
     ];
 
-    const traces = buildTraces(points, '', 'median', 'median');
+    const traces = buildTraces(points, 'median', 'median');
     expect(traces).toHaveLength(2);
     // test-A comes first alphabetically
     expect(traces[0].testName).toBe('test-A');
@@ -209,89 +206,62 @@ describe('computeActiveTests', () => {
     'papa', 'quebec', 'romeo', 'sierra', 'tango',
     'uniform', 'victor', 'whiskey'];
 
-  it('caps at 20 when autoCapped=true and no filter/hidden', () => {
-    const active = computeActiveTests(names, '', new Set(), true);
-    expect(active.size).toBe(20);
-    expect(active.has('alpha')).toBe(true);
-    expect(active.has('tango')).toBe(true);  // 20th
-    expect(active.has('uniform')).toBe(false);  // 21st
-  });
-
-  it('disables cap when filter is non-empty', () => {
-    const active = computeActiveTests(names, 'a', new Set(), true);
-    // 'alpha', 'charlie', 'delta', 'tango', 'papa', 'sierra', 'whiskey' — all with 'a'
-    for (const n of names) {
-      if (n.toLowerCase().includes('a')) {
-        expect(active.has(n)).toBe(true);
-      } else {
-        expect(active.has(n)).toBe(false);
-      }
-    }
+  it('returns all names when no hidden set', () => {
+    const active = computeActiveTests(names, '', new Set());
+    expect(active.size).toBe(names.length);
   });
 
   it('removes manually hidden tests', () => {
     const hidden = new Set(['beta', 'charlie']);
-    const active = computeActiveTests(names, '', hidden, false);
+    const active = computeActiveTests(names, '', hidden);
     expect(active.has('alpha')).toBe(true);
     expect(active.has('beta')).toBe(false);
     expect(active.has('charlie')).toBe(false);
     expect(active.has('delta')).toBe(true);
   });
 
-  it('cap is disabled when manuallyHidden is non-empty', () => {
-    const hidden = new Set(['alpha']);
-    // autoCapped=true but hidden is non-empty → cap disabled
-    const active = computeActiveTests(names, '', hidden, true);
-    // All names except 'alpha' should be active (no 20-cap)
-    expect(active.size).toBe(names.length - 1);
-    expect(active.has('alpha')).toBe(false);
-    expect(active.has('uniform')).toBe(true);  // would be capped otherwise
-  });
-
   it('returns empty set for empty input', () => {
-    const active = computeActiveTests([], '', new Set(), true);
+    const active = computeActiveTests([], '', new Set());
     expect(active.size).toBe(0);
   });
 
   it('double-click isolation is just manuallyHidden with all others hidden', () => {
-    // Simulates what onIsolate does: hide all except 'charlie'
     const hidden = new Set(names.filter(n => n !== 'charlie'));
-    const active = computeActiveTests(names, '', hidden, false);
+    const active = computeActiveTests(names, '', hidden);
     expect(active.size).toBe(1);
     expect(active.has('charlie')).toBe(true);
   });
 
   it('after isolation, single-click unhide works naturally', () => {
-    // After isolating 'charlie', user single-clicks 'alpha' to unhide it
     const hidden = new Set(names.filter(n => n !== 'charlie'));
     hidden.delete('alpha');
-    const active = computeActiveTests(names, '', hidden, false);
+    const active = computeActiveTests(names, '', hidden);
     expect(active.size).toBe(2);
     expect(active.has('charlie')).toBe(true);
     expect(active.has('alpha')).toBe(true);
   });
 
-  it('filters multi-machine trace names by test name portion only', () => {
+  it('handles multi-machine trace names', () => {
     const traceNames = [
       `compile/test-A${TRACE_SEP}clang-x86`,
       `compile/test-A${TRACE_SEP}gcc-arm`,
       `exec/test-B${TRACE_SEP}clang-x86`,
       `exec/test-B${TRACE_SEP}gcc-arm`,
     ];
-    const active = computeActiveTests(traceNames, 'compile', new Set(), false);
-    expect(active.size).toBe(2);
-    expect(active.has(`compile/test-A${TRACE_SEP}clang-x86`)).toBe(true);
-    expect(active.has(`compile/test-A${TRACE_SEP}gcc-arm`)).toBe(true);
-    expect(active.has(`exec/test-B${TRACE_SEP}clang-x86`)).toBe(false);
+    const active = computeActiveTests(traceNames, 'compile', new Set());
+    // No client-side filtering — all traces are active
+    expect(active.size).toBe(4);
   });
 
-  it('filter does not match machine name', () => {
+  it('hidden traces are removed regardless of filter string', () => {
     const traceNames = [
       `test-A${TRACE_SEP}clang-x86`,
       `test-A${TRACE_SEP}gcc-arm`,
     ];
-    const active = computeActiveTests(traceNames, 'clang', new Set(), false);
-    expect(active.size).toBe(0);
+    const hidden = new Set([`test-A${TRACE_SEP}clang-x86`]);
+    const active = computeActiveTests(traceNames, '', hidden);
+    expect(active.size).toBe(1);
+    expect(active.has(`test-A${TRACE_SEP}gcc-arm`)).toBe(true);
   });
 });
 
@@ -359,7 +329,7 @@ describe('buildBaselinesFromData', () => {
     const cache = buildCache(baselines, 'exec_time', [points]);
 
     const blResult = buildBaselinesFromData(baselines, cache, 'exec_time', median);
-    const traces = buildTraces(points, '', 'median', 'median');
+    const traces = buildTraces(points, 'median', 'median');
 
     // Both should produce exactly the same value for test-A at order 100
     const traceValue = traces.find(t => t.testName === 'test-A')!.points