fix: hooks dependencies

Author: TheauW

packages/diracx-web-components/eslint.config.js

@@ -19,6 +19,7 @@ const compat = new FlatCompat({
 export default [
   ...fixupConfigRules(
     compat.extends(
+      "next/core-web-vitals",
       "plugin:import/recommended",
       "plugin:import/typescript",
       "plugin:storybook/recommended",
@@ -57,6 +58,7 @@ export default [
     },
 
     rules: {
+      "@next/next/no-html-link-for-pages": "off", // We don't have pages, it's a library
       "import/order": ["error"],
       "import/no-unused-modules": ["error"],
       "import/no-useless-path-segments": ["error"],

packages/diracx-web-components/src/components/DashboardLayout/DashboardDrawer.tsx

@@ -18,6 +18,7 @@ import {
 } from "@mui/material";
 import { MenuBook, Add } from "@mui/icons-material";
 import React, { useContext, useEffect, useState } from "react";
+import Image from "next/image";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
@@ -412,7 +413,12 @@ export default function DashboardDrawer({
               backgroundColor: theme.palette.background.default,
             }}
           >
-            <img src={logoURL} alt="DIRAC logo" style={{ maxWidth: "100%" }} />
+            <Image
+              src={logoURL}
+              alt="DIRAC logo"
+              fill
+              style={{ objectFit: "contain" }}
+            />
           </Toolbar>
           {/* Map over user app instances and render them as list items in the drawer. */}
           <List>

packages/diracx-web-components/src/components/DashboardLayout/DrawerItem.tsx

@@ -161,7 +161,7 @@ export default function DrawerItem({
         },
       }),
     );
-  }, [index, groupTitle, item, theme]);
+  }, [index, groupTitle, item, theme, icon]);
 
   // Handle renaming of the item
   const handleItemRename = () => {

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

@@ -137,7 +137,10 @@ export function JobDataTable({
     totalJobs = results.length;
   }
 
-  const clearSelected = () => setRowSelection({});
+  const clearSelected = useCallback(
+    () => setRowSelection({}),
+    [setRowSelection],
+  );
 
   /**
    * Handle the deletion of the selected jobs
@@ -174,11 +177,11 @@ export function JobDataTable({
     }
   }, [
     accessToken,
+    accessTokenPayload,
     diracxUrl,
     rowSelection,
-    searchBody,
-    pagination.pageIndex,
-    pagination.pageSize,
+    clearSelected,
+    setSearchBody,
   ]);
 
   /**
@@ -244,11 +247,11 @@ export function JobDataTable({
     }
   }, [
     accessToken,
+    accessTokenPayload,
     diracxUrl,
     rowSelection,
-    searchBody,
-    pagination.pageIndex,
-    pagination.pageSize,
+    clearSelected,
+    setSearchBody,
   ]);
 
   /**
@@ -309,14 +312,7 @@ export function JobDataTable({
     } finally {
       setBackdropOpen(false);
     }
-  }, [
-    accessToken,
-    diracxUrl,
-    rowSelection,
-    searchBody,
-    pagination.pageIndex,
-    pagination.pageSize,
-  ]);
+  }, [accessToken, diracxUrl, rowSelection, clearSelected, setSearchBody]);
 
   /**
    * Handle the history of the selected job

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 import { scaleOrdinal, quantize, interpolateRainbow } from "d3";
 
@@ -42,6 +42,8 @@ export function JobSunburst({
   const [tree, setTree] = useState<SunburstTree | undefined>(undefined);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
+  const lastUsedGroupColumnsRef = useRef("");
+
   useEffect(() => {
     const newSearch = currentPath.map((elt, index) => {
       return {
@@ -71,10 +73,22 @@ export function JobSunburst({
       });
       setIsLoading(false);
     }
-    load();
+    // 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(",");
+      load();
+    }
   }, [
-    groupColumns[currentPath.length],
-    groupColumns[currentPath.length + 1],
+    columns,
+    groupColumns,
+    lastUsedGroupColumnsRef,
     currentPath,
     searchBody,
     diracxUrl,

packages/diracx-web-components/src/components/Login/LoginForm.tsx

@@ -1,16 +1,23 @@
 "use client";
 
 import React, { useState, useEffect, useContext } from "react";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import FormControl from "@mui/material/FormControl";
-import InputLabel from "@mui/material/InputLabel";
-import Select, { SelectChangeEvent } from "@mui/material/Select";
-import MenuItem from "@mui/material/MenuItem";
-import Button from "@mui/material/Button";
-import Autocomplete from "@mui/material/Autocomplete";
-import TextField from "@mui/material/TextField";
-import { Stack } from "@mui/material";
+
+import {
+  Box,
+  Typography,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Button,
+  Stack,
+  Autocomplete,
+  TextField,
+  SelectChangeEvent,
+} from "@mui/material";
+
+import Image from "next/image";
+
 import { useOidc } from "@axa-fr/react-oidc";
 import { useMetadata, Metadata } from "../../hooks/metadata";
 import { useOIDCContext } from "../../hooks/oidcConfiguration";
@@ -146,7 +153,7 @@ export function LoginForm({
             paddingBottom: "10%",
           }}
         >
-          <img src={logoURL} alt="DIRAC logo" width={150} height={150} />
+          <Image src={logoURL} alt="DIRAC logo" width={150} height={150} />
         </Box>
         {singleVO ? (
           <Typography

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

@@ -94,6 +94,10 @@ export function SearchBar<T extends string>({
   const [tokenEquations, setTokenEquations] = useState<
     SearchBarTokenEquation[]
   >([]);
+  /** A ref to store the current filters to avoid reloading the token equations */
+  const currentFilters = useRef<string | null>(null);
+  /** A ref to store a boolean indicating if the component is updating from search */
+  const isUpdatingFromSearch = useRef<boolean>(false);
 
   const [suggestions, setSuggestions] = useState<SearchBarSuggestions>({
     items: [],
@@ -118,7 +122,16 @@ export function SearchBar<T extends string>({
 
   // Effect to initialize the token equations from filters
   useEffect(() => {
-    if (tokenEquations.length !== 0) return; // Avoid reloading if already loaded
+    const newFiltersString = String(
+      filters.map((filter) => JSON.stringify(filter)),
+    );
+
+    if (isUpdatingFromSearch.current) {
+      isUpdatingFromSearch.current = false; // Reset the flag after updating from search
+      currentFilters.current = newFiltersString; // Update the current filters to the new filters
+      return;
+    }
+    if (currentFilters && currentFilters.current === newFiltersString) return; // Avoid reloading if already loaded
 
     async function load() {
       const promises = filters.map(async (filter, filterIndex) =>
@@ -128,8 +141,11 @@ export function SearchBar<T extends string>({
       setTokenEquations(newTokenEquations);
     }
 
-    if (filters.length !== 0 && tokenEquations.length === 0) load();
-  }, []);
+    if (filters.length !== 0) {
+      load();
+      currentFilters.current = newFiltersString;
+    }
+  }, [filters, createSuggestions, currentFilters, tokenEquations.length]);
 
   // Create a list of options based on the current tokens and data
   useEffect(() => {

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

@@ -67,7 +67,7 @@ export function Sunburst({
       quantize(interpolateRainbow, tree.children.length + 1),
     );
     return (name: string, _size: number, _depth: number) => colorScale(name);
-  }, [tree?.children?.length]);
+  }, [tree.children]);
 
   // Use the provided colorScales or the default one
   const finalColorScales = colorScales || defaultColorScale;
@@ -310,6 +310,9 @@ export function Sunburst({
     theme,
     finalColorScales,
     sizeToText,
+    error,
+    hasHiddenLevels,
+    isLoading,
   ]);
 
   if (error) {

packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx

@@ -53,7 +53,7 @@ export const ApplicationsProvider = ({
     if (userDashboard.length !== 0) return;
 
     setUserDashboard(defaultUserDashboard);
-  }, [appList, defaultUserDashboard]);
+  }, [userDashboard.length, defaultUserDashboard]);
 
   // Save the dashboard in session storage
   useEffect(() => {