dashboard: nodes and edges tint related messages

1 files changed, 40 insertions, 3 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 5ba2b84..65432bd 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -11,6 +11,9 @@
     /* How strong the grey under a console message is, pointed at or shown, and under
        its nodes and link on the map. */
     --pointed: .12; --shown: .22;
+    /* How strong the halo of a node or link is, pointed at or in focus, and the tint of
+       the console messages exchanged with it. */
+    --halo-hovered: .15; --halo-focused: .35;
   }
   @media (prefers-color-scheme: dark) {
     :root {
@@ -98,6 +101,12 @@
   .console > div { cursor: pointer; border-left: 3px solid transparent; padding-left: 4px; }
   /* Of one exchange with the message pointed at or shown (`related`): a lighter grey, and
      the bar. */
+  /* Exchanged with the node or over the link pointed at on the map, or in focus: the
+     colour of its halo. */
+  .console > div.peer-focused {
+    background: color-mix(in srgb, var(--self) calc(var(--halo-focused) * 100%), transparent); }
+  .console > div.peer-hovered {
+    background: color-mix(in srgb, var(--self) calc(var(--halo-hovered) * 100%), transparent); }
   .console > div.related { background: rgba(127, 127, 127, .08); border-left-color: var(--self); }
   .console > div:hover { background: rgb(127 127 127 / var(--pointed)); }
   .console > div.focused { background: rgb(127 127 127 / var(--shown)); }
@@ -330,6 +339,7 @@ function focus(id) {
       : "#" + encodeURIComponent(focused));
   } catch { /* not where history works */ }
   render();
+  markPeerMessages();
 }
 
 // --- Peers ---
@@ -669,6 +679,7 @@ function hover(id) {
   if (hovered === id) return;
   hovered = id;
   if (state) renderGraph();
+  markPeerMessages();
 }
 function hoverable(element, id) {
   element.addEventListener("mouseenter", () => hover(id));
@@ -820,7 +831,8 @@ function renderGraph() {
   const halo = (key, p, q, width) => {
     if (key !== hovered && key !== focused) return;
     children.push(drawing("halo " + key, "line", { x1: p.x, y1: p.y, x2: q.x, y2: q.y,
-      stroke: "var(--self)", "stroke-opacity": key === focused ? .35 : .15,
+      stroke: "var(--self)",
+      style: "stroke-opacity: var(" + (key === focused ? "--halo-focused" : "--halo-hovered") + ")",
       "stroke-width": width + 8, "stroke-linecap": "round" }));
   };
   // Over a link: an invisible, wider line to point at and click.
@@ -934,7 +946,8 @@ function renderGraph() {
     // A halo as links have: light under the pointer, stronger in focus.
     if (shown || id === hovered) {
       children.push(drawing("ring " + id, "circle", { cx: p.x, cy: p.y, r: 13,
-        fill: "var(--self)", "fill-opacity": shown ? .35 : .15, stroke: "none" }));
+        fill: "var(--self)", stroke: "none",
+        style: "fill-opacity: var(" + (shown ? "--halo-focused" : "--halo-hovered") + ")" }));
     }
     const pressed = element => {
       element.addEventListener("pointerdown", event => { event.stopPropagation(); drag(event, id); });
@@ -1796,12 +1809,36 @@ function markRelated(key) {
   }
 }
 const shownRelated = () => shownMessage && shownMessage.related;
+// The peer whose messages `key` (a node, or a link's pair key) stands for: the node,
+// or the other end of one of this node's links; null: none (this node itself, whose
+// every message it would be, or a link between others).
+function peerOf(key) {
+  if (key === null || !state) return null;
+  const self = state.node.id;
+  if (!isPair(key)) return key === self ? null : key;
+  const [a, b] = key.split(" ");
+  return a === self ? b : b === self ? a : null;
+}
+// A console line's tint for the node or link pointed at on the map, or in focus.
+function peerClasses(peer) {
+  return (peer === peerOf(focused) ? " peer-focused" : "") +
+    (peer === peerOf(hovered) ? " peer-hovered" : "");
+}
+function markPeerMessages() {
+  const focusedPeer = peerOf(focused), hoveredPeer = peerOf(hovered);
+  for (const line of document.getElementById("console").children) {
+    line.classList.toggle("peer-focused", focusedPeer !== null && line.dataset.peer === focusedPeer);
+    line.classList.toggle("peer-hovered", hoveredPeer !== null && line.dataset.peer === hoveredPeer);
+  }
+}
 // A line: when, which way, with whom, the type (in its kind's colour) and the size.
 function consoleLine(message) {
   const line = el("div", { "data-seq": String(message.seq),
     "data-related": message.related || "",
+    "data-peer": message.peer,
     class: (shownMessage && shownMessage.seq === message.seq ? "focused" : "") +
-      (relatedMarked !== null && message.related === relatedMarked ? " related" : ""),
+      (relatedMarked !== null && message.related === relatedMarked ? " related" : "") +
+      peerClasses(message.peer),
     title: message.way === "refused" ? "refused: the transport wouldn't send it" : "" },
     el("span", { class: "when" }, clockTime(new Date(message.at)) + " "),
     WAYS[message.way] + " " + name(message.peer) + " ",