Update frontend/src/App.js

frontend/src/App.js

@@ -2,54 +2,31 @@ import React, { useState, useEffect } from 'react';
 import { chain } from 'lodash';
 import './App.css';
 
-const ScoreBar = ({ score, vanillaScore, showVanilla = true }) => {
+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%)`;
   
-  const vanillaPercentage = vanillaScore <= 1 ? vanillaScore * 100 : vanillaScore;
-  const vanillaHue = Math.min(vanillaPercentage * 1.2, 120);
-  const vanillaBackgroundColor = `hsl(${vanillaHue}, 80%, 50%)`;
-  
   return (
-    <div className="score-container">
-      <div className="score-bar">
-        <div 
-          className="score-fill" 
-          style={{ 
-            width: `${percentage}%`,
-            backgroundColor 
-          }} 
-        />
-        <span className="score-text">
-          {percentage.toFixed(1)}%
-        </span>
-      </div>
-      
-      {showVanilla && vanillaScore !== undefined && vanillaScore !== null && (
-        <div className="score-bar vanilla-bar">
-          <div 
-            className="score-fill" 
-            style={{ 
-              width: `${vanillaPercentage}%`,
-              backgroundColor: vanillaBackgroundColor
-            }} 
-          />
-          <span className="score-text vanilla-text">
-            {vanillaPercentage.toFixed(1)}% <small>vanilla</small>
-          </span>
-        </div>
-      )}
+    <div className="score-bar">
+      <div 
+        className="score-fill" 
+        style={{ 
+          width: `${percentage}%`,
+          backgroundColor 
+        }} 
+      />
+      <span className="score-text">
+        {percentage.toFixed(1)}%
+      </span>
     </div>
   );
 };
 
 const App = () => {
-  const [data, setData] = useState([]);
-  const [vanillaData, setVanillaData] = useState([]);
-  const [toolCallingData, setToolCallingData] = useState([]);
+  const [allData, setAllData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [sortConfig, setSortConfig] = useState({ key: 'Average', direction: 'desc' });
@@ -62,30 +39,13 @@ const App = () => {
       try {
         setLoading(true);
         
-        // Fetch code agent data (default)
-        const codeResponse = await fetch('https://smolagents-smolagents-llm-leaderboard.hf.space/api/results');
-        if (!codeResponse.ok) {
-          throw new Error(`HTTP error! status: ${codeResponse.status}`);
-        }
-        const codeData = await codeResponse.json();
-        setData(codeData);
-        
-        // Fetch vanilla data
-        const vanillaResponse = await fetch('https://smolagents-smolagents-llm-leaderboard.hf.space/api/results?agent_action_type=vanilla');
-        if (!vanillaResponse.ok) {
-          throw new Error(`HTTP error! status: ${vanillaResponse.status}`);
+        // Fetch all data from API
+        const response = await fetch('https://smolagents-smolagents-llm-leaderboard.hf.space/api/results');
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
         }
-        const vanillaJsonData = await vanillaResponse.json();
-        setVanillaData(vanillaJsonData);
-        
-        // Fetch tool-calling data
-        const toolCallingResponse = await fetch('https://smolagents-smolagents-llm-leaderboard.hf.space/api/results?agent_action_type=tool-calling');
-        if (!toolCallingResponse.ok) {
-          throw new Error(`HTTP error! status: ${toolCallingResponse.status}`);
-        }
-        const toolCallingJsonData = await toolCallingResponse.json();
-        setToolCallingData(toolCallingJsonData);
-        
+        const jsonData = await response.json();
+        setAllData(jsonData);
       } catch (err) {
         console.error('Error fetching data:', err);
         setError(err.message);
@@ -93,6 +53,7 @@ const App = () => {
         setLoading(false);
       }
     };
+    
     fetchData();
   }, []);
 
@@ -101,21 +62,21 @@ const App = () => {
     setSortConfig({ key, direction });
   };
 
-  // Get active dataset based on user selection
-  const getActiveData = () => {
-    if (showToolCalling) {
-      return toolCallingData;
-    }
-    return data; // Default to code agent data
+  // Filter data based on selected action type
+  const getFilteredData = () => {
+    const actionType = showToolCalling ? 'tool-calling' : 'code';
+    return allData.filter(item => item.source === actionType);
   };
 
-  // Find vanilla score for a model
+  // Get vanilla score for a model
   const getVanillaScore = (modelId, metric) => {
-    const vanillaModel = vanillaData.find(item => item.model_id === modelId);
-    return vanillaModel?.scores[metric];
+    const vanillaEntry = allData.find(item => 
+      item.model_id === modelId && item.source === 'vanilla'
+    );
+    return vanillaEntry?.scores[metric];
   };
 
-  const filteredAndSortedData = chain(getActiveData())
+  const filteredAndSortedData = chain(getFilteredData())
     .filter(item => item.model_id.toLowerCase().includes(searchQuery.toLowerCase()))
     .orderBy(
       [item => {
@@ -139,8 +100,8 @@ const App = () => {
         <p className="subtitle">Uses <a target="_blank" href="https://github.com/huggingface/smolagents">smolagents</a> with <a target="_blank" href="https://huggingface.co/datasets/smolagents/benchmark-v1">smolagents benchmark</a>.</p>
       </div>
       
-      <div className="filters-container">
-        <div className="search-container">
+      <div className="search-container">
+        <div className="search-with-options">
           <input
             type="text"
             className="search-input"
@@ -148,26 +109,26 @@ const App = () => {
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
           />
-        </div>
-        
-        <div className="options-container">
-          <label className="option-label">
-            <input
-              type="checkbox"
-              checked={showVanilla}
-              onChange={() => setShowVanilla(!showVanilla)}
-            />
-            Show Vanilla Scores
-          </label>
           
-          <label className="option-label">
-            <input
-              type="checkbox"
-              checked={showToolCalling}
-              onChange={() => setShowToolCalling(!showToolCalling)}
-            />
-            Show Tool-Calling Scores
-          </label>
+          <div className="options-container">
+            <label className="option-label">
+              <input
+                type="checkbox"
+                checked={showVanilla}
+                onChange={() => setShowVanilla(!showVanilla)}
+              />
+              Show Vanilla Scores
+            </label>
+            
+            <label className="option-label">
+              <input
+                type="checkbox"
+                checked={showToolCalling}
+                onChange={() => setShowToolCalling(!showToolCalling)}
+              />
+              Show Tool-Calling Scores
+            </label>
+          </div>
         </div>
       </div>
       
@@ -192,14 +153,20 @@ const App = () => {
           <tbody>
             {filteredAndSortedData.map((item, index) => (
               <tr key={index}>
-                <td className="model-name">{item.model_id}</td>
+                <td className="model-cell">
+                  <div className="model-name">{item.model_id}</div>
+                  {showVanilla && (
+                    <div className="vanilla-name">
+                      {`vanilla: ${getVanillaScore(item.model_id, 'Average')?.toFixed(1) || 'N/A'}%`}
+                    </div>
+                  )}
+                </td>
                 {["Average", "GAIA", "MATH", "SimpleQA"].map(metric => (
                   <td key={metric}>
-                    <ScoreBar 
-                      score={item.scores[metric]} 
-                      vanillaScore={getVanillaScore(item.model_id, metric)}
-                      showVanilla={showVanilla}
-                    />
+                    <ScoreBar score={item.scores[metric]} />
+                    {showVanilla && getVanillaScore(item.model_id, metric) !== undefined && (
+                      <ScoreBar score={getVanillaScore(item.model_id, metric)} />
+                    )}
                   </td>
                 ))}
               </tr>
@@ -209,7 +176,7 @@ const App = () => {
       </div>
       
       <div className="legend">
-        <p><strong>Agent types:</strong> {showToolCalling ? 'Tool-Calling' : 'Code'}{showVanilla ? ' (with Vanilla comparison)' : ''}</p>
+        <p><strong>Agent type:</strong> {showToolCalling ? 'Tool-Calling' : 'Code'}{showVanilla ? ' (with Vanilla comparison)' : ''}</p>
       </div>
     </div>
   );