feat: add stats metric filters

bhdicaire · bhdicaire · commit 4405ae11dcbb · 2026-06-01T13:11:48.000-04:00
diff --git a/defaults/public/_stats/index.html b/defaults/public/_stats/index.html
@@ -100,10 +100,32 @@
         margin: 1.5rem 0;
       }
       .card {
+        appearance: none;
         border: 1px solid var(--border);
         border-radius: 0.5rem;
         padding: 1rem;
         background: var(--panel);
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        text-align: left;
+        transition:
+          border-color 160ms ease,
+          box-shadow 160ms ease,
+          transform 160ms ease;
+      }
+      .card:hover {
+        border-color: var(--brand);
+        box-shadow: 0 0.6rem 1.5rem rgb(15 118 110 / 0.12);
+        transform: translateY(-1px);
+      }
+      .card:focus-visible {
+        outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent);
+        outline-offset: 2px;
+      }
+      .card[aria-pressed="true"] {
+        border-color: var(--brand);
+        box-shadow: inset 0 0 0 1px var(--brand);
       }
       .metric {
         font-size: 2rem;
@@ -202,6 +224,14 @@
         color: var(--brand);
         font-weight: 700;
       }
+      .filter-summary {
+        min-height: 1.2rem;
+        color: var(--muted);
+        font-size: 0.9rem;
+      }
+      .filter-summary strong {
+        color: var(--text);
+      }
     </style>
   </head>
   <body>
@@ -218,6 +248,7 @@ <h1>Dashboard</h1>
       <section class="grid" id="metrics"></section>
 
       <input id="search" type="search" placeholder="Search path, target, title, description, owner, tags…" />
+      <div class="filter-summary" id="filter-summary" aria-live="polite"></div>
 
       <table>
         <thead>
@@ -244,10 +275,12 @@ <h1>Dashboard</h1>
       const rowsEl = document.getElementById("rows");
       const metricsEl = document.getElementById("metrics");
       const searchEl = document.getElementById("search");
+      const filterSummaryEl = document.getElementById("filter-summary");
       const generatedEl = document.getElementById("generated");
 
       let allLinks = [];
       let registry = null;
+      const activeStates = new Set();
 
       main().catch((error) => {
         rowsEl.innerHTML = `<tr><td colspan="7">Failed to load registry: ${escapeHtml(error.message)}</td></tr>`;
@@ -259,13 +292,29 @@ <h1>Dashboard</h1>
         allLinks = flattenRegistry(registry);
         generatedEl.innerHTML = renderGeneratedFooter(registry);
         renderMetrics(allLinks);
-        renderRows(allLinks);
+        applyFilters();
       }
 
       searchEl.addEventListener("input", () => {
-        const q = searchEl.value.trim().toLowerCase();
-        const filtered = !q ? allLinks : allLinks.filter((link) => JSON.stringify(link).toLowerCase().includes(q));
-        renderRows(filtered);
+        applyFilters();
+      });
+
+      metricsEl.addEventListener("click", (event) => {
+        const button = event.target.closest("button[data-filter-state]");
+        if (!button) return;
+
+        const state = button.dataset.filterState;
+        if (state === "total") {
+          activeStates.clear();
+          searchEl.value = "";
+        } else if (activeStates.has(state)) {
+          activeStates.delete(state);
+        } else {
+          activeStates.add(state);
+        }
+
+        renderMetrics(allLinks);
+        applyFilters();
       });
 
       function flattenRegistry(registry) {
@@ -330,15 +379,39 @@ <h1>Dashboard</h1>
         metricsEl.innerHTML = items
           .map(
             (key) => `
-        <div class="card">
+        <button class="card" type="button" data-filter-state="${escapeAttr(key)}" aria-pressed="${key !== "total" && activeStates.has(key) ? "true" : "false"}" title="${key === "total" ? "Clear filters" : `Filter by ${label(key)}`}">
           <div class="metric">${counts[key] || 0}</div>
           <div class="muted">${label(key)}</div>
-        </div>
+        </button>
       `
           )
           .join("");
       }
 
+      function applyFilters() {
+        const q = searchEl.value.trim().toLowerCase();
+        const filtered = allLinks.filter((link) => {
+          if (activeStates.size && !activeStates.has(effectiveState(link))) return false;
+          if (!q) return true;
+          return JSON.stringify(link).toLowerCase().includes(q);
+        });
+
+        renderRows(filtered);
+        renderFilterSummary(filtered.length, q);
+      }
+
+      function renderFilterSummary(count, query) {
+        const filters = [];
+        if (query) filters.push(`search <strong>${escapeHtml(query)}</strong>`);
+        if (activeStates.size) {
+          filters.push(`state <strong>${[...activeStates].map(label).join(" or ")}</strong>`);
+        }
+
+        filterSummaryEl.innerHTML = filters.length
+          ? `${count} matching route${count === 1 ? "" : "s"} where ${filters.join(" and ")}`
+          : "";
+      }
+
       function renderRows(links) {
         if (!links.length) {
           rowsEl.innerHTML = `<tr><td colspan="7" class="muted">No matching routes.</td></tr>`;
