Keep sort when switching between tabs

gridsuite · Jul 17, 2024 · b8a134f · b8a134f
1 parent 79860f8
commit b8a134f
Show file tree

Hide file tree

Showing 11 changed files with 305 additions and 94 deletions.
diff --git a/src/components/results/dynamicsimulation/dynamic-simulation-result-timeline.tsx b/src/components/results/dynamicsimulation/dynamic-simulation-result-timeline.tsx
@@ -23,7 +23,6 @@ import { useSelector } from 'react-redux';
 import { ReduxState } from '../../../redux/reducer.type';
 import ComputingType from '../../computing-status/computing-type';
 import { useAgGridLocalSort } from '../../../hooks/use-aggrid-local-sort';
-import { SortWay } from '../../../hooks/use-aggrid-sort';
 import { useAggridLocalRowFilter } from '../../../hooks/use-aggrid-local-row-filter';
 
 import { TimelineEventKeyType } from './types/dynamic-simulation-result.type';
@@ -36,7 +35,10 @@ import {
 import { useNodeData } from '../../study-container';
 import { fetchDynamicSimulationResultTimeline } from '../../../services/dynamic-simulation';
 import { NumberCellRenderer } from '../common/result-cell-renderers';
-import { setDynamicSimulationResultFilter } from 'redux/actions';
+import {
+    setDynamicSimulationResultFilter,
+    setDynamicSimulationResultSort,
+} from 'redux/actions';
 import {
     DYNAMIC_SIMULATION_RESULT_STORE_FIELD,
     TIMELINE,
@@ -81,10 +83,16 @@ const DynamicSimulationResultTimeline = memo(
             dynamicSimulationResultInvalidations
         );
 
-        const { onSortChanged, sortConfig } = useAgGridLocalSort(gridRef, {
-            colId: COL_TIME,
-            sort: SortWay.ASC,
-        });
+        const sortConfigType = useSelector(
+            (state) => state.dynamicSimulationResultSort[TIMELINE]
+        );
+
+        const { onSortChanged, sortConfig } = useAgGridLocalSort(
+            gridRef,
+            sortConfigType,
+            setDynamicSimulationResultSort,
+            TIMELINE
+        );
 
         const { updateFilter, filterSelector } = useAggridLocalRowFilter(
             gridRef,

diff --git a/src/components/results/loadflow/load-flow-result-tab.tsx b/src/components/results/loadflow/load-flow-result-tab.tsx
@@ -30,11 +30,10 @@ import { ReduxState } from 'redux/reducer.type';
 import ComputingType from 'components/computing-status/computing-type';
 import { useSelector } from 'react-redux';
 import { ComputationReportViewer } from '../common/computation-report-viewer';
-import { SortWay, useAgGridSort } from 'hooks/use-aggrid-sort';
+import { useAgGridSort } from 'hooks/use-aggrid-sort';
 import { useAggridRowFilter } from 'hooks/use-aggrid-row-filter';
 import {
     FROM_COLUMN_TO_FIELD_LIMIT_VIOLATION_RESULT,
-    getIdType,
     loadFlowCurrentViolationsColumnsDefinition,
     loadFlowResultColumnsDefinition,
     loadFlowVoltageViolationsColumnsDefinition,
@@ -50,7 +49,7 @@ import {
 } from 'components/custom-aggrid/custom-aggrid-header.type';
 import { LimitViolationResult } from './limit-violation-result';
 import { mapFieldsToColumnsFilter } from 'components/custom-aggrid/custom-aggrid-header-utils';
-import { setLoadflowResultFilter } from 'redux/actions';
+import { setLoadflowResultFilter, setLoadflowResultSort } from 'redux/actions';
 import {
     NumberCellRenderer,
     StatusCellRender,
@@ -105,10 +104,15 @@ export const LoadFlowResultTab: FunctionComponent<LoadFlowTabProps> = ({
         (state: ReduxState) => state.computingStatus[ComputingType.LOAD_FLOW]
     );
 
-    const { onSortChanged, sortConfig, initSort } = useAgGridSort({
-        colId: getIdType(tabIndex),
-        sort: SortWay.DESC,
-    });
+    const sortConfigType = useSelector(
+        (state) => state.loadflowResultSort[mappingTabs(tabIndex)]
+    );
+
+    const { onSortChanged, sortConfig, initSort } = useAgGridSort(
+        sortConfigType,
+        setLoadflowResultSort,
+        mappingTabs(tabIndex)
+    );
 
     const { updateFilter, filterSelector } = useAggridRowFilter({
         filterType: LOADFLOW_RESULT_STORE_FIELD,
@@ -298,18 +302,15 @@ export const LoadFlowResultTab: FunctionComponent<LoadFlowTabProps> = ({
         tabIndex,
     ]);
 
-    const resetResultStates = useCallback(
-        (defaultSortColKey: string) => {
-            setResult(null);
-            if (initSort) {
-                initSort(defaultSortColKey);
-            }
-        },
-        [initSort, setResult]
-    );
+    const resetResultStates = useCallback(() => {
+        setResult(null);
+        if (initSort) {
+            initSort(sortConfigType);
+        }
+    }, [initSort, setResult, sortConfigType]);
 
     const handleTabChange = (_event: SyntheticEvent, newTabIndex: number) => {
-        resetResultStates(getIdType(newTabIndex));
+        resetResultStates();
         setTabIndex(newTabIndex);
     };
 

diff --git a/src/components/results/securityanalysis/security-analysis-result-tab.tsx b/src/components/results/securityanalysis/security-analysis-result-tab.tsx
@@ -36,20 +36,22 @@ import {
     RESULT_TYPE,
     useFetchFiltersEnums,
     SECURITY_ANALYSIS_RESULT_INVALIDATIONS,
-    getIdType,
     mappingColumnToField,
     getStoreFields,
     convertFilterValues,
 } from './security-analysis-result-utils';
 import { useNodeData } from '../../study-container';
-import { SortWay, useAgGridSort } from '../../../hooks/use-aggrid-sort';
+import { useAgGridSort } from '../../../hooks/use-aggrid-sort';
 import { useAggridRowFilter } from '../../../hooks/use-aggrid-row-filter';
 import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
 import { REPORT_TYPES } from '../../utils/report-type';
 import { SecurityAnalysisExportButton } from './security-analysis-export-button';
 import { useSecurityAnalysisColumnsDefs } from './use-security-analysis-column-defs';
 import { mapFieldsToColumnsFilter } from 'components/custom-aggrid/custom-aggrid-header-utils';
-import { setSecurityAnalysisResultFilter } from 'redux/actions';
+import {
+    setSecurityAnalysisResultFilter,
+    setSecurityAnalysisResultSort,
+} from 'redux/actions';
 import { SECURITY_ANALYSIS_RESULT_STORE_FIELD } from 'utils/store-filter-fields';
 import { useIntl } from 'react-intl/lib';
 
@@ -103,11 +105,6 @@ export const SecurityAnalysisResultTab: FunctionComponent<
             state.computingStatus[ComputingType.SECURITY_ANALYSIS]
     );
 
-    const { onSortChanged, sortConfig, initSort } = useAgGridSort({
-        colId: getIdType(tabIndex, nmkType),
-        sort: SortWay.ASC,
-    });
-
     const resultType = useMemo(() => {
         if (tabIndex === N_RESULTS_TAB_INDEX) {
             return RESULT_TYPE.N;
@@ -118,6 +115,17 @@ export const SecurityAnalysisResultTab: FunctionComponent<
         }
     }, [tabIndex, nmkType]);
 
+    const sortConfigType = useSelector(
+        (state) => state.securityAnalysisResultSort[getStoreFields(tabIndex)]
+    );
+
+    console.log('test sort config : ', getStoreFields(tabIndex), sortConfigType);
+    const { onSortChanged, sortConfig, initSort } = useAgGridSort(
+        sortConfigType,
+        setSecurityAnalysisResultSort,
+        getStoreFields(tabIndex)
+    );
+
     const memoizedSetPageCallback = useCallback(() => {
         setPage(0);
     }, []);
@@ -191,17 +199,14 @@ export const SecurityAnalysisResultTab: FunctionComponent<
         null
     );
 
-    const resetResultStates = useCallback(
-        (defaultSortColKey: string) => {
-            setResult(null);
-            setCount(0);
-            setPage(0);
-            if (initSort) {
-                initSort(defaultSortColKey);
-            }
-        },
-        [initSort, setResult]
-    );
+    const resetResultStates = useCallback(() => {
+        setResult(null);
+        setCount(0);
+        setPage(0);
+        if (initSort) {
+            initSort(sortConfigType);
+        }
+    }, [initSort, setResult, sortConfigType]);
 
     const handleChangeNmkType = (event: SelectChangeEvent) => {
         const newNmkType = event.target.value;
@@ -218,7 +223,7 @@ export const SecurityAnalysisResultTab: FunctionComponent<
     };
 
     const handleTabChange = (event: SyntheticEvent, newTabIndex: number) => {
-        resetResultStates(getIdType(newTabIndex, nmkType));
+        resetResultStates();
         setTabIndex(newTabIndex);
     };
 

diff --git a/src/components/results/sensitivity-analysis/sensitivity-analysis-result-tab.jsx b/src/components/results/sensitivity-analysis/sensitivity-analysis-result-tab.jsx
@@ -19,7 +19,7 @@ import {
     SENSITIVITY_IN_DELTA_A,
     SENSITIVITY_IN_DELTA_MW,
 } from './sensitivity-analysis-result-utils';
-import { SortWay, useAgGridSort } from '../../../hooks/use-aggrid-sort';
+import { useAgGridSort } from '../../../hooks/use-aggrid-sort';
 import { useSelector } from 'react-redux';
 import { ComputingType } from '../../computing-status/computing-type';
 import { ComputationReportViewer } from '../common/computation-report-viewer';
@@ -35,6 +35,7 @@ import { useIntl } from 'react-intl';
 import { ExportButton } from '../../utils/export-button';
 import { setSensitivityAnalysisResultFilter } from 'redux/actions';
 import { SENSITIVITY_ANALYSIS_RESULT_STORE_FIELD } from 'utils/store-filter-fields';
+import { setSensitivityAnalysisResultSort } from '../../../redux/actions.js';
 
 export const SensitivityResultTabs = [
     { id: 'N', label: 'N' },
@@ -65,15 +66,21 @@ const SensitivityAnalysisResultTab = ({ studyUuid, nodeUuid }) => {
         filterStoreAction: setSensitivityAnalysisResultFilter,
     });
 
-    // Add default sort on sensitivity col
-    const defaultSortColumn = nOrNkIndex ? 'valueAfter' : 'value';
-    const defaultSortOrder = SortWay.ASC;
-    const { onSortChanged, sortConfig, initSort } = useAgGridSort({
-        colId: defaultSortColumn,
-        sort: defaultSortOrder,
-    });
-    const initTable = (nOrNkIndex) => {
-        initSort(nOrNkIndex ? 'valueAfter' : 'value');
+    const sortConfigType = useSelector(
+        (state) =>
+            state.sensitivityAnalysisResultSort[
+                SensitivityResultTabs[nOrNkIndex].id
+            ]
+    );
+
+    const { onSortChanged, sortConfig, initSort } = useAgGridSort(
+        sortConfigType,
+        setSensitivityAnalysisResultSort,
+        SensitivityResultTabs[nOrNkIndex].id
+    );
+
+    const initTable = () => {
+        initSort(sortConfigType);
 
         /* set page to 0 to avoid being in out of range (0 to 0, but page is > 0)
            for the page prop of MUI TablePagination if was not on the first page
@@ -84,12 +91,12 @@ const SensitivityAnalysisResultTab = ({ studyUuid, nodeUuid }) => {
     };
 
     const handleSensiKindChange = (newSensiKind) => {
-        initTable(nOrNkIndex);
+        initTable();
         setSensiKind(newSensiKind);
     };
 
     const handleSensiNOrNkIndexChange = (event, newNOrNKIndex) => {
-        initTable(newNOrNKIndex);
+        initTable();
         setNOrNkIndex(newNOrNKIndex);
     };
 

diff --git a/src/components/results/shortcircuit/shortcircuit-analysis-result.tsx b/src/components/results/shortcircuit/shortcircuit-analysis-result.tsx
@@ -36,13 +36,16 @@ import { useIntl } from 'react-intl';
 import { Box, LinearProgress } from '@mui/material';
 import { useOpenLoaderShortWait } from '../../dialogs/commons/handle-loader';
 import { RESULTS_LOADING_DELAY } from '../../network/constants';
-import { SortWay, useAgGridSort } from '../../../hooks/use-aggrid-sort';
+import { useAgGridSort } from '../../../hooks/use-aggrid-sort';
 import {
     FilterEnumsType,
     useAggridRowFilter,
 } from '../../../hooks/use-aggrid-row-filter';
 import { GridReadyEvent } from 'ag-grid-community';
-import { setShortcircuitAnalysisResultFilter } from 'redux/actions';
+import {
+    setShortcircuitAnalysisResultFilter,
+    setShortcircuitAnalysisResultSort,
+} from 'redux/actions';
 import { mapFieldsToColumnsFilter } from 'components/custom-aggrid/custom-aggrid-header-utils';
 import { SHORTCIRCUIT_ANALYSIS_RESULT_STORE_FIELD } from 'utils/store-filter-fields';
 import { fetchAvailableFilterEnumValues } from '../../../services/study';
@@ -92,16 +95,16 @@ export const ShortCircuitAnalysisResult: FunctionComponent<
         ? FROM_COLUMN_TO_FIELD_ONE_BUS
         : FROM_COLUMN_TO_FIELD;
 
-    const defaultSortKey = isOneBusShortCircuitAnalysisType
-        ? 'current'
-        : 'elementId';
-    const defaultSortWay = isOneBusShortCircuitAnalysisType
-        ? SortWay.DESC
-        : SortWay.ASC;
-    const { onSortChanged, sortConfig } = useAgGridSort({
-        colId: defaultSortKey,
-        sort: defaultSortWay,
-    });
+    const sortConfigType = useSelector(
+        (state) =>
+            state.shortcircuitAnalysisResultSort[mappingTabs(analysisType)]
+    );
+
+    const { onSortChanged, sortConfig } = useAgGridSort(
+        sortConfigType,
+        setShortcircuitAnalysisResultSort,
+        mappingTabs(analysisType)
+    );
     const memoizedSetPageCallback = useCallback(() => {
         setPage(0);
     }, []);

diff --git a/src/components/spreadsheet/table-wrapper.jsx b/src/components/spreadsheet/table-wrapper.jsx
@@ -84,13 +84,13 @@ import {
     SHUNT_COMPENSATOR_TYPES,
 } from 'components/network/constants';
 import ComputingType from 'components/computing-status/computing-type';
-import { SortWay } from 'hooks/use-aggrid-sort';
 import { makeAgGridCustomHeaderColumn } from 'components/custom-aggrid/custom-aggrid-header-utils';
 import { useAggridLocalRowFilter } from 'hooks/use-aggrid-local-row-filter';
 import { useAgGridLocalSort } from 'hooks/use-aggrid-local-sort';
 import { setSpreadsheetFilter } from 'redux/actions';
 import { useLocalizedCountries } from 'components/utils/localized-countries-hook';
 import { SPREADSHEET_STORE_FIELD } from 'utils/store-filter-fields';
+import { setSpreadSheetSort } from '../../redux/actions.js';
 
 const useEditBuffer = () => {
     //the data is feeded and read during the edition validation process so we don't need to rerender after a call to one of available methods thus useRef is more suited
@@ -218,19 +218,17 @@ const TableWrapper = (props) => {
         );
     }, [props.disabled, selectedColumnsNames, tabIndex]);
 
-    const defaultSortColKey = useMemo(() => {
-        const defaultSortCol = columnData.find(
-            (column) => column.isDefaultSort
-        );
-        return defaultSortCol?.field;
-    }, [columnData]);
+    const sortConfigType = useSelector(
+        (state) =>
+            state.spreadsheetSort[TABLES_DEFINITION_INDEXES.get(tabIndex).type]
+    );
 
+    console.log('test sortConfigType : ', sortConfigType);
     const { onSortChanged, sortConfig, initSort } = useAgGridLocalSort(
         gridRef,
-        {
-            colId: defaultSortColKey,
-            sort: SortWay.ASC,
-        }
+        sortConfigType,
+        setSpreadSheetSort,
+        TABLES_DEFINITION_INDEXES.get(tabIndex).type
     );
 
     const { updateFilter, filterSelector } = useAggridLocalRowFilter(gridRef, {
@@ -388,6 +386,7 @@ const TableWrapper = (props) => {
                 };
             }
 
+            console.log('test useCallback sortConfig', sortConfig);
             return makeAgGridCustomHeaderColumn({
                 headerName: column.headerName,
                 field: column.field,
@@ -430,8 +429,8 @@ const TableWrapper = (props) => {
     }, [errorMessage, snackError]);
 
     useEffect(() => {
-        initSort(defaultSortColKey);
-    }, [tabIndex, defaultSortColKey, initSort]);
+        initSort(sortConfigType);
+    }, [tabIndex, sortConfigType, initSort]);
 
     const getRows = useCallback(() => {
         if (props.disabled || !equipments) {

diff --git a/src/hooks/use-aggrid-local-sort.ts b/src/hooks/use-aggrid-local-sort.ts
@@ -12,13 +12,19 @@ import {
     SortPropsType,
     useAgGridSort,
 } from './use-aggrid-sort';
+import { AnyAction } from 'redux';
 
 export const useAgGridLocalSort = (
     gridRef: React.MutableRefObject<AgGridReact | null>,
-    initSortConfig: SortConfigType
+    initSortConfig: SortConfigType,
+    sortAction?: (colId: string, sortWay: string, tab: string) => AnyAction,
+    tab?: string
 ): SortPropsType => {
-    const { onSortChanged, sortConfig, initSort } =
-        useAgGridSort(initSortConfig);
+    const { onSortChanged, sortConfig, initSort } = useAgGridSort(
+        initSortConfig,
+        sortAction,
+        tab
+    );
 
     const setSortInAgGrid = useCallback(
         (sortConfig: SortConfigType[]) => {