Skip to content

Commit 37ee3de

Browse files
TheauWTheauW
committed
fix: review suggestions
1 parent 4c63a0f commit 37ee3de

19 files changed

Lines changed: 277 additions & 225 deletions

File tree

‎packages/diracx-web-components/src/components/JobMonitor/JobMonitor.tsx‎

Lines changed: 24 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,7 @@ import {
1414
amber,
1515
} from "@mui/material/colors";
1616

17-
import {
18-
lighten,
19-
darken,
20-
useTheme,
21-
Box,
22-
ToggleButtonGroup,
23-
ToggleButton,
24-
Tooltip,
25-
} from "@mui/material";
17+
import { lighten, darken, useTheme, Box } from "@mui/material";
2618

2719
import { TableChart, DonutSmall } from "@mui/icons-material";
2820

@@ -37,7 +29,12 @@ import {
3729

3830
import { useApplicationId } from "../../hooks/application";
3931
import { Filter } from "../../types/Filter";
40-
import { Job, SearchBody, CategoryType } from "../../types";
32+
import {
33+
Job,
34+
SearchBody,
35+
CategoryType,
36+
JobMonitorChartType,
37+
} from "../../types";
4138
import { JobDataTable } from "./JobDataTable";
4239
import { JobSearchBar } from "./JobSearchBar";
4340
import { JobSunburst } from "./JobSunburst";
@@ -109,7 +106,7 @@ export default function JobMonitor() {
109106
},
110107
);
111108

112-
const [chartType, setChartType] = useState("CHART_TYPE_TABLE");
109+
const [chartType, setChartType] = useState(JobMonitorChartType.TABLE);
113110

114111
// Save the state of the app in local storage
115112
useEffect(() => {
@@ -320,11 +317,24 @@ export default function JobMonitor() {
320317
searchBody={searchBody}
321318
handleApplyFilters={handleApplyFilters}
322319
columns={columns}
320+
plotTypeSelectorProps={{
321+
plotType: chartType,
322+
setPlotType: setChartType,
323+
buttonList: [
324+
{
325+
plotName: JobMonitorChartType.TABLE,
326+
icon: <TableChart fontSize="large" />,
327+
},
328+
{
329+
plotName: JobMonitorChartType.SUNBURST,
330+
icon: <DonutSmall fontSize="large" />,
331+
},
332+
],
333+
}}
323334
/>
324-
<PlotTypeSelector plotType={chartType} setPlotType={setChartType} />
325335
</Box>
326336

327-
{chartType === "CHART_TYPE_TABLE" && (
337+
{chartType === JobMonitorChartType.TABLE && (
328338
<JobDataTable
329339
searchBody={searchBody}
330340
setSearchBody={setSearchBody}
@@ -340,7 +350,7 @@ export default function JobMonitor() {
340350
statusColors={statusColors}
341351
/>
342352
)}
343-
{chartType === "CHART_TYPE_SUNBURST" && (
353+
{chartType === JobMonitorChartType.SUNBURST && (
344354
<JobSunburst
345355
searchBody={searchBody}
346356
statusColors={statusColors}
@@ -414,42 +424,3 @@ export function fromHumanReadableText(
414424
}
415425
return name;
416426
}
417-
418-
/**
419-
* Component to select the type of plot
420-
*
421-
* @param plotType The type of the plot
422-
* @param setPlotType The setter for the plot type
423-
* @returns A list of buttons to select the type of plot
424-
*/
425-
export function PlotTypeSelector({
426-
plotType,
427-
setPlotType,
428-
}: {
429-
plotType: string;
430-
setPlotType: React.Dispatch<React.SetStateAction<string>>;
431-
}) {
432-
return (
433-
<>
434-
<ToggleButtonGroup
435-
value={plotType}
436-
exclusive
437-
onChange={(_event: React.MouseEvent, val: string) => {
438-
if (val !== null) setPlotType(val);
439-
}}
440-
aria-label="text alignment"
441-
>
442-
<Tooltip title="Table view">
443-
<ToggleButton value="CHART_TYPE_TABLE" aria-label="left aligned">
444-
<TableChart fontSize="large" />
445-
</ToggleButton>
446-
</Tooltip>
447-
<Tooltip title="Sunburst view">
448-
<ToggleButton value="CHART_TYPE_SUNBURST" aria-label="centered">
449-
<DonutSmall fontSize="large" />
450-
</ToggleButton>
451-
</Tooltip>
452-
</ToggleButtonGroup>
453-
</>
454-
);
455-
}

‎packages/diracx-web-components/src/components/JobMonitor/JobSearchBar.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
Operators,
1818
SearchBarTokenNature,
1919
CategoryType,
20+
JobMonitorChartType,
2021
} from "../../types";
2122
import { getJobSummary } from "./jobDataService";
2223
import { fromHumanReadableText } from "./JobMonitor";
@@ -33,6 +34,15 @@ interface JobSearchBarProps {
3334
/** The columns to display in the job monitor */
3435
// eslint-disable-next-line @typescript-eslint/no-explicit-any
3536
columns: ColumnDef<Job, any>[];
37+
/** Props for the plot type selector */
38+
plotTypeSelectorProps?: {
39+
/** The type of the plot */
40+
plotType: JobMonitorChartType;
41+
/** Function to set the plot type */
42+
setPlotType: React.Dispatch<React.SetStateAction<JobMonitorChartType>>;
43+
/** List of buttons to select the type of plot */
44+
buttonList?: { plotName: JobMonitorChartType; icon: React.ReactNode }[];
45+
};
3646
}
3747

3848
export function JobSearchBar({
@@ -41,6 +51,7 @@ export function JobSearchBar({
4151
setFilters,
4252
handleApplyFilters,
4353
columns,
54+
plotTypeSelectorProps,
4455
}: JobSearchBarProps) {
4556
const { configuration } = useOIDCContext();
4657
const { accessToken } = useOidcAccessToken(configuration?.scope);
@@ -71,6 +82,7 @@ export function JobSearchBar({
7182
)
7283
}
7384
allowKeyWordSearch={false} // Disable keyword search for job monitor
85+
plotTypeSelectorProps={plotTypeSelectorProps}
7486
/>
7587
);
7688
}

‎packages/diracx-web-components/src/components/JobMonitor/JobSunburst.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useDiracxUrl } from "../../hooks/utils";
99
import type { JobSummary, SearchBody, Job, SunburstTree } from "../../types";
1010
import { Sunburst } from "../shared/Sunburst";
1111
import { useOIDCContext } from "../../hooks/oidcConfiguration";
12-
import { ChartDisplayLayout } from "../shared";
12+
import { ChartView } from "../shared";
1313
import { getJobSummary } from "./jobDataService";
1414

1515
import { fromHumanReadableText } from "./JobMonitor";
@@ -115,7 +115,7 @@ export function JobSunburst({
115115
);
116116

117117
return (
118-
<ChartDisplayLayout
118+
<ChartView
119119
chart={Chart}
120120
columnList={columnList}
121121
groupColumns={groupColumns}

packages/diracx-web-components/src/components/shared/ChartDisplayLayout.tsx renamed to packages/diracx-web-components/src/components/shared/ChartView/ChartView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ interface ChartDisplayLayoutProps {
3030
* @see ChartDisplayLayoutProps
3131
* @returns
3232
*/
33-
export function ChartDisplayLayout({
33+
export function ChartView({
3434
chart,
3535
columnList,
3636
groupColumns,

packages/diracx-web-components/src/components/shared/ColumnSelector.tsx renamed to packages/diracx-web-components/src/components/shared/ChartView/ColumnSelector.tsx

File renamed without changes.

‎packages/diracx-web-components/src/components/shared/ChartView/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ChartView } from "./ChartView";

‎packages/diracx-web-components/src/components/shared/SearchBar/PlotTypeSelector.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { ReactNode } from "react";
2+
3+
import { ToggleButton, ToggleButtonGroup, Tooltip } from "@mui/material";
4+
5+
interface PlotTypeSelectorProps<T extends string> {
6+
/** The type of the plot */
7+
plotType: T;
8+
/** Function to set the plot type */
9+
setPlotType: React.Dispatch<React.SetStateAction<T>>;
10+
/** List of name and JSX elements to display as buttons */
11+
buttonList?: { plotName: T; icon: ReactNode }[];
12+
}
13+
14+
/**
15+
* Component to select the type of plot.
16+
*
17+
* @param plotType The type of the plot.
18+
* @param setPlotType The setter for the plot type.
19+
* @param buttonList List of buttons to select the type of plot.
20+
* @returns A selector for the plot type.
21+
*/
22+
export function PlotTypeSelector<T extends string>({
23+
plotType,
24+
setPlotType,
25+
buttonList = [],
26+
}: PlotTypeSelectorProps<T>) {
27+
return (
28+
<ToggleButtonGroup
29+
value={plotType}
30+
exclusive
31+
onChange={(_event: React.MouseEvent, val: T) => {
32+
if (val !== null) setPlotType(val);
33+
}}
34+
aria-label="text alignment"
35+
>
36+
{buttonList.map((button) => (
37+
<Tooltip key={button.plotName} title={"Switch to this plot type"}>
38+
<ToggleButton value={button.plotName} aria-label={button.plotName}>
39+
{button.icon}
40+
</ToggleButton>
41+
</Tooltip>
42+
))}
43+
</ToggleButtonGroup>
44+
);
45+
}

0 commit comments

Comments
 (0)