dashboard: ignore traffic while suspended

2 files changed, 13 insertions, 2 deletions

diff --git a/docs/dashboard.md b/docs/dashboard.md
index 47badc4..20aea9a 100644
--- a/docs/dashboard.md
+++ b/docs/dashboard.md
@@ -105,7 +105,9 @@ at one speed: over a longer link they arrive later.
 They come from the per-peer message counts, which arrive every 2 s: what was sent and
 received since is spread over the next 2 s, at most 6 dots per link and direction,
 shared out by message kind, each kind in its colour (named in the legend; the console
-colours them alike). A dot is as large as its kind's messages were on average
+colours them alike). Counts that come after a gap (the computer slept, the stream
+stalled), and those that were queued meanwhile and come at once with them, show no
+dots: they would all run at once. A dot is as large as its kind's messages were on average
 (by the size's logarithm: a ping small, a large sync message large); the `size` slider
 right after their legend makes all dots larger or smaller, and the `speed` slider after
 it makes them run faster or slower (0.1 to 0.9 map units per millisecond, 0.3 at
diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 8ee1ee5..a5a96e8 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -2005,6 +2005,9 @@ flowsToggle.addEventListener("click", () => {
   }
 });
 let lastTraffic = null;
+// When the last update's traffic came, by the wall clock (it runs on while the computer
+// sleeps, unlike `performance.now()` on some systems).
+let lastTrafficAt = 0;
 const flows = [];
 let flowFrame = null;
 // Messages and bytes by kind, of a peer's `traffic.sent` or `.received`.
@@ -2081,7 +2084,13 @@ function dotsFor(kinds, total) {
 function trafficArrived() {
   if (!state) return;
   const self = state.node.id, now = performance.now();
-  const dots = flowsShown && !calm.matches && !document.hidden &&
+  // Only for an update in its time: not the first after a gap (the computer slept, the
+  // stream stalled), whose counts grew over all of it, nor those queued meanwhile and
+  // arriving at once with it, each of which would add its dots to the same 2 s.
+  const wall = Date.now(), gap = wall - lastTrafficAt;
+  lastTrafficAt = wall;
+  const timely = gap >= FLOW_SPREAD_MS / 4 && gap <= FLOW_SPREAD_MS * 2.5;
+  const dots = timely && flowsShown && !calm.matches && !document.hidden &&
     !document.getElementById("map").classList.contains("collapsed");
   const current = new Map();
   for (const [id, peer] of Object.entries(state.peers.peers)) {