Update numModelsToAutoFilter in MiniLeaderboard to be customizable (#…

…2586)
stanford-crfm · Apr 23, 2024 · ffc775c · ffc775c
1 parent 6059b65
commit ffc775c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/helm-frontend/src/components/Hero.tsx b/helm-frontend/src/components/Hero.tsx
@@ -35,7 +35,7 @@ export default function Hero() {
             className="py-2 pb-6 rounded-3xl bg-gray-100 h-full" // Stretched to full height
             style={{ maxWidth: "100%" }}
           >
-            <MiniLeaderboard></MiniLeaderboard>
+            <MiniLeaderboard />
             <div className="flex justify-end">
               <Link to="leaderboard">
                 <button className="px-4 mx-3 mt-1 btn bg-white rounded-md">

diff --git a/helm-frontend/src/components/Landing/MMLULanding.tsx b/helm-frontend/src/components/Landing/MMLULanding.tsx
@@ -7,8 +7,8 @@ export default function MMLULanding() {
         Massive Multitask Language Understanding (MMLU) on HELM
       </h1>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-        <div>
+      <div className="flex flex-row md:flex-row items-center gap-8">
+        <div className="flex-1 text-xl">
           <p>
             <strong>Massive Multitask Language Understanding (MMLU)</strong>{" "}
             <a href="https://arxiv.org/pdf/2009.03300.pdf" className="link">
@@ -31,7 +31,9 @@ export default function MMLULanding() {
             </a>
           </div>
         </div>
-        <MiniLeaderboard />
+        <div className="flex-1">
+          <MiniLeaderboard numModelsToAutoFilter={10} />
+        </div>
       </div>
     </div>
   );

diff --git a/helm-frontend/src/components/MiniLeaderboard.tsx b/helm-frontend/src/components/MiniLeaderboard.tsx
@@ -13,7 +13,10 @@ interface GroupDisplayData {
   name: string;
 }
 
-export default function MiniLeaderboard() {
+interface Props {
+  numModelsToAutoFilter?: number;
+}
+export default function MiniLeaderboard({ numModelsToAutoFilter = 6 }: Props) {
   const [allGroupData, setAllGroupData] = useState<GroupDisplayData[]>([]);
   const [groupsTables, setGroupsTables] = useState<GroupsTable[]>([]);
   const [groupMetadata, setGroupMetadata] = useState<
@@ -78,7 +81,7 @@ export default function MiniLeaderboard() {
         <MiniLeaderboardTables
           groupsTables={groupsTables}
           activeGroup={activeGroup}
-          numModelsToAutoFilter={6}
+          numModelsToAutoFilter={numModelsToAutoFilter}
           filteredCols={[0, 1]}
         />
       </>