dashboard: add message dot size slider

1 files changed, 19 insertions, 2 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 53f8ccf..f544f51 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -116,6 +116,10 @@
   /* A kind of message: a dot in its colour, as on the map. */
   .legend .message::before { width: 8px; height: 8px; border: none; border-radius: 50%;
     background: var(--colour); }
+  /* The dots' size, right after their legend, no taller than its text. */
+  .legend .dot-size { display: inline-flex; align-items: center; gap: 4px; }
+  .legend .dot-size::before { display: none; }
+  .legend .dot-size input { width: 6em; height: 1em; margin: 0; }
   #legends { flex: none; }
   /* Hides the legend, and shows it again. */
   button.toggle { font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0;
@@ -1565,13 +1569,26 @@ const KIND_COLOURS = [["sync", "#ea580c"], ["blob", "#a16207"], ["hello", "#16a3
   ["links", "#db2777"]];
 const kindColour = kind => (KIND_COLOURS.find(([name]) => kind === name ||
   kind === name + "Reply") || [null, "var(--fg)"])[1];
+// How large the dots are drawn, times `dotRadius` (the slider after their legend, kept
+// in this browser).
+let dotScale = 2;
+try { dotScale = Number(localStorage.getItem("continuum-dot-scale")) || 2; } catch (_) {}
+dotScale = Math.min(4, Math.max(1.25, dotScale));
 function showMessagesLegend() {
   const legend = document.getElementById("messages-legend");
   legend.hidden = !flowsShown;
   if (legend.childElementCount === 0) {
+    const slider = el("input", { type: "range", min: "1.25", max: "4", step: ".25",
+      title: "How large the dots are" });
+    slider.value = String(dotScale);
+    slider.addEventListener("input", () => {
+      dotScale = Number(slider.value);
+      try { localStorage.setItem("continuum-dot-scale", String(dotScale)); } catch (_) {}
+    });
     legend.append(...KIND_COLOURS.map(([kind, colour]) =>
       el("span", { class: "message", style: "--colour: " + colour },
-        kind === "paths" ? "paths (pings)" : kind)));
+        kind === "paths" ? "paths (pings)" : kind)),
+      el("label", { class: "dot-size" }, "size", slider));
   }
 }
 showMessagesLegend();
@@ -1695,7 +1712,7 @@ function drawFlows() {
     const circle = layer.children[i];
     circle.setAttribute("cx", dot.x);
     circle.setAttribute("cy", dot.y);
-    circle.setAttribute("r", dot.r.toFixed(1));
+    circle.setAttribute("r", (dot.r * dotScale).toFixed(1));
     circle.setAttribute("fill", kindColour(dot.kind));
     circle.setAttribute("opacity", dot.opacity.toFixed(2));
   });