Skip to content

[benchmarks] navbar dropdown to be slightly more generic #7490

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 19, 2025
Merged

[benchmarks] navbar dropdown to be slightly more generic #7490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a47031
tc
clee2000 Nov 19, 2025
7bfe85e
tc
clee2000 Nov 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 45 additions & 23 deletions torchci/components/benchmark_v3/pages/BenchmarkListPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { Box, Typography } from "@mui/material";
import { NavCategory, NavItem } from "components/layout/NavBarGroupDropdown";
import {
NavCategory,
NavDivider,
NavItem,
} from "components/layout/NavBarGroupDropdown";
import { BenchmarkCategoryGroup } from "../components/benchmarkList/BenchmarkCategoryCard";
import BenchmarkCategoryCardList from "../components/benchmarkList/BenchmarkCategoryCardList";
import { BENCHMARK_CATEGORIES } from "../configs/configurations";
Expand All @@ -18,30 +22,48 @@ export function getBenchmarkMainRouteById(id: string): string | undefined {

export function benchmarkCategoryCardToNavGroup(
categories: BenchmarkCategoryGroup[]
): NavCategory[] {
const items: NavCategory[] = categories
.map((c: BenchmarkCategoryGroup) => ({
label: c.title,
items: c.items
.map((i: any) => ({ label: i.name, route: i.route }))
.sort((a: NavItem, b: NavItem) => a.label.localeCompare(b.label)),
}))
.sort((a: NavCategory, b: NavCategory) => a.label.localeCompare(b.label));
// Add a "All Benchmarks" item to the top of the list
items.push({
label: "View All Benchmarks",
type: "bottom",
items: [
{
label: "View All Benchmarks",
route: "/benchmark/benchmark_list",
},
],
});
return items;
): (NavCategory | NavItem | NavDivider)[] {
const items: (NavCategory | NavItem)[] = categories
.map((c: BenchmarkCategoryGroup) => {
if (c.items.length === 1) {
const item: NavItem = {
label: c.items[0].name,
route: c.items[0].route,
type: "item",
};
return item;
}
const group: NavCategory = {
label: c.title,
items: c.items
.sort((a, b) => a.name.localeCompare(b.name))
.map((i) => ({ label: i.name, route: i.route, type: "item" })),
type: "group",
};
return group;
})
.sort((a, b) =>
// group comes after item, then sort by label
a.type != b.type
? a.type === "item"
? -1
: 1
: a.label.localeCompare(b.label)
);
console.log("benchmark nav items:", items);

return [
...items,
{ type: "divider" },
{
label: "View All Benchmarks",
type: "item",
route: "/benchmark/benchmark_list",
},
];
}

export const benchmarkNavGroup: NavCategory[] =
export const benchmarkNavGroup: (NavCategory | NavItem | NavDivider)[] =
benchmarkCategoryCardToNavGroup(BENCHMARK_CATEGORIES);

export function BenchmarkListPage() {
Expand Down
2 changes: 1 addition & 1 deletion torchci/components/layout/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ function NavBar() {
KPIs
</Link>
</li>
<NavBarGroupDropdown title="Benchmarks" groups={benchmarkDropdown} />
<NavBarGroupDropdown title="Benchmarks" items={benchmarkDropdown} />{" "}
<NavBarDropdown title="Metrics" items={metricsDropdown} />
<NavBarDropdown title="Dev Infra" items={devInfraDropdown} />
<li
Expand Down
159 changes: 62 additions & 97 deletions torchci/components/layout/NavBarGroupDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,9 @@ import {
import { Box } from "@mui/system";
import { Fragment, useEffect, useMemo, useRef, useState } from "react";

export type NavItem = { label: string; route: string };
export type NavCategory = { label: string; items: NavItem[]; type?: string };

function sortForMenu(groups: NavCategory[]) {
const singles: NavItem[] = [];
const multis: NavCategory[] = [];
let bottom: NavItem | undefined = undefined;

for (const g of groups) {
if (g.type === "bottom") {
if (g.items.length !== 1) {
continue;
}
bottom = g?.items[0];
} else if (g.items.length === 1) {
singles.push(g.items[0]);
} else if (g.items.length > 1) {
multis.push({
label: g.label,
items: [...g.items].sort((a, b) => a.label.localeCompare(b.label)),
});
}
}
singles.sort((a, b) => a.label.localeCompare(b.label));
multis.sort((a, b) => a.label.localeCompare(b.label));
return { singles, multis, bottom };
}
export type NavItem = { label: string; route: string; type: "item" };
export type NavCategory = { label: string; items: NavItem[]; type: "group" };
export type NavDivider = { type: "divider" };

/**
* NavBarGroupDropdown
Expand All @@ -46,18 +22,14 @@ function sortForMenu(groups: NavCategory[]) {
*/
export function NavBarGroupDropdown({
title,
groups,
items,
}: {
title: string;
groups: NavCategory[];
items: (NavCategory | NavItem | NavDivider)[];
}) {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const boxRef = useRef<HTMLDivElement>(null);
const { singles, multis, bottom } = useMemo(
() => sortForMenu(groups),
[groups]
);

// Check if device is touch-enabled
const isTouchDevice = useMemo(
Expand Down Expand Up @@ -127,74 +99,67 @@ export function NavBarGroupDropdown({
<Paper>
<MenuList>
{/* Singles first (no headers), sorted by item label */}
{singles.map((item) => (
<MenuItem
key={`single-${item.label}`}
component="a"
href={item.route}
sx={{
color: "primary.main",
}}
>
{item.label}
</MenuItem>
))}
{items.map((item) => {
if (item.type === "item")
return (
<MenuItem
key={`single-${item.label}`}
component="a"
href={item.route}
sx={{
color: "primary.main",
}}
>
{item.label}
</MenuItem>
);

{/* Multi-item groups next, sorted by group label; each group header + its sorted items */}
{multis.map((group) => (
<Fragment key={`multi-${group.label}`}>
<ListSubheader
disableSticky
sx={{
bgcolor: "transparent",
fontSize: 13,
fontWeight: 800,
textTransform: "uppercase",
letterSpacing: 0.5,
lineHeight: 2,
}}
>
{group.label}
</ListSubheader>
<Box
sx={{
borderLeft: "2px solid",
borderColor: "divider",
ml: 2,
pl: 1.5,
}}
>
{group.items.map((item) => (
<MenuItem
key={`${group.label}-${item.label}`}
component="a"
href={item.route}
if (item.type === "group") {
const group = item;
return (
<Fragment key={`multi-${group.label}`}>
<ListSubheader
disableSticky
sx={{
bgcolor: "transparent",
fontSize: 13,
fontWeight: 800,
textTransform: "uppercase",
letterSpacing: 0.5,
lineHeight: 2,
}}
>
{group.label}
</ListSubheader>
<Box
sx={{
color: "primary.main",
pl: 1,
borderLeft: "2px solid",
borderColor: "divider",
ml: 2,
pl: 1.5,
}}
>
{item.label}
</MenuItem>
))}
</Box>
</Fragment>
))}
{bottom != undefined && (
<>
<Divider sx={{ mt: 1 }} />
<MenuItem
key={`bottom-${bottom.label}`}
component="a"
href={bottom.route}
sx={{
color: "primary.main",
}}
>
{bottom.label}
</MenuItem>
</>
)}
{group.items.map((item) => (
<MenuItem
key={`${group.label}-${item.label}`}
component="a"
href={item.route}
sx={{
color: "primary.main",
pl: 1,
}}
>
{item.label}
</MenuItem>
))}
</Box>
</Fragment>
);
}
if (item.type === "divider") {
return <Divider sx={{ mt: 1 }} />;
}
})}
</MenuList>
</Paper>
</Popper>
Expand Down