style(graph): reformat graph template and switch canvas background to dark

app/templates/graph.html

@@ -1,9 +1,8 @@
-{% extends "base.html" %} {% block title %}Graph — Intrusion Detection{%
+{% extends "base.html" %} {% block title %}Graph — Intrusion Detection{% endblock %} {% block content %}
-endblock %} {% block content %}
 <h1>IPv4 address space map</h1>
 <p class="muted">
-  One pixel per /24 network, arranged as 16×16 tiles of /8 (first octet).
+  One pixel per /24 network, arranged as 16×16 tiles of /8 (first octet). Blocked targets are red, whitelisted ranges
-  Blocked targets are red, whitelisted ranges are green.
+  are green.
 </p>
 
 <div class="panel">
@@ -14,8 +13,7 @@ endblock %} {% block content %}
         Show whitelisted
       </label>
       <span class="legend">
-        <span class="sw red"></span> Blocked
+        <span class="sw red"></span> Blocked <span class="sw green"></span> Whitelisted
-        <span class="sw green"></span> Whitelisted
         <span class="sw plain"></span> Unlisted
       </span>
     </div>
@@ -113,7 +111,7 @@ endblock %} {% block content %}
 
   function render() {
     const showWl = document.getElementById("show-whitelisted").checked;
-    ctx.fillStyle = "#ffffff";
+    ctx.fillStyle = "#0c0c0c";
     ctx.fillRect(0, 0, TOTAL, TOTAL);
     for (const [idx, value] of marked) {
       if (!showWl && value === V_WHITELISTED) continue;
@@ -142,37 +140,24 @@ endblock %} {% block content %}
     const c = y % SIZE;
     const idx = (a << 16) | (b << 8) | c;
     const value = marked.get(idx) ?? V_UNLISTED;
-    const status =
+    const status = value === V_BLOCKED ? "blocked" : value === V_WHITELISTED ? "whitelisted" : "unlisted";
-      value === V_BLOCKED
+    const entries = matchesIn(blockedRanges, idx).concat(matchesIn(whitelistedRanges, idx));
-        ? "blocked"
-        : value === V_WHITELISTED
-          ? "whitelisted"
-          : "unlisted";
-    const entries = matchesIn(blockedRanges, idx).concat(
-      matchesIn(whitelistedRanges, idx),
-    );
     tooltip.innerHTML = "";
     tooltip.append(
       el("div", { class: "tt-head mono", text: `${a}.${b}.${c}.0/24` }),
       el("div", { class: `tt-status ${status}`, text: status }),
     );
     if (entries.length) {
-      tooltip.append(
+      tooltip.append(el("div", { class: "tt-list mono", text: entries.join("\n") }));
-        el("div", { class: "tt-list mono", text: entries.join("\n") }),
-      );
     } else {
-      tooltip.append(
+      tooltip.append(el("div", { class: "tt-list muted", text: "no matching entry" }));
-        el("div", { class: "tt-list muted", text: "no matching entry" }),
-      );
     }
     tooltip.classList.remove("hidden");
     const rect = canvas.getBoundingClientRect();
     let left = e.clientX - rect.left + 14;
     let top = e.clientY - rect.top + 14;
-    if (left + tooltip.offsetWidth > rect.width)
+    if (left + tooltip.offsetWidth > rect.width) left = e.clientX - rect.left - tooltip.offsetWidth - 14;
-      left = e.clientX - rect.left - tooltip.offsetWidth - 14;
+    if (top + tooltip.offsetHeight > rect.height) top = e.clientY - rect.top - tooltip.offsetHeight - 14;
-    if (top + tooltip.offsetHeight > rect.height)
-      top = e.clientY - rect.top - tooltip.offsetHeight - 14;
     tooltip.style.left = `${Math.max(0, left)}px`;
     tooltip.style.top = `${Math.max(0, top)}px`;
   }
@@ -217,9 +202,7 @@ endblock %} {% block content %}
     }
   }
 
-  document
+  document.getElementById("show-whitelisted").addEventListener("change", render);
-    .getElementById("show-whitelisted")
-    .addEventListener("change", render);
   document.getElementById("graph-refresh").addEventListener("click", loadGraph);
 
   loadGraph();