From 06263b1785ac29fdaeaf9a91613340d2d5a178f3 Mon Sep 17 00:00:00 2001 From: Yifan Mai Date: Wed, 28 Feb 2024 07:39:37 -0800 Subject: [PATCH] Frontend dropdown menu improvements (#2410) --- .../src/components/NavBar/NavBar.test.tsx | 2 +- .../src/components/NavBar/NavBar.tsx | 5 +- helm-frontend/src/components/NavDropdown.tsx | 168 ++++++++---------- .../src/components/ReleaseDropdown.tsx | 129 +++++++------- helm-frontend/src/types/ReleaseSummary.ts | 5 +- 5 files changed, 146 insertions(+), 163 deletions(-) diff --git a/helm-frontend/src/components/NavBar/NavBar.test.tsx b/helm-frontend/src/components/NavBar/NavBar.test.tsx index 1c41a0c88f..09727eab33 100644 --- a/helm-frontend/src/components/NavBar/NavBar.test.tsx +++ b/helm-frontend/src/components/NavBar/NavBar.test.tsx @@ -11,6 +11,6 @@ test("displays nav bar", () => { ); expect(screen.getByRole("navigation")).toHaveTextContent( - "LeaderboardModelsScenariosPredictionsGitHub LeaderboardModelsScenariosPredictionsGitHub Release: undefined", + "LeaderboardModelsScenariosPredictionsGitHubLite Lite: Lightweight, broad evaluation of the capabilities of language models using in-context learningClassic: Thorough language model evaluations based on the scenarios from the original HELM paperHEIM: Holistic evaluation of text-to-image modelsInstruct: Evaluations of instruction following models with absolute ratingsLeaderboardModelsScenariosPredictionsGitHubRelease unknown () v1.1.0v1.0.0", ); }); diff --git a/helm-frontend/src/components/NavBar/NavBar.tsx b/helm-frontend/src/components/NavBar/NavBar.tsx index 1f1ff3abaf..0aa4c78911 100644 --- a/helm-frontend/src/components/NavBar/NavBar.tsx +++ b/helm-frontend/src/components/NavBar/NavBar.tsx @@ -1,7 +1,7 @@ import { Link } from "react-router-dom"; import { Bars3Icon } from "@heroicons/react/24/outline"; import crfmLogo from "@/assets/crfm-logo.png"; -//import helmLogo from "@/assets/helm-logo-simple.png"; +import helmLogo from "@/assets/helm-logo-simple.png"; import NavDropdown from "@/components/NavDropdown"; import ReleaseDropdown from "../ReleaseDropdown"; @@ -44,6 +44,9 @@ export default function NavBar() { + + +
diff --git a/helm-frontend/src/components/NavDropdown.tsx b/helm-frontend/src/components/NavDropdown.tsx index 361a99b73f..1f27877f8f 100644 --- a/helm-frontend/src/components/NavDropdown.tsx +++ b/helm-frontend/src/components/NavDropdown.tsx @@ -1,106 +1,78 @@ -import { useState } from "react"; -import { Link } from "react-router-dom"; +import { ChevronDownIcon } from "@heroicons/react/24/solid"; -function NavDropdown() { - const [dropdownOpen, setDropdownOpen] = useState(false); +function getCurrentSubsite(): string { + // TODO: Fetch this from a configuration file. + if (window.HELM_TYPE === "LITE") { + return "Lite"; + } else if (window.HELM_TYPE === "CLASSIC") { + return "Classic"; + } else if (window.HELM_TYPE === "HEIM") { + return "HEIM"; + } else if (window.HELM_TYPE === "INSTRUCT") { + return "Instruct"; + } + return "Lite"; +} +function NavDropdown() { return ( -
-
- -
- Image 1 - {/* Manually set whether Classic or Not via config, otherwise don't show this */} - {window.HELM_TYPE ? ( -
- {" "} - {window.HELM_TYPE}{" "} -
- ) : ( - <> - )} -
- - - {/* Chevron Button */} - +
+
+ {getCurrentSubsite()}{" "} +
- - {dropdownOpen && ( - - )} + Lite: Lightweight, broad + evaluation of the capabilities of language models using in-context + learning + + +
  • + + Classic: Thorough language model evaluations based + on the scenarios from the original HELM paper + +
    • +
  • + + HEIM: Holistic evaluation of text-to-image models + +
    • +
  • + + Instruct: Evaluations of instruction following + models with absolute ratings + +
    • +
    ); } diff --git a/helm-frontend/src/components/ReleaseDropdown.tsx b/helm-frontend/src/components/ReleaseDropdown.tsx index e2579dcb23..1fa28623ed 100644 --- a/helm-frontend/src/components/ReleaseDropdown.tsx +++ b/helm-frontend/src/components/ReleaseDropdown.tsx @@ -1,18 +1,43 @@ import { useEffect, useState } from "react"; -import getBenchmarkRelease from "@/utils/getBenchmarkRelease"; import getReleaseSummary from "@/services/getReleaseSummary"; import ReleaseSummary from "@/types/ReleaseSummary"; -import getBenchmarkSuite from "@/utils/getBenchmarkSuite"; +import { ChevronDownIcon } from "@heroicons/react/24/solid"; + +function getReleases(): string[] { + // TODO: Fetch this from a configuration file. + if (window.HELM_TYPE === "LITE") { + return ["v1.1.0", "v1.0.0"]; + } else if (window.HELM_TYPE === "CLASSIC") { + return ["v0.4.0", "v0.3.0", "v0.2.4", "v0.2.3", "v0.2.2"]; + } else if (window.HELM_TYPE === "HEIM") { + return ["v1.1.0", "v1.0.0"]; + } else if (window.HELM_TYPE === "INSTRUCT") { + return ["v1.0.0"]; + } + return ["v1.1.0", "v1.0.0"]; +} + +function getReleaseUrl(version: string): string { + // TODO: Fetch this from a configuration file. + if (window.HELM_TYPE === "LITE") { + return `https://crfm.stanford.edu/helm/lite/${version}/`; + } else if (window.HELM_TYPE === "CLASSIC") { + return `https://crfm.stanford.edu/helm/classic/${version}/`; + } else if (window.HELM_TYPE === "HEIM") { + return `https://crfm.stanford.edu/heim/${version}/`; + } else if (window.HELM_TYPE === "INSTRUCT") { + return `https://crfm.stanford.edu/helm/instruct/${version}/`; + } + return `https://crfm.stanford.edu/helm/lite/${version}/`; +} function ReleaseDropdown() { - const [dropdownOpen, setDropdownOpen] = useState(false); const [summary, setSummary] = useState({ - release: "", - suites: [], + release: undefined, + suites: undefined, + suite: undefined, date: "", }); - const release = getBenchmarkRelease(); - const suite = getBenchmarkSuite(); useEffect(() => { const controller = new AbortController(); async function fetchData() { @@ -24,63 +49,45 @@ function ReleaseDropdown() { return () => controller.abort(); }, []); - const accessibleReleases = ["v0.4.0", "v0.3.0", "v0.2.2"]; // this could also read from a config file in the future + const releases = getReleases(); + + const releaseInfo = `Release ${ + summary.release || summary.suite || "unknown" + } (${summary.date})`; + + if (releases.length <= 1) { + return
    {releaseInfo}
    ; + } return ( -
    -
    - {/* Chevron Button */} - +
    +
    + {releaseInfo}{" "} +
    - - {dropdownOpen && ( -
    -
    - {accessibleReleases.map((currRelease) => ( - - ))} -
    -
    - )} +
    ); } diff --git a/helm-frontend/src/types/ReleaseSummary.ts b/helm-frontend/src/types/ReleaseSummary.ts index 1a366d858f..9bfc62949d 100644 --- a/helm-frontend/src/types/ReleaseSummary.ts +++ b/helm-frontend/src/types/ReleaseSummary.ts @@ -1,5 +1,6 @@ export default interface ReleaseSummary { - release: string; - suites: string[]; + release: string | undefined; + suites: string[] | undefined; + suite: string | undefined; date: string; }