Update src/App.js

src/App.js

@@ -143,7 +143,7 @@ const BenchmarkChart = () => {
           </p>
 
           {/* Control Button */}
-          <div className="mt-4 flex justify-center">
+          <div className="flex justify-center">
             <button 
               onClick={handleManualAnimate}
               className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors"
@@ -155,6 +155,18 @@ const BenchmarkChart = () => {
 
         {/* Chart Container - Longer */}
         <div className="bg-white rounded-xl shadow-2xl p-4">
+          {/* Legend - At Top of Chart */}
+          <div className="mb-6 flex justify-center space-x-6 text-sm bg-gray-50 p-3 rounded-lg">
+            <div className="flex items-center space-x-2">
+              <div className="w-3 h-3 bg-gradient-to-r from-blue-500 to-blue-600 rounded"></div>
+              <span className="text-gray-700">Human Baseline</span>
+            </div>
+            <div className="flex items-center space-x-2">
+              <div className="w-3 h-3 bg-gradient-to-r from-green-500 to-green-600 rounded"></div>
+              <span className="text-gray-700">Transformation Extension</span>
+            </div>
+          </div>
+          
           <div className="h-[700px] overflow-y-auto pr-2">
             <div className="space-y-2">
               {benchmarkData.map((modelData, index) => {
@@ -164,20 +176,16 @@ const BenchmarkChart = () => {
                 const baselineWidth = (baselineValue / maxValue) * 100;
                 const totalWidth = (currentValue / maxValue) * 100;
                 const extensionWidth = totalWidth - baselineWidth;
-                const currentMethod = getCurrentMethod(modelData, currentPhase);
                 const gain = currentValue - baselineValue;
                 
                 return (
                   <div key={modelData.model} className="relative">
-                    {/* Model Name and Value - Fixed Height Layout */}
+                    {/* Model Name and Value - Cleaner Layout */}
                     <div className="flex items-center justify-between mb-1">
                       <div>
                         <h3 className="font-semibold text-gray-800 text-sm">
                           {modelData.model}
                         </h3>
-                        <p className="text-xs text-gray-600">
-                          {currentMethod}
-                        </p>
                       </div>
                       <div className="text-right flex items-center space-x-2">
                         {gain > 0 && (
@@ -207,31 +215,12 @@ const BenchmarkChart = () => {
                           width: currentPhase === 'additive_synthesis' && currentMethodIndex > 0 ? `${extensionWidth}%` : '0%'
                         }}
                       />
-                      
-                      {/* Percentage Label */}
-                      <div className="absolute right-2 top-0 h-full flex items-center">
-                        <div className="text-white font-semibold text-xs">
-                          {currentValue > 8 ? `${currentValue.toFixed(1)}%` : ''}
-                        </div>
-                      </div>
                     </div>
                   </div>
                 );
               })}
             </div>
           </div>
-          
-          {/* Legend */}
-          <div className="mt-4 pt-4 border-t border-gray-200 flex justify-center space-x-6 text-sm">
-            <div className="flex items-center space-x-2">
-              <div className="w-3 h-3 bg-gradient-to-r from-blue-500 to-blue-600 rounded"></div>
-              <span className="text-gray-700">Human Baseline</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              <div className="w-3 h-3 bg-gradient-to-r from-green-500 to-green-600 rounded"></div>
-              <span className="text-gray-700">Transformation Extension</span>
-            </div>
-          </div>
         </div>
         
         {/* Methodology Note - Moved Below Chart */}