diff --git a/src/data/mockData.ts b/src/data/mockData.ts index 1a016ff..fc8e215 100644 --- a/src/data/mockData.ts +++ b/src/data/mockData.ts @@ -76,121 +76,147 @@ const calculateAverageScore = (metrics: { const rawRouterData = [ { - 'Router Name': 'RouterDC', - 'Arena Score': 33.75, - 'Optimal Selection Score': 39.84, - 'Optimal Cost Score': 72.998, - 'Optimal Acc. Score': 49.05, - 'Robustness Score': 97.6, - 'Latency Score': 10.7527, + "Router Name": "RouterDC", + "Arena Score": 33.75, + "Optimal Selection Score": 39.84, + "Optimal Cost Score": 72.998, + "Optimal Acc. Score": 49.05, + "Robustness Score": 97.6, + "Latency Score": 10.7527, + "Accuracy": 32.01, + "Cost per 1k": 0.07 }, { - 'Router Name': 'azure', - 'Arena Score': 66.66, - 'Optimal Selection Score': 22.52, - 'Optimal Cost Score': 46.322, - 'Optimal Acc. Score': 81.96, - 'Robustness Score': null, - 'Latency Score': null, + "Router Name": "azure", + "Arena Score": 66.66, + "Optimal Selection Score": 22.52, + "Optimal Cost Score": 46.322, + "Optimal Acc. Score": 81.96, + "Robustness Score": null, + "Latency Score": null, + "Accuracy": 68.09, + "Cost per 1k": 0.54 }, { - 'Router Name': 'carrot', - 'Arena Score': 63.87, - 'Optimal Selection Score': 2.68, - 'Optimal Cost Score': 6.7697, - 'Optimal Acc. Score': 78.63, - 'Robustness Score': 93.6, - 'Latency Score': 1.4993, + "Router Name": "carrot", + "Arena Score": 63.87, + "Optimal Selection Score": 2.68, + "Optimal Cost Score": 6.7697, + "Optimal Acc. Score": 78.63, + "Robustness Score": 93.6, + "Latency Score": 1.4993, + "Accuracy": 67.21, + "Cost per 1k": 2.06 }, { - 'Router Name': 'gpt5', - 'Arena Score': 64.32, - 'Optimal Selection Score': null, - 'Optimal Cost Score': null, - 'Optimal Acc. Score': null, - 'Robustness Score': null, - 'Latency Score': null, + "Router Name": "gpt5", + "Arena Score": 64.32, + "Optimal Selection Score": null, + "Optimal Cost Score": null, + "Optimal Acc. Score": null, + "Robustness Score": null, + "Latency Score": null, + "Accuracy": 73.96, + "Cost per 1k": 10.02 }, { - 'Router Name': 'graphrouter', - 'Arena Score': 57.22, - 'Optimal Selection Score': 4.73, - 'Optimal Cost Score': 38.3347, - 'Optimal Acc. Score': 74.25, - 'Robustness Score': 97.5, - 'Latency Score': 2.6954, + "Router Name": "graphrouter", + "Arena Score": 57.22, + "Optimal Selection Score": 4.73, + "Optimal Cost Score": 38.3347, + "Optimal Acc. Score": 74.25, + "Robustness Score": 97.5, + "Latency Score": 2.6954, + "Accuracy": 57.00, + "Cost per 1k": 0.34 }, { - 'Router Name': 'mirt_bert', - 'Arena Score': 66.89, - 'Optimal Selection Score': 3.44, - 'Optimal Cost Score': 19.6178, - 'Optimal Acc. Score': 78.18, - 'Robustness Score': 94.5, - 'Latency Score': 27.027, + "Router Name": "mirt_bert", + "Arena Score": 66.89, + "Optimal Selection Score": 3.44, + "Optimal Cost Score": 19.6178, + "Optimal Acc. Score": 78.18, + "Robustness Score": 94.5, + "Latency Score": 27.027, + "Accuracy": 66.88, + "Cost per 1k": 0.15 }, { - 'Router Name': 'nirt_bert', - 'Arena Score': 66.12, - 'Optimal Selection Score': 3.83, - 'Optimal Cost Score': 14.039, - 'Optimal Acc. Score': 77.88, - 'Robustness Score': 44.5, - 'Latency Score': 10.4167, + "Router Name": "nirt_bert", + "Arena Score": 66.12, + "Optimal Selection Score": 3.83, + "Optimal Cost Score": 14.039, + "Optimal Acc. Score": 77.88, + "Robustness Score": 44.5, + "Latency Score": 10.4167, + "Accuracy": 66.34, + "Cost per 1k": 0.21 }, { - 'Router Name': 'notdiamond', - 'Arena Score': 63.0, - 'Optimal Selection Score': 1.55, - 'Optimal Cost Score': 2.1367, - 'Optimal Acc. Score': 76.81, - 'Robustness Score': null, - 'Latency Score': null, + "Router Name": "notdiamond", + "Arena Score": 63.0, + "Optimal Selection Score": 1.55, + "Optimal Cost Score": 2.1367, + "Optimal Acc. Score": 76.81, + "Robustness Score": null, + "Latency Score": null, + "Accuracy": 60.83, + "Cost per 1k": 4.10 }, { - 'Router Name': 'routellm', - 'Arena Score': 48.07, - 'Optimal Selection Score': 99.72, - 'Optimal Cost Score': 99.6314, - 'Optimal Acc. Score': 68.76, - 'Robustness Score': 99.8, - 'Latency Score': 0.4016, + "Router Name": "routellm", + "Arena Score": 48.07, + "Optimal Selection Score": 99.72, + "Optimal Cost Score": 99.6314, + "Optimal Acc. Score": 68.76, + "Robustness Score": 99.8, + "Latency Score": 0.4016, + "Accuracy": 47.04, + "Cost per 1k": 0.27 }, { - 'Router Name': 'routerbench_knn', - 'Arena Score': 55.48, - 'Optimal Selection Score': 13.09, - 'Optimal Cost Score': 25.4887, - 'Optimal Acc. Score': 78.77, - 'Robustness Score': 51.3, - 'Latency Score': 1.328, + "Router Name": "routerbench_knn", + "Arena Score": 55.48, + "Optimal Selection Score": 13.09, + "Optimal Cost Score": 25.4887, + "Optimal Acc. Score": 78.77, + "Robustness Score": 51.3, + "Latency Score": 1.328, + "Accuracy": 58.69, + "Cost per 1k": 4.27 }, { - 'Router Name': 'routerbench_mlp', - 'Arena Score': 57.56, - 'Optimal Selection Score': 13.39, - 'Optimal Cost Score': 24.4499, - 'Optimal Acc. Score': 83.32, - 'Robustness Score': 96.9, - 'Latency Score': 90.9091, + "Router Name": "routerbench_mlp", + "Arena Score": 57.56, + "Optimal Selection Score": 13.39, + "Optimal Cost Score": 24.4499, + "Optimal Acc. Score": 83.32, + "Robustness Score": 96.9, + "Latency Score": 90.9091, + "Accuracy": 61.62, + "Cost per 1k": 4.83 }, { - 'Router Name': 'vllm', - 'Arena Score': 64.32, - 'Optimal Selection Score': 4.79, - 'Optimal Cost Score': 12.5426, - 'Optimal Acc. Score': 79.33, - 'Robustness Score': 100.0, - 'Latency Score': 0.1863, + "Router Name": "vllm", + "Arena Score": 64.32, + "Optimal Selection Score": 4.79, + "Optimal Cost Score": 12.5426, + "Optimal Acc. Score": 79.33, + "Robustness Score": 100.0, + "Latency Score": 0.1863, + "Accuracy": 67.28, + "Cost per 1k": 1.67 }, { - 'Router Name': 'chayan', - 'Arena Score': 63.83, - 'Optimal Selection Score': 43.03, - 'Optimal Cost Score': 43.75, - 'Optimal Acc. Score': 88.74, - 'Robustness Score': null, - 'Latency Score': null, + "Router Name": "chayan", + "Arena Score": 63.83, + "Optimal Selection Score": 43.03, + "Optimal Cost Score": 43.75, + "Optimal Acc. Score": 88.74, + "Robustness Score": null, + "Latency Score": null, + "Accuracy": 64.89, + "Cost per 1k": 0.56 } ]; @@ -319,7 +345,7 @@ const routerMetadata: Record< name: 'Chayan', type: 'open-source', description: 'Chayan-based routing service', - affiliation: 'Adaptive Classifier', + affiliation: 'Adaptive Classifier ', modelPool: ['GPT-4', 'GPT-3.5'], paperUrl: 'https://arxiv.org/abs/2024.xxxxx', githubUrl: 'https://huggingface.co/adaptive-classifier/chayan', @@ -344,6 +370,8 @@ const routersWithRanks = rawRouterData.map(router => { optimalAccScore: roundNullableToOneDecimal(router['Optimal Acc. Score']), robustnessScore: roundNullableToOneDecimal(router['Robustness Score']), latencyScore: roundNullableToOneDecimal(router['Latency Score']), + accuracy: roundToOneDecimal(router['Accuracy']), + costPer1k: roundToOneDecimal(router['Cost per 1k']), overallRank: 0, // Will be calculated below }; diff --git a/src/pages/LeaderboardPage.css b/src/pages/LeaderboardPage.css index 13be73d..dc1634d 100644 --- a/src/pages/LeaderboardPage.css +++ b/src/pages/LeaderboardPage.css @@ -5,7 +5,7 @@ } .container { - max-width: 1400px; + max-width: 2000px; margin: 0 auto; padding: 0 1rem; } @@ -165,16 +165,18 @@ :root { --lb-grid: - minmax(0, 0.6fr) /* Rank */ + minmax(0, 0.7fr) /* Rank */ minmax(0, 1.5fr) /* Name */ - minmax(0, 1.4fr) /* Affiliation */ - minmax(0, 1.1fr) /* Type */ - minmax(0, 0.8fr) - minmax(0, 0.8fr) - minmax(0, 0.8fr) - minmax(0, 0.8fr) - minmax(0, 0.8fr) - minmax(0, 0.8fr); + minmax(0, 1.3fr) /* Affiliation */ + minmax(0, 1.6fr) /* Type */ + minmax(0, 0.9fr) /* Arena */ + minmax(0, 1fr) /* Accuracy */ + minmax(0, 0.9fr) /* Cost/1k */ + minmax(0, 1.1fr) /* Opt. Select */ + minmax(0, 0.9fr) /* Opt. Cost */ + minmax(0, 0.9fr) /* Opt. Acc */ + minmax(0, 0.9fr) /* Latency */ + minmax(0, 0.9fr) /* Robust */ } @@ -667,22 +669,7 @@ width: 100%; } -/* Responsive Design */ -@media (max-width: 1400px) { - .leaderboard-container { - min-width: 1000px; - } - .leaderboard-header, - .leaderboard-row { - gap: 0.75rem; - } - - .viz-tab { - font-size: 0.9rem; - padding: 0.875rem 1.5rem; - } -} @media (max-width: 768px) { .leaderboard-header, @@ -785,7 +772,6 @@ grid-template-columns: var(--lb-grid) !important; gap: 0.5rem !important; padding: 0 !important; - width: 100%; box-sizing: border-box; column-gap: 0.5rem !important; justify-items: stretch; diff --git a/src/pages/LeaderboardPage.tsx b/src/pages/LeaderboardPage.tsx index 5244ed7..64af75f 100644 --- a/src/pages/LeaderboardPage.tsx +++ b/src/pages/LeaderboardPage.tsx @@ -12,7 +12,7 @@ const LeaderboardPage: React.FC = () => { const [searchTerm, setSearchTerm] = useState(''); const [filterType, setFilterType] = useState<'all' | 'open-source' | 'closed-source'>('all'); const [activeMetric, setActiveMetric] = useState< - 'arena' | 'optimalSelection' | 'optimalCost' | 'optimalAcc' | 'latency' | 'robustness' + 'arena' | 'accuracy' | 'cost' | 'optimalSelection' | 'optimalCost' | 'optimalAcc' | 'latency' | 'robustness' >('arena'); const [activeTab, setActiveTab] = useState<'spider' | 'deferral'>('spider'); @@ -54,6 +54,8 @@ const LeaderboardPage: React.FC = () => { optimalAcc: 'optimalAccScore', latency: 'latencyScore', robustness: 'robustnessScore', + accuracy: 'accuracy', + cost: 'costPer1k', } as const; let filtered = routers.filter(router => { @@ -72,7 +74,12 @@ const LeaderboardPage: React.FC = () => { if (scoreA === null && scoreB === null) return 0; if (scoreA === null) return 1; if (scoreB === null) return -1; - return scoreB - scoreA; + // For cost, lower is better, so sort ascending + if (activeMetric === 'cost') { + return (scoreA as number) - (scoreB as number); + } + // For all other metrics, higher is better, so sort descending + return (scoreB as number) - (scoreA as number); }); }, [searchTerm, filterType, activeMetric]); @@ -131,23 +138,35 @@ const LeaderboardPage: React.FC = () => { Arena Score + +