Merge pull request #30 from andrewginns/hotfix-filters-incorrect-behaviour

fix: Filters were impacting vibility of elements they shouldn't have

Author: andrewginns

src/components/merbench/LeaderboardTable.astro

@@ -66,18 +66,26 @@ const costRange = maxCost - minCost;
                           ? 'progress-fill--medium'
                           : 'progress-fill--low'
                     }`}
-                    style={`width: ${entry.Success_Rate}%`}
+                    style={`width: ${entry.Success_Rate}%; background-color: ${entry.Success_Rate >= 30 ? 'var(--progress-high)' : entry.Success_Rate >= 15 ? 'var(--progress-medium)' : 'var(--progress-low)'};`}
                   />
-                  <span class="progress-text">{entry.Success_Rate.toFixed(1)}%</span>
+                  <span
+                    class="progress-text"
+                    style="color: var(--progress-text-color); text-shadow: var(--progress-text-shadow);"
+                  >
+                    {entry.Success_Rate.toFixed(1)}%
+                  </span>
                 </div>
               </td>
               <td class="cost">
                 <div class="progress-bar">
                   <div
                     class="progress-fill progress-fill--cost"
-                    style={`width: ${costRange > 0 ? ((entry.Avg_Cost || calculateCost(entry.Avg_Tokens)) / maxCost) * 100 : 0}%`}
+                    style={`width: ${costRange > 0 ? ((entry.Avg_Cost || calculateCost(entry.Avg_Tokens)) / maxCost) * 100 : 0}%; background-color: #9ca3af;`}
                   />
-                  <span class="progress-text">
+                  <span
+                    class="progress-text"
+                    style="color: var(--progress-text-color); text-shadow: var(--progress-text-shadow);"
+                  >
                     ${(entry.Avg_Cost || calculateCost(entry.Avg_Tokens)).toFixed(4)}
                   </span>
                 </div>

src/lib/merbench.ts

@@ -384,7 +384,7 @@ export const updateLeaderboard = (filteredData: FilteredData): void => {
       <td class="model-name">${entry.Model}</td>
       <td class="success-rate">
         <div class="progress-bar">
-          <div class="progress-fill ${successRateClass}" style="width: ${entry.Success_Rate}%;"></div>
+          <div class="progress-fill ${successRateClass}" style="width: ${entry.Success_Rate}%; background-color: ${entry.Success_Rate >= 30 ? 'var(--progress-high)' : entry.Success_Rate >= 15 ? 'var(--progress-medium)' : 'var(--progress-low)'};"></div>
           <span class="progress-text" style="color: var(--progress-text-color); text-shadow: var(--progress-text-shadow);">${entry.Success_Rate.toFixed(1)}%</span>
         </div>
       </td>

src/scripts/merbench-sorting.ts

@@ -111,7 +111,7 @@ const renderLeaderboard = (data: LeaderboardEntry[]): void => {
       <td class="model-name">${entry.Model}</td>
       <td class="success-rate">
         <div class="progress-bar">
-          <div class="progress-fill ${successRateClass}" style="width: ${entry.Success_Rate}%;"></div>
+          <div class="progress-fill ${successRateClass}" style="width: ${entry.Success_Rate}%; background-color: ${entry.Success_Rate >= 30 ? 'var(--progress-high)' : entry.Success_Rate >= 15 ? 'var(--progress-medium)' : 'var(--progress-low)'};"></div>
           <span class="progress-text" style="color: var(--progress-text-color); text-shadow: var(--progress-text-shadow);">${entry.Success_Rate.toFixed(1)}%</span>
         </div>
       </td>