dashboard: dormant edges get red underlay

1 files changed, 12 insertions, 6 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index c9aaf4c..0bbd9c5 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -70,7 +70,8 @@
   .legend .other::before { border-top-width: 1px; --colour: var(--muted); }
   .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 .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); }
   /* Nodes: circles, as on the map. */
   .legend .node::before { width: 10px; height: 10px; border: 1.5px solid var(--fg);
@@ -504,16 +505,21 @@ function renderGraph() {
     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);
+    // Dormant: a red underlay as wide as the lines, as a dormant node's red outline.
+    if (link.dormant) {
+      children.push(svg("line", { x1: p.x, y1: p.y, x2: q.x, y2: q.y, stroke: "var(--bad)",
+        "stroke-opacity": .5, "stroke-width": width + 4, "stroke-linecap": "round" }));
+    }
     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;
       const ox = nx * side, oy = ny * side;
       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 (red) or an end reports nothing (its colour), dashed where
-      // relayed, solid where direct.
-      if (link.dormant || silent) {
+        stroke: colourOf(line.transport),
+        // Narrow where dormant (over its underlay).
+        "stroke-width": link.dormant ? (line.used ? 1.5 : 0.8) : line.used ? 3 : 1.2 });
+      // Dotted where an end reports nothing, dashed where relayed, solid where direct.
+      if (silent) {
         drawn.setAttribute("stroke-dasharray", line.used ? "1 5" : "1 3");
         drawn.setAttribute("stroke-linecap", "round");
       } else if (line.used ? link.relayed : line.relayed) {