Update frontend/src/App.js

frontend/src/App.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import _ from 'lodash';
+import { chain } from 'lodash';
 import './App.css';
 
 const ScoreBar = ({ score }) => {
+  if (score === undefined || score === null) return null;
+  
   const percentage = score <= 1 ? score * 100 : score;
   const hue = Math.min(percentage * 1.2, 120); // Maps 0-100% to 0-120 (red to green)
   const backgroundColor = `hsl(${hue}, 80%, 50%)`;
@@ -10,18 +12,20 @@ const ScoreBar = ({ score }) => {
   return (
     <div className="score-bar">
       <div 
-        className="score-fill"
+        className="score-fill" 
         style={{ 
           width: `${percentage}%`,
-          backgroundColor
-        }}
+          backgroundColor 
+        }} 
       />
-      <span className="score-text">{percentage.toFixed(1)}%</span>
+      <span className="score-text">
+        {percentage.toFixed(1)}%
+      </span>
     </div>
   );
 };
 
-function App() {
+const App = () => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -45,7 +49,6 @@ function App() {
         setLoading(false);
       }
     };
-
     fetchData();
   }, []);
 
@@ -54,12 +57,15 @@ function App() {
     setSortConfig({ key, direction });
   };
 
-  const filteredAndSortedData = _.chain(data)
-    .filter(item => 
-      item.model_id.toLowerCase().includes(searchQuery.toLowerCase())
-    )
+  const filteredAndSortedData = chain(data)
+    .filter(item => item.model_id.toLowerCase().includes(searchQuery.toLowerCase()))
     .orderBy(
-      [item => sortConfig.key === 'model' ? item.model_id : (item.scores[sortConfig.key] || 0)],
+      [item => {
+        if (sortConfig.key === 'model') {
+          return item.model_id;
+        }
+        return item.scores[sortConfig.key] || 0;
+      }],
       [sortConfig.direction]
     )
     .value();
@@ -73,7 +79,7 @@ function App() {
         <h1 className="title">Smolagents Leaderboard</h1>
         <p className="subtitle">How do different LLMs compare for powering agents?</p>
       </div>
-      
+
       <div className="search-container">
         <input
           type="text"
@@ -94,11 +100,8 @@ function App() {
                 )}
               </th>
               {["Average", "GAIA", "MATH", "SimpleQA"].map(benchmark => (
-                <th 
-                  key={benchmark}
-                  onClick={() => handleSort(benchmark)}
-                >
-                  {benchmark} {sortConfig.key !== benchmark && '-'} {sortConfig.key === benchmark && (
+                <th key={benchmark} onClick={() => handleSort(benchmark)}>
+                  {benchmark} {sortConfig.key === benchmark && (
                     sortConfig.direction === 'desc' ? '↓' : '↑'
                   )}
                 </th>
@@ -109,10 +112,11 @@ function App() {
             {filteredAndSortedData.map((item, index) => (
               <tr key={index}>
                 <td className="model-name">{item.model_id}</td>
-                <td><ScoreBar score={item.scores.GAIA} /></td>
-                <td><ScoreBar score={item.scores.MATH} /></td>
-                <td><ScoreBar score={item.scores.SimpleQA} /></td>
-                <td><ScoreBar score={item.scores.Average} /></td>
+                {["Average", "GAIA", "MATH", "SimpleQA"].map(metric => (
+                  <td key={metric}>
+                    <ScoreBar score={item.scores[metric]} />
+                  </td>
+                ))}
               </tr>
             ))}
           </tbody>
@@ -120,6 +124,6 @@ function App() {
       </div>
     </div>
   );
-}
+};
 
 export default App;