fix: review suggestions

Author: TheauW

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

@@ -14,15 +14,7 @@ import {
   amber,
 } from "@mui/material/colors";
 
-import {
-  lighten,
-  darken,
-  useTheme,
-  Box,
-  ToggleButtonGroup,
-  ToggleButton,
-  Tooltip,
-} from "@mui/material";
+import { lighten, darken, useTheme, Box } from "@mui/material";
 
 import { TableChart, DonutSmall } from "@mui/icons-material";
 
@@ -37,7 +29,12 @@ import {
 
 import { useApplicationId } from "../../hooks/application";
 import { Filter } from "../../types/Filter";
-import { Job, SearchBody, CategoryType } from "../../types";
+import {
+  Job,
+  SearchBody,
+  CategoryType,
+  JobMonitorChartType,
+} from "../../types";
 import { JobDataTable } from "./JobDataTable";
 import { JobSearchBar } from "./JobSearchBar";
 import { JobSunburst } from "./JobSunburst";
@@ -109,7 +106,7 @@ export default function JobMonitor() {
         },
   );
 
-  const [chartType, setChartType] = useState("CHART_TYPE_TABLE");
+  const [chartType, setChartType] = useState(JobMonitorChartType.TABLE);
 
   // Save the state of the app in local storage
   useEffect(() => {
@@ -320,11 +317,24 @@ export default function JobMonitor() {
           searchBody={searchBody}
           handleApplyFilters={handleApplyFilters}
           columns={columns}
+          plotTypeSelectorProps={{
+            plotType: chartType,
+            setPlotType: setChartType,
+            buttonList: [
+              {
+                plotName: JobMonitorChartType.TABLE,
+                icon: <TableChart fontSize="large" />,
+              },
+              {
+                plotName: JobMonitorChartType.SUNBURST,
+                icon: <DonutSmall fontSize="large" />,
+              },
+            ],
+          }}
         />
-        <PlotTypeSelector plotType={chartType} setPlotType={setChartType} />
       </Box>
 
-      {chartType === "CHART_TYPE_TABLE" && (
+      {chartType === JobMonitorChartType.TABLE && (
         <JobDataTable
           searchBody={searchBody}
           setSearchBody={setSearchBody}
@@ -340,7 +350,7 @@ export default function JobMonitor() {
           statusColors={statusColors}
         />
       )}
-      {chartType === "CHART_TYPE_SUNBURST" && (
+      {chartType === JobMonitorChartType.SUNBURST && (
         <JobSunburst
           searchBody={searchBody}
           statusColors={statusColors}
@@ -414,42 +424,3 @@ export function fromHumanReadableText(
   }
   return name;
 }
-
-/**
- * Component to select the type of plot
- *
- * @param plotType The type of the plot
- * @param setPlotType The setter for the plot type
- * @returns A list of buttons to select the type of plot
- */
-export function PlotTypeSelector({
-  plotType,
-  setPlotType,
-}: {
-  plotType: string;
-  setPlotType: React.Dispatch<React.SetStateAction<string>>;
-}) {
-  return (
-    <>
-      <ToggleButtonGroup
-        value={plotType}
-        exclusive
-        onChange={(_event: React.MouseEvent, val: string) => {
-          if (val !== null) setPlotType(val);
-        }}
-        aria-label="text alignment"
-      >
-        <Tooltip title="Table view">
-          <ToggleButton value="CHART_TYPE_TABLE" aria-label="left aligned">
-            <TableChart fontSize="large" />
-          </ToggleButton>
-        </Tooltip>
-        <Tooltip title="Sunburst view">
-          <ToggleButton value="CHART_TYPE_SUNBURST" aria-label="centered">
-            <DonutSmall fontSize="large" />
-          </ToggleButton>
-        </Tooltip>
-      </ToggleButtonGroup>
-    </>
-  );
-}

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

@@ -17,6 +17,7 @@ import {
   Operators,
   SearchBarTokenNature,
   CategoryType,
+  JobMonitorChartType,
 } from "../../types";
 import { getJobSummary } from "./jobDataService";
 import { fromHumanReadableText } from "./JobMonitor";
@@ -33,6 +34,15 @@ interface JobSearchBarProps {
   /** The columns to display in the job monitor */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   columns: ColumnDef<Job, any>[];
+  /** Props for the plot type selector */
+  plotTypeSelectorProps?: {
+    /** The type of the plot */
+    plotType: JobMonitorChartType;
+    /** Function to set the plot type */
+    setPlotType: React.Dispatch<React.SetStateAction<JobMonitorChartType>>;
+    /** List of buttons to select the type of plot */
+    buttonList?: { plotName: JobMonitorChartType; icon: React.ReactNode }[];
+  };
 }
 
 export function JobSearchBar({
@@ -41,6 +51,7 @@ export function JobSearchBar({
   setFilters,
   handleApplyFilters,
   columns,
+  plotTypeSelectorProps,
 }: JobSearchBarProps) {
   const { configuration } = useOIDCContext();
   const { accessToken } = useOidcAccessToken(configuration?.scope);
@@ -71,6 +82,7 @@ export function JobSearchBar({
         )
       }
       allowKeyWordSearch={false} // Disable keyword search for job monitor
+      plotTypeSelectorProps={plotTypeSelectorProps}
     />
   );
 }

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

@@ -9,7 +9,7 @@ import { useDiracxUrl } from "../../hooks/utils";
 import type { JobSummary, SearchBody, Job, SunburstTree } from "../../types";
 import { Sunburst } from "../shared/Sunburst";
 import { useOIDCContext } from "../../hooks/oidcConfiguration";
-import { ChartDisplayLayout } from "../shared";
+import { ChartView } from "../shared";
 import { getJobSummary } from "./jobDataService";
 
 import { fromHumanReadableText } from "./JobMonitor";
@@ -115,7 +115,7 @@ export function JobSunburst({
   );
 
   return (
-    <ChartDisplayLayout
+    <ChartView
       chart={Chart}
       columnList={columnList}
       groupColumns={groupColumns}

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

@@ -30,7 +30,7 @@ interface ChartDisplayLayoutProps {
  * @see ChartDisplayLayoutProps
  * @returns
  */
-export function ChartDisplayLayout({
+export function ChartView({
   chart,
   columnList,
   groupColumns,

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

@@ -0,0 +1 @@
+export { ChartView } from "./ChartView";

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

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+
+import { ToggleButton, ToggleButtonGroup, Tooltip } from "@mui/material";
+
+interface PlotTypeSelectorProps<T extends string> {
+  /** The type of the plot */
+  plotType: T;
+  /** Function to set the plot type */
+  setPlotType: React.Dispatch<React.SetStateAction<T>>;
+  /** List of name and JSX elements to display as buttons */
+  buttonList?: { plotName: T; icon: ReactNode }[];
+}
+
+/**
+ * Component to select the type of plot.
+ *
+ * @param plotType The type of the plot.
+ * @param setPlotType The setter for the plot type.
+ * @param buttonList List of buttons to select the type of plot.
+ * @returns A selector for the plot type.
+ */
+export function PlotTypeSelector<T extends string>({
+  plotType,
+  setPlotType,
+  buttonList = [],
+}: PlotTypeSelectorProps<T>) {
+  return (
+    <ToggleButtonGroup
+      value={plotType}
+      exclusive
+      onChange={(_event: React.MouseEvent, val: T) => {
+        if (val !== null) setPlotType(val);
+      }}
+      aria-label="text alignment"
+    >
+      {buttonList.map((button) => (
+        <Tooltip key={button.plotName} title={"Switch to this plot type"}>
+          <ToggleButton value={button.plotName} aria-label={button.plotName}>
+            {button.icon}
+          </ToggleButton>
+        </Tooltip>
+      ))}
+    </ToggleButtonGroup>
+  );
+}