Skip to content

Commit e869bd1

Browse files
shenrunzhangshenrunzhang
committed
Added logo and rescaled 0-100
1 parent 3dbff83 commit e869bd1

File tree

10 files changed

+123
-134
lines changed

10 files changed

+123
-134
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
})();
1414
</script>
1515
<meta charset="utf-8" />
16-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
16+
<link rel="icon" href="%PUBLIC_URL%/routerarena_logo.png" />
1717
<meta name="viewport" content="width=device-width, initial-scale=1" />
1818
<meta name="theme-color" content="#000000" />
1919
<meta name="description" content="Web site created using create-react-app" />

‎public/routerarena_logo.png‎

347 KB
Loading

‎src/assets/images/entire_logo_white.png‎

154 KB
Loading

‎src/components/Header.css‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,18 @@
2121
.logo {
2222
display: flex;
2323
align-items: center;
24-
gap: 0.5rem;
2524
text-decoration: none;
2625
color: white;
27-
font-size: 1.5rem;
28-
font-weight: bold;
2926
transition: opacity 0.2s ease;
3027
}
3128

3229
.logo:hover {
3330
opacity: 0.8;
3431
}
3532

36-
.logo-icon {
37-
width: 32px;
38-
height: 32px;
39-
}
40-
41-
.logo-text {
42-
color: white;
33+
.logo-image {
34+
height: 36px;
35+
width: auto;
4336
}
4437

4538
.nav {

‎src/components/Header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Link, useLocation } from 'react-router-dom';
33
import { Menu, X, Trophy, Home, Send, Users, Github, FileText} from 'lucide-react';
44
import './Header.css';
55
import { contactInfo } from '../data/mockData';
6+
import whiteLogo from '../assets/images/entire_logo_white.png';
67

78
const Header: React.FC = () => {
89
const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -26,8 +27,7 @@ const Header: React.FC = () => {
2627
<header className="header">
2728
<div className="header-container">
2829
<Link to="/" className="logo">
29-
<Trophy className="logo-icon" />
30-
<span className="logo-text">RouterArena</span>
30+
<img src={whiteLogo} alt="RouterArena" className="logo-image" />
3131
</Link>
3232

3333
<nav className="nav">

‎src/components/SpiderChart.tsx‎

Lines changed: 32 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -66,19 +66,9 @@ const SpiderChart: React.FC<SpiderChartProps> = ({ routers, maxRouters = 5 }) =>
6666

6767
// Calculate adaptive axis scaling to show more variation
6868
// Filter out null values
69-
const allValues = topRouters.flatMap(router =>
70-
metrics
71-
.map(metric => router.metrics[metric.key as keyof typeof router.metrics])
72-
.filter((val): val is number => val !== null)
73-
);
74-
const minValue = Math.min(...allValues);
75-
const maxValue = Math.max(...allValues);
76-
const valueRange = maxValue - minValue;
77-
78-
// Set axis range to show more variation
79-
// If values are clustered (e.g., 0.8-0.9), show axis with 25% padding above and below
80-
const axisMin = Math.max(0, minValue - valueRange * 0.25);
81-
const axisMax = Math.min(1, maxValue + valueRange * 0.25);
69+
const gridTicks = [0, 20, 40, 60, 80, 100];
70+
const axisMin = 0;
71+
const axisMax = 100;
8272
const axisRange = axisMax - axisMin;
8373

8474
const chartRadius = 180;
@@ -89,38 +79,35 @@ const SpiderChart: React.FC<SpiderChartProps> = ({ routers, maxRouters = 5 }) =>
8979
<div className="spider-chart-container">
9080
<div className="spider-chart">
9181
<svg width="450" height="450" viewBox="0 0 450 450">
92-
{/* Grid circles drawn at real 0.1 score increments */}
93-
{Array.from({ length: 11 }, (_, i) => i * 0.2)
94-
.filter(v => v >= axisMin && v <= axisMax)
95-
.map((value, index) => {
96-
// Map true axis value -> 0–1 visual radius fraction
97-
const scale = (value - axisMin) / axisRange;
98-
const r = chartRadius * scale;
99-
100-
return (
101-
<g key={index}>
102-
<circle
103-
cx={centerX}
104-
cy={centerY}
105-
r={r}
106-
fill="none"
107-
stroke="#e5e7eb"
108-
strokeWidth="1"
109-
/>
110-
<text
111-
x={centerX + r + 8}
112-
y={centerY}
113-
textAnchor="start"
114-
dominantBaseline="middle"
115-
className="grid-label"
116-
fill="#9ca3af"
117-
fontSize="22"
118-
>
119-
{value.toFixed(1)}
120-
</text>
121-
</g>
122-
);
123-
})}
82+
{/* Grid circles drawn at fixed 0-100 scale */}
83+
{gridTicks.map((value, index) => {
84+
const scale = (value - axisMin) / axisRange;
85+
const r = chartRadius * scale;
86+
87+
return (
88+
<g key={index}>
89+
<circle
90+
cx={centerX}
91+
cy={centerY}
92+
r={r}
93+
fill="none"
94+
stroke="#e5e7eb"
95+
strokeWidth="1"
96+
/>
97+
<text
98+
x={centerX + r + 8}
99+
y={centerY}
100+
textAnchor="start"
101+
dominantBaseline="middle"
102+
className="grid-label"
103+
fill="#9ca3af"
104+
fontSize="22"
105+
>
106+
{value.toString()}
107+
</text>
108+
</g>
109+
);
110+
})}
124111

125112
{/* Grid lines (axes) */}
126113
{metrics.map((metric, index) => {

‎src/data/mockData.ts‎

Lines changed: 73 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { Router, DatasetInfo, ContactInfo } from '../types';
22

3+
const roundToOneDecimal = (value: number): number => Math.round(value * 10) / 10;
4+
const roundNullableToOneDecimal = (value: number | null): number | null =>
5+
value === null ? null : roundToOneDecimal(value);
6+
37
export const contactInfo: ContactInfo = {
48
authors: [
59
{
@@ -70,38 +74,37 @@ const calculateAverageScore = (metrics: {
7074
return scores.reduce((sum, score) => sum + score, 0) / scores.length;
7175
};
7276

73-
// Raw router data from the provided JSON
7477
const rawRouterData = [
7578
{
7679
'Router Name': 'RouterDC',
77-
'Arena Score': 0.3375,
78-
'Optimal Selection Score': 0.3984,
79-
'Optimal Cost Score': 0.72998,
80-
'Optimal Acc. Score': 0.4905,
81-
'Robustness Score': 0.976,
82-
'Latency Score': 0.107527,
80+
'Arena Score': 33.75,
81+
'Optimal Selection Score': 39.84,
82+
'Optimal Cost Score': 72.998,
83+
'Optimal Acc. Score': 49.05,
84+
'Robustness Score': 97.6,
85+
'Latency Score': 10.7527,
8386
},
8487
{
8588
'Router Name': 'azure',
86-
'Arena Score': 0.6666,
87-
'Optimal Selection Score': 0.2252,
88-
'Optimal Cost Score': 0.46322,
89-
'Optimal Acc. Score': 0.8196,
89+
'Arena Score': 66.66,
90+
'Optimal Selection Score': 22.52,
91+
'Optimal Cost Score': 46.322,
92+
'Optimal Acc. Score': 81.96,
9093
'Robustness Score': null,
9194
'Latency Score': null,
9295
},
9396
{
9497
'Router Name': 'carrot',
95-
'Arena Score': 0.6387,
96-
'Optimal Selection Score': 0.0268,
97-
'Optimal Cost Score': 0.067697,
98-
'Optimal Acc. Score': 0.7863,
99-
'Robustness Score': 0.936,
100-
'Latency Score': 0.014993,
98+
'Arena Score': 63.87,
99+
'Optimal Selection Score': 2.68,
100+
'Optimal Cost Score': 6.7697,
101+
'Optimal Acc. Score': 78.63,
102+
'Robustness Score': 93.6,
103+
'Latency Score': 1.4993,
101104
},
102105
{
103106
'Router Name': 'gpt5',
104-
'Arena Score': 0.6432,
107+
'Arena Score': 64.32,
105108
'Optimal Selection Score': null,
106109
'Optimal Cost Score': null,
107110
'Optimal Acc. Score': null,
@@ -110,75 +113,75 @@ const rawRouterData = [
110113
},
111114
{
112115
'Router Name': 'graphrouter',
113-
'Arena Score': 0.5722,
114-
'Optimal Selection Score': 0.0473,
115-
'Optimal Cost Score': 0.383347,
116-
'Optimal Acc. Score': 0.7425,
117-
'Robustness Score': 0.975,
118-
'Latency Score': 0.026954,
116+
'Arena Score': 57.22,
117+
'Optimal Selection Score': 4.73,
118+
'Optimal Cost Score': 38.3347,
119+
'Optimal Acc. Score': 74.25,
120+
'Robustness Score': 97.5,
121+
'Latency Score': 2.6954,
119122
},
120123
{
121124
'Router Name': 'mirt_bert',
122-
'Arena Score': 0.6689,
123-
'Optimal Selection Score': 0.0344,
124-
'Optimal Cost Score': 0.196178,
125-
'Optimal Acc. Score': 0.7818,
126-
'Robustness Score': 0.945,
127-
'Latency Score': 0.27027,
125+
'Arena Score': 66.89,
126+
'Optimal Selection Score': 3.44,
127+
'Optimal Cost Score': 19.6178,
128+
'Optimal Acc. Score': 78.18,
129+
'Robustness Score': 94.5,
130+
'Latency Score': 27.027,
128131
},
129132
{
130133
'Router Name': 'nirt_bert',
131-
'Arena Score': 0.6612,
132-
'Optimal Selection Score': 0.0383,
133-
'Optimal Cost Score': 0.14039,
134-
'Optimal Acc. Score': 0.7788,
135-
'Robustness Score': 0.445,
136-
'Latency Score': 0.104167,
134+
'Arena Score': 66.12,
135+
'Optimal Selection Score': 3.83,
136+
'Optimal Cost Score': 14.039,
137+
'Optimal Acc. Score': 77.88,
138+
'Robustness Score': 44.5,
139+
'Latency Score': 10.4167,
137140
},
138141
{
139142
'Router Name': 'notdiamond',
140-
'Arena Score': 0.63,
141-
'Optimal Selection Score': 0.0155,
142-
'Optimal Cost Score': 0.021367,
143-
'Optimal Acc. Score': 0.7681,
143+
'Arena Score': 63.0,
144+
'Optimal Selection Score': 1.55,
145+
'Optimal Cost Score': 2.1367,
146+
'Optimal Acc. Score': 76.81,
144147
'Robustness Score': null,
145148
'Latency Score': null,
146149
},
147150
{
148151
'Router Name': 'routellm',
149-
'Arena Score': 0.4807,
150-
'Optimal Selection Score': 0.9972,
151-
'Optimal Cost Score': 0.996314,
152-
'Optimal Acc. Score': 0.6876,
153-
'Robustness Score': 0.998,
154-
'Latency Score': 0.004016,
152+
'Arena Score': 48.07,
153+
'Optimal Selection Score': 99.72,
154+
'Optimal Cost Score': 99.6314,
155+
'Optimal Acc. Score': 68.76,
156+
'Robustness Score': 99.8,
157+
'Latency Score': 0.4016,
155158
},
156159
{
157160
'Router Name': 'routerbench_knn',
158-
'Arena Score': 0.5548,
159-
'Optimal Selection Score': 0.1309,
160-
'Optimal Cost Score': 0.254887,
161-
'Optimal Acc. Score': 0.7877,
162-
'Robustness Score': 0.513,
163-
'Latency Score': 0.01328,
161+
'Arena Score': 55.48,
162+
'Optimal Selection Score': 13.09,
163+
'Optimal Cost Score': 25.4887,
164+
'Optimal Acc. Score': 78.77,
165+
'Robustness Score': 51.3,
166+
'Latency Score': 1.328,
164167
},
165168
{
166169
'Router Name': 'routerbench_mlp',
167-
'Arena Score': 0.5756,
168-
'Optimal Selection Score': 0.1339,
169-
'Optimal Cost Score': 0.244499,
170-
'Optimal Acc. Score': 0.8332,
171-
'Robustness Score': 0.969,
172-
'Latency Score': 0.909091,
170+
'Arena Score': 57.56,
171+
'Optimal Selection Score': 13.39,
172+
'Optimal Cost Score': 24.4499,
173+
'Optimal Acc. Score': 83.32,
174+
'Robustness Score': 96.9,
175+
'Latency Score': 90.9091,
173176
},
174177
{
175178
'Router Name': 'vllm',
176-
'Arena Score': 0.6432,
177-
'Optimal Selection Score': 0.0479,
178-
'Optimal Cost Score': 0.125426,
179-
'Optimal Acc. Score': 0.7933,
180-
'Robustness Score': 1.0,
181-
'Latency Score': 0.001863,
179+
'Arena Score': 64.32,
180+
'Optimal Selection Score': 4.79,
181+
'Optimal Cost Score': 12.5426,
182+
'Optimal Acc. Score': 79.33,
183+
'Robustness Score': 100.0,
184+
'Latency Score': 0.1863,
182185
},
183186
];
184187

@@ -317,12 +320,12 @@ const routersWithRanks = rawRouterData.map(router => {
317320
};
318321

319322
const metrics = {
320-
arenaScore: router['Arena Score'],
321-
optimalSelectionScore: router['Optimal Selection Score'],
322-
optimalCostScore: router['Optimal Cost Score'],
323-
optimalAccScore: router['Optimal Acc. Score'],
324-
robustnessScore: router['Robustness Score'],
325-
latencyScore: router['Latency Score'],
323+
arenaScore: roundToOneDecimal(router['Arena Score']),
324+
optimalSelectionScore: roundNullableToOneDecimal(router['Optimal Selection Score']),
325+
optimalCostScore: roundNullableToOneDecimal(router['Optimal Cost Score']),
326+
optimalAccScore: roundNullableToOneDecimal(router['Optimal Acc. Score']),
327+
robustnessScore: roundNullableToOneDecimal(router['Robustness Score']),
328+
latencyScore: roundNullableToOneDecimal(router['Latency Score']),
326329
overallRank: 0, // Will be calculated below
327330
};
328331

‎src/global.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,8 @@ interface Window {
33
dataLayer: any[];
44
gtag: (...args: any[]) => void;
55
}
6+
7+
declare module '*.png' {
8+
const value: string;
9+
export default value;
10+
}

0 commit comments

Comments
 (0)