Highlight searched element (#443)

Signed-off-by: LE SAULNIER Kevin <[email protected]>

Author: klesaulnier

src/components/app-wrapper.jsx

@@ -88,7 +88,7 @@ let lightTheme = createTheme({
     },
     aggrid: {
         theme: 'ag-theme-alpine',
-        highlightColor: '#8e9c9b',
+        highlightColor: '#E8E8E8',
     },
     agGridBackground: {
         color: 'white',
@@ -145,7 +145,7 @@ let darkTheme = createTheme({
     },
     aggrid: {
         theme: 'ag-theme-alpine-dark',
-        highlightColor: '#545c5b',
+        highlightColor: '#272727',
     },
     agGridBackground: {
         color: '#383838',

src/components/directory-content-table.tsx

@@ -8,10 +8,10 @@
 import { defaultColumnDefinition } from './utils/directory-content-utils';
 import {
     CustomAGGrid,
-    ElementType,
     ElementAttributes,
+    ElementType,
 } from '@gridsuite/commons-ui';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import {
     ColDef,
     RowClassParams,
@@ -20,7 +20,11 @@ import {
 } from 'ag-grid-community';
 import { RefObject } from 'react';
 
-interface DirectoryContentTableProps {
+interface DirectoryContentTableProps
+    extends Pick<
+        AgGridReactProps<ElementAttributes>,
+        'getRowStyle' | 'onGridReady'
+    > {
     gridRef: RefObject<AgGridReact<ElementAttributes>>;
     rows: ElementAttributes[];
     handleCellContextualMenu: () => void;
@@ -37,7 +41,7 @@ const recomputeOverFlowableCells = ({ api }: AgGridEvent) =>
 
 export const CUSTOM_ROW_CLASS = 'custom-row-class';
 
-const getRowStyle = (cellData: RowClassParams<ElementAttributes>) => {
+const getClickableRowStyle = (cellData: RowClassParams<ElementAttributes>) => {
     const style: Record<string, string> = { fontSize: '1rem' };
     if (
         cellData.data &&
@@ -57,11 +61,20 @@ const getRowStyle = (cellData: RowClassParams<ElementAttributes>) => {
 export const DirectoryContentTable = ({
     gridRef,
     rows,
+    getRowStyle,
     handleCellContextualMenu,
     handleRowSelected,
     handleCellClick,
+    onGridReady,
     colDef,
 }: DirectoryContentTableProps) => {
+    const getCustomRowStyle = (cellData: RowClassParams<ElementAttributes>) => {
+        return {
+            ...getClickableRowStyle(cellData),
+            ...getRowStyle?.(cellData),
+        };
+    };
+
     return (
         <CustomAGGrid
             ref={gridRef}
@@ -70,13 +83,14 @@ export const DirectoryContentTable = ({
             defaultColDef={defaultColumnDefinition}
             rowSelection="multiple"
             suppressRowClickSelection
+            onGridReady={onGridReady}
             onCellContextMenu={handleCellContextualMenu}
             onCellClicked={handleCellClick}
             onRowSelected={handleRowSelected}
             onGridSizeChanged={recomputeOverFlowableCells}
             animateRows={true}
             columnDefs={colDef}
-            getRowStyle={getRowStyle}
+            getRowStyle={getCustomRowStyle}
             //We set a custom className for rows in order to easily determine if a context menu event is happening on a row or not
             rowClass={CUSTOM_ROW_CLASS}
         />

src/components/directory-content.jsx

@@ -49,6 +49,7 @@ import {
     DirectoryContentTable,
     CUSTOM_ROW_CLASS,
 } from './directory-content-table';
+import { useHighlightSearchedElement } from './search/use-highlight-searched-element';
 
 const circularProgressSize = '70px';
 
@@ -69,6 +70,16 @@ const styles = {
     centeredCircularProgress: {
         alignSelf: 'center',
     },
+    highlightedElementAnimation: (theme) => ({
+        '@keyframes highlighted-element': {
+            'from, 24%': {
+                backgroundColor: 'inherit',
+            },
+            '12%, 36%, to': {
+                backgroundColor: theme.row.hover,
+            },
+        },
+    }),
 };
 
 const initialMousePosition = {
@@ -84,6 +95,8 @@ const DirectoryContent = () => {
     const selectionForCopy = useSelector((state) => state.selectionForCopy);
     const activeDirectory = useSelector((state) => state.activeDirectory);
 
+    const [onGridReady, getRowStyle] = useHighlightSearchedElement();
+
     const [languageLocal] = useParameterState(PARAM_LANGUAGE);
 
     const dispatchSelectionForCopy = useCallback(
@@ -550,6 +563,8 @@ const DirectoryContent = () => {
                 handleRowSelected={handleRowSelected}
                 handleCellClick={handleCellClick}
                 colDef={getColumnsDefinition(childrenMetadata, intl)}
+                getRowStyle={getRowStyle}
+                onGridReady={onGridReady}
             />
         );
     };
@@ -678,7 +693,12 @@ const DirectoryContent = () => {
                     />
                 )
             }
-            <Grid xs={12} onContextMenu={onContextMenu}>
+            <Grid
+                item
+                sx={styles.highlightedElementAnimation}
+                xs={12}
+                onContextMenu={onContextMenu}
+            >
                 {renderContent()}
             </Grid>
             <div

src/components/search/search-bar.tsx

@@ -14,10 +14,19 @@ import {
     fetchDirectoryContent,
 } from '@gridsuite/commons-ui';
 import { useDispatch, useSelector } from 'react-redux';
-import { setSelectedDirectory, setTreeData } from '../../redux/actions';
+import {
+    setSearchedElement,
+    setSelectedDirectory,
+    setTreeData,
+} from '../../redux/actions';
 import { updatedTree } from '../tree-views-container';
-import { MatchingElementProps, SearchItem } from './search-item';
-import { IDirectory, ITreeData, ReduxState } from '../../redux/reducer.type';
+import { SearchItem } from './search-item';
+import {
+    ElementAttributesES,
+    IDirectory,
+    ITreeData,
+    ReduxState,
+} from '../../redux/reducer.type';
 import { RenderElementProps } from '@gridsuite/commons-ui/dist/components/ElementSearchDialog/element-search-input';
 import { TextFieldProps } from '@mui/material';
 import { SearchBarRenderInput } from './search-bar-render-input';
@@ -29,9 +38,8 @@ interface SearchBarProps {
     inputRef: RefObject<TextFieldProps>;
 }
 
-const fetchElements: (
-    newSearchTerm: string
-) => Promise<MatchingElementProps[]> = searchElementsInfos;
+const fetchElements: (newSearchTerm: string) => Promise<ElementAttributesES[]> =
+    searchElementsInfos;
 
 export const SearchBar: FunctionComponent<SearchBarProps> = ({ inputRef }) => {
     const dispatch = useDispatch();
@@ -46,7 +54,7 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({ inputRef }) => {
         });
 
     const renderOptionItem = useCallback(
-        (props: RenderElementProps<MatchingElementProps>) => {
+        (props: RenderElementProps<ElementAttributesES>) => {
             const { element, inputValue } = props;
             const matchingElement = elementsFound.find(
                 (e) => e.id === element.id
@@ -97,9 +105,9 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({ inputRef }) => {
     );
 
     const handleMatchingElement = useCallback(
-        async (data: MatchingElementProps | string | null) => {
+        async (data: ElementAttributesES | string | null) => {
             const matchingElement = elementsFound.find(
-                (element: MatchingElementProps) => element === data
+                (element: ElementAttributesES) => element === data
             );
             if (matchingElement !== undefined) {
                 const elementUuidPath = matchingElement?.pathUuid;
@@ -121,9 +129,16 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({ inputRef }) => {
                 }
                 const lastElement = elementUuidPath.pop();
                 handleDispatchDirectory(lastElement);
+                dispatch(setSearchedElement(data));
             }
         },
-        [elementsFound, handleDispatchDirectory, updateMapData, snackError]
+        [
+            elementsFound,
+            handleDispatchDirectory,
+            updateMapData,
+            snackError,
+            dispatch,
+        ]
     );
 
     return (

src/components/search/search-item.tsx

@@ -4,12 +4,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { ElementType, getFileIcon } from '@gridsuite/commons-ui';
+import { getFileIcon } from '@gridsuite/commons-ui';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { FormattedMessage } from 'react-intl';
 import { FunctionComponent } from 'react';
 import { Theme } from '@mui/material';
+import { ElementAttributesES } from 'redux/reducer.type';
 
 const styles = {
     icon: (theme: Theme) => ({
@@ -37,18 +38,10 @@ interface HighlightedTextProps {
 }
 
 interface SearchItemProps {
-    matchingElement: MatchingElementProps;
+    matchingElement: ElementAttributesES;
     inputValue: string;
 }
 
-export interface MatchingElementProps {
-    id: string;
-    name: string;
-    type: ElementType;
-    pathName: string[];
-    pathUuid: string[];
-}
-
 export const HighlightedText: FunctionComponent<HighlightedTextProps> = ({
     text,
     highlight,

src/components/search/use-highlight-searched-element.tsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { ElementAttributes } from '@gridsuite/commons-ui';
+import { GridReadyEvent, RowClassParams, RowStyle } from 'ag-grid-community';
+import { useCallback, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSearchedElement } from '../../redux/actions';
+import { ReduxState } from '../../redux/reducer.type';
+
+const SEARCH_HIGHLIGHT_DURATION_S = 4;
+
+export const useHighlightSearchedElement = () => {
+    const searchedElement = useSelector(
+        (state: ReduxState) => state.searchedElement
+    );
+    const dispatch = useDispatch();
+    const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+    const onGridReady = useCallback(
+        ({ api }: GridReadyEvent<ElementAttributes>) => {
+            // if there is a searched element, we scroll to it, style it for SEARCH_HIGHTLIGHT_DURATION, then remove it from searchedElement to go back to previous style
+            if (!searchedElement) {
+                return;
+            }
+            const searchedElementRow = api.getRowNode(searchedElement.id);
+            if (
+                searchedElementRow?.rowIndex != null &&
+                searchedElementRow?.rowIndex >= 0
+            ) {
+                api.ensureIndexVisible(searchedElementRow.rowIndex, 'top');
+                clearTimeout(timeout.current);
+                timeout.current = setTimeout(() => {
+                    dispatch(setSearchedElement(null));
+                }, SEARCH_HIGHLIGHT_DURATION_S * 1000);
+            }
+        },
+        [searchedElement, dispatch]
+    );
+
+    const getRowStyle = useCallback(
+        (cellData: RowClassParams<ElementAttributes, any>) => {
+            const style: RowStyle = { fontSize: '1rem' };
+            if (cellData?.data?.elementUuid === searchedElement?.id) {
+                // keyframe "highlighted-element" has to be defined in css containing highlighted element
+                style[
+                    'animation'
+                ] = `highlighted-element ${SEARCH_HIGHLIGHT_DURATION_S}s`;
+            }
+            return style;
+        },
+        [searchedElement?.id]
+    );
+
+    return [onGridReady, getRowStyle];
+};

src/redux/actions.js

@@ -110,3 +110,12 @@ export function setTreeData(treeData) {
         treeData: treeData,
     };
 }
+
+export const SEARCHED_ELEMENT = 'SEARCHED_ELEMENT';
+
+export function setSearchedElement(searchedElement) {
+    return {
+        type: SEARCHED_ELEMENT,
+        searchedElement: searchedElement,
+    };
+}

src/redux/reducer.js

@@ -29,6 +29,7 @@ import {
     DIRECTORY_UPDATED,
     TREE_DATA,
     SELECTION_FOR_COPY,
+    SEARCHED_ELEMENT,
 } from './actions';
 
 import {
@@ -53,6 +54,7 @@ const initialState = {
     currentChildren: null,
     selectedDirectory: null,
     activeDirectory: null,
+    searchedElement: null,
     currentPath: [],
     user: null,
     signInCallbackError: null,
@@ -138,6 +140,10 @@ export const reducer = createReducer(initialState, (builder) => {
         state.activeDirectory = action.activeDirectory;
     });
 
+    builder.addCase(SEARCHED_ELEMENT, (state, action) => {
+        state.searchedElement = action.searchedElement;
+    });
+
     builder.addCase(CURRENT_PATH, (state, action) => {
         state.currentPath = action.currentPath;
     });

src/redux/reducer.type.ts

@@ -28,6 +28,18 @@ export type IDirectory = ElementAttributes & {
     type: ElementType.DIRECTORY;
 };
 
+export interface ElementAttributesES {
+    id: UUID;
+    name: string;
+    parentId: UUID;
+    type: ElementType;
+    owner: string;
+    subdirectoriesCount: number;
+    lastModificationDate: string;
+    pathName: string[];
+    pathUuid: UUID[];
+}
+
 export interface ITreeData {
     rootDirectories: IDirectory[];
     mapData: Record<string, IDirectory>;
@@ -37,6 +49,7 @@ export interface ReduxState {
     activeDirectory: UUID;
     currentChildren: ElementAttributes[];
     selectedDirectory: ElementAttributes;
+    searchedElement: ElementAttributesES;
     treeData: ITreeData;
     user: IUser;
 }