Fix modifications highlighting on search bugs (#3332)

Signed-off-by: Ayoub LABIDI <[email protected]>

Author: ayolab

src/components/graph/menus/network-modifications/network-modifications-table.tsx

@@ -221,7 +221,10 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
         if (highlightedModificationUuid && gridRef.current?.api) {
             const selectedRow = gridRef.current.api.getRowNode(highlightedModificationUuid);
             if (selectedRow) {
-                gridRef.current.api.ensureNodeVisible(selectedRow, 'top');
+                // Ensure the row is visible, using a timeout to wait for the grid to finish any ongoing rendering
+                setTimeout(() => {
+                    gridRef?.current?.api.ensureNodeVisible(selectedRow, 'top');
+                }, 0);
             }
         }
     }, [highlightedModificationUuid]);
@@ -250,7 +253,6 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
                 getRowStyle={getRowStyle}
                 onRowDragEnter={onRowDragStart}
                 onRowDragEnd={onRowDragEnd}
-                onFirstDataRendered={handleScroll}
                 rowDragManaged={!isRowDragDisabled}
                 suppressNoRowsOverlay={true}
                 overrideLocales={AGGRID_LOCALES}

src/components/graph/menus/root-network/root-network-modification-results.tsx

@@ -65,7 +65,7 @@ export const ModificationResults: React.FC<ModificationResultsProps> = ({ modifi
         (modification: Modification) => {
             const node = treeNodes?.find((node) => node.id === nodeUuid);
             if (node) {
-                setCurrentTreeNodeWithSync(node);
+                setCurrentTreeNodeWithSync({ ...node });
                 triggerTreeNodeFocus();
             }
             dispatch(setModificationsDrawerOpen());

src/components/graph/menus/root-network/root-network-nodes-search-results.tsx

@@ -51,7 +51,7 @@ export const RootNetworkNodesSearchResults: React.FC<RootNetworkNodesSearchResul
         (nodeName: string) => {
             const node = treeNodes?.find((node) => node.data.label === nodeName);
             if (node) {
-                setCurrentTreeNodeWithSync(node);
+                setCurrentTreeNodeWithSync({ ...node });
                 triggerTreeNodeFocus();
             }
         },

src/components/graph/menus/root-network/root-network-panel-search.tsx

@@ -80,7 +80,6 @@ const RootNetworkSearchPanel: React.FC<RootNetworkSearchPanelProps> = ({ setIsSe
         nodesSearch.reset();
         modificationsSearch.reset();
         setIsSearchActive(false);
-        dispatch(setHighlightModification(null));
     };
 
     const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {

src/components/graph/menus/root-network/use-root-network-modification-search.ts

@@ -8,9 +8,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ModificationsSearchResult } from './root-network.types';
 import { getModifications } from '../../../../services/root-network';
 import { UUID } from 'crypto';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from '../../../../redux/reducer';
 import { useSnackMessage, useDebounce } from '@gridsuite/commons-ui';
+import { setHighlightModification } from 'redux/actions';
 
 function reOrderSearchResults(
     results: ModificationsSearchResult[],
@@ -33,6 +34,7 @@ export const useRootNetworkModificationSearch = () => {
     const [searchTerm, setSearchTerm] = useState('');
     const [modificationsResults, setModificationsResults] = useState<ModificationsSearchResult[]>([]);
     const [isLoading, setIsLoading] = useState(false);
+    const dispatch = useDispatch();
 
     const studyUuid = useSelector((s: AppState) => s.studyUuid);
     const currentRootNetworkUuid = useSelector((s: AppState) => s.currentRootNetworkUuid);
@@ -42,7 +44,8 @@ export const useRootNetworkModificationSearch = () => {
     const reset = useCallback(() => {
         setSearchTerm('');
         setModificationsResults([]);
-    }, []);
+        dispatch(setHighlightModification(null));
+    }, [dispatch]);
 
     const searchMatchingElements = useCallback(
         (searchTerm: string) => {