feat: simplify charts to show destination-only and rolling 50-ping loss window

dbfx · claude · dbfx · commit 44b955e07696 · 2026-03-05T11:58:42.000+02:00
Overview charts (latency, jitter, packet loss) now show only the last
hop (destination) instead of all hops. Loss monitor calculates loss %
over the last 50 pings instead of all-time, and the loss graph shows
a single averaged line across all targets.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/renderer/components/LossMonitorView.tsx b/src/renderer/components/LossMonitorView.tsx
@@ -17,7 +17,6 @@ import {
   Line,
 } from 'react-simple-maps';
 import type { TargetStats } from '../hooks/useLossMonitor';
-import Sparkline from './Sparkline';
 
 const GEO_URL = 'https://cdn.jsdelivr.net/npm/world-atlas@2/land-110m.json';
 
@@ -56,24 +55,24 @@ export default function LossMonitorView({ targets, isRunning, onStart, onStop }:
 
     const maxLen = Math.max(...targets.map((t) => t.lossHistory.length));
     const sampleCount = Math.min(maxLen, 120);
-    const data: Record<string, number>[] = [];
+    const data: { idx: number; avg: number }[] = [];
 
     for (let i = 0; i < sampleCount; i++) {
-      const row: Record<string, number> = { idx: i };
+      let sum = 0;
+      let count = 0;
       for (const t of targets) {
         const offset = Math.max(0, t.lossHistory.length - sampleCount);
-        row[t.id] = t.lossHistory[offset + i] ?? 0;
+        const val = t.lossHistory[offset + i];
+        if (val !== undefined) {
+          sum += val;
+          count++;
+        }
       }
-      data.push(row);
+      data.push({ idx: i, avg: count > 0 ? Math.round((sum / count) * 10) / 10 : 0 });
     }
     return data;
   }, [targets]);
 
-  const targetMap = useMemo(() => {
-    const m = new Map<string, TargetStats>();
-    for (const t of targets) m.set(t.id, t);
-    return m;
-  }, [targets]);
 
   return (
     <div className="h-full flex flex-col">
@@ -160,27 +159,17 @@ export default function LossMonitorView({ targets, isRunning, onStart, onStop }:
         <div className="glass-card p-3 h-full">
           <div className="flex items-center justify-between mb-1 px-1">
             <div className="text-[10px] uppercase tracking-wider text-white/20">
-              Packet Loss Over Time
-            </div>
-            <div className="flex gap-3">
-              {targets.map((t) => (
-                <div key={t.id} className="flex items-center gap-1 text-[10px] text-white/30">
-                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: t.color }} />
-                  {t.name}
-                </div>
-              ))}
+              Avg Packet Loss Over Time (last 50 pings)
             </div>
           </div>
           {chartData.length > 0 ? (
             <ResponsiveContainer width="100%" height="85%">
               <AreaChart data={chartData}>
                 <defs>
-                  {targets.map((t) => (
-                    <linearGradient key={t.id} id={`loss-fill-${t.id}`} x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="0%" stopColor={t.color} stopOpacity={0.25} />
-                      <stop offset="100%" stopColor={t.color} stopOpacity={0} />
-                    </linearGradient>
-                  ))}
+                  <linearGradient id="loss-fill-avg" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor="#ef4444" stopOpacity={0.3} />
+                    <stop offset="100%" stopColor="#ef4444" stopOpacity={0} />
+                  </linearGradient>
                 </defs>
                 <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" />
                 <XAxis dataKey="idx" hide />
@@ -196,24 +185,18 @@ export default function LossMonitorView({ targets, isRunning, onStart, onStop }:
                 <Tooltip
                   contentStyle={TOOLTIP_STYLE}
                   labelFormatter={() => ''}
-                  formatter={(value: number, name: string) => {
-                    const t = targetMap.get(name);
-                    return [`${value}%`, t?.name || name];
-                  }}
+                  formatter={(value: number) => [`${value}%`, 'Avg Loss']}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="avg"
+                  stroke="#ef4444"
+                  strokeWidth={2}
+                  fill="url(#loss-fill-avg)"
+                  dot={false}
+                  isAnimationActive={false}
+                  connectNulls
                 />
-                {targets.map((t) => (
-                  <Area
-                    key={t.id}
-                    type="monotone"
-                    dataKey={t.id}
-                    stroke={t.color}
-                    strokeWidth={2}
-                    fill={`url(#loss-fill-${t.id})`}
-                    dot={false}
-                    isAnimationActive={false}
-                    connectNulls
-                  />
-                ))}
               </AreaChart>
             </ResponsiveContainer>
           ) : (
diff --git a/src/renderer/components/OverviewCharts.tsx b/src/renderer/components/OverviewCharts.tsx
@@ -9,20 +9,13 @@ import {
   YAxis,
   Tooltip,
   CartesianGrid,
-  Legend,
 } from 'recharts';
 import type { HopData } from '../../shared/types';
 
 interface OverviewChartsProps {
   hops: HopData[];
 }
 
-const HOP_COLORS = [
-  '#06b6d4', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
-  '#ec4899', '#14b8a6', '#f97316', '#6366f1', '#84cc16',
-  '#e879f9', '#22d3ee', '#fb923c', '#a78bfa', '#34d399',
-];
-
 const TOOLTIP_STYLE = {
   backgroundColor: 'rgba(10,10,15,0.95)',
   border: '1px solid rgba(255,255,255,0.1)',
@@ -32,75 +25,60 @@ const TOOLTIP_STYLE = {
 };
 
 export default function OverviewCharts({ hops }: OverviewChartsProps) {
-  const visibleHops = useMemo(
-    () => hops.filter((h) => h.ip && h.ip !== '???'),
+  const lastHop = useMemo(
+    () => [...hops].reverse().find((h) => h.ip && h.ip !== '???') ?? null,
     [hops],
   );
 
-  // Build time-series data: each index is a sample number, each hop contributes a column
+  // Build time-series data for the last hop (destination) only
   const { latencyData, jitterData, lossData } = useMemo(() => {
-    if (visibleHops.length === 0) return { latencyData: [], jitterData: [], lossData: [] };
-
-    const maxLen = Math.max(...visibleHops.map((h) => h.history.length));
-    const sampleCount = Math.min(maxLen, 60);
-    const latency: Record<string, number | null>[] = [];
-    const jitter: Record<string, number | null>[] = [];
-    const loss: Record<string, number>[] = [];
-
-    for (let i = 0; i < sampleCount; i++) {
-      const lRow: Record<string, number | null> = { idx: i };
-      const jRow: Record<string, number | null> = { idx: i };
-      const losRow: Record<string, number> = { idx: i };
+    if (!lastHop) return { latencyData: [], jitterData: [], lossData: [] };
 
-      for (const hop of visibleHops) {
-        const offset = Math.max(0, hop.history.length - sampleCount);
-        const val = hop.history[offset + i] ?? null;
-        const key = `hop${hop.hopNumber}`;
-        lRow[key] = val;
+    const sampleCount = Math.min(lastHop.history.length, 60);
+    const offset = Math.max(0, lastHop.history.length - sampleCount);
 
-        // Compute rolling jitter (stddev of last 5 values up to this point)
-        const start = Math.max(0, offset + i - 4);
-        const end = offset + i + 1;
-        const window = hop.history.slice(start, end).filter((v): v is number => v !== null);
-        if (window.length > 1) {
-          const mean = window.reduce((a, b) => a + b, 0) / window.length;
-          const variance = window.reduce((s, v) => s + (v - mean) ** 2, 0) / window.length;
-          jRow[key] = Math.round(Math.sqrt(variance) * 10) / 10;
-        } else {
-          jRow[key] = 0;
-        }
+    const latency: { idx: number; latency: number | null }[] = [];
+    const jitter: { idx: number; jitter: number }[] = [];
+    const loss: { idx: number; loss: number }[] = [];
 
-        // Rolling loss: count nulls in last 10 samples
-        const lossStart = Math.max(0, offset + i - 9);
-        const lossEnd = offset + i + 1;
-        const lossWindow = hop.history.slice(lossStart, lossEnd);
-        const nullCount = lossWindow.filter((v) => v === null).length;
-        losRow[key] = Math.round((nullCount / lossWindow.length) * 100 * 10) / 10;
+    for (let i = 0; i < sampleCount; i++) {
+      const val = lastHop.history[offset + i] ?? null;
+      latency.push({ idx: i, latency: val });
+
+      // Rolling jitter (stddev of last 5 values)
+      const jStart = Math.max(0, offset + i - 4);
+      const jEnd = offset + i + 1;
+      const window = lastHop.history.slice(jStart, jEnd).filter((v): v is number => v !== null);
+      let jVal = 0;
+      if (window.length > 1) {
+        const mean = window.reduce((a, b) => a + b, 0) / window.length;
+        const variance = window.reduce((s, v) => s + (v - mean) ** 2, 0) / window.length;
+        jVal = Math.round(Math.sqrt(variance) * 10) / 10;
       }
-
-      latency.push(lRow);
-      jitter.push(jRow);
-      loss.push(losRow);
+      jitter.push({ idx: i, jitter: jVal });
+
+      // Rolling loss: count nulls in last 50 samples
+      const lStart = Math.max(0, offset + i - 49);
+      const lEnd = offset + i + 1;
+      const lossWindow = lastHop.history.slice(lStart, lEnd);
+      const nullCount = lossWindow.filter((v) => v === null).length;
+      loss.push({ idx: i, loss: Math.round((nullCount / lossWindow.length) * 100 * 10) / 10 });
     }
 
     return { latencyData: latency, jitterData: jitter, lossData: loss };
-  }, [visibleHops]);
+  }, [lastHop]);
 
-  if (visibleHops.length === 0 || latencyData.length === 0) return null;
+  if (!lastHop || latencyData.length === 0) return null;
 
-  const hopKeys = visibleHops.map((h) => ({
-    key: `hop${h.hopNumber}`,
-    label: `#${h.hopNumber}`,
-    color: HOP_COLORS[(h.hopNumber - 1) % HOP_COLORS.length],
-  }));
+  const destLabel = lastHop.hostname || lastHop.ip || `Hop #${lastHop.hopNumber}`;
 
   return (
     <div className="flex-shrink-0 px-4 pb-2">
       <div className="flex gap-3">
         {/* Latency */}
         <div className="flex-1 glass-card p-3" style={{ height: 160 }}>
           <div className="text-[10px] uppercase tracking-wider text-white/20 mb-1 px-1">
-            Latency (ms)
+            Latency — {destLabel}
           </div>
           <ResponsiveContainer width="100%" height="85%">
             <LineChart data={latencyData}>
@@ -113,27 +91,28 @@ export default function OverviewCharts({ hops }: OverviewChartsProps) {
                 tickLine={false}
                 label={{ value: 'ms', angle: -90, position: 'insideLeft', style: { fontSize: 9, fill: 'rgba(255,255,255,0.2)' } }}
               />
-              <Tooltip contentStyle={TOOLTIP_STYLE} labelFormatter={() => ''} />
-              {hopKeys.map(({ key, color }) => (
-                <Line
-                  key={key}
-                  type="monotone"
-                  dataKey={key}
-                  stroke={color}
-                  strokeWidth={1.5}
-                  dot={false}
-                  isAnimationActive={false}
-                  connectNulls
-                />
-              ))}
+              <Tooltip
+                contentStyle={TOOLTIP_STYLE}
+                labelFormatter={() => ''}
+                formatter={(value: number) => [`${value} ms`, 'Latency']}
+              />
+              <Line
+                type="monotone"
+                dataKey="latency"
+                stroke="#06b6d4"
+                strokeWidth={1.5}
+                dot={false}
+                isAnimationActive={false}
+                connectNulls
+              />
             </LineChart>
           </ResponsiveContainer>
         </div>
 
         {/* Jitter */}
         <div className="flex-1 glass-card p-3" style={{ height: 160 }}>
           <div className="text-[10px] uppercase tracking-wider text-white/20 mb-1 px-1">
-            Jitter (ms)
+            Jitter — {destLabel}
           </div>
           <ResponsiveContainer width="100%" height="85%">
             <LineChart data={jitterData}>
@@ -146,37 +125,36 @@ export default function OverviewCharts({ hops }: OverviewChartsProps) {
                 tickLine={false}
                 label={{ value: 'ms', angle: -90, position: 'insideLeft', style: { fontSize: 9, fill: 'rgba(255,255,255,0.2)' } }}
               />
-              <Tooltip contentStyle={TOOLTIP_STYLE} labelFormatter={() => ''} />
-              {hopKeys.map(({ key, color }) => (
-                <Line
-                  key={key}
-                  type="monotone"
-                  dataKey={key}
-                  stroke={color}
-                  strokeWidth={1.5}
-                  dot={false}
-                  isAnimationActive={false}
-                  connectNulls
-                />
-              ))}
+              <Tooltip
+                contentStyle={TOOLTIP_STYLE}
+                labelFormatter={() => ''}
+                formatter={(value: number) => [`${value} ms`, 'Jitter']}
+              />
+              <Line
+                type="monotone"
+                dataKey="jitter"
+                stroke="#f59e0b"
+                strokeWidth={1.5}
+                dot={false}
+                isAnimationActive={false}
+                connectNulls
+              />
             </LineChart>
           </ResponsiveContainer>
         </div>
 
         {/* Packet Loss */}
         <div className="flex-1 glass-card p-3" style={{ height: 160 }}>
           <div className="text-[10px] uppercase tracking-wider text-white/20 mb-1 px-1">
-            Packet Loss (%)
+            Packet Loss — {destLabel}
           </div>
           <ResponsiveContainer width="100%" height="85%">
             <AreaChart data={lossData}>
               <defs>
-                {hopKeys.map(({ key, color }) => (
-                  <linearGradient key={key} id={`loss-${key}`} x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stopColor={color} stopOpacity={0.3} />
-                    <stop offset="100%" stopColor={color} stopOpacity={0} />
-                  </linearGradient>
-                ))}
+                <linearGradient id="loss-dest" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="#ef4444" stopOpacity={0.3} />
+                  <stop offset="100%" stopColor="#ef4444" stopOpacity={0} />
+                </linearGradient>
               </defs>
               <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" />
               <XAxis dataKey="idx" hide />
@@ -188,20 +166,21 @@ export default function OverviewCharts({ hops }: OverviewChartsProps) {
                 tickLine={false}
                 label={{ value: '%', angle: -90, position: 'insideLeft', style: { fontSize: 9, fill: 'rgba(255,255,255,0.2)' } }}
               />
-              <Tooltip contentStyle={TOOLTIP_STYLE} labelFormatter={() => ''} />
-              {hopKeys.map(({ key, color }) => (
-                <Area
-                  key={key}
-                  type="monotone"
-                  dataKey={key}
-                  stroke={color}
-                  strokeWidth={1.5}
-                  fill={`url(#loss-${key})`}
-                  dot={false}
-                  isAnimationActive={false}
-                  connectNulls
-                />
-              ))}
+              <Tooltip
+                contentStyle={TOOLTIP_STYLE}
+                labelFormatter={() => ''}
+                formatter={(value: number) => [`${value}%`, 'Loss']}
+              />
+              <Area
+                type="monotone"
+                dataKey="loss"
+                stroke="#ef4444"
+                strokeWidth={1.5}
+                fill="url(#loss-dest)"
+                dot={false}
+                isAnimationActive={false}
+                connectNulls
+              />
             </AreaChart>
           </ResponsiveContainer>
         </div>
diff --git a/src/renderer/hooks/useLossMonitor.ts b/src/renderer/hooks/useLossMonitor.ts
