Leaderboard update

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/DeferralCurve.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import './DeferralCurve.css';
 
 interface DeferralCurveProps {
-  academicPoints: {
+  openSourcePoints: {
     [key: string]: { accuracy: number; cost_per_1k: number };
   };
-  commercialPoints: {
+  closedSourcePoints: {
     [key: string]: { accuracy: number; cost_per_1k: number };
   };
 }
 
-const DeferralCurve: React.FC<DeferralCurveProps> = ({ academicPoints, commercialPoints }) => {
+const DeferralCurve: React.FC<DeferralCurveProps> = ({ openSourcePoints, closedSourcePoints }) => {
   // Extract all accuracy and cost values
-  const allPoints = [...Object.values(academicPoints), ...Object.values(commercialPoints)];
+  const allPoints = [...Object.values(openSourcePoints), ...Object.values(closedSourcePoints)];
   const accuracyValues = allPoints.map(p => p.accuracy);
   const costValues = allPoints.map(p => p.cost_per_1k);
 
@@ -202,23 +202,23 @@ const DeferralCurve: React.FC<DeferralCurveProps> = ({ academicPoints, commercia
             return null;
           })}
 
-          {/* Academic routers */}
-          {Object.entries(academicPoints).map(([name, point], index) => {
+          {/* Open-source routers */}
+          {Object.entries(openSourcePoints).map(([name, point], index) => {
             const x = scaleX(point.cost_per_1k);
             const y = scaleY(point.accuracy);
             const color = routerColors[index % routerColors.length];
 
-            return renderShape(x, y, 'circle', color, `academic-${name}`);
+            return renderShape(x, y, 'circle', color, `open-source-${name}`);
           })}
 
-          {/* Commercial routers */}
-          {Object.entries(commercialPoints).map(([name, point], index) => {
+          {/* Closed-source routers */}
+          {Object.entries(closedSourcePoints).map(([name, point], index) => {
             const x = scaleX(point.cost_per_1k);
             const y = scaleY(point.accuracy);
             const color =
-              routerColors[(index + Object.keys(academicPoints).length) % routerColors.length];
+              routerColors[(index + Object.keys(openSourcePoints).length) % routerColors.length];
 
-            return renderShape(x, y, 'triangle', color, `commercial-${name}`);
+            return renderShape(x, y, 'triangle', color, `closed-source-${name}`);
           })}
 
           {/* Oracle accuracy line */}
@@ -342,9 +342,9 @@ const DeferralCurve: React.FC<DeferralCurveProps> = ({ academicPoints, commercia
         {/* Legend */}
         <div className="deferral-legend-side">
           <div className="legend-section">
-            <h4>Academic</h4>
+            <h4>Open-Source</h4>
             <div className="legend-items">
-              {Object.entries(academicPoints).map(([name, point], index) => {
+              {Object.entries(openSourcePoints).map(([name, point], index) => {
                 const color = routerColors[index % routerColors.length];
                 return (
                   <div key={name} className="legend-item">
@@ -359,11 +359,11 @@ const DeferralCurve: React.FC<DeferralCurveProps> = ({ academicPoints, commercia
           </div>
 
           <div className="legend-section">
-            <h4>Commercial</h4>
+            <h4>Closed-Source</h4>
             <div className="legend-items">
-              {Object.entries(commercialPoints).map(([name, point], index) => {
+              {Object.entries(closedSourcePoints).map(([name, point], index) => {
                 const color =
-                  routerColors[(index + Object.keys(academicPoints).length) % routerColors.length];
+                  routerColors[(index + Object.keys(openSourcePoints).length) % routerColors.length];
                 return (
                   <div key={name} className="legend-item">
                     <svg className="legend-shape" width="16" height="16">

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

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Menu, X, Trophy, Home, Send, Users, Github } from 'lucide-react';
+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);
@@ -17,15 +18,16 @@ const Header: React.FC = () => {
       icon: Github,
       isExternal: true,
     },
+    // add a paper link
+    { name: 'Paper', href: contactInfo.paper, icon: FileText, isExternal: true },
     { name: 'Contact', href: '#contact', icon: Users, isScroll: true },
   ];
 
   return (
     <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) => {