fix: review suggestions

Author: TheauW

docs/user/monitor_jobs.md

@@ -17,6 +17,7 @@
 
 
 ## Use the table
+By default, the jobs are displayed in a table. If you are viewing them in another chart, you can click the table button next to the search bar to switch back to the table view.
 The table displays the jobs that match the criteria specified in the search bar. Each row represents a job, and the columns show various attributes of the job, such as its ID, status, type, and submission date.
 
 ### Actions on the table
@@ -32,3 +33,5 @@ You can select one or more jobs by clicking on the checkboxes next to each job.
 - **Kill**: This button will kill the selected jobs.
 - **Delete**: This button will delete the selected jobs.
 
+## Use the Pie Chart
+You can change the visualization to use a pie chart with the button next to the search bar. The pie chart provides a hierarchical view of the jobs based on their attributes. The `Columns to plot` component lets you choose your criteria for visualizing the jobs. The chart can display two levels, and you can then click on a section of the chart to zoom into that category and see more details.

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

@@ -405,7 +405,7 @@ export function JobDataTable({
    * Table instance
    */
   const table = useReactTable({
-    data: results || [],
+    data: useMemo(() => results || [], [results]),
     columns,
     state: {
       columnVisibility,

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

@@ -21,6 +21,7 @@ import {
   Box,
   ToggleButtonGroup,
   ToggleButton,
+  Tooltip,
 } from "@mui/material";
 
 import { TableChart, DonutSmall } from "@mui/icons-material";
@@ -108,7 +109,7 @@ export default function JobMonitor() {
         },
   );
 
-  const [chartType, setChartType] = useState("table");
+  const [chartType, setChartType] = useState("CHART_TYPE_TABLE");
 
   // Save the state of the app in local storage
   useEffect(() => {
@@ -292,7 +293,11 @@ export default function JobMonitor() {
         values,
       })),
     }));
-  }, [filters, columns]);
+    setPagination((prev) => ({
+      ...prev,
+      pageIndex: 0, // Reset to the first page when applying filters
+    }));
+  }, [filters, columns, setSearchBody, setPagination]);
 
   return (
     <Box
@@ -319,7 +324,7 @@ export default function JobMonitor() {
         <PlotTypeSelector plotType={chartType} setPlotType={setChartType} />
       </Box>
 
-      {chartType === "table" && (
+      {chartType === "CHART_TYPE_TABLE" && (
         <JobDataTable
           searchBody={searchBody}
           setSearchBody={setSearchBody}
@@ -335,7 +340,7 @@ export default function JobMonitor() {
           statusColors={statusColors}
         />
       )}
-      {chartType === "sunburst" && (
+      {chartType === "CHART_TYPE_SUNBURST" && (
         <JobSunburst
           searchBody={searchBody}
           statusColors={statusColors}
@@ -434,12 +439,16 @@ export function PlotTypeSelector({
         }}
         aria-label="text alignment"
       >
-        <ToggleButton value="table" aria-label="left aligned">
-          <TableChart fontSize="large" />
-        </ToggleButton>
-        <ToggleButton value="sunburst" aria-label="centered">
-          <DonutSmall fontSize="large" />
-        </ToggleButton>
+        <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/JobSunburst.tsx

@@ -82,7 +82,7 @@ export function JobSunburst({
   ]);
 
   const defaultColors = scaleOrdinal(
-    quantize(interpolateRainbow, tree?.children?.length || 0 + 1),
+    quantize(interpolateRainbow, (tree?.children?.length ?? 0) + 1),
   );
 
   function colorScales(name: string, _size: number, _depth: number): string {
@@ -116,10 +116,11 @@ export function JobSunburst({
 
   return (
     <ChartDisplayLayout
-      Chart={Chart}
+      chart={Chart}
       columnList={columnList}
       groupColumns={groupColumns}
       setGroupColumns={setGroupColumns}
+      currentPath={currentPath}
       setCurrentPath={setCurrentPath}
       defaultColumns={["Status"]}
       title={"Columns to plot"}
@@ -262,17 +263,17 @@ function buildTree(
 function sizeToText(size: number, total?: number): string {
   if (size > 1e9)
     return (
-      `${(size / 1e9).toFixed(1)} billion jobs` +
+      `${(size / 1e9).toFixed(2)}B \njobs` +
       (total ? ` (${((size / total) * 100).toFixed(2)}%)` : "")
     );
   if (size > 1e6)
     return (
-      `${(size / 1e6).toFixed(1)} million jobs` +
+      `${(size / 1e6).toFixed(2)}M \njobs` +
       (total ? ` (${((size / total) * 100).toFixed(2)}%)` : "")
     );
   if (size > 1e3)
     return (
-      `${(size / 1e3).toFixed(1)} thousand\njobs` +
+      `${(size / 1e3).toFixed(2)}k \njobs` +
       (total ? ` (${((size / total) * 100).toFixed(2)}%)` : "")
     );
   if (size > 1)

packages/diracx-web-components/src/components/JobMonitor/jobDataService.ts

@@ -252,7 +252,7 @@ export function useJobs(
   page: number,
   rowsPerPage: number,
 ) {
-  const [data, setData] = useState<Job[] | null>([]);
+  const [data, setData] = useState<Job[] | null>(null);
   const [headers, setHeaders] = useState<Headers>(new Headers());
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<Error | null>(null);
@@ -261,7 +261,7 @@ export function useJobs(
     if (!diracxUrl) {
       setData(null);
       setIsLoading(false);
-      setError(Error("Invalid URL generated for fetching jobs."));
+      setError(new Error("Invalid URL generated for fetching jobs."));
       return;
     }
 
@@ -296,7 +296,7 @@ export function useJobs(
       } catch {
         setData(null);
         setIsLoading(false);
-        setError(Error("Failed to fetch jobs"));
+        setError(new Error("Failed to fetch jobs"));
       }
     }
     fetchJobs();

packages/diracx-web-components/src/components/shared/ChartDisplayLayout.tsx

@@ -6,13 +6,15 @@ import { ColumnSelector } from "./ColumnSelector";
 
 interface ChartDisplayLayoutProps {
   /** The chart to be displayed */
-  Chart: JSX.Element;
+  chart: JSX.Element;
   /** List of columns available for selection */
   columnList: string[];
   /** Currently selected group columns */
   groupColumns: string[];
   /** Function to set the group columns */
   setGroupColumns: React.Dispatch<React.SetStateAction<string[]>>;
+  /** The current path in the chart */
+  currentPath: string[];
   /** Function to set the current path in the chart */
   setCurrentPath: React.Dispatch<React.SetStateAction<string[]>>;
   /** Default group columns to be used */
@@ -29,10 +31,11 @@ interface ChartDisplayLayoutProps {
  * @returns
  */
 export function ChartDisplayLayout({
-  Chart,
+  chart,
   columnList,
   groupColumns,
   setGroupColumns,
+  currentPath,
   setCurrentPath,
   defaultColumns: defaultGroupColumns,
   title = "Level selector",
@@ -57,7 +60,7 @@ export function ChartDisplayLayout({
           overflow: "auto",
         }}
       >
-        {Chart}
+        {chart}
       </Box>
 
       {/* Right Section: Column selection */}
@@ -75,6 +78,7 @@ export function ChartDisplayLayout({
           columnList={columnList}
           groupColumns={groupColumns}
           setGroupColumns={setGroupColumns}
+          currentPath={currentPath}
           setCurrentPath={setCurrentPath}
           defaultColumns={defaultGroupColumns}
           title={title}

packages/diracx-web-components/src/components/shared/ColumnSelector.tsx

@@ -31,6 +31,8 @@ interface SelectColumnsProps {
   groupColumns: string[];
   /** Setter for groupColumns */
   setGroupColumns: React.Dispatch<React.SetStateAction<string[]>>;
+  /** The current path in the tree */
+  currentPath: string[];
   /** Setter for the current path in the tree */
   setCurrentPath: React.Dispatch<React.SetStateAction<string[]>>;
   /** Default columns to use */
@@ -50,6 +52,7 @@ export function ColumnSelector({
   columnList,
   groupColumns,
   setGroupColumns,
+  currentPath,
   setCurrentPath,
   defaultColumns: defaultGroupColumns,
   title = "Column Selector",
@@ -65,14 +68,17 @@ export function ColumnSelector({
     if (event.target.value === "None") {
       // Delete a column
       newGroups = newGroups.filter((_elt, index) => index !== depth);
-      if (newGroups.length > 0)
-        setCurrentPath((currentPath) => currentPath.slice(0, depth - 1));
+      if (newGroups.length > 0 && currentPath.length > depth)
+        setCurrentPath((currentPath) =>
+          currentPath.slice(0, Math.max(0, depth - 1)),
+        );
     } else {
       // Add or change a column
       if (newGroups[depth]) {
         // Change the column
         newGroups[depth] = event.target.value;
-        setCurrentPath((currentPath) => currentPath.slice(0, depth));
+        if (currentPath.length > depth)
+          setCurrentPath((currentPath) => currentPath.slice(0, depth));
       } else {
         // Add a column
         newGroups.push(event.target.value);

packages/diracx-web-components/stories/ChartDisplayLayout.stories.tsx

@@ -59,16 +59,17 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    Chart: <div>Nothing</div>,
+    chart: <div>Nothing</div>,
     columnList: ["Column 1", "Column 2", "Column 3"],
     groupColumns: ["Column 1"],
     setGroupColumns: () => {},
+    currentPath: [],
     setCurrentPath: () => {},
     defaultColumns: ["Column 1"],
     title: "Select Columns",
   },
   argTypes: {
-    Chart: {
+    chart: {
       control: { type: "select" },
       options: ["Sunburst", "None"],
       mapping: {
@@ -85,15 +86,17 @@ export const Default: Story = {
   },
   render: (args) => {
     const [groupColumns, setGroupColumns] = useState(args.groupColumns);
+    const [currentPath, setCurrentPath] = useState(args.currentPath);
 
     return (
       <ThemeProvider>
         <ChartDisplayLayout
-          Chart={args.Chart}
+          chart={args.chart}
           columnList={args.columnList}
           groupColumns={groupColumns}
           setGroupColumns={setGroupColumns}
-          setCurrentPath={args.setCurrentPath}
+          currentPath={currentPath}
+          setCurrentPath={setCurrentPath}
           defaultColumns={args.defaultColumns}
           title={args.title}
         />

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

@@ -149,7 +149,7 @@ export const WithError: Story = {
         <JobMockProvider
           jobs={null}
           jobHistory={null}
-          error={Error("Custom error message here")}
+          error={new Error("Custom error message here")}
           isLoading={false}
         >
           <Story />

packages/diracx-web-components/test/ChartDisplayLayout.test.tsx

@@ -19,9 +19,9 @@ describe("ChartDisplayLayout", () => {
   });
 
   it("renders with columns", () => {
-    render(<Default groupColumns={["Custom Column 1", "Custom Column 2"]} />);
+    render(<Default groupColumns={["Column 1", "Column 2"]} />);
 
-    expect(screen.getByDisplayValue("Custom Column 1")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("Custom Column 2")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("Column 1")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("Column 2")).toBeInTheDocument();
   });
 });