dashboard: every kind of message coloured and in the legend

The map's dots and the console coloured six kinds of message; PROBE,
PRUNE/GRAFT, NEIGHBOUR and REFUSALS were drawn in the text colour and
missing from the legend. Each kind (`traffic`'s counters) now has a
colour, and the legend names them all, saying which messages a kind
stands for where its name doesn't.

1 files changed, 8 insertions, 4 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index f977151..794fc71 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -2933,10 +2933,14 @@ function messages(byKind) {
   return Object.fromEntries(Object.entries(byKind || {})
     .map(([kind, counter]) => [kind, { messages: counter.messages, bytes: counter.bytes }]));
 }
-// The colour of a kind of message (`traffic`'s kinds), on the map and in the console;
-// the replies as their requests.
+// The colour of a kind of message (`traffic`'s kinds, each of them), on the map and in
+// the console, and what the legend calls it; the replies as their requests.
 const KIND_COLOURS = [["sync", "#ea580c"], ["blob", "#a16207"], ["hello", "#16a34a"],
-  ["status", "#e11d48"], ["identity", "#0d9488"], ["paths", "var(--muted)"]];
+  ["status", "#e11d48"], ["identity", "#0d9488"], ["paths", "var(--muted)"],
+  ["probe", "#6366f1"], ["plumtree", "#c026d3"], ["hyparview", "#0369a1"],
+  ["refusals", "#b91c1c"]];
+const KIND_NAMES = { identity: "identity (who/me)", paths: "paths (pings)",
+  plumtree: "plumtree (prune/graft)", hyparview: "hyparview (neighbour)" };
 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
@@ -2971,7 +2975,7 @@ function showMessagesLegend() {
     // Before the toggle, which ends the line.
     legend.prepend(...KIND_COLOURS.map(([kind, colour]) =>
       el("span", { class: "message", style: "--colour: " + colour },
-        kind === "paths" ? "paths (pings)" : kind)),
+        KIND_NAMES[kind] || kind)),
       el("label", { class: "slider" }, "size", slider),
       el("label", { class: "slider" }, "speed", speed));
   }