dashboard: add label underlays

1 files changed, 8 insertions, 1 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 8ea06e5..e063f8c 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -65,6 +65,9 @@
   #graph { touch-action: none; }
   #graph.dragging, #graph.dragging * { cursor: grabbing; }
   svg circle { cursor: pointer; }
+  /* Labels on an underlay of their own shape, so they read where they lie on a line. */
+  #graph text { paint-order: stroke; stroke: var(--panel); stroke-width: 4px;
+    stroke-linejoin: round; }
   .legend { color: var(--muted); font-size: 12px; display: flex; gap: 1em; flex-wrap: wrap;
     flex: none; }
   .legend span::before { content: ""; display: inline-block; width: 18px; height: 0;
@@ -569,6 +572,8 @@ function renderGraph() {
   };
   // Over a link: an invisible, wider line to point at and click.
   const hits = [];
+  // The links' round trips.
+  const labels = [];
   const hit = (key, p, q, width) => {
     const line = drawing("hit " + key, "line", { x1: p.x, y1: p.y, x2: q.x, y2: q.y,
       stroke: "transparent", "stroke-width": width + 8, cursor: "pointer" }, line => {
@@ -645,11 +650,13 @@ function renderGraph() {
           "text-anchor": "middle", "font-size": line.used ? 11 : 9,
           fill: line.used ? "var(--fg)" : "var(--muted)" }));
         text(label, ms(line.rttMs));
-        children.push(label);
+        labels.push(label);
       }
     });
     tooltip(covering, descriptions.join("\n"));
   }
+  // Above every line, so none crosses them.
+  children.push(...labels);
   // Above the lines and their labels, below the nodes.
   children.push(...hits);
   for (const id of nodes) {