Simplify by-query-type leaderboard view

index.html

@@ -593,11 +593,19 @@
     .controls {
       display: grid;
       gap: 12px;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      grid-template-columns: repeat(4, minmax(0, 1fr));
       padding: 16px;
       margin-bottom: 14px;
     }
 
+    .query-filter-wrap {
+      display: none;
+    }
+
+    .query-filter-wrap.visible {
+      display: block;
+    }
+
     .toggle-row {
       display: flex;
       justify-content: space-between;
@@ -607,6 +615,10 @@
       flex-wrap: wrap;
     }
 
+    .toggle-row.hidden {
+      display: none;
+    }
+
     .toggle {
       display: inline-flex;
       align-items: center;
@@ -692,6 +704,58 @@
       line-height: 1.5;
     }
 
+    .dataset-legend {
+      display: none;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin: 0 0 14px;
+    }
+
+    .dataset-legend.visible {
+      display: flex;
+    }
+
+    .dataset-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 999px;
+      background: rgba(255,255,255,0.78);
+      border: 1px solid rgba(23, 32, 51, 0.1);
+      color: var(--muted);
+      font-size: 0.93rem;
+      line-height: 1.4;
+    }
+
+    .dataset-chip strong {
+      color: var(--ink);
+      font-size: 0.94rem;
+    }
+
+    .dataset-chip.active {
+      background: var(--ink);
+      border-color: var(--ink);
+      color: rgba(255,255,255,0.85);
+    }
+
+    .dataset-chip.active strong {
+      color: white;
+    }
+
+    .sort-option-overall-only.hidden {
+      display: none;
+    }
+
+    .group-row td {
+      background: rgba(23, 32, 51, 0.05);
+      color: var(--ink);
+      font-weight: 700;
+      font-size: 0.9rem;
+      letter-spacing: 0.02em;
+      border-bottom: 1px solid rgba(23, 32, 51, 0.08);
+    }
+
     .markdown-note {
       color: var(--muted);
       font-size: 1rem;
@@ -918,7 +982,7 @@
           <select id="sort-key">
             <option value="weighted_total_content_score">Weighted score</option>
             <option value="unweighted_mean_score">Unweighted mean</option>
-            <option value="percentage_ge_sources_in_se_sources">% In SE</option>
+            <option class="sort-option-overall-only" value="percentage_ge_sources_in_se_sources">% In SE</option>
           </select>
         </label>
         <label>
@@ -927,7 +991,11 @@
         </label>
       </section>
 
-      <div class="toggle-row">
+      <div class="query-filter-wrap" id="query-filter-wrap">
+        <div class="dataset-legend" id="dataset-legend"></div>
+      </div>
+
+      <div class="toggle-row" id="toggle-row">
         <label class="toggle">
           <input id="show-dimensions" type="checkbox">
           <span>Show dimension scores</span>
@@ -1017,6 +1085,7 @@
       payload: null,
       currentView: "overall",
       showDimensions: false,
+      selectedQueryType: "all",
     };
 
     const baseColumns = [
@@ -1061,10 +1130,21 @@
       "deepseek-chat-tavily",
     ]);
 
+    const QUERY_TYPE_META = {
+      "DebateQA": "Argument",
+      "HotpotQA": "Informational",
+      "Pinocchios": "Factual",
+      "QuoraQuestions": "Social",
+      "VA-COS NLQ": "Shopping",
+    };
+
     const viewSelect = document.getElementById("view-select");
     const sortKey = document.getElementById("sort-key");
     const searchInput = document.getElementById("search-input");
     const showDimensionsInput = document.getElementById("show-dimensions");
+    const toggleRow = document.getElementById("toggle-row");
+    const queryFilterWrap = document.getElementById("query-filter-wrap");
+    const datasetLegend = document.getElementById("dataset-legend");
     const tableTitle = document.getElementById("table-title");
     const tableCount = document.getElementById("table-count");
     const tableHead = document.querySelector("#leaderboard-table thead");
@@ -1114,6 +1194,53 @@
       return !isDeepSeekStudyModel(modelName);
     }
 
+    function formatQueryTypeLabel(queryType) {
+      const tag = QUERY_TYPE_META[queryType];
+      return tag ? `${queryType} (${tag})` : String(queryType || "-");
+    }
+
+    function updateQueryTypeControls() {
+      const visible = state.currentView === "by_query_type";
+      queryFilterWrap.classList.toggle("visible", visible);
+      datasetLegend.classList.toggle("visible", visible);
+      toggleRow.classList.toggle("hidden", visible);
+      for (const option of document.querySelectorAll(".sort-option-overall-only")) {
+        option.classList.toggle("hidden", visible);
+      }
+      if (visible && sortKey.value === "percentage_ge_sources_in_se_sources") {
+        sortKey.value = "weighted_total_content_score";
+      }
+      if (visible) {
+        state.showDimensions = false;
+        showDimensionsInput.checked = false;
+      }
+    }
+
+    function populateQueryTypeFilter(payload) {
+      const values = Array.from(new Set((payload.by_query_type || []).map((row) => row.query_type).filter(Boolean)));
+      const ordered = Object.keys(QUERY_TYPE_META).filter((key) => values.includes(key)).concat(values.filter((key) => !(key in QUERY_TYPE_META)));
+      if (!ordered.length) {
+        datasetLegend.innerHTML = "";
+        return;
+      }
+      if (state.selectedQueryType === "all" || !ordered.includes(state.selectedQueryType)) {
+        state.selectedQueryType = ordered[0];
+      }
+      datasetLegend.innerHTML = ordered.map((value) => `
+        <button class="dataset-chip ${value === state.selectedQueryType ? 'active' : ''}" data-query-type="${value}" type="button">
+          <strong>${value}</strong>
+          <span>${QUERY_TYPE_META[value] || ''}</span>
+        </button>
+      `).join('');
+      for (const button of datasetLegend.querySelectorAll('[data-query-type]')) {
+        button.addEventListener('click', () => {
+          state.selectedQueryType = button.dataset.queryType;
+          populateQueryTypeFilter(state.payload);
+          renderTable();
+        });
+      }
+    }
+
     function updateTopStats(payload) {
       const overall = (payload.overall || []).filter((row) => isMainBoardModel(row.model_name));
       const byType = (payload.by_query_type || []).filter((row) => isMainBoardModel(row.model_name));
@@ -1239,6 +1366,10 @@
 
       rows = rows.filter((row) => isMainBoardModel(row.model_name));
 
+      if (state.currentView === "by_query_type") {
+        rows = rows.filter((row) => row.query_type === state.selectedQueryType);
+      }
+
       const q = searchInput.value.trim().toLowerCase();
       if (q) {
         rows = rows.filter((row) => String(row.model_name || "").toLowerCase().includes(q));
@@ -1258,27 +1389,43 @@
 
     function renderTable() {
       const rows = getRows();
-      const cols = [
-        ...(state.currentView === "overall" ? baseColumns.filter((key) => key !== "query_type") : baseColumns),
-        ...(state.showDimensions ? dimensionColumns : []),
-      ];
-
-      tableTitle.textContent = state.currentView === "overall" ? "Overall ranking" : "Ranking by query type";
+      const cols = state.currentView === "overall"
+        ? [
+            ...baseColumns.filter((key) => key !== "query_type"),
+            ...(state.showDimensions ? dimensionColumns : []),
+          ]
+        : [
+            "model_name",
+            "weighted_total_content_score",
+            "unweighted_mean_score",
+          ];
+
+      if (state.currentView === "overall") {
+        tableTitle.textContent = "Overall ranking";
+      } else {
+        tableTitle.textContent = `Ranking for ${formatQueryTypeLabel(state.selectedQueryType)}`;
+      }
       tableCount.textContent = `${rows.length} rows`;
       tableHead.innerHTML = `<tr>${cols.map((key) => `<th>${labels[key] || key}</th>`).join("")}</tr>`;
-      tableBody.innerHTML = rows.map((row) => `
-        <tr>
-          ${cols.map((key) => {
-            const val = row[key];
-            const rendered = typeof val === "number" ? formatNumber(val) : (val ?? "-");
-            return `<td>${rendered}</td>`;
-          }).join("")}
-        </tr>
-      `).join("");
+      const tableRows = [];
+      for (const row of rows) {
+        tableRows.push(`
+          <tr>
+            ${cols.map((key) => {
+              const val = row[key];
+              const rendered = typeof val === "number" ? formatNumber(val) : (val ?? "-");
+              return `<td>${rendered}</td>`;
+            }).join("")}
+          </tr>
+        `);
+      }
+      tableBody.innerHTML = tableRows.join("");
     }
 
     function applyPayload(payload) {
       state.payload = payload;
+      populateQueryTypeFilter(payload);
+      updateQueryTypeControls();
       updateTopStats(payload);
       renderFindings(payload);
       renderDeepSeekStudy(payload);
@@ -1306,6 +1453,10 @@
       tab.addEventListener("click", () => {
         state.currentView = tab.dataset.view;
         viewSelect.value = state.currentView;
+        if (state.currentView === "by_query_type" && state.payload) {
+          populateQueryTypeFilter(state.payload);
+        }
+        updateQueryTypeControls();
         document.querySelectorAll(".tab").forEach((node) => node.classList.toggle("active", node === tab));
         renderTable();
       });
@@ -1313,6 +1464,10 @@
 
     viewSelect.addEventListener("change", (event) => {
       state.currentView = event.target.value;
+      if (state.currentView === "by_query_type" && state.payload) {
+        populateQueryTypeFilter(state.payload);
+      }
+      updateQueryTypeControls();
       document.querySelectorAll(".tab").forEach((node) => node.classList.toggle("active", node.dataset.view === state.currentView));
       renderTable();
     });