Skip to content

Commit dba7ae1

Browse files
yangw-devyangw-dev
authored
[Queue Time Analysis] Search bar improvement (#6563)
Make search bar toggle hide and show add slider and sticky to let search bar always show in page --------- Signed-off-by: Yang Wang <[email protected]>
1 parent a76cc4d commit dba7ae1

13 files changed

+503
-166
lines changed

‎torchci/components/common/CheckBoxList.tsx

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,31 @@ import {
66
List,
77
ListItem,
88
TextField,
9+
Typography,
910
} from "@mui/material";
1011
import { useState } from "react";
1112

1213
const Button = (props: any) => <_Button variant="contained" {...props} />;
1314
const Stack = (props: any) => <_Stack spacing={2} {...props} />;
1415

16+
interface CheckBoxListSx {
17+
filter?: any;
18+
button?: any;
19+
list?: any;
20+
itemCheckbox?: any;
21+
itemLabel?: any;
22+
}
23+
1524
export default function CheckBoxList({
1625
items,
1726
onChange,
1827
onClick,
19-
listSx = {},
28+
sxConfig = {},
2029
}: {
2130
items: { [key: string]: boolean };
2231
onChange: (value: { [key: string]: boolean }) => void;
2332
onClick: (value: string) => void;
24-
listSx?: any;
33+
sxConfig?: CheckBoxListSx;
2534
}) {
2635
// Creates a filter search box, two buttons to select all and unselect all,
2736
// and a list of checkboxes. Good for manual legends for charts
@@ -44,6 +53,7 @@ export default function CheckBoxList({
4453
<Stack>
4554
<TextField
4655
label="Filter"
56+
sx={sxConfig?.filter}
4757
onChange={(e) => {
4858
setFilter(e.target.value);
4959
}}
@@ -53,23 +63,33 @@ export default function CheckBoxList({
5363
onClick={() => {
5464
toggleAllfilteredItems(true);
5565
}}
66+
sx={sxConfig?.button}
5667
>
5768
Select All
5869
</Button>
5970
<Button
6071
onClick={() => {
6172
toggleAllfilteredItems(false);
6273
}}
74+
sx={sxConfig?.button}
6375
>
6476
Unselect All
6577
</Button>
6678
</Stack>
67-
<List dense sx={listSx}>
79+
<List dense sx={sxConfig?.list}>
6880
{filteredItems.map((item) => (
6981
<ListItem key={item}>
7082
<FormControlLabel
71-
control={<Checkbox checked={items[item]} />}
72-
label={item}
83+
sx={{
84+
alignItems: "flex-start", // Align checkbox to top
85+
display: "flex",
86+
gap: "8px", // Control space between checkbox and label
87+
width: "100%", // Ensure label can wrap fully
88+
}}
89+
control={
90+
<Checkbox sx={sxConfig?.itemCheckbox} checked={items[item]} />
91+
}
92+
label={<Typography sx={sxConfig?.itemLabel}>{item}</Typography>}
7393
onChange={(e) => {
7494
onClick(item);
7595
onChange({

‎torchci/components/queueTimeAnalysis/QueueTimeAnalysisPage.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1+
import styled from "@emotion/styled";
12
import QueueTimeChartPage from "./components/QueueTimeChartPage";
23

4+
const QueueTimeAnalysisPageSection = styled("div")({
5+
fontFamily: "Roboto",
6+
});
7+
38
export const QueueTimeAnalysisPage = () => {
4-
return <QueueTimeChartPage />;
9+
return (
10+
<QueueTimeAnalysisPageSection>
11+
<QueueTimeChartPage />
12+
</QueueTimeAnalysisPageSection>
13+
);
514
};

‎torchci/components/queueTimeAnalysis/components/DebugToggle.tsx

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
1+
import styled from "@emotion/styled";
12
import { FormControlLabel, Paper, Switch, Typography } from "@mui/material";
23
import { Box } from "@mui/system";
34
import { useState } from "react";
5+
const DebugDetailBox = styled("pre")({
6+
fontSize: "0.85rem",
7+
overflow: "auto",
8+
maxHeight: "300px",
9+
whiteSpace: "pre-wrap",
10+
wordBreak: "break-word",
11+
});
412

5-
export default function DebugToggle(info: any) {
13+
export default function DebugToggle({ info, sx }: { info: any; sx?: any }) {
614
const [showDebug, setShowDebug] = useState(false);
715

816
return (
@@ -18,11 +26,16 @@ export default function DebugToggle(info: any) {
1826
label="Show Search Debug"
1927
/>
2028
{showDebug && (
21-
<Paper elevation={2} sx={{ mt: 2, p: 2 }}>
29+
<Paper
30+
elevation={2}
31+
sx={{
32+
...sx,
33+
}}
34+
>
2235
<Typography variant="subtitle1">Debug Details:</Typography>
23-
<pre style={{ fontSize: "0.85rem" }}>
24-
{JSON.stringify(info, null, 2)}
25-
</pre>
36+
<div>
37+
<DebugDetailBox>{JSON.stringify(info, null, 2)}</DebugDetailBox>
38+
</div>
2639
</Paper>
2740
)}
2841
</Box>

‎torchci/components/queueTimeAnalysis/components/QueueTimeChartPage.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { propsReducer } from "components/benchmark/llms/context/BenchmarkProps";
66
import LoadingPage from "components/LoadingPage";
77
import dayjs from "dayjs";
88
import QueueTimeCharts from "./charts/QueueTimeCharts";
9+
import DebugToggle from "./DebugToggle";
910
import QueueTimeSearchBar from "./searchBarItems/QueueTimeSearchBar";
1011

1112
const FlexNoWrap = styled("div")({
@@ -18,6 +19,8 @@ export default function QueueTimeChartPage() {
1819
const [routerReady, setRouterReady] = useState(false);
1920
const [props, dispatch] = useReducer(propsReducer, {});
2021

22+
const [searchBarOpen, setSearchBarOpen] = useState(true);
23+
2124
if (!routerReady && router.isReady) {
2225
setRouterReady(true);
2326
}
@@ -40,10 +43,18 @@ export default function QueueTimeChartPage() {
4043
<Grid2 container spacing={2}>
4144
<FlexNoWrap>
4245
<div>
43-
<QueueTimeCharts props={props} />
46+
<QueueTimeCharts
47+
props={props}
48+
width={searchBarOpen ? "80vw" : "100vw"}
49+
/>
50+
<DebugToggle info={props} sx={{ width: "30vw" }} />
4451
</div>
4552
<div>
46-
<QueueTimeSearchBar router={router} updateSearch={dispatch} />
53+
<QueueTimeSearchBar
54+
router={router}
55+
updateSearch={dispatch}
56+
setToggle={setSearchBarOpen}
57+
/>
4758
</div>
4859
</FlexNoWrap>
4960
</Grid2>

‎torchci/components/queueTimeAnalysis/components/charts/QueueTimeCharts.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ const FlexNoWrap = styled("div")({
1616
display: "flex",
1717
margin: "0",
1818
padding: "0",
19-
width: "70vw",
2019
});
2120

2221
const chartToggleList: ToggleIconPickerContent[] = [
@@ -44,16 +43,17 @@ const chartToggleList: ToggleIconPickerContent[] = [
4443

4544
export default function QueueTimeCharts({
4645
props,
46+
width = "100vw",
4747
}: {
4848
props: any;
49-
width?: number;
49+
width?: string;
5050
}) {
5151
const [chartType, setChartType] = useState<any>("heatmap");
5252
const { darkMode } = useDarkMode();
5353

5454
const { data, error, isLoading } = useQueryWithError(props);
5555
if (isLoading) {
56-
return <LoadingPage height={700} width={"70vw"} />;
56+
return <LoadingPage height={700} width={width} />;
5757
}
5858

5959
return (
@@ -72,20 +72,22 @@ export default function QueueTimeCharts({
7272
please select less items in search.
7373
</Alert>
7474
)}
75-
<FlexNoWrap>
75+
<FlexNoWrap sx={{ width: width }}>
7676
<QueueTimeEchartElement
7777
data={data}
7878
granularity={props.granularity}
7979
chartType={chartType}
8080
width={chartType === "heatmap" ? `70%` : `100%`}
81+
height={"60vh"}
8182
minWidth={chartType === "heatmap" ? `200px` : `300px`}
8283
/>
8384
{data && chartType === "heatmap" && (
8485
<QueueTimeEchartElement
8586
data={data}
8687
granularity={props.granularity}
8788
chartType={"histogram_bar_vertical"}
88-
width={`20%`}
89+
width={"20%"}
90+
height={"60vh"}
8991
minWidth="100px"
9092
/>
9193
)}

‎torchci/components/queueTimeAnalysis/components/charts/QueueTimeEchartElement.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,18 @@ export function QueueTimeEchartElement({
1818
chartType = "heatmap",
1919
chartGroup,
2020
width,
21+
height,
2122
minWidth = "200px",
23+
minHeight = "300px",
2224
}: {
2325
chartType: string;
2426
data?: any[];
2527
granularity: string;
2628
chartGroup?: string;
2729
width?: string;
30+
height?: string;
2831
minWidth?: string;
32+
minHeight?: string;
2933
}) {
3034
const chartRef = useRef(null); // Create a ref for the chart container
3135
const chartInstanceRef = useRef<echarts.EChartsType | null>(null);
@@ -96,13 +100,13 @@ export function QueueTimeEchartElement({
96100
);
97101
}, [rawData, chartType, granularity]);
98102

99-
const height = queue_axis_value.length * 10;
100103
return (
101104
<div
102105
ref={chartRef}
103106
style={{
104-
height: `${height}px`,
107+
height: height ?? queue_axis_value.length * 5 + "px",
105108
width: width ?? "100%",
109+
minHeight: minHeight,
106110
minWidth: minWidth,
107111
}}
108112
/>

‎torchci/components/queueTimeAnalysis/components/pickers/DateRangePicker.tsx

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
99
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
1010
import dayjs from "dayjs";
11+
import { InputLabelSx } from "./Shared";
1112

1213
/**
1314
* Allows the user to pick from common time ranges, or manually set their own.
@@ -20,6 +21,7 @@ export function DateRangePicker({
2021
dateRange,
2122
setDateRange,
2223
setGranularity,
24+
sx,
2325
}: {
2426
startDate: dayjs.Dayjs;
2527
setStartDate: any;
@@ -28,6 +30,7 @@ export function DateRangePicker({
2830
dateRange: any;
2931
setDateRange: any;
3032
setGranularity?: any;
33+
sx?: any;
3134
}) {
3235
function handleChange(e: SelectChangeEvent<number>) {
3336
setDateRange(e.target.value as number);
@@ -73,23 +76,49 @@ export function DateRangePicker({
7376
return (
7477
<>
7578
<FormControl>
76-
<InputLabel id="time-picker-select-label">Time Range</InputLabel>
79+
<InputLabel id="time-picker-select-label" sx={InputLabelSx}>
80+
Time Range
81+
</InputLabel>
7782
<Select
7883
value={dateRange}
7984
label="Time Range"
8085
labelId="time-picker-select-label"
8186
onChange={handleChange}
87+
sx={sx}
88+
MenuProps={{
89+
disableScrollLock: true,
90+
}}
8291
>
83-
<MenuItem value={1}>Last 1 Day</MenuItem>
84-
<MenuItem value={3}>Last 3 Days</MenuItem>
85-
<MenuItem value={7}>Last 7 Days</MenuItem>
86-
<MenuItem value={14}>Last 14 Days</MenuItem>
87-
<MenuItem value={30}>Last Month</MenuItem>
88-
<MenuItem value={60}>Last 2 Months</MenuItem>
89-
<MenuItem value={90}>Last 3 Months</MenuItem>
90-
<MenuItem value={180}>Last 6 Months</MenuItem>
91-
<MenuItem value={365}>Last Year</MenuItem>
92-
<MenuItem value={-1}>Custom</MenuItem>
92+
<MenuItem sx={sx} value={1}>
93+
Last 1 Day
94+
</MenuItem>
95+
<MenuItem sx={sx} value={3}>
96+
Last 3 Days
97+
</MenuItem>
98+
<MenuItem sx={sx} value={7}>
99+
Last 7 Days
100+
</MenuItem>
101+
<MenuItem sx={sx} value={14}>
102+
Last 14 Days
103+
</MenuItem>
104+
<MenuItem sx={sx} value={30}>
105+
Last Month
106+
</MenuItem>
107+
<MenuItem sx={sx} value={60}>
108+
Last 2 Months
109+
</MenuItem>
110+
<MenuItem sx={sx} value={90}>
111+
Last 3 Months
112+
</MenuItem>
113+
<MenuItem sx={sx} value={180}>
114+
Last 6 Months
115+
</MenuItem>
116+
<MenuItem sx={sx} value={365}>
117+
Last Year
118+
</MenuItem>
119+
<MenuItem sx={sx} value={-1}>
120+
Custom
121+
</MenuItem>
93122
</Select>
94123
</FormControl>
95124
{dateRange === -1 && (

0 commit comments

Comments
 (0)