feat: dynamic language strip with full legend and faceted counts

- Language bar and percentages update when type/topic filters change
- All languages shown in clickable legend (not just top 10)
- Active language highlighted in both bar and legend

Author: caiopizzol

apps/web/index.html

@@ -136,11 +136,14 @@
       cursor: pointer;
     }
     .lang-bar:hover { opacity: 0.85; }
+    .lang-bar.lang-active { outline: 2px solid #2D2D2D; outline-offset: -2px; }
     .lang-legend {
       display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px;
       font-size: 0.72rem; color: #9CA3AF;
     }
-    .lang-legend-item { display: flex; align-items: center; gap: 5px; }
+    .lang-legend-item { display: flex; align-items: center; gap: 5px; transition: color 0.15s; }
+    .lang-legend-item:hover { color: #2D2D2D; }
+    .lang-legend-active { color: #F97B6D; font-weight: 600; }
     .lang-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
 
     /* Explore table */
@@ -585,6 +588,7 @@ <h1>The largest classified corpus of Word documents</h1>
       if (data.facets) {
         renderTypesGrid(data.facets.types);
         renderTopicsGrid(data.facets.topics);
+        renderLangStrip(data.facets.languages);
       }
     } catch {
       $('explore-count').textContent = 'API unavailable';
@@ -636,37 +640,35 @@ <h1>The largest classified corpus of Word documents</h1>
     });
   }
 
-  // ---------- render stats ----------
-  function renderStats(stats) {
-    const h = stats.hero;
-    $('stat-docs').textContent = fmt(h.total_documents);
-    $('stat-langs').textContent = h.languages;
-    $('stat-taxonomy').textContent = `${h.types} \u00d7 ${h.topics}`;
-    $('stat-conf').textContent = (h.avg_confidence * 100).toFixed(0) + '%';
-
-    renderTypesGrid(stats.types);
-    renderTopicsGrid(stats.topics);
-
-    // Language strip
-    const topLangs = stats.languages.slice(0, 10);
-    const otherPct = stats.languages.slice(10).reduce((s, l) => s + l.percentage, 0);
+  function renderLangStrip(languages) {
+    const topLangs = languages.slice(0, 10);
+    const otherPct = languages.slice(10).reduce((s, l) => s + l.percentage, 0);
 
+    // Bar: top 10 + "other" segment
     let langHtml = '';
-    let legendHtml = '';
     topLangs.forEach((l, i) => {
       const color = i < 5 ? CORAL_SHADES[i] : GRAY_SHADES[i - 5];
-      langHtml += `<div class="lang-bar" style="flex:${l.percentage};background:${color}" data-lang="${l.code}" title="${l.name} ${l.percentage}%">${l.code.toUpperCase()}</div>`;
-      legendHtml += `<div class="lang-legend-item"><span class="lang-dot" style="background:${color}"></span>${l.name} ${l.percentage}%</div>`;
+      const active = filters.lang === l.code;
+      langHtml += `<div class="lang-bar${active ? ' lang-active' : ''}" style="flex:${l.percentage};background:${color}" data-lang="${l.code}" title="${l.name} ${l.percentage}%">${l.code.toUpperCase()}</div>`;
     });
     if (otherPct > 0) {
-      langHtml += `<div class="lang-bar" style="flex:${otherPct};background:#d0d0d0;color:#888;font-size:0.6rem">+${stats.languages.length - 10}</div>`;
+      langHtml += `<div class="lang-bar" style="flex:${otherPct};background:#d0d0d0;color:#888;font-size:0.6rem">+${languages.length - 10}</div>`;
     }
 
+    // Legend: ALL languages, clickable
+    let legendHtml = '';
+    languages.forEach((l, i) => {
+      const color = i < 5 ? CORAL_SHADES[i] : i < 10 ? GRAY_SHADES[i - 5] : '#d0d0d0';
+      const active = filters.lang === l.code;
+      legendHtml += `<div class="lang-legend-item${active ? ' lang-legend-active' : ''}" data-lang="${l.code}" style="cursor:pointer"><span class="lang-dot" style="background:${color}"></span>${l.name} ${l.percentage}%</div>`;
+    });
+
     $('lang-row').innerHTML = langHtml;
     $('lang-legend').innerHTML = legendHtml;
 
-    document.querySelectorAll('.lang-bar[data-lang]').forEach(bar => {
-      bar.addEventListener('click', function() {
+    // Click handlers for both bars and legend items
+    document.querySelectorAll('[data-lang]').forEach(el => {
+      el.addEventListener('click', function() {
         filters.lang = filters.lang === this.dataset.lang ? '' : this.dataset.lang;
         currentPage = 1;
         updateActiveStates();
@@ -676,6 +678,19 @@ <h1>The largest classified corpus of Word documents</h1>
     });
   }
 
+  // ---------- render stats ----------
+  function renderStats(stats) {
+    const h = stats.hero;
+    $('stat-docs').textContent = fmt(h.total_documents);
+    $('stat-langs').textContent = h.languages;
+    $('stat-taxonomy').textContent = `${h.types} \u00d7 ${h.topics}`;
+    $('stat-conf').textContent = (h.avg_confidence * 100).toFixed(0) + '%';
+
+    renderTypesGrid(stats.types);
+    renderTopicsGrid(stats.topics);
+    renderLangStrip(stats.languages);
+  }
+
   function renderSkeletons() {
     $('types-grid').innerHTML = Array(10).fill(
       '<div class="skeleton skeleton-cell" style="width:100%"></div>'

apps/web/worker/src/index.ts

@@ -195,7 +195,7 @@ function buildFilters(url: URL): { where: string; params: unknown[]; paramIndex:
 function buildFiltersExcluding(url: URL, exclude: string): { where: string; params: unknown[] } {
   const type = exclude === "type" ? "" : (url.searchParams.get("type") || "");
   const topic = exclude === "topic" ? "" : (url.searchParams.get("topic") || "");
-  const lang = url.searchParams.get("lang") || "";
+  const lang = exclude === "lang" ? "" : (url.searchParams.get("lang") || "");
   const minConf = parseFloat(url.searchParams.get("min_confidence") || "0");
 
   const conditions: string[] = ["document_type IS NOT NULL"];
@@ -223,8 +223,9 @@ async function handleDocuments(url: URL, env: Env, origin: string): Promise<Resp
     // Facet queries: exclude own dimension so all options remain visible with counts
     const typeFacet = buildFiltersExcluding(url, "type");
     const topicFacet = buildFiltersExcluding(url, "topic");
+    const langFacet = buildFiltersExcluding(url, "lang");
 
-    const [countResult, rows, typeCounts, topicCounts] = await Promise.all([
+    const [countResult, rows, typeCounts, topicCounts, langCounts] = await Promise.all([
       sql.query(`SELECT COUNT(*)::int AS total FROM documents WHERE ${where}`, params),
       sql.query(
         `SELECT id, original_filename AS filename, document_type, document_topic,
@@ -246,6 +247,13 @@ async function handleDocuments(url: URL, env: Env, origin: string): Promise<Resp
          GROUP BY document_topic ORDER BY count DESC`,
         topicFacet.params
       ),
+      sql.query(
+        `SELECT COALESCE(NULLIF(language, 'unknown'), 'unknown') AS code, COUNT(*)::int AS count
+         FROM documents WHERE ${langFacet.where}
+         GROUP BY COALESCE(NULLIF(language, 'unknown'), 'unknown')
+         ORDER BY count DESC LIMIT 20`,
+        langFacet.params
+      ),
     ]);
 
     const total = countResult[0].total as number;
@@ -259,13 +267,20 @@ async function handleDocuments(url: URL, env: Env, origin: string): Promise<Resp
       confidence: r.classification_confidence,
     }));
 
+    const langTotal = (langCounts as { code: string; count: number }[]).reduce((s, l) => s + l.count, 0);
     const facets = {
       types: (typeCounts as { id: string; count: number }[]).map(t => ({
         id: t.id, label: TYPE_LABELS[t.id] || t.id, count: t.count,
       })),
       topics: (topicCounts as { id: string; count: number }[]).map(t => ({
         id: t.id, label: TOPIC_LABELS[t.id] || t.id, count: t.count,
       })),
+      languages: (langCounts as { code: string; count: number }[]).map(l => ({
+        code: l.code,
+        name: LANG_NAMES[l.code] || l.code,
+        count: l.count,
+        percentage: Math.round((1000 * l.count) / langTotal) / 10,
+      })),
     };
 
     return json({ documents, total, page, pages: Math.ceil(total / limit), facets }, 200, origin);