dashboard: show focus node similar to focus links

1 files changed, 6 insertions, 11 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 3b0f8fa..b4a2ef3 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -78,8 +78,8 @@
   .legend .node.silent::before { background: var(--panel); }
   .legend .node.self::before { border-color: var(--self); background: var(--self); }
   .legend .node.dormant-node::before { border: 2.5px solid var(--bad); }
-  .legend .node.focus::before { width: 14px; height: 14px; background: none;
-    border: 2px solid var(--self); opacity: .5; }
+  .legend .node.focus::before { width: 14px; height: 14px; background: var(--self);
+    border: none; opacity: .35; }
   .scroll { overflow: auto; min-height: 0; }
   #figures-box .scroll, #document-box .scroll { flex: 1; }
   .tree pre { margin: 2px 0 4px 1.1em; white-space: pre-wrap; word-break: break-all;
@@ -547,15 +547,10 @@ function renderGraph() {
     const reported = id in state.graph.measured;
     const shown = focused === null ? member.self : id === focused;
     // A link in focus: both ends ringed.
-    const end = isPair(focused) && focused.split(" ").includes(id);
-    if (id === hovered) {
-      // Under the pointer: lighter than the focus ring.
-      children.push(svg("circle", { cx: p.x, cy: p.y, r: 12, fill: "var(--self)",
-        "fill-opacity": .12, stroke: "none" }));
-    }
-    if (shown || end) {
-      children.push(svg("circle", { cx: p.x, cy: p.y, r: 13, fill: "none",
-        stroke: "var(--self)", "stroke-width": 2, "stroke-opacity": .5 }));
+    // A halo as links have: light under the pointer, stronger in focus.
+    if (shown || id === hovered) {
+      children.push(svg("circle", { cx: p.x, cy: p.y, r: 13, fill: "var(--self)",
+        "fill-opacity": shown ? .35 : .15, stroke: "none" }));
     }
     // Dormant as this node sees it (`/peers`): a red outline.
     const dormant = (state.peers.peers[id] || {}).status === "dormant";