dashboard: show eager links on the map

3 files changed, 39 insertions, 1 deletions

diff --git a/src/api/dashboard/clocks.rs b/src/api/dashboard/clocks.rs
index 9f069be..ac58676 100644
--- a/src/api/dashboard/clocks.rs
+++ b/src/api/dashboard/clocks.rs
@@ -99,6 +99,8 @@ mod tests {
             down: false,
             rtt_us: None,
             dormant: false,
+            eager_to: false,
+            eager_from: false,
             others: Vec::new(),
             clock: Some(ClockOffset {
                 offset_ms,
diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 9132275..1b442ae 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -161,6 +161,9 @@
   .legend .dormant::before { border-top-width: 1.5px; --colour: var(--muted);
     box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--bad) 50%, transparent); }
   .legend .silent::before { border-top-style: dotted; --colour: var(--muted); }
+  /* A chevron on the line, as on the map. */
+  .legend .eager::before { content: "\203A"; width: auto; height: auto; border: none;
+    font-weight: bold; font-size: 15px; line-height: 0; }
   .legend .hint::before { display: none; }
   /* A kind of message: a dot in its colour, as on the map. */
   .legend .message::before { width: 8px; height: 8px; border: none; border-radius: 50%;
@@ -607,6 +610,7 @@ function renderLegend(measured) {
     el("span", { class: "direct" }, "direct"),
     el("span", { class: "relayed" }, "relayed"),
     el("span", { class: "dormant" }, "dormant or down"),
+    el("span", { class: "eager" }, "eager (changes sent on at once, this way)"),
     el("span", { class: "silent" }, "an end reports no links"));
   document.getElementById("legend").replaceChildren(...items);
 }
@@ -637,6 +641,18 @@ function edges() {
       }
     }
   }
+  // Eager, which way, if either end says so: "a>b" where a sends b its changes as it
+  // applies them (a's eagerTo, or b's eagerFrom).
+  const eager = new Set();
+  for (const [a, report] of Object.entries(state.graph.measured)) {
+    for (const link of report.links) {
+      if (link.eagerTo) eager.add(a + ">" + link.peer);
+      if (link.eagerFrom) eager.add(link.peer + ">" + a);
+    }
+  }
+  for (const edge of measured.values()) {
+    edge.eager = [eager.has(edge.a + ">" + edge.b), eager.has(edge.b + ">" + edge.a)];
+  }
   // Dormant, or down, if either end says so, whichever report is drawn.
   for (const edge of measured.values()) {
     if ((edge.dormant && !edge.link.dormant) || (edge.down && !edge.link.down)) {
@@ -954,7 +970,7 @@ function renderGraph() {
     tooltip(hit(key, p, q, 1), name(a) + " – " + name(b) + ": intended (member list), not measured");
   }
   const ms = rtt => rtt < 10 ? rtt.toFixed(1) : String(Math.round(rtt));
-  for (const [key, { a, b, link, secsAgo }] of measured) {
+  for (const [key, { a, b, link, secsAgo, eager }] of measured) {
     const p = positions.get(a), q = positions.get(b);
     if (!p || !q) continue;
     // The transport in use thick, in the middle; the others thin, beside it.
@@ -1004,6 +1020,8 @@ function renderGraph() {
         (line.transport ? " via " + line.transport : "") + (line.used ? " (in use)" : "") +
         ((line.used ? link.relayed : line.relayed) ? ", relayed" : "") + (link.dormant ? ", dormant" : "") +
         (line.used && link.down ? ", down" : "") +
+        (line.used && eager[0] ? ", eager " + name(a) + " → " + name(b) : "") +
+        (line.used && eager[1] ? ", eager " + name(b) + " → " + name(a) : "") +
         (silent ? ", one end reports no links" : "") +
         (typeof line.rttMs === "number" ? ", " + line.rttMs.toFixed(1) + " ms" : "") +
         ", measured " + age(secsAgo + elapsed()) + " ago";
@@ -1027,6 +1045,22 @@ function renderGraph() {
       }
     });
     children.push(...drawnLines.reverse());
+    // Eager, each way it is: a chevron on the line in use pointing that way, past the
+    // middle towards the end it goes to (both ways: one each side of it).
+    const ux = (q.x - p.x) / length, uy = (q.y - p.y) / length;
+    [[eager[0], 1], [eager[1], -1]].forEach(([on, way]) => {
+      if (!on) return;
+      const t = eager[0] && eager[1] ? .5 + way * .06 : .5;
+      const mx = p.x + (q.x - p.x) * t, my = p.y + (q.y - p.y) * t;
+      const dx = ux * way * 5, dy = uy * way * 5;
+      const d = "M " + (mx - dx + nx * 5) + " " + (my - dy + ny * 5) + " L " + (mx + dx) +
+        " " + (my + dy) + " L " + (mx - dx - nx * 5) + " " + (my - dy - ny * 5);
+      const shape = { d, fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" };
+      children.push(drawing("eager under " + key + " " + way, "path",
+        { ...shape, stroke: "var(--panel)", "stroke-width": 5 }));
+      children.push(drawing("eager " + key + " " + way, "path",
+        { ...shape, stroke: colourOf(link.transport), "stroke-width": 2 }));
+    });
     tooltip(covering, descriptions.join("\n"));
   }
   // Above every line, so none crosses them.
diff --git a/src/api/dashboard/mod.rs b/src/api/dashboard/mod.rs
index 8d954c0..14464d4 100644
--- a/src/api/dashboard/mod.rs
+++ b/src/api/dashboard/mod.rs
@@ -407,6 +407,8 @@ fn links_json(links: &[Link]) -> JsonValue {
                 "down": link.down,
                 "rttMs": link.rtt_us.map(|us| f64::from(us) / 1000.0),
                 "dormant": link.dormant,
+                "eagerTo": link.eager_to,
+                "eagerFrom": link.eager_from,
                 "clock": link.clock,
                 "others": link.others.iter().map(|other| json!({
                     "transport": other.transport,