fix(web): stabilize the spectrum chart

[flamboh]

Note

🤖 GPT-6 on behalf of Oliver

Explain Like I'm Lost

The dashboard spectrum is a scatter plot of alpha over time; the file view plots f(alpha) against alpha. Both now bind Chart.js to the mounted canvas so filter changes and empty results cannot leave a blank replacement canvas or stale hover state.

Problem

• Returning from a cached empty selection left the old chart on a detached canvas. Repeating IPv4 → IPv6 → IPv4 reproduced it with the public fixture. Canvas attachments now destroy the instance whenever its canvas is removed.
• A single populated time bucket set equal X bounds, producing non-finite point positions. Constant alpha values also lacked explicit padding. Both axes now receive a visible range for singleton values.
• Spectrum points are flattened across buckets, but clicks and range selections treated point indices as bucket indices. A synthetic 02:05 point opened the 00:10 file. Selection now uses bucket timestamps.
• Non-finite blob values serialized as null coordinates and passed the nonempty-array check, leaving an apparently blank plot. Invalid pairs are now omitted, with explicit text when none remain.
• The file tooltip used index mode to combine a spectrum point with a reference-line endpoint at a different alpha. The reference is now an annotation; hover selects the nearest spectrum point.

Fix

Use canvas attachments for creation and destruction, including hover timers and resize subscriptions. Derive the selected source, filters, loading and error states; abort obsolete requests and accept results only for their current request key. Keep the existing bounded window cache and fetch only the selected spectrum source.

The day ingress-destination degeneracy was checked against a read-only copy of the sample product. Its singleton spectra are already stored in the database, with finite tau values. Reapplying the pipeline's rule for the first run of non-increasing alpha estimates reproduces the stored results within float32 rounding. This is a property of the current method on those inputs, not dashboard decoding or clipping; the sets are not small. The interpretation of internal-side MAAD remains open in #121. The pinned MAAD reference uses the same stop-at-first-increase rule. No pipeline or private data changes.

UI Changes

Fixture data only.

Before

After

Review flows

Use the Playwright fixture or a local product with address MAAD. For the fixture, open /datasets/playwright?startDate=2025-03-01&endDate=2025-03-01&groupBy=5min.

• Repeat IPv4 → IPv6 → IPv4; change Day/Hour/30 min/10 min/5 min, direction, date range, source selection, address side and Reset View. Finite data paints points; missing data shows text. Hover still shows the current bucket after changes.
• Select Packets/Bytes and return to Addresses. Weighted measures show the unavailable message; Addresses restores the chart.
• Click a spectrum point or drag a range. Navigation uses the corresponding time buckets, including missing buckets and multiple spectrum points per bucket.
• Open /netflow/files/202503010200?dataset=playwright; change measure/family and hover the spectrum. The tooltip describes one spectrum point, without an unrelated reference value.

Verification

• bun run format, bun run lint, bun run typecheck passed.
• bun run test:web: 207 tests passed.
• bun run test:e2e in the Nix shell: 23 tests passed. New browser assertions inspect painted pixels, hover text, cancellation and navigation, using synthetic fixtures.
• Browser reproduction and read-only DB/API comparison against a local sample copy completed. No private data is included here.

Made by GPT-6 using Codex.