Spaces:
Sleeping
Sleeping
File size: 4,278 Bytes
75ee81e 542e5d3 75ee81e 542e5d3 75ee81e 542e5d3 75ee81e 542e5d3 75ee81e 542e5d3 75ee81e 542e5d3 75ee81e 542e5d3 75ee81e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | "use client";
import { useState, useEffect, useCallback } from 'react';
const MEDALS = ['🥇', '🥈', '🥉'];
export default function Leaderboard({ isOpen, onClose }) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const fetchLeaderboard = useCallback(() => {
setLoading(true);
fetch(`/api/leaderboard?t=${Date.now()}`) // cache-bust
.then(res => res.json())
.then(d => { setData(d); setLoading(false); })
.catch(() => setLoading(false));
}, []);
// Fetch on first open
useEffect(() => {
if (isOpen && !data) {
fetchLeaderboard();
}
}, [isOpen, data, fetchLeaderboard]);
if (!isOpen) return null;
return (
<>
<div className="panel-backdrop" onClick={onClose} />
<div className="leaderboard-modal">
<div className="leaderboard-header">
<h3>🏆 Annotation Leaderboard</h3>
<div className="leaderboard-header-actions">
<button
className="btn-refresh"
onClick={fetchLeaderboard}
disabled={loading}
title="Refresh"
>
{loading ? '⏳' : '🔄'}
</button>
<button className="panel-close" onClick={onClose}>×</button>
</div>
</div>
<div className="leaderboard-body">
{loading && !data ? (
<div className="leaderboard-loading">
<div className="spinner" />
<p>Tallying scores...</p>
</div>
) : !data?.leaderboard?.length ? (
<p className="leaderboard-empty">No annotations yet. Be the first! 🚀</p>
) : (
<table className="leaderboard-table">
<thead>
<tr>
<th>#</th>
<th>Annotator</th>
<th title="Total verifications">✅ Verified</th>
<th title="Manually added mentions">✍️ Added</th>
<th title="Documents worked on">📄 Docs</th>
<th title="Total score">⭐ Score</th>
</tr>
</thead>
<tbody>
{data.leaderboard.map((entry, i) => (
<tr key={entry.annotator} className={i < 3 ? `rank-${i + 1}` : ''}>
<td className="rank-cell">
{i < 3 ? MEDALS[i] : i + 1}
</td>
<td className="annotator-cell">
{entry.annotator}
</td>
<td>
<span className="stat-verified">{entry.verified}</span>
{entry.incorrect > 0 && (
<span className="stat-detail"> ({entry.correct}✓ {entry.incorrect}✕)</span>
)}
</td>
<td>{entry.humanAdded}</td>
<td>{entry.docsWorked}</td>
<td className="score-cell">{entry.score}</td>
</tr>
))}
</tbody>
</table>
)}
</div>
<div className="leaderboard-footer">
<p>Score = Verified + Added</p>
</div>
</div>
</>
);
}
|