Enhancement/add logo

public/index.html

@@ -13,7 +13,7 @@
       })();
     </script>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/routerarena_logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />

src/components/Header.css

@@ -21,25 +21,18 @@
 .logo {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
   text-decoration: none;
   color: white;
-  font-size: 1.5rem;
-  font-weight: bold;
   transition: opacity 0.2s ease;
 }
 
 .logo:hover {
   opacity: 0.8;
 }
 
-.logo-icon {
-  width: 32px;
-  height: 32px;
-}
-
-.logo-text {
-  color: white;
+.logo-image {
+  height: 36px;
+  width: auto;
 }
 
 .nav {

src/components/Header.tsx

@@ -3,6 +3,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { Menu, X, Trophy, Home, Send, Users, Github, FileText} from 'lucide-react';
 import './Header.css';
 import { contactInfo } from '../data/mockData';
+import whiteLogo from '../assets/images/entire_logo_white.png';
 
 const Header: React.FC = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -26,8 +27,7 @@ const Header: React.FC = () => {
     <header className="header">
       <div className="header-container">
         <Link to="/" className="logo">
-          <Trophy className="logo-icon" />
-          <span className="logo-text">RouterArena</span>
+          <img src={whiteLogo} alt="RouterArena" className="logo-image" />
         </Link>
 
         <nav className="nav">

src/components/SpiderChart.tsx

@@ -66,19 +66,9 @@ const SpiderChart: React.FC<SpiderChartProps> = ({ routers, maxRouters = 5 }) =>
 
   // Calculate adaptive axis scaling to show more variation
   // Filter out null values
-  const allValues = topRouters.flatMap(router =>
-    metrics
-      .map(metric => router.metrics[metric.key as keyof typeof router.metrics])
-      .filter((val): val is number => val !== null)
-  );
-  const minValue = Math.min(...allValues);
-  const maxValue = Math.max(...allValues);
-  const valueRange = maxValue - minValue;
-
-  // Set axis range to show more variation
-  // If values are clustered (e.g., 0.8-0.9), show axis with 25% padding above and below
-  const axisMin = Math.max(0, minValue - valueRange * 0.25);
-  const axisMax = Math.min(1, maxValue + valueRange * 0.25);
+  const gridTicks = [0, 20, 40, 60, 80, 100];
+  const axisMin = 0;
+  const axisMax = 100;
   const axisRange = axisMax - axisMin;
 
   const chartRadius = 180;
@@ -89,38 +79,35 @@ const SpiderChart: React.FC<SpiderChartProps> = ({ routers, maxRouters = 5 }) =>
     <div className="spider-chart-container">
       <div className="spider-chart">
         <svg width="450" height="450" viewBox="0 0 450 450">
-          {/* Grid circles drawn at real 0.1 score increments */}
-          {Array.from({ length: 11 }, (_, i) => i * 0.2)
-            .filter(v => v >= axisMin && v <= axisMax)
-            .map((value, index) => {
-              // Map true axis value -> 0–1 visual radius fraction
-              const scale = (value - axisMin) / axisRange;
-              const r = chartRadius * scale;
-
-              return (
-                <g key={index}>
-                  <circle
-                    cx={centerX}
-                    cy={centerY}
-                    r={r}
-                    fill="none"
-                    stroke="#e5e7eb"
-                    strokeWidth="1"
-                  />
-                  <text
-                    x={centerX + r + 8}
-                    y={centerY}
-                    textAnchor="start"
-                    dominantBaseline="middle"
-                    className="grid-label"
-                    fill="#9ca3af"
-                    fontSize="22"
-                  >
-                    {value.toFixed(1)}
-                  </text>
-                </g>
-              );
-            })}
+          {/* Grid circles drawn at fixed 0-100 scale */}
+          {gridTicks.map((value, index) => {
+            const scale = (value - axisMin) / axisRange;
+            const r = chartRadius * scale;
+
+            return (
+              <g key={index}>
+                <circle
+                  cx={centerX}
+                  cy={centerY}
+                  r={r}
+                  fill="none"
+                  stroke="#e5e7eb"
+                  strokeWidth="1"
+                />
+                <text
+                  x={centerX + r + 8}
+                  y={centerY}
+                  textAnchor="start"
+                  dominantBaseline="middle"
+                  className="grid-label"
+                  fill="#9ca3af"
+                  fontSize="22"
+                >
+                  {value.toString()}
+                </text>
+              </g>
+            );
+          })}
 
           {/* Grid lines (axes) */}
           {metrics.map((metric, index) => {

src/data/mockData.ts

@@ -1,5 +1,9 @@
 import { Router, DatasetInfo, ContactInfo } from '../types';
 
+const roundToOneDecimal = (value: number): number => Math.round(value * 10) / 10;
+const roundNullableToOneDecimal = (value: number | null): number | null =>
+  value === null ? null : roundToOneDecimal(value);
+
 export const contactInfo: ContactInfo = {
   authors: [
     {
@@ -70,38 +74,37 @@ const calculateAverageScore = (metrics: {
   return scores.reduce((sum, score) => sum + score, 0) / scores.length;
 };
 
-// Raw router data from the provided JSON
 const rawRouterData = [
   {
     'Router Name': 'RouterDC',
-    'Arena Score': 0.3375,
-    'Optimal Selection Score': 0.3984,
-    'Optimal Cost Score': 0.72998,
-    'Optimal Acc. Score': 0.4905,
-    'Robustness Score': 0.976,
-    'Latency Score': 0.107527,
+    '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': 'azure',
-    'Arena Score': 0.6666,
-    'Optimal Selection Score': 0.2252,
-    'Optimal Cost Score': 0.46322,
-    'Optimal Acc. Score': 0.8196,
+    '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': 'carrot',
-    'Arena Score': 0.6387,
-    'Optimal Selection Score': 0.0268,
-    'Optimal Cost Score': 0.067697,
-    'Optimal Acc. Score': 0.7863,
-    'Robustness Score': 0.936,
-    'Latency Score': 0.014993,
+    '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': 'gpt5',
-    'Arena Score': 0.6432,
+    'Arena Score': 64.32,
     'Optimal Selection Score': null,
     'Optimal Cost Score': null,
     'Optimal Acc. Score': null,
@@ -110,75 +113,75 @@ const rawRouterData = [
   },
   {
     'Router Name': 'graphrouter',
-    'Arena Score': 0.5722,
-    'Optimal Selection Score': 0.0473,
-    'Optimal Cost Score': 0.383347,
-    'Optimal Acc. Score': 0.7425,
-    'Robustness Score': 0.975,
-    'Latency Score': 0.026954,
+    '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': 'mirt_bert',
-    'Arena Score': 0.6689,
-    'Optimal Selection Score': 0.0344,
-    'Optimal Cost Score': 0.196178,
-    'Optimal Acc. Score': 0.7818,
-    'Robustness Score': 0.945,
-    'Latency Score': 0.27027,
+    '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': 'nirt_bert',
-    'Arena Score': 0.6612,
-    'Optimal Selection Score': 0.0383,
-    'Optimal Cost Score': 0.14039,
-    'Optimal Acc. Score': 0.7788,
-    'Robustness Score': 0.445,
-    'Latency Score': 0.104167,
+    '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': 'notdiamond',
-    'Arena Score': 0.63,
-    'Optimal Selection Score': 0.0155,
-    'Optimal Cost Score': 0.021367,
-    'Optimal Acc. Score': 0.7681,
+    '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': 'routellm',
-    'Arena Score': 0.4807,
-    'Optimal Selection Score': 0.9972,
-    'Optimal Cost Score': 0.996314,
-    'Optimal Acc. Score': 0.6876,
-    'Robustness Score': 0.998,
-    'Latency Score': 0.004016,
+    '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': 'routerbench_knn',
-    'Arena Score': 0.5548,
-    'Optimal Selection Score': 0.1309,
-    'Optimal Cost Score': 0.254887,
-    'Optimal Acc. Score': 0.7877,
-    'Robustness Score': 0.513,
-    'Latency Score': 0.01328,
+    '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_mlp',
-    'Arena Score': 0.5756,
-    'Optimal Selection Score': 0.1339,
-    'Optimal Cost Score': 0.244499,
-    'Optimal Acc. Score': 0.8332,
-    'Robustness Score': 0.969,
-    'Latency Score': 0.909091,
+    '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': 'vllm',
-    'Arena Score': 0.6432,
-    'Optimal Selection Score': 0.0479,
-    'Optimal Cost Score': 0.125426,
-    'Optimal Acc. Score': 0.7933,
-    'Robustness Score': 1.0,
-    'Latency Score': 0.001863,
+    '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,
   },
 ];
 
@@ -317,12 +320,12 @@ const routersWithRanks = rawRouterData.map(router => {
   };
 
   const metrics = {
-    arenaScore: router['Arena Score'],
-    optimalSelectionScore: router['Optimal Selection Score'],
-    optimalCostScore: router['Optimal Cost Score'],
-    optimalAccScore: router['Optimal Acc. Score'],
-    robustnessScore: router['Robustness Score'],
-    latencyScore: router['Latency Score'],
+    arenaScore: roundToOneDecimal(router['Arena Score']),
+    optimalSelectionScore: roundNullableToOneDecimal(router['Optimal Selection Score']),
+    optimalCostScore: roundNullableToOneDecimal(router['Optimal Cost Score']),
+    optimalAccScore: roundNullableToOneDecimal(router['Optimal Acc. Score']),
+    robustnessScore: roundNullableToOneDecimal(router['Robustness Score']),
+    latencyScore: roundNullableToOneDecimal(router['Latency Score']),
     overallRank: 0, // Will be calculated below
   };
 

src/global.d.ts

@@ -3,3 +3,8 @@ interface Window {
   dataLayer: any[];
   gtag: (...args: any[]) => void;
 }
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}

src/pages/HomePage.css

@@ -40,6 +40,7 @@
   color: rgba(255, 255, 255, 0.9);
   padding-right: 4rem;
   margin-left: 2rem;
+  max-width: 400rem;
 }
 
 .highlight {
@@ -65,7 +66,7 @@
   border: none;
   padding: 0;
   text-align: left;
-  max-width: 320px;
+  max-width: 500px;
 }
 
 .cta-heading {
@@ -188,7 +189,7 @@
   padding: 2rem;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   border: 1px solid #e5e7eb;
-  max-width: 400px;
+  max-width: 350px;
   width: 100%;
 }
 

src/pages/HomePage.tsx

@@ -34,7 +34,7 @@ const HomePage: React.FC = () => {
             </h1>
 
             <p className="hero-subtitle-short">
-              Diverse dataset, extensive metrics, and live leaderboard
+              Diverse dataset, extensive metrics, and <br /> live leaderboard
             </p>
             <div className="hero-actions">
               <Link to="/leaderboard" className="btn btn-primary">