Skip to content

Commit

Permalink
Frontend dropdown menu improvements (#2410)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yifanmai
yifanmai committed Feb 28, 2024
1 parent d862e8c commit 06263b1
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 163 deletions.
2 changes: 1 addition & 1 deletion helm-frontend/src/components/NavBar/NavBar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
);
});
5 changes: 4 additions & 1 deletion helm-frontend/src/components/NavBar/NavBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -44,6 +44,9 @@ export default function NavBar() {
<Link to="https://crfm.stanford.edu/" className="w-24">
<img src={crfmLogo} className="object-contain" />
</Link>
<Link to="/" className="mx-2 w-32">
<img src={helmLogo} className="object-contain" />
</Link>
<NavDropdown></NavDropdown>
</div>
<div className="flex-none hidden md:block">
Expand Down
168 changes: 70 additions & 98 deletions helm-frontend/src/components/NavDropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="relative inline-block text-left p-2">
<div className="inline-flex items-center p-2">
<Link to="/">
<div className="flex items-center">
<img
src="https://crfm.stanford.edu/helm/v0.3.0/images/helm-logo-simple.png"
alt="Image 1"
className="h-10 object-cover"
/>
{/* Manually set whether Classic or Not via config, otherwise don't show this */}
{window.HELM_TYPE ? (
<div className="hidden lg:flex pl-3">
{" "}
<strong>{window.HELM_TYPE}</strong>{" "}
</div>
) : (
<> </>
)}
</div>
</Link>

{/* Chevron Button */}
<button
onClick={() => setDropdownOpen(!dropdownOpen)}
className="inline-flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 ml-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div className="dropdown">
<div
tabIndex={0}
role="button"
className="btn normal-case bg-white font-bold p-2 border-0 text-lg"
aria-haspopup="true"
aria-controls="menu"
>
{getCurrentSubsite()}{" "}
<ChevronDownIcon fill="black" color="black" className="text w-4 h-4" />
</div>

{dropdownOpen && (
<div className="absolute mt-2 w-max translate-x-4 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
<div
className="py-1"
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu"
<ul
tabIndex={0}
className="-translate-x-36 dropdown-content z-[1] menu p-1 shadow-lg bg-base-100 rounded-box w-max text-base"
role="menu"
>
<li>
<a
href="https://crfm.stanford.edu/helm/lite/"
className="block"
role="menuitem"
>
<div
className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem"
>
<a href="https://crfm.stanford.edu/helm/classic/latest/">
<div className="flex items-center">
<span>
<strong>HELM Classic: </strong>Thorough language model
evaluations based on the scenarios from the original HELM
paper
</span>
</div>
</a>
</div>

<div
className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem"
>
<a href="https://crfm.stanford.edu/helm/lite/latest/">
<div className="flex items-center">
<span>
<strong>HELM Lite: </strong>Lightweight, broad evaluation of
the capabilities of language models using in-context
learning
</span>
</div>
</a>
</div>
<div
className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem"
>
<a href="https://crfm.stanford.edu/heim/latest/">
<div className="flex items-center">
<span>
<strong>HEIM: </strong>Holistic evaluation of text-to-image
models
</span>
</div>
</a>
</div>
</div>
</div>
)}
<strong className="inline">Lite:</strong> Lightweight, broad
evaluation of the capabilities of language models using in-context
learning
</a>
</li>
<li>
<a
href="https://crfm.stanford.edu/helm/classic/"
className="block"
role="menuitem"
>
<strong>Classic:</strong> Thorough language model evaluations based
on the scenarios from the original HELM paper
</a>
</li>
<li>
<a
href="https://crfm.stanford.edu/heim/"
className="block"
role="menuitem"
>
<strong>HEIM:</strong> Holistic evaluation of text-to-image models
</a>
</li>
<li>
<a
href="https://crfm.stanford.edu/helm/instruct/"
className="block"
role="menuitem"
>
<strong>Instruct:</strong> Evaluations of instruction following
models with absolute ratings
</a>
</li>
</ul>
</div>
);
}
Expand Down
129 changes: 68 additions & 61 deletions helm-frontend/src/components/ReleaseDropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<ReleaseSummary>({
release: "",
suites: [],
release: undefined,
suites: undefined,
suite: undefined,
date: "",
});
const release = getBenchmarkRelease();
const suite = getBenchmarkSuite();
useEffect(() => {
const controller = new AbortController();
async function fetchData() {
Expand All @@ -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 <div>{releaseInfo}</div>;
}

return (
<div>
<div className="inline-flex items-center">
{/* Chevron Button */}
<button
onClick={() => setDropdownOpen(!dropdownOpen)}
className="inline-flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
>
<div>
{" "}
Release:{" "}
{(release == "null" || release == null ? suite : release) +
" : " +
summary.date}{" "}
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 ml-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div className="dropdown">
<div
tabIndex={0}
role="button"
className="normal-case bg-white border-0"
aria-haspopup="true"
aria-controls="menu"
>
{releaseInfo}{" "}
<ChevronDownIcon
fill="black"
color="black"
className="inline text w-4 h-4"
/>
</div>

{dropdownOpen && (
<div className="absolute mt-2 w-max translate-x-4 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
<div
className="py-1"
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu"
>
{accessibleReleases.map((currRelease) => (
<div
className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem"
>
<a href={"https://crfm.stanford.edu/helm/" + currRelease}>
<div className="flex items-center">
<span>{currRelease}</span>
</div>
</a>
</div>
))}
</div>
</div>
)}
<ul
tabIndex={0}
className="dropdown-content z-[1] menu p-1 shadow-lg bg-base-100 rounded-box w-max text-base"
role="menu"
>
{releases.map((release) => (
<li>
<a href={getReleaseUrl(release)} className="block" role="menuitem">
{release}
</a>
</li>
))}
</ul>
</div>
);
}
Expand Down
5 changes: 3 additions & 2 deletions helm-frontend/src/types/ReleaseSummary.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export default interface ReleaseSummary {
release: string;
suites: string[];
release: string | undefined;
suites: string[] | undefined;
suite: string | undefined;
date: string;
}

0 comments on commit 06263b1

Please sign in to comment.