React near feature parity (#1893)

src/helm-frontend/src/components/AccessBadge/index.tsx

@@ -0,0 +1 @@
+export { default } from "./AccessBadge";

src/helm-frontend/src/components/Footer.tsx

@@ -0,0 +1,10 @@
+import getBenchmarkSuite from "@/utils/getBenchmarkSuite";
+
+export default function Footer() {
+  const version = getBenchmarkSuite();
+  return (
+    <div className="bottom-0 right-0 p-4 bg-white-800 text-black text-right">
+      <p>Version {version}</p>
+    </div>
+  );
+}

src/helm-frontend/src/components/Indicator/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Indicator";

src/helm-frontend/src/components/MarkdownValue/index.tsx

@@ -0,0 +1 @@
+export { default } from "./MarkdownValue";

src/helm-frontend/src/components/Nav.test.tsx → src/helm-frontend/src/components/NavBar/NavBar.test.tsx

@@ -1,12 +1,12 @@
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { MemoryRouter } from "react-router-dom";
-import Nav from "./Nav";
+import NavBar from "./NavBar";
 
-test("displays nav", () => {
+test("displays nav bar", () => {
   render(
     <MemoryRouter>
-      <Nav />
+      <NavBar />
     </MemoryRouter>,
   );
 

src/helm-frontend/src/components/Nav.tsx → src/helm-frontend/src/components/NavBar/NavBar.tsx

@@ -3,7 +3,7 @@ import { Bars3Icon } from "@heroicons/react/24/outline";
 import crfmLogo from "@/assets/crfm-logo.png";
 import helmLogo from "@/assets/helm-logo-simple.png";
 
-export default function Nav() {
+export default function NavBar() {
   return (
     <nav className="navbar h-24 px-8 md:px-12 bg-base-100 max-w[1500]px">
       <div>

src/helm-frontend/src/components/NavBar/index.tsx

@@ -0,0 +1 @@
+export { default } from "./NavBar";

src/helm-frontend/src/components/PageTitle.tsx → src/helm-frontend/src/components/PageTitle/PageTitle.tsx

@@ -1,4 +1,4 @@
-import MarkdownValue from "./MarkdownValue";
+import MarkdownValue from "../MarkdownValue/MarkdownValue";
 
 interface Props {
   title: string;

src/helm-frontend/src/components/PageTitle/index.tsx

@@ -0,0 +1 @@
+export { default } from "./PageTitle";

src/helm-frontend/src/components/Request.tsx → src/helm-frontend/src/components/Request/Request.tsx

@@ -1,6 +1,6 @@
 import { List, ListItem } from "@tremor/react";
 import type DisplayRequest from "@/types/DisplayRequest";
-import Preview from "./Preview";
+import Preview from "../Preview";
 
 type Props = {
   request: DisplayRequest;

src/helm-frontend/src/components/Request/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Request";

src/helm-frontend/src/components/Tabs.test.tsx → src/helm-frontend/src/components/Tabs/Tabs.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import Tabs from "./Tabs";
-import Tab from "./Tab";
+import Tab from "../Tab";
 
 test("display tabs", () => {
   render(

src/helm-frontend/src/components/Tabs/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Tabs";

src/helm-frontend/src/layouts/Main.tsx

@@ -1,5 +1,6 @@
 import { Outlet } from "react-router-dom";
-import Nav from "@/components/Nav";
+import Nav from "@/components/NavBar/NavBar";
+import Footer from "@/components/Footer";
 
 export default function Main() {
   return (
@@ -10,6 +11,7 @@ export default function Main() {
           <Outlet />
         </div>
       </main>
+      <Footer />
     </>
   );
 }

src/helm-frontend/src/routes/Group.tsx

@@ -3,7 +3,7 @@ import { useParams } from "react-router";
 import PageTitle from "@/components/PageTitle";
 import Tab from "@/components/Tab";
 import Tabs from "@/components/Tabs";
-import GroupsCharts from "@/components/GroupsCharts";
+//import GroupsCharts from "@/components/GroupsCharts";
 import GroupsTables from "@/components/GroupsTables";
 import type GroupsTable from "@/types/GroupsTable";
 import type GroupMetadata from "@/types/GroupMetadata";
@@ -18,7 +18,7 @@ export default function Group() {
     GroupMetadata | undefined
   >();
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [showChart, setShowChart] = useState<boolean>(false);
+  //const [showChart, setShowChart] = useState<boolean>(false);
   const [activeGroup, setActiveGroup] = useState<number>(0);
 
   useEffect(() => {
@@ -69,12 +69,14 @@ export default function Group() {
           markdown={true}
           className="mr-8 mb-16"
         />
+        {/* 
         <button
           className="btn btn-xs btn-ghost self-end"
           onClick={() => setShowChart(!showChart)}
         >
           {showChart ? "Show Table" : "Show Chart"}
         </button>
+        */}
       </div>
       <div className="overflow-x-auto">
         {groupsTables.length > 1 ? (
@@ -92,15 +94,15 @@ export default function Group() {
         ) : null}
       </div>
 
-      {showChart ? (
+      {/*showChart ? (
         <GroupsCharts groupsTables={groupsTables} activeGroup={activeGroup} />
-      ) : (
-        <GroupsTables
-          groupsTables={groupsTables}
-          activeGroup={activeGroup}
-          ignoreHref={true}
-        />
-      )}
+      ) : ( */}
+      <GroupsTables
+        groupsTables={groupsTables}
+        activeGroup={activeGroup}
+        ignoreHref={true}
+      />
+      {/* )*/}
     </>
   );
 }

src/helm-frontend/src/routes/Home.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import getSchema from "@/services/getSchema";
 import type Schema from "@/types/Schema";
 import ModelsList from "@/components/ModelsList";
@@ -59,11 +60,25 @@ export default function Home() {
 
   return (
     <>
-      <img src={helmLogo} alt="HELM Logo" className="mx-auto" />
+      <img
+        src={helmLogo}
+        alt="HELM Logo"
+        width="309"
+        height="122"
+        className="mx-auto w-309 h-122"
+      />
       <div className="flex flex-col sm:flex-row justify-center mt-16 mb-32 flex gap-2 sm:gap-8 md:gap-32">
-        <button className="px-10 btn btn-primary">Blog post</button>
-        <button className="px-10 btn btn-primary">Paper</button>
-        <button className="px-10 btn btn-primary">GitHub</button>
+        <button className="px-10 btn btn-primary rounded-md">
+          <Link to="https://crfm.stanford.edu/2022/11/17/helm.html">
+            Blog post
+          </Link>
+        </button>
+        <button className="px-10 btn btn-primary rounded-md">
+          <Link to="https://arxiv.org/pdf/2211.09110.pdf">Paper</Link>
+        </button>
+        <button className="px-10 btn btn-primary rounded-md">
+          <Link to="https://github.com/stanford-crfm/helm">Github</Link>
+        </button>
       </div>
       <div className="container mx-auto text-lg">
         <p>

src/helm-frontend/src/routes/Models.tsx

@@ -75,36 +75,7 @@ export default function Models() {
         title="Models"
         subtitle="HELM evaluates models ranging from hundreds of millions to hundreds of billions of parameters. The models are trained on a varietry of data sources, such as general language understanding, instruction following, multi-task learning, code completion, chatbot functionalities, and various other applications."
       />
-      <div className="grid md:grid-cols-3 grid-cols-1 gap-8">
-        <Card className="flex flex-col justify-between">
-          <Text>Models</Text>
-          <Metric className="text-6xl md:!text-[96px]">{models.length}</Metric>
-          <CategoryBar
-            values={[open, limited, closed]}
-            colors={["green", "yellow", "red"]}
-          />
-          <Legend
-            categories={["Open", "Limited", "Closed"]}
-            colors={["green", "yellow", "red"]}
-          />
-        </Card>
-        <Card className="md:col-span-2">
-          <Text>Creator Organizations</Text>
-          <div className="flex justify-between mt-4">
-            <DonutChart
-              data={creators}
-              category="models"
-              index="name"
-              variant="pie"
-              className="basis-5/12"
-            />
-            <Legend
-              categories={creators.map((creator) => creator.name)}
-              className="basis-7/12"
-            />
-          </div>
-        </Card>
-      </div>
+
       <div className="overflow-x-auto mt-12">
         <table className="table">
           <thead>
@@ -134,6 +105,43 @@ export default function Models() {
             ))}
           </tbody>
         </table>
+
+        <PageTitle
+          title="Analysis"
+          subtitle="Here is some high level analysis of the models that HELM supports"
+        />
+        <div className="grid md:grid-cols-3 grid-cols-1 gap-8">
+          <Card className="flex flex-col justify-between">
+            <Text>Models</Text>
+            <Metric className="text-6xl md:!text-[96px]">
+              {models.length}
+            </Metric>
+            <CategoryBar
+              values={[open, limited, closed]}
+              colors={["green", "yellow", "red"]}
+            />
+            <Legend
+              categories={["Open", "Limited", "Closed"]}
+              colors={["green", "yellow", "red"]}
+            />
+          </Card>
+          <Card className="md:col-span-2">
+            <Text>Creator Organizations</Text>
+            <div className="flex justify-between mt-4">
+              <DonutChart
+                data={creators}
+                category="models"
+                index="name"
+                variant="pie"
+                className="basis-5/12"
+              />
+              <Legend
+                categories={creators.map((creator) => creator.name)}
+                className="basis-7/12"
+              />
+            </div>
+          </Card>
+        </div>
       </div>
     </>
   );

src/helm-frontend/src/routes/Scenarios.tsx

@@ -59,24 +59,6 @@ export default function Scenarios() {
         title="Scenarios"
         subtitle="Scenarios offer a broad coverage of diverse language-related tasks, helping to identify gaps in the model's capabilities. They aid in the standardization of model evaluation by creating a consistent benchmark, thereby ensuring fair and controlled comparisons across various models."
       />
-      <div className="grid md:grid-cols-4 gap-8">
-        <Card className="flex flex-col">
-          <Text>Total Scenarios</Text>
-          <Metric className="mx-auto my-6 md:mt-16 !text-[72px] md:!text-[96px]">
-            {runGroups.length}
-          </Metric>
-        </Card>
-        <Card className="col-span-3">
-          <div className="grid md:grid-cols-2 gap-x-12">
-            <BarList
-              data={taskBuckets.slice(0, Math.floor(taskBuckets.length / 2))}
-            />
-            <BarList
-              data={taskBuckets.slice(Math.ceil(taskBuckets.length / 2))}
-            />
-          </div>
-        </Card>
-      </div>
       <div className="overflow-x-auto mt-12">
         <table className="table">
           <thead>
@@ -111,6 +93,28 @@ export default function Scenarios() {
             ))}
           </tbody>
         </table>
+        <PageTitle
+          title="Analysis"
+          subtitle="Scenarios offer a broad coverage of diverse language-related tasks, helping to identify gaps in the model's capabilities. They aid in the standardization of model evaluation by creating a consistent benchmark, thereby ensuring fair and controlled comparisons across various models."
+        />
+        <div className="grid md:grid-cols-4 gap-8">
+          <Card className="flex flex-col">
+            <Text>Total Scenarios</Text>
+            <Metric className="mx-auto my-6 md:mt-16 !text-[72px] md:!text-[96px]">
+              {runGroups.length}
+            </Metric>
+          </Card>
+          <Card className="col-span-3">
+            <div className="grid md:grid-cols-2 gap-x-12">
+              <BarList
+                data={taskBuckets.slice(0, Math.floor(taskBuckets.length / 2))}
+              />
+              <BarList
+                data={taskBuckets.slice(Math.ceil(taskBuckets.length / 2))}
+              />
+            </div>
+          </Card>
+        </div>
       </div>
     </>
   );

src/helm-frontend/yarn.lock

@@ -2180,6 +2180,11 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
+eslint-config-prettier@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz#eb25485946dd0c66cd216a46232dc05451518d1f"
+  integrity sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==
+
 eslint-plugin-react-hooks@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
@@ -4163,6 +4168,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
+  integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
+
 pretty-format@^27.0.2:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"