Add change detection visualization with time-series charts

[stalep]

Problem

h5m has full backend support for change detection (RelativeDifference, StdDevAnomaly, EDivisive, FixedThreshold) but the web UI has no visualization for it. Users cannot see performance regressions, change points, or time-series trends through the UI.

This is the primary value proposition of the tool — without it, users must inspect raw values via the CLI or API to identify regressions.

What Horreum provides (reference)

Horreum's "Changes" tab per test includes:

• Time-series line charts (Recharts LineChart) showing metric values over time
• Change point annotations — dots on the chart colored by confirmation status (red=unconfirmed, green=confirmed)
• Configurable timespan — 6 hours, 1 day, 1 week, 1 month, 3 months, 1 year, all
• End date picker — navigate to a specific point in time
• Line type selection — steps, straight, curve
• Fingerprint filtering — select which configuration (fingerprint) to view when a test has multiple configurations
• Change table — tabular list of change points with timestamp, linked dataset, confirmation status, description
• Confirm/Delete/Edit actions on change points

Proposed h5m implementation

Data requirements

The backend already provides the necessary data:

• GET /api/folder/{id}/labelValues — returns grouped values per upload, sortable by a domain node (e.g., timestamp)
• GET /api/value/node/{nodeId}/grouped — returns values grouped by node
• Change detection values are stored as ValueEntity instances with JSON data containing fields like index, pvalue, meanBefore, meanAfter, magnitude, hazardLevel, fingerprint, domainvalue

A new or extended endpoint may be needed to efficiently serve time-series data:

• Option A: Use existing labelValues with node filtering — one request per chart
• Option B: Create a dedicated endpoint that returns time-series data optimized for charting (pre-structured as {x: domain[], y: value[], changePoints: []})

UI components needed

1. ChangesTab — new tab on the FolderPage alongside Data, Nodes, Graph
2. TimeSeriesChart — line chart component (using Recharts or a similar library)
   • X-axis: domain values (timestamps, build numbers, iteration counts)
   • Y-axis: metric values
   • Change point markers as colored dots/annotations
   • Hover tooltips showing value, domain, fingerprint
3. TimeRangeSelector — controls for timespan and end date
4. FingerprintSelector — dropdown/filter for multi-configuration tests
5. ChangePointTable — tabular list of detected changes with details
6. VariableSelector — choose which metric to chart (from the folder's detection nodes)

Chart library recommendation

• Recharts — what Horreum uses. React-friendly, declarative, good for line charts with annotations. Already well-suited for time-series data.
• Alternative: Apache ECharts (via echarts-for-react) — more powerful for large datasets but heavier.

Related

• The backend change detection is implemented via RelativeDifference, StdDevAnomaly, EDivisive, and FixedThreshold node types
• Change detection values contain structured JSON with meanBefore, meanAfter, magnitude, pvalue, hazardLevel, fingerprint, domainvalue, rangeValueId fields
• PR persist empty sqlall results as empty array value #158 fixed empty array handling for JS scripts, ensuring compatibility with Horreum's JS combination functions