diff --git a/packages/diracx-web-components/src/components/JobMonitor/JobMonitor.tsx b/packages/diracx-web-components/src/components/JobMonitor/JobMonitor.tsx
index 09dfb55a..d896fc3f 100644
--- a/packages/diracx-web-components/src/components/JobMonitor/JobMonitor.tsx
+++ b/packages/diracx-web-components/src/components/JobMonitor/JobMonitor.tsx
@@ -355,6 +355,8 @@ export default function JobMonitor() {
{chartType === JobMonitorChartType.SUNBURST && (
diff --git a/packages/diracx-web-components/src/components/JobMonitor/JobSunburst.tsx b/packages/diracx-web-components/src/components/JobMonitor/JobSunburst.tsx
index f28cef39..03585e91 100644
--- a/packages/diracx-web-components/src/components/JobMonitor/JobSunburst.tsx
+++ b/packages/diracx-web-components/src/components/JobMonitor/JobSunburst.tsx
@@ -1,12 +1,23 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
-import { scaleOrdinal, quantize, interpolateRainbow } from "d3";
+import {
+ scaleOrdinal,
+ quantize,
+ interpolateRainbow,
+ HierarchyRectangularNode,
+} from "d3";
import { useOidcAccessToken } from "@axa-fr/react-oidc";
import { ColumnDef } from "@tanstack/react-table";
import { useDiracxUrl } from "../../hooks/utils";
-import type { JobSummary, SearchBody, Job, SunburstTree } from "../../types";
+import type {
+ JobSummary,
+ SearchBody,
+ Job,
+ SunburstTree,
+ Filter,
+} from "../../types";
import { Sunburst } from "../shared/Sunburst";
import { useOIDCContext } from "../../hooks/oidcConfiguration";
import { ChartView } from "../shared";
@@ -14,6 +25,19 @@ import { getJobSummary } from "./jobDataService";
import { fromHumanReadableText } from "./JobMonitor";
+interface JobSunburstProps {
+ /** The search body to be used in the search */
+ searchBody: SearchBody;
+ /** The filters to be applied to the search */
+ filters: Filter[];
+ /** The function to update the filters */
+ setFilters: React.Dispatch>;
+ /** The status colors to be used in the chart */
+ statusColors: Record;
+ /** The columns of the JobDataTable */
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ columns: ColumnDef[];
+}
/**
* Create the JobSunburst component.
*
@@ -24,14 +48,11 @@ import { fromHumanReadableText } from "./JobMonitor";
*/
export function JobSunburst({
searchBody,
+ filters,
+ setFilters,
statusColors,
columns,
-}: {
- searchBody: SearchBody;
- statusColors: Record;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- columns: ColumnDef[];
-}) {
+}: JobSunburstProps) {
const { configuration } = useOIDCContext();
const { accessToken } = useOidcAccessToken(configuration?.scope);
const diracxUrl = useDiracxUrl();
@@ -42,8 +63,6 @@ export function JobSunburst({
const [tree, setTree] = useState(undefined);
const [isLoading, setIsLoading] = useState(false);
- const lastUsedGroupColumnsRef = useRef("");
-
useEffect(() => {
const newSearch = currentPath.map((elt, index) => {
return {
@@ -74,26 +93,20 @@ export function JobSunburst({
setIsLoading(false);
}
// For optimization, only load when the used groupColumns change
- if (
- lastUsedGroupColumnsRef.current !==
- groupColumns.slice(0, currentPath.length + 1).join(",") &&
- diracxUrl &&
- accessToken
- ) {
- lastUsedGroupColumnsRef.current = groupColumns
- .slice(0, currentPath.length + 1)
- .join(",");
+ if (diracxUrl && accessToken) {
load();
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [
columns,
- groupColumns,
- lastUsedGroupColumnsRef,
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ groupColumns.slice(0, currentPath.length + 2).join(", "),
currentPath,
searchBody,
diracxUrl,
accessToken,
]);
+ // The dependencies above are not exact. For performance reasons, we don't include all dependencies.
const defaultColors = scaleOrdinal(
quantize(interpolateRainbow, (tree?.children?.length ?? 0) + 1),
@@ -115,6 +128,22 @@ export function JobSunburst({
const hasHiddenLevels = groupColumns.length > currentPath.length + 2;
+ /**
+ * Update the category filter
+ * @param p The node which has to be disabled
+ */
+ const handleDeleteCategory = (p: HierarchyRectangularNode) => {
+ const newFilters = [
+ ...filters,
+ {
+ parameter: groupColumns[p.depth - 1],
+ operator: "neq",
+ value: p.data.name,
+ },
+ ];
+ setFilters(newFilters);
+ };
+
const Chart = (
);