Add downloadable table feature with CSV, JSON, and Excel export

Users can now download the leaderboard table data via a Download button
next to Clear Filters. A two-column panel lets users choose scope
(Current View or Full Data) and format (CSV, JSON, Excel - multi-select).

- Export values are numeric (not formatted strings) for proper use in
  spreadsheets and programmatic consumption
- Full Data export includes all models even without metadata
- xlsx dependency added for Excel export via SheetJS

Author: rohanbalkondekar

package-lock.json

@@ -15,7 +15,8 @@
     "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.1",
     "react-select": "^5.8.3",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "xlsx": "^0.18.5"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -242,16 +242,97 @@ td {
 }
 
 .other-controls {
+  margin-bottom: 0.5rem;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 0.5rem;
   margin-bottom: 1rem;
+  overflow: visible;
+}
+
+.clear-filters-button,
+.download-button {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  padding: 0.3rem 0.75rem;
+  font-size: 0.85rem;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.clear-filters-button:hover,
+.download-button:hover {
+  background-color: #0056b3;
+}
+
+.download-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.download-panel {
+  position: fixed;
+  z-index: 1000;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 0.8rem;
+  min-width: 280px;
+}
+
+.download-panel-body {
+  display: flex;
+  gap: 1.5rem;
 }
 
-.clear-filters-button {
+.download-panel-heading {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+}
+
+.download-panel-scope label,
+.download-panel-formats label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.25rem 0;
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: #333;
+  white-space: nowrap;
+}
+
+.download-panel-action {
+  display: block;
+  width: 100%;
+  margin-top: 0.8rem;
+  padding: 0.45rem 0;
   background-color: #007bff;
   color: #fff;
   border: none;
-  padding: 0.5rem 1rem;
+  border-radius: 3px;
   cursor: pointer;
-  margin-left: 1rem;
+  font-size: 0.9rem;
+}
+
+.download-panel-action:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+.download-panel-action:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
 }
 
 .section {

src/App.css

@@ -1,11 +1,12 @@
 // src/Table/CSVTable.jsx
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import Papa from 'papaparse';
 import { calculateAverage, getGlobalAverage } from './Averaging';
 import { useTable } from "./SortTable";
 import { getModelInfo, getVariantGroup } from './modelLinks';
 import { useSearchParams } from 'react-router-dom';
 import Select from 'react-select';
+import { buildCurrentViewData, buildFullData, downloadCSV, downloadJSON, downloadExcel } from './downloadTable';
 
 
 const CSVTable = ({dateStr}) => {
@@ -24,7 +25,25 @@ const CSVTable = ({dateStr}) => {
     const [showVariants, setShowVariants] = useState(false);
     const [showHighUnseenBias, setShowHighUnseenBias] = useState(true);
 
-    const updateURL = (checkedCategories, newFilter, newSortField = null, newSortOrder = null, newShowProvider = null, newShowApiName = null, newShowReasoners = null, newShowOpenWeights = null, newShowVariants = null, newShowHighUnseenBias = null, newSearchQuery = null) => {
+    const [showDownloadMenu, setShowDownloadMenu] = useState(false);
+    const [downloadScope, setDownloadScope] = useState('current');
+    const [downloadFormats, setDownloadFormats] = useState({ csv: false, json: false, xlsx: false });
+    const [panelPos, setPanelPos] = useState({ top: 0, left: 0 });
+    const downloadMenuRef = useRef(null);
+    const downloadBtnRef = useRef(null);
+
+    useEffect(() => {
+        if (!showDownloadMenu) return;
+        const handleClickOutside = (e) => {
+            if (downloadMenuRef.current && !downloadMenuRef.current.contains(e.target)) {
+                setShowDownloadMenu(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [showDownloadMenu]);
+
+    const updateURL =(checkedCategories, newFilter, newSortField = null, newSortOrder = null, newShowProvider = null, newShowApiName = null, newShowReasoners = null, newShowOpenWeights = null, newShowVariants = null, newShowHighUnseenBias = null, newSearchQuery = null) => {
         const params = new URLSearchParams();
 
         let allAverages = true;
@@ -426,6 +445,18 @@ const CSVTable = ({dateStr}) => {
         updateURL(defaultCategories, {}, 'ga', 'desc', true, false, true, false, false, false, '');
     }
 
+    const handleDownload = () => {
+        const rows = downloadScope === 'current'
+            ? buildCurrentViewData(displayedData, checkedCategories, categories, { showProvider, showApiName, displayNameCounts })
+            : buildFullData(data, categories);
+        const filename = `livebench_${downloadScope === 'current' ? 'current_view' : 'full_data'}`;
+        if (downloadFormats.csv) downloadCSV(rows, `${filename}.csv`);
+        if (downloadFormats.json) downloadJSON(rows, `${filename}.json`);
+        if (downloadFormats.xlsx) downloadExcel(rows, `${filename}.xlsx`);
+        setDownloadFormats({ csv: false, json: false, xlsx: false });
+        setShowDownloadMenu(false);
+    };
+
     // Utility to compute class for sorting
     const getSortClass = (accessor) => {
         return sortField === accessor ? (sortOrder === "asc" ? "up" : "down") : "default";
@@ -559,7 +590,58 @@ const CSVTable = ({dateStr}) => {
                     <input type="checkbox" checked={showHighUnseenBias} onChange={() => setShowHighUnseenBias(!showHighUnseenBias)} id="showHighUnseenBias" />
                     <span style={{marginLeft: '0.5rem'}}>Show High Unseen Question Bias Models</span>
                 </label>
+            </div>
+            <div className="action-buttons">
                 <button onClick={handleResetFilters} className="clear-filters-button">Clear Filters</button>
+                <div className="download-dropdown" ref={downloadMenuRef}>
+                    <button ref={downloadBtnRef} onClick={() => {
+                        if (!showDownloadMenu && downloadBtnRef.current) {
+                            const rect = downloadBtnRef.current.getBoundingClientRect();
+                            setPanelPos({ top: rect.bottom + 4, left: rect.left });
+                        }
+                        setShowDownloadMenu(!showDownloadMenu);
+                    }} className="download-button">
+                        <i className="fa fa-download" style={{marginRight: '0.4rem'}}></i>Download
+                    </button>
+                    {showDownloadMenu && (
+                        <div className="download-panel" style={{ top: panelPos.top, left: panelPos.left }}>
+                            <div className="download-panel-body">
+                                <div className="download-panel-scope">
+                                    <div className="download-panel-heading">Data</div>
+                                    <label>
+                                        <input type="radio" name="downloadScope" checked={downloadScope === 'current'} onChange={() => setDownloadScope('current')} />
+                                        <span>Current View</span>
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="downloadScope" checked={downloadScope === 'full'} onChange={() => setDownloadScope('full')} />
+                                        <span>Full Data</span>
+                                    </label>
+                                </div>
+                                <div className="download-panel-formats">
+                                    <div className="download-panel-heading">Format</div>
+                                    <label>
+                                        <input type="checkbox" checked={downloadFormats.csv} onChange={() => setDownloadFormats(f => ({...f, csv: !f.csv}))} />
+                                        <span>CSV</span>
+                                    </label>
+                                    <label>
+                                        <input type="checkbox" checked={downloadFormats.json} onChange={() => setDownloadFormats(f => ({...f, json: !f.json}))} />
+                                        <span>JSON</span>
+                                    </label>
+                                    <label>
+                                        <input type="checkbox" checked={downloadFormats.xlsx} onChange={() => setDownloadFormats(f => ({...f, xlsx: !f.xlsx}))} />
+                                        <span>Excel (.xlsx)</span>
+                                    </label>
+                                </div>
+                            </div>
+                            <button
+                                className="download-panel-action"
+                                disabled={!downloadFormats.csv && !downloadFormats.json && !downloadFormats.xlsx}
+                                onClick={handleDownload}>
+                                Download
+                            </button>
+                        </div>
+                    )}
+                </div>
             </div>
             <div className="search-bar">
                 <input