RouteWorks · shenrunzhang · Nov 3, 2025 · Nov 3, 2025
diff --git a/.github/workflows/precommit.yml b/.github/workflows/precommit.yml
@@ -7,6 +7,6 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-python@v5
         with:
-          python-version: "3.x"
+          python-version: '3.x'
       - run: pip install pre-commit
       - run: pre-commit run --all-files
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -12,7 +12,7 @@ repos:
       - id: check-json
       - id: check-yaml
       - id: check-added-large-files
-        args: ["--maxkb=2048"]
+        args: ['--maxkb=2048']
       - id: check-merge-conflict
       - id: check-case-conflict
       - id: detect-private-key
@@ -32,5 +32,5 @@ repos:
     rev: v2.2.6
     hooks:
       - id: codespell
-        args: ["--ignore-words-list=teh,fo"]
+        args: ['--ignore-words-list=teh,fo']
         exclude: '^package-lock\.json$'
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}
diff --git a/README.md b/README.md
@@ -24,17 +24,20 @@ RouterArena is the first open platform enabling comprehensive evaluation and com
 ### Installation
 
 1. Clone the repository:
+
 ```bash
 git clone https://github.com/rice-university/routerarena.git
 cd routerarena
 ```
 
 2. Install dependencies:
+
 ```bash
 npm install
 ```
 
 3. Start the development server:
+
 ```bash
 npm start
 ```
@@ -104,6 +107,7 @@ src/
 ```
 
 ### Router Data Structure
+
 ```typescript
 interface Router {
   id: string;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "@types/react-katex": "^3.0.4",
     "gh-pages": "^6.3.0",
     "html-webpack-plugin": "^4.5.2",
+    "prettier": "3.6.2",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5"
   },
@@ -33,7 +34,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md,markdown,yml,yaml,html}\""
   },
   "eslintConfig": {
     "extends": [

diff --git a/public/index.html b/public/index.html
@@ -1,14 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <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"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -27,12 +24,14 @@
     <title>RouterArena</title>
   </head>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-CFZYZLHP5X"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-CFZYZLHP5X');
-</script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    gtag('config', 'G-CFZYZLHP5X');
+  </script>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -5,9 +5,9 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #f8fafc;
@@ -16,8 +16,7 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 .App {

diff --git a/src/components/DatasetCompositionChart.css b/src/components/DatasetCompositionChart.css
@@ -22,7 +22,6 @@
   margin-bottom: 1rem;
 }
 
-
 /* Pie Chart Container */
 .pie-chart-container {
   margin: 1rem 0;
@@ -94,7 +93,6 @@
   .pie-chart-container {
     margin: 1rem 0;
   }
-
 }
 
 @media (max-width: 480px) {
@@ -105,5 +103,4 @@
   .chart-title {
     font-size: 1.1rem;
   }
-
 }