dashboard: mute edges of nodes that don't report links

1 files changed, 9 insertions, 3 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 3f5d862..0f83ca8 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -71,6 +71,7 @@
   .legend .direct::before { --colour: var(--muted); }
   .legend .relayed::before { border-top-style: dashed; --colour: var(--muted); }
   .legend .dormant::before { border-top-style: dotted; --colour: var(--bad); }
+  .legend .silent::before { border-top-style: dotted; --colour: var(--muted); }
   /* Nodes: circles, as on the map. */
   .legend .node::before { width: 10px; height: 10px; border: 1.5px solid var(--fg);
     border-radius: 50%; background: var(--fg); }
@@ -345,7 +346,8 @@ function renderLegend(measured) {
     el("span", { class: "other" }, "other transport"),
     el("span", { class: "direct" }, "direct"),
     el("span", { class: "relayed" }, "relayed"),
-    el("span", { class: "dormant" }, "dormant"));
+    el("span", { class: "dormant" }, "dormant"),
+    el("span", { class: "silent" }, "an end reports no links"));
   document.getElementById("legend").replaceChildren(...items);
 }
 
@@ -481,6 +483,8 @@ function renderGraph() {
     const descriptions = [];
     const length = Math.max(Math.hypot(q.x - p.x, q.y - p.y), 1);
     const nx = -(q.y - p.y) / length, ny = (q.x - p.x) / length;
+    // An end that reports no links (any more): what's drawn may be out of date.
+    const silent = !(a in state.graph.measured) || !(b in state.graph.measured);
     lines.forEach((line, i) => {
       // 0, then +1, -1, +2, -2 … steps of 6 px to the side.
       const side = i === 0 ? 0 : (i % 2 ? 1 : -1) * Math.ceil(i / 2) * 6;
@@ -488,8 +492,9 @@ function renderGraph() {
       const drawn = svg("line", { x1: p.x + ox, y1: p.y + oy, x2: q.x + ox, y2: q.y + oy,
         stroke: link.dormant ? "var(--bad)" : colourOf(line.transport),
         "stroke-width": line.used ? 3 : 1.2 });
-      // Dotted where dormant, dashed where relayed, solid where direct.
-      if (link.dormant) {
+      // Dotted where dormant (red) or an end reports nothing (its colour), dashed where
+      // relayed, solid where direct.
+      if (link.dormant || silent) {
         drawn.setAttribute("stroke-dasharray", line.used ? "1 5" : "1 3");
         drawn.setAttribute("stroke-linecap", "round");
       } else if (line.used ? link.relayed : line.relayed) {
@@ -499,6 +504,7 @@ function renderGraph() {
       title.textContent = name(a) + " – " + name(b) +
         (line.transport ? " via " + line.transport : "") + (line.used ? " (in use)" : "") +
         ((line.used ? link.relayed : line.relayed) ? ", relayed" : "") + (link.dormant ? ", dormant" : "") +
+        (silent ? ", one end reports no links" : "") +
         (typeof line.rttMs === "number" ? ", " + line.rttMs.toFixed(1) + " ms" : "") +
         ", measured " + age(secsAgo + elapsed()) + " ago";
       descriptions.push(title.textContent);