dashboard: add node legend

1 files changed, 13 insertions, 0 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 5bed5fe..c1d46b7 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -59,6 +59,13 @@
   .legend .direct::before { --colour: var(--muted); }
   .legend .relayed::before { border-top-style: dashed; --colour: var(--muted); }
   .legend .dormant::before { border-top-style: dotted; --colour: var(--bad); }
+  /* Nodes: circles, as on the map. */
+  .legend .node::before { width: 10px; height: 10px; border: 1.5px solid var(--fg);
+    border-radius: 50%; background: var(--fg); }
+  .legend .node.silent::before { background: var(--panel); }
+  .legend .node.self::before { border-color: var(--self); background: var(--self); }
+  .legend .node.focus::before { width: 14px; height: 14px; background: none;
+    border: 2px solid var(--self); opacity: .5; }
   .scroll { overflow: auto; min-height: 0; }
   #figures-box .scroll { flex: 1; }
   table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
@@ -86,6 +93,12 @@
 <main>
   <section id="map">
     <h2>Swarm</h2>
+    <div class="legend">
+      <span class="node self">this node</span>
+      <span class="node">reports its links</span>
+      <span class="node silent">reports none (no LINKS_REPLY)</span>
+      <span class="node focus">in focus (click a node)</span>
+    </div>
     <div class="legend" id="legend"></div>
     <svg id="graph"></svg>
   </section>