dashboard: graph and peers box react to press not click

1 files changed, 13 insertions, 9 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index b4a2ef3..e103797 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -246,7 +246,8 @@ function renderPeers() {
       el("td", {}, peer.neighbour ? "yes" : ""),
       el("td", {}, peer.sameEpoch === null || peer.sameEpoch === undefined
         ? "" : peer.sameEpoch ? "yes" : "no"));
-    row.addEventListener("click", () => focus(id === focused ? null : id));
+    // On press: the table may be drawn anew (ages) before a click would complete.
+    row.addEventListener("pointerdown", () => focus(id === focused ? null : id));
     rows.push(row);
   }
   table.replaceChildren(...rows);
@@ -467,7 +468,8 @@ function renderGraph() {
     const line = svg("line", { x1: p.x, y1: p.y, x2: q.x, y2: q.y, stroke: "transparent",
       "stroke-width": width + 8 });
     line.style.cursor = "pointer";
-    line.addEventListener("click", event => { event.stopPropagation(); focus(key); });
+    // On press: the map may be drawn anew before a click would complete.
+    line.addEventListener("pointerdown", event => { event.stopPropagation(); focus(key); });
     hoverable(line, key);
     hits.push(line);
     return line;
@@ -562,12 +564,12 @@ function renderGraph() {
     title.textContent = id + (reported ? "" : " (no links reported)") +
       (dormant ? " (dormant)" : "");
     circle.append(title);
-    circle.addEventListener("click", event => { event.stopPropagation(); focus(id); });
+    circle.addEventListener("pointerdown", event => { event.stopPropagation(); focus(id); });
     hoverable(circle, id);
     const label = svg("text", { x: p.x + 10, y: p.y + 4, "font-size": 12, fill: "var(--fg)" });
     label.textContent = name(id);
     label.style.cursor = "pointer";
-    label.addEventListener("click", event => { event.stopPropagation(); focus(id); });
+    label.addEventListener("pointerdown", event => { event.stopPropagation(); focus(id); });
     hoverable(label, id);
     children.push(circle, label);
   }
@@ -881,13 +883,15 @@ function busy(box) {
   return box.contains(selection.getRangeAt(0).commonAncestorContainer);
 }
 let held = false;
-function render() {
+function render(ages = false) {
   if (!state) return;
   document.getElementById("node").textContent =
     (state.node.alias ? state.node.alias + " · " : "") + state.node.id;
   held = false;
-  for (const [box, draw] of [["peers-box", renderPeers], ["figures-box", renderStats],
-    ["map", renderGraph]]) {
+  const boxes = [["peers-box", renderPeers], ["figures-box", renderStats]];
+  // Its ages are in tooltips only: drawn on events, not every second.
+  if (!ages) boxes.push(["map", renderGraph]);
+  for (const [box, draw] of boxes) {
     if (busy(document.getElementById(box))) held = true; else draw();
   }
 }
@@ -904,7 +908,7 @@ document.addEventListener("selectionchange", release);
 
 // A click beside the nodes: back to this node.
 const graph = document.getElementById("graph");
-graph.addEventListener("click", () => focus(null));
+graph.addEventListener("pointerdown", event => { if (event.target === graph) focus(null); });
 // Beside the nodes, or off the map: nothing hovered (the element left may be gone).
 graph.addEventListener("mousemove", event => { if (event.target === graph) hover(null); });
 graph.addEventListener("mouseleave", () => hover(null));
@@ -968,7 +972,7 @@ function connect() {
 }
 connect();
 // Ages count on between events; nothing else changes without one.
-setInterval(() => { if (live) render(); }, 1000);
+setInterval(() => { if (live) render(true); }, 1000);
 window.addEventListener("resize", () => { lastShape = ""; render(); });
 </script>
 </body>