dashboard: flashes below labels

Flashes are drawn beneath the nodes' labels.

1 files changed, 5 insertions, 3 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index ee8627c..d01639e 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -339,7 +339,7 @@
     </div>
     </div>
     <div id="node-menu" hidden></div>
-    <svg id="graph"><g id="view"><g id="flows" pointer-events="none"><g id="flow-dots"></g><g id="flow-streaks"></g></g><g id="flashes" pointer-events="none"></g></g></svg>
+    <svg id="graph"><g id="view"><g id="flow-streaks" pointer-events="none"></g><g id="flows" pointer-events="none"><g id="flow-dots"></g></g><g id="flashes" pointer-events="none"></g></g></svg>
     </div>
   </section>
   <section id="peers-box">
@@ -1434,6 +1434,8 @@ function renderGraph() {
       labels.push(chevron);
     }
   }
+  // Flashes (`drawFlows`) over the lines, below their labels and the nodes.
+  children.push(document.getElementById("flow-streaks"));
   children.push(...labels);
   // Above the lines and their labels, below the nodes.
   children.push(...hits);
@@ -2715,8 +2717,8 @@ graph.addEventListener("mouseleave", () => hover(null));
 // record of it. As dots, all at one speed (`flowSpeed`), so over a longer link they
 // arrive later; as flashes, each crosses its link as fast as the message did (half the
 // link's round trip) and leaves an afterglow that draws back into where it went
-// (`FLASH_GLOW_MS`). Kept above everything else on the map (`flows`, after what `show`
-// places). ---
+// (`FLASH_GLOW_MS`). Dots are kept above everything else on the map (`flows`, after
+// what `show` places), flashes over the lines but below their labels and the nodes. ---
 const FLOW_SPREAD_MS = 2000, FLOWS_AT_MOST = 6;
 // A flash's afterglow, after it arrived; and how long it takes over a link whose round
 // trip isn't known.