Upload homepage.js

assets/js/homepage.js

@@ -0,0 +1,145 @@
+// assets/js/homepage.js
+
+const CSV_PATH = new URL("cleaned_data.csv", window.location.href).href;
+
+const grid = document.getElementById("failureGrid");
+const emptyState = document.getElementById("emptyState");
+const searchInput = document.getElementById("searchFail");
+
+const totalCountEl = document.getElementById("totalCount");
+const videoCountEl = document.getElementById("videoCount");
+const segmentCountEl = document.getElementById("segmentCount");
+
+/* Categories we do NOT want displayed on the homepage */
+const HIDDEN_CATEGORIES = new Set([
+    "time"   // hide Time
+]);
+
+function parseCSV(text) {
+    const lines = text.trim().split("\n");
+    const header = lines[0].split(",").map(s => s.trim());
+    const rows = [];
+
+    for (let i = 1; i < lines.length; i++) {
+        const cols = lines[i].split(",");
+        const obj = {};
+        for (let j = 0; j < header.length; j++) {
+            obj[header[j]] = (cols[j] ?? "").trim();
+        }
+        rows.push(obj);
+    }
+    return rows;
+}
+
+function normalizeLabel(x) {
+    return String(x || "").trim();
+}
+
+function buildStats(rows) {
+    const stats = new Map(); // label -> {segments, videos:Set, def}
+
+    for (const f of window.FAILURES) {
+        const lname = f.name.toLowerCase();
+        if (HIDDEN_CATEGORIES.has(lname)) continue;
+
+        stats.set(f.name, {
+            segments: 0,
+            videos: new Set(),
+            def: f.definition
+        });
+    }
+
+    for (const r of rows) {
+        const label = normalizeLabel(r.label);
+        if (!stats.has(label)) continue;
+
+        stats.get(label).segments += 1;
+        stats.get(label).videos.add(r.filename);
+    }
+
+    return stats;
+}
+
+function renderTiles(stats) {
+    grid.innerHTML = "";
+
+    const q = (searchInput.value || "").toLowerCase().trim();
+    let shown = 0;
+
+    let totalVideosImpacted = 0;
+    let totalSegments = 0;
+
+    for (const f of window.FAILURES) {
+        if (HIDDEN_CATEGORIES.has(f.name.toLowerCase())) continue;
+
+        const s = stats.get(f.name) || {
+            segments: 0,
+            videos: new Set(),
+            def: f.definition
+        };
+
+        const vids = s.videos.size;
+        const segs = s.segments;
+
+        totalVideosImpacted += vids;
+        totalSegments += segs;
+
+        const hay = `${f.name} ${f.family || ""} ${f.definition}`.toLowerCase();
+        if (q && !hay.includes(q)) continue;
+
+        shown++;
+
+        const card = document.createElement("div");
+        card.className = "failure-card";
+        card.tabIndex = 0;
+
+        card.innerHTML = `
+      <h3>${f.name}</h3>
+      <p>${f.definition}</p>
+      <div class="meta-row">
+        <span>${vids} videos</span>
+        <span>${segs} segments</span>
+      </div>
+      <div class="tooltip">
+        <strong style="display:block; margin-bottom:6px;">${f.name}</strong>
+        <div style="color: var(--text-muted); font-size: 13px; line-height: 1.5;">
+          ${f.definition}
+        </div>
+        <div style="margin-top:10px; color: var(--text-muted); font-size: 12px;">
+          Click to open details →
+        </div>
+      </div>
+    `;
+
+        card.addEventListener("click", () => {
+            const url = `category.html?cat=${encodeURIComponent(f.name)}`;
+            window.location.href = url;
+        });
+
+        card.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") card.click();
+        });
+
+        grid.appendChild(card);
+    }
+
+    totalCountEl.textContent = `${stats.size} categories`;
+    videoCountEl.textContent = `${totalVideosImpacted} videos impacted`;
+    segmentCountEl.textContent = `${totalSegments} segments`;
+
+    emptyState.hidden = shown !== 0;
+}
+
+fetch(CSV_PATH)
+    .then(r => r.text())
+    .then(text => {
+        const rows = parseCSV(text);
+        const stats = buildStats(rows);
+
+        renderTiles(stats);
+        searchInput.addEventListener("input", () => renderTiles(stats));
+    })
+    .catch(err => {
+        console.error(err);
+        grid.innerHTML = `<div class="empty-state">Could not load cleaned_data.csv</div>`;
+    });