WAN live chart follows map timeline scrubber (#720)

* WAN live chart follows map timeline scrubber

When scrubbing or playing back historic data on the 2D/3D maps, the WAN
live chart now shows the same time window. Stops live polling during
historic mode and resumes when returning to live. No-op for the
Dashboard version since it has no scrubber.

* Remove stale review diff

* Pause/resume WAN chart when map live playback is toggled

Map now notifies Blazor on play/pause via OnMapPlayStateChanged.
WAN chart pauses polling when live playback is paused and resumes
when unpaused.

* Clamp WAN chart time axis to present - no future blank space

* Add playhead annotation line on WAN chart during historic scrubbing

* Stabilize RTT Y-axis scaling - anchor at 0, snap max to 5ms increments

* Guard RTT Y-axis max against NaN/undefined during scrubbing

* Fix RTT Y-axis jitter - compute max from buffer data, not dynamic callback

* Wider RTT Y-axis steps (10ms) to reduce oscillation

* Don't overwrite saved 3D map camera position during fly-in animation

* Use p95 RTT for Y-axis max to ignore smoothed-out spikes

Author: tvancott42

src/NetworkOptimizer.Web/Components/Pages/Monitoring.razor

@@ -1261,9 +1261,26 @@ else
         }
     }
 
+    [JSInvokable]
+    public void OnMapPlayStateChanged(bool paused, string mode)
+    {
+        if (!_wanLiveChartMounted) return;
+        if (paused)
+            _ = JS.InvokeVoidAsync("eval", "window.__wanLiveChart?.pause();");
+        else if (mode == "live")
+            _ = JS.InvokeVoidAsync("eval", "window.__wanLiveChart?.resume();");
+    }
+
     [JSInvokable]
     public async Task OnMapTimeChanged(string? isoTimestamp)
     {
+        // Sync WAN live chart to the same timeline position
+        if (_wanLiveChartMounted)
+        {
+            try { await JS.InvokeVoidAsync("eval", $"window.__wanLiveChart?.seekTime({(isoTimestamp != null ? $"'{isoTimestamp}'" : "null")});"); }
+            catch { }
+        }
+
         if (isoTimestamp == null)
         {
             _mapHistoricAt = null;

src/NetworkOptimizer.Web/wwwroot/js/lan-flow-map.js

@@ -248,10 +248,13 @@ export class LanFlowMap {
         } catch {}
 
         // Persist camera on orbit change with 500ms debounce.
+        // Skip saves during the fly-in animation so we don't overwrite
+        // the saved position with intermediate fly-in frames.
         let camSaveTimer = null;
         this.controls.addEventListener('change', () => {
             clearTimeout(camSaveTimer);
             camSaveTimer = setTimeout(() => {
+                if (this._flyInUntil && performance.now() < this._flyInUntil) return;
                 try {
                     const p = this.camera.position;
                     const t = this.controls.target;
@@ -1540,6 +1543,7 @@ export class LanFlowMap {
         this._paused = !this._paused;
         this._syncPlayPauseIcon();
         flowData.publishPlayState(this._paused, this._mode);
+        this._notifyPlayState();
         if (this._paused) {
             this._stopHistoricPlayback();
             return;
@@ -2113,6 +2117,12 @@ export class LanFlowMap {
         await this._loadHistoric(at);
     }
 
+    _notifyPlayState() {
+        if (!this._dotnetRef) return;
+        this._dotnetRef.invokeMethodAsync('OnMapPlayStateChanged', this._paused, this._mode)
+            .catch(() => {});
+    }
+
     _notifyStatCards(at) {
         if (!this._dotnetRef) {
             console.warn('[LanFlowMap] _notifyStatCards: dotnetRef is null');

src/NetworkOptimizer.Web/wwwroot/js/wan-live-chart.js

@@ -95,8 +95,8 @@ function buildOpts() {
             {
                 seriesName: 'RTT',
                 opposite: true,
-                min: v => Math.max(0, v * 0.5),
-                max: v => v * 1.5,
+                min: 0,
+                max: 10,
                 labels: {
                     style: { colors: '#9ca3af', fontSize: '10px' },
                     formatter: v => v != null ? v.toFixed(0) : '',
@@ -129,11 +129,19 @@ function buildOpts() {
     };
 }
 
+function rttYMax() {
+    const rtts = buffer.map(p => p.rtt).filter(v => v != null && v > 0).sort((a, b) => a - b);
+    if (rtts.length === 0) return 10;
+    const p95 = rtts[Math.floor(rtts.length * 0.95)];
+    return Math.ceil((p95 * 1.5) / 10) * 10;
+}
+
 function updateChart() {
     if (!chart || buffer.length === 0) return;
     const now = Date.now();
     chart.updateOptions({
         xaxis: { min: now - HISTORY_MINUTES * 60000, max: now },
+        yaxis: [chart.opts.yaxis[0], chart.opts.yaxis[1], chart.opts.yaxis[2], { ...chart.opts.yaxis[3], max: rttYMax() }],
     }, false, false, false);
     chart.updateSeries([
         { name: 'Download', data: buffer.map(p => ({ x: p.time, y: p.download })) },
@@ -203,6 +211,77 @@ export async function mount(containerId, opts) {
     pollTimer = setInterval(pollLive, interval);
 }
 
+export function pause() {
+    if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+}
+
+export function resume() {
+    if (!chart || pollTimer) return;
+    pollTimer = setInterval(pollLive, POLL_MS);
+}
+
+export async function seekTime(isoTimestamp) {
+    if (!chart) return;
+    if (!isoTimestamp) {
+        // Return to live mode - clear playhead annotation
+        chart.clearAnnotations();
+        if (pollTimer) return; // already live
+        buffer = [];
+        await loadHistory();
+        updateChart();
+        pollTimer = setInterval(pollLive, POLL_MS);
+        return;
+    }
+    // Historic mode: stop polling, fetch window centered on timestamp
+    if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+    const at = new Date(isoTimestamp).getTime();
+    const halfWindow = HISTORY_MINUTES * 60000 / 2;
+    const from = new Date(at - halfWindow);
+    const to = new Date(at + halfWindow);
+    try {
+        const resp = await fetch(
+            `/api/monitoring/wan-live-chart-data?from=${from.toISOString()}&to=${to.toISOString()}`,
+            { credentials: 'same-origin' });
+        if (!resp.ok) return;
+        const data = await resp.json();
+        buffer = (data.points || []).map(p => ({
+            time: new Date(p.time).getTime(),
+            download: p.downloadBps,
+            upload: p.uploadBps,
+            rtt: p.rttMs,
+            loss: p.lossPercent,
+        }));
+    } catch { return; }
+    if (buffer.length === 0) return;
+    const maxTime = Math.min(at + halfWindow, Date.now());
+    chart.updateOptions({
+        xaxis: { min: maxTime - HISTORY_MINUTES * 60000, max: maxTime },
+        yaxis: [chart.opts.yaxis[0], chart.opts.yaxis[1], chart.opts.yaxis[2], { ...chart.opts.yaxis[3], max: rttYMax() }],
+    }, false, false, false);
+    chart.updateSeries([
+        { name: 'Download', data: buffer.map(p => ({ x: p.time, y: p.download })) },
+        { name: 'Upload',   data: buffer.map(p => ({ x: p.time, y: p.upload })) },
+        { name: 'Loss',     data: buffer.map(p => ({ x: p.time, y: p.loss })) },
+        { name: 'RTT',      data: buffer.map(p => ({ x: p.time, y: p.rtt })) },
+    ], false);
+
+    chart.clearAnnotations();
+    chart.addXaxisAnnotation({
+        x: at,
+        borderColor: '#f1f5f9',
+        strokeDashArray: 3,
+        opacity: 0.5,
+        label: {
+            text: new Date(at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
+            borderColor: 'transparent',
+            style: { background: 'transparent', color: '#f1f5f9', fontSize: '9px' },
+            position: 'front',
+            orientation: 'horizontal',
+            offsetY: -5,
+        }
+    });
+}
+
 export function unmount() {
     mountGen++;
     if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }