Skip to content

Commit 0fa153c

Browse files
clee2000clee2000
authored
[benchmarks] navbar dropdown to be slightly more generic (#7490)
Changes the navbar dropdown to be a bit more generic. It moves the sorting out of the component and into the function that returns the benchmark navbar metadata based on the available categories It also simplifies the item/group/bottom logic so you can input your exact dropdown organization This means we can use this dropdown for other parts of the hud navbar without worrying about the order changing due to sorting I checked that the look of the menu is the same. The links also seem to go to the same place
1 parent a64c479 commit 0fa153c

File tree

3 files changed

+108
-121
lines changed

3 files changed

+108
-121
lines changed

‎torchci/components/benchmark_v3/pages/BenchmarkListPage.tsx‎

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { Box, Typography } from "@mui/material";
2-
import { NavCategory, NavItem } from "components/layout/NavBarGroupDropdown";
2+
import {
3+
NavCategory,
4+
NavDivider,
5+
NavItem,
6+
} from "components/layout/NavBarGroupDropdown";
37
import { BenchmarkCategoryGroup } from "../components/benchmarkList/BenchmarkCategoryCard";
48
import BenchmarkCategoryCardList from "../components/benchmarkList/BenchmarkCategoryCardList";
59
import { BENCHMARK_CATEGORIES } from "../configs/configurations";
@@ -18,30 +22,48 @@ export function getBenchmarkMainRouteById(id: string): string | undefined {
1822

1923
export function benchmarkCategoryCardToNavGroup(
2024
categories: BenchmarkCategoryGroup[]
21-
): NavCategory[] {
22-
const items: NavCategory[] = categories
23-
.map((c: BenchmarkCategoryGroup) => ({
24-
label: c.title,
25-
items: c.items
26-
.map((i: any) => ({ label: i.name, route: i.route }))
27-
.sort((a: NavItem, b: NavItem) => a.label.localeCompare(b.label)),
28-
}))
29-
.sort((a: NavCategory, b: NavCategory) => a.label.localeCompare(b.label));
30-
// Add a "All Benchmarks" item to the top of the list
31-
items.push({
32-
label: "View All Benchmarks",
33-
type: "bottom",
34-
items: [
35-
{
36-
label: "View All Benchmarks",
37-
route: "/benchmark/benchmark_list",
38-
},
39-
],
40-
});
41-
return items;
25+
): (NavCategory | NavItem | NavDivider)[] {
26+
const items: (NavCategory | NavItem)[] = categories
27+
.map((c: BenchmarkCategoryGroup) => {
28+
if (c.items.length === 1) {
29+
const item: NavItem = {
30+
label: c.items[0].name,
31+
route: c.items[0].route,
32+
type: "item",
33+
};
34+
return item;
35+
}
36+
const group: NavCategory = {
37+
label: c.title,
38+
items: c.items
39+
.sort((a, b) => a.name.localeCompare(b.name))
40+
.map((i) => ({ label: i.name, route: i.route, type: "item" })),
41+
type: "group",
42+
};
43+
return group;
44+
})
45+
.sort((a, b) =>
46+
// group comes after item, then sort by label
47+
a.type != b.type
48+
? a.type === "item"
49+
? -1
50+
: 1
51+
: a.label.localeCompare(b.label)
52+
);
53+
console.log("benchmark nav items:", items);
54+
55+
return [
56+
...items,
57+
{ type: "divider" },
58+
{
59+
label: "View All Benchmarks",
60+
type: "item",
61+
route: "/benchmark/benchmark_list",
62+
},
63+
];
4264
}
4365

44-
export const benchmarkNavGroup: NavCategory[] =
66+
export const benchmarkNavGroup: (NavCategory | NavItem | NavDivider)[] =
4567
benchmarkCategoryCardToNavGroup(BENCHMARK_CATEGORIES);
4668

4769
export function BenchmarkListPage() {

‎torchci/components/layout/NavBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ function NavBar() {
239239
KPIs
240240
</Link>
241241
</li>
242-
<NavBarGroupDropdown title="Benchmarks" groups={benchmarkDropdown} />
242+
<NavBarGroupDropdown title="Benchmarks" items={benchmarkDropdown} />{" "}
243243
<NavBarDropdown title="Metrics" items={metricsDropdown} />
244244
<NavBarDropdown title="Dev Infra" items={devInfraDropdown} />
245245
<li

‎torchci/components/layout/NavBarGroupDropdown.tsx‎

Lines changed: 62 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -10,33 +10,9 @@ import {
1010
import { Box } from "@mui/system";
1111
import { Fragment, useEffect, useMemo, useRef, useState } from "react";
1212

13-
export type NavItem = { label: string; route: string };
14-
export type NavCategory = { label: string; items: NavItem[]; type?: string };
15-
16-
function sortForMenu(groups: NavCategory[]) {
17-
const singles: NavItem[] = [];
18-
const multis: NavCategory[] = [];
19-
let bottom: NavItem | undefined = undefined;
20-
21-
for (const g of groups) {
22-
if (g.type === "bottom") {
23-
if (g.items.length !== 1) {
24-
continue;
25-
}
26-
bottom = g?.items[0];
27-
} else if (g.items.length === 1) {
28-
singles.push(g.items[0]);
29-
} else if (g.items.length > 1) {
30-
multis.push({
31-
label: g.label,
32-
items: [...g.items].sort((a, b) => a.label.localeCompare(b.label)),
33-
});
34-
}
35-
}
36-
singles.sort((a, b) => a.label.localeCompare(b.label));
37-
multis.sort((a, b) => a.label.localeCompare(b.label));
38-
return { singles, multis, bottom };
39-
}
13+
export type NavItem = { label: string; route: string; type: "item" };
14+
export type NavCategory = { label: string; items: NavItem[]; type: "group" };
15+
export type NavDivider = { type: "divider" };
4016

4117
/**
4218
* NavBarGroupDropdown
@@ -46,18 +22,14 @@ function sortForMenu(groups: NavCategory[]) {
4622
*/
4723
export function NavBarGroupDropdown({
4824
title,
49-
groups,
25+
items,
5026
}: {
5127
title: string;
52-
groups: NavCategory[];
28+
items: (NavCategory | NavItem | NavDivider)[];
5329
}) {
5430
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
5531
const open = Boolean(anchorEl);
5632
const boxRef = useRef<HTMLDivElement>(null);
57-
const { singles, multis, bottom } = useMemo(
58-
() => sortForMenu(groups),
59-
[groups]
60-
);
6133

6234
// Check if device is touch-enabled
6335
const isTouchDevice = useMemo(
@@ -127,74 +99,67 @@ export function NavBarGroupDropdown({
12799
<Paper>
128100
<MenuList>
129101
{/* Singles first (no headers), sorted by item label */}
130-
{singles.map((item) => (
131-
<MenuItem
132-
key={`single-${item.label}`}
133-
component="a"
134-
href={item.route}
135-
sx={{
136-
color: "primary.main",
137-
}}
138-
>
139-
{item.label}
140-
</MenuItem>
141-
))}
102+
{items.map((item) => {
103+
if (item.type === "item")
104+
return (
105+
<MenuItem
106+
key={`single-${item.label}`}
107+
component="a"
108+
href={item.route}
109+
sx={{
110+
color: "primary.main",
111+
}}
112+
>
113+
{item.label}
114+
</MenuItem>
115+
);
142116

143-
{/* Multi-item groups next, sorted by group label; each group header + its sorted items */}
144-
{multis.map((group) => (
145-
<Fragment key={`multi-${group.label}`}>
146-
<ListSubheader
147-
disableSticky
148-
sx={{
149-
bgcolor: "transparent",
150-
fontSize: 13,
151-
fontWeight: 800,
152-
textTransform: "uppercase",
153-
letterSpacing: 0.5,
154-
lineHeight: 2,
155-
}}
156-
>
157-
{group.label}
158-
</ListSubheader>
159-
<Box
160-
sx={{
161-
borderLeft: "2px solid",
162-
borderColor: "divider",
163-
ml: 2,
164-
pl: 1.5,
165-
}}
166-
>
167-
{group.items.map((item) => (
168-
<MenuItem
169-
key={`${group.label}-${item.label}`}
170-
component="a"
171-
href={item.route}
117+
if (item.type === "group") {
118+
const group = item;
119+
return (
120+
<Fragment key={`multi-${group.label}`}>
121+
<ListSubheader
122+
disableSticky
123+
sx={{
124+
bgcolor: "transparent",
125+
fontSize: 13,
126+
fontWeight: 800,
127+
textTransform: "uppercase",
128+
letterSpacing: 0.5,
129+
lineHeight: 2,
130+
}}
131+
>
132+
{group.label}
133+
</ListSubheader>
134+
<Box
172135
sx={{
173-
color: "primary.main",
174-
pl: 1,
136+
borderLeft: "2px solid",
137+
borderColor: "divider",
138+
ml: 2,
139+
pl: 1.5,
175140
}}
176141
>
177-
{item.label}
178-
</MenuItem>
179-
))}
180-
</Box>
181-
</Fragment>
182-
))}
183-
{bottom != undefined && (
184-
<>
185-
<Divider sx={{ mt: 1 }} />
186-
<MenuItem
187-
key={`bottom-${bottom.label}`}
188-
component="a"
189-
href={bottom.route}
190-
sx={{
191-
color: "primary.main",
192-
}}
193-
>
194-
{bottom.label}
195-
</MenuItem>
196-
</>
197-
)}
142+
{group.items.map((item) => (
143+
<MenuItem
144+
key={`${group.label}-${item.label}`}
145+
component="a"
146+
href={item.route}
147+
sx={{
148+
color: "primary.main",
149+
pl: 1,
150+
}}
151+
>
152+
{item.label}
153+
</MenuItem>
154+
))}
155+
</Box>
156+
</Fragment>
157+
);
158+
}
159+
if (item.type === "divider") {
160+
return <Divider sx={{ mt: 1 }} />;
161+
}
162+
})}
198163
</MenuList>
199164
</Paper>
200165
</Popper>

0 commit comments

Comments
 (0)