1 files changed, 43 insertions, 2 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 1b9a8cb..2a841ae 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -74,6 +74,11 @@
   section.collapsed { align-self: start; }
   section.collapsed h2 { margin: 0; }
   section.collapsed h2 .toggle { display: none; }
+  /* A choice beside a box's title (the console's filter). */
+  section h2 label.choice { font-size: 12px; text-transform: none; letter-spacing: 0;
+    margin-left: 1em; cursor: pointer; }
+  section h2 label.choice input { vertical-align: -2px; margin: 0 3px 0 0; }
+  section.collapsed h2 label.choice { display: none; }
   /* The right column dragged off to the side: the map takes the width. */
   @media (min-width: 901px) {
     main.right-hidden > section:not(#map) { display: none; }
@@ -107,6 +112,8 @@
     background: color-mix(in srgb, var(--self) calc(var(--halo-hovered) * 100%), transparent); }
   .console > div.peer-focused {
     background: color-mix(in srgb, var(--self) calc(var(--halo-focused) * 100%), transparent); }
+  /* Filtered (`filter selected`): only the messages with what is in focus. */
+  .console.filtering > div:not(.peer-focused) { display: none; }
   .console > div.related { background: rgba(127, 127, 127, .08); border-left-color: var(--self); }
   .console > div:hover { background: rgb(127 127 127 / var(--pointed)); }
   .console > div.focused { background: rgb(127 127 127 / var(--shown)); }
@@ -251,8 +258,9 @@
   <div id="column-hint" class="note">Drag the space left of these boxes to the right to
     hide the column.</div>
   <section id="console-box">
-    <h2>Console</h2>
-    <div class="scroll" id="console-scroll"><div id="console" class="console"></div></div>
+    <h2>Console <label class="choice" title="Only the messages with the node or over the link in focus (clicked on the map or in the peers); all while nothing is"><input type="checkbox" id="console-filter">filter selected</label></h2>
+    <div class="scroll" id="console-scroll"><div id="console" class="console"></div>
+      <div id="console-none" class="note" hidden>No information available</div></div>
   </section>
 </main>
 <script>
@@ -1839,6 +1847,37 @@ function markPeerMessages() {
     line.classList.toggle("peer-focused", focusedPeer !== null && line.dataset.peer === focusedPeer);
     line.classList.toggle("peer-hovered", hoveredPeer !== null && line.dataset.peer === hoveredPeer);
   }
+  filterConsole();
+}
+// `filter selected`: only the messages with the node or over the link in focus (those
+// tinted for it, `peer-focused`), all while nothing is; where there are none (a link
+// between other nodes, a node this one exchanges nothing with), a note. Pointing at
+// one doesn't count. Kept in this browser.
+let consoleFiltered = false;
+try { consoleFiltered = localStorage.getItem("continuum-console-filter") === "1"; } catch (_) {}
+const consoleFilter = document.getElementById("console-filter");
+consoleFilter.checked = consoleFiltered;
+consoleFilter.addEventListener("change", () => {
+  consoleFiltered = consoleFilter.checked;
+  try { localStorage.setItem("continuum-console-filter", consoleFiltered ? "1" : "0"); } catch (_) {}
+  filterConsole();
+});
+// What the console is filtered by (what is in focus), null: nothing. When it changes
+// (filtered or not any more, or another focus), the console goes to the bottom, and
+// follows from there.
+let consoleView = null;
+function filterConsole() {
+  const log = document.getElementById("console");
+  const filtering = consoleFiltered && focused !== null;
+  log.classList.toggle("filtering", filtering);
+  document.getElementById("console-none").hidden =
+    !filtering || log.querySelector(":scope > div.peer-focused") !== null;
+  const view = filtering ? focused : null;
+  if (view !== consoleView) {
+    consoleView = view;
+    const scroll = document.getElementById("console-scroll");
+    scroll.scrollTop = scroll.scrollHeight;
+  }
 }
 // A line: when, which way, with whom, the type (in its kind's colour) and the size.
 function consoleLine(message) {
@@ -1881,10 +1920,12 @@ function messagesArrived(messages) {
   const following = scroll.scrollTop + scroll.clientHeight >= scroll.scrollHeight - 4;
   log.append(...messages.slice(-CONSOLE_LINES).map(consoleLine));
   while (log.childElementCount > CONSOLE_LINES) log.firstElementChild.remove();
+  filterConsole();
   if (following) scroll.scrollTop = scroll.scrollHeight;
 }
 function showConsole() {
   document.getElementById("console").replaceChildren(...consoleMessages.map(consoleLine));
+  filterConsole();
   const scroll = document.getElementById("console-scroll");
   scroll.scrollTop = scroll.scrollHeight;
 }