[DataGridPremium] Fix aggregation with sorting

packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts

@@ -10,12 +10,13 @@ import {
   gridRenderContextSelector,
   gridVisibleColumnFieldsSelector,
   gridSortModelSelector,
+  gridRowMaximumTreeDepthSelector,
+  gridRowCountSelector,
 } from '@mui/x-data-grid-pro';
 import {
   useGridRegisterPipeProcessor,
   GridStateInitializer,
   GridPipeProcessor,
-  gridPivotActiveSelector,
 } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
@@ -89,126 +90,129 @@ export const useGridAggregation = (
   );
 
   const abortControllerRef = React.useRef<AbortController | null>(null);
-  const applyAggregation = React.useCallback(
-    (reason?: 'filter' | 'sort') => {
-      // Abort previous if any
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-      const abortController = new AbortController();
-      abortControllerRef.current = abortController;
-
-      const aggregationRules = getAggregationRules(
-        gridColumnLookupSelector(apiRef),
-        gridAggregationModelSelector(apiRef),
-        props.aggregationFunctions,
-        !!props.dataSource,
-      );
-      const aggregatedFields = Object.keys(aggregationRules);
-      const currentAggregationLookup = gridAggregationLookupSelector(apiRef);
-      const needsSorting = shouldApplySorting(aggregationRules, aggregatedFields);
-      if (reason === 'sort' && !needsSorting) {
-        // no need to re-apply aggregation on `sortedRowsSet` if sorting is not needed
-        return;
-      }
+  const applyAggregation = React.useCallback(() => {
+    const rowCount = gridRowCountSelector(apiRef);
+    if (!rowCount) {
+      return;
+    }
+    const aggregationRules = getAggregationRules(
+      gridColumnLookupSelector(apiRef),
+      gridAggregationModelSelector(apiRef),
+      props.aggregationFunctions,
+      !!props.dataSource,
+    );
+    const aggregatedFields = Object.keys(aggregationRules);
+    const currentAggregationLookup = gridAggregationLookupSelector(apiRef);
+
+    // Abort previous if we're proceeding
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
+    const renderContext = gridRenderContextSelector(apiRef);
+    const visibleColumns = gridVisibleColumnFieldsSelector(apiRef);
+
+    const chunks: string[][] = [];
+    const sortFields = gridSortModelSelector(apiRef).map((s) => s.field);
+    const visibleAggregatedFields = visibleColumns
+      .slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex + 1)
+      .filter((field) => aggregatedFields.includes(field));
+    const visibleAggregatedFieldsWithSort = visibleAggregatedFields.concat(
+      sortFields.filter((field) => !visibleAggregatedFields.includes(field)),
+    );
+
+    const hasAggregatedSortedField =
+      gridRowMaximumTreeDepthSelector(apiRef) > 1 &&
+      sortFields.some((field) => aggregationRules[field]);
+    if (visibleAggregatedFields.length > 0) {
+      chunks.push(visibleAggregatedFieldsWithSort);
+    }
+    const otherAggregatedFields = aggregatedFields.filter(
+      (field) => !visibleAggregatedFieldsWithSort.includes(field),
+    );
 
-      const renderContext = gridRenderContextSelector(apiRef);
-      const visibleColumns = gridVisibleColumnFieldsSelector(apiRef);
+    const chunkSize = 20; // columns per chunk
+    for (let i = 0; i < otherAggregatedFields.length; i += chunkSize) {
+      chunks.push(otherAggregatedFields.slice(i, i + chunkSize));
+    }
 
-      const chunks: string[][] = [];
-      const visibleAggregatedFields = visibleColumns
-        .slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex + 1)
-        .filter((field) => aggregatedFields.includes(field));
-      if (visibleAggregatedFields.length > 0) {
-        chunks.push(visibleAggregatedFields);
-      }
-      const otherAggregatedFields = aggregatedFields.filter(
-        (field) => !visibleAggregatedFields.includes(field),
-      );
+    let chunkIndex = 0;
+    const aggregationLookup: GridAggregationLookup = {};
+    let chunkStartTime = performance.now();
+    const timeLimit = 1000 / 120;
 
-      const chunkSize = 20; // columns per chunk
-      for (let i = 0; i < otherAggregatedFields.length; i += chunkSize) {
-        chunks.push(otherAggregatedFields.slice(i, i + chunkSize));
+    const processChunk = () => {
+      if (abortController.signal.aborted) {
+        return;
       }
 
-      let chunkIndex = 0;
-      const aggregationLookup: GridAggregationLookup = {};
-      let chunkStartTime = performance.now();
-      const timeLimit = 1000 / 120;
-
-      const processChunk = () => {
-        if (abortController.signal.aborted) {
-          return;
-        }
+      const currentChunk = chunks[chunkIndex];
+      if (!currentChunk) {
+        abortControllerRef.current = null;
+        return;
+      }
 
-        const currentChunk = chunks[chunkIndex];
-        if (!currentChunk) {
-          const sortModel = gridSortModelSelector(apiRef).map((s) => s.field);
-          const hasAggregatedSorting = sortModel.some((field) => aggregationRules[field]);
-          if (hasAggregatedSorting) {
-            apiRef.current.applySorting();
-          }
-          abortControllerRef.current = null;
-          return;
+      const applySorting = shouldApplySorting(aggregationRules, currentChunk);
+
+      // createAggregationLookup now RETURNS new partial lookup
+      const partialLookup = createAggregationLookup({
+        apiRef,
+        getAggregationPosition: props.getAggregationPosition,
+        aggregatedFields: currentChunk,
+        aggregationRules,
+        aggregationRowsScope: props.aggregationRowsScope,
+        isDataSource: !!props.dataSource,
+        applySorting,
+      });
+
+      for (const key of Object.keys(partialLookup)) {
+        for (const field of Object.keys(partialLookup[key])) {
+          aggregationLookup[key] ??= {};
+          aggregationLookup[key][field] = partialLookup[key][field];
         }
+      }
 
-        const applySorting = shouldApplySorting(aggregationRules, currentChunk);
-
-        // createAggregationLookup now RETURNS new partial lookup
-        const partialLookup = createAggregationLookup({
-          apiRef,
-          getAggregationPosition: props.getAggregationPosition,
-          aggregatedFields: currentChunk,
-          aggregationRules,
-          aggregationRowsScope: props.aggregationRowsScope,
-          isDataSource: !!props.dataSource,
-          applySorting,
-        });
-
-        for (const key of Object.keys(partialLookup)) {
-          for (const field of Object.keys(partialLookup[key])) {
-            aggregationLookup[key] ??= {};
-            aggregationLookup[key][field] = partialLookup[key][field];
-          }
-        }
+      apiRef.current.setState((state) => ({
+        ...state,
+        aggregation: { ...state.aggregation, lookup: { ...aggregationLookup } },
+      }));
 
-        apiRef.current.setState((state) => ({
-          ...state,
-          aggregation: { ...state.aggregation, lookup: { ...aggregationLookup } },
-        }));
+      if (chunkIndex === 0 && hasAggregatedSortedField) {
+        apiRef.current.applySorting();
+      }
 
-        chunkIndex += 1;
+      chunkIndex += 1;
 
-        if (performance.now() - chunkStartTime < timeLimit) {
-          processChunk();
-          return;
-        }
+      if (performance.now() - chunkStartTime < timeLimit) {
+        processChunk();
+        return;
+      }
 
-        setTimeout(() => {
-          chunkStartTime = performance.now();
-          processChunk();
-        }, 0);
-      };
+      setTimeout(() => {
+        chunkStartTime = performance.now();
+        processChunk();
+      }, 0);
+    };
 
-      processChunk();
+    processChunk();
 
-      // processChunk() does nothing if there are no aggregated fields
-      // make sure that the lookup is empty in this case
-      if (aggregatedFields.length === 0 && !isObjectEmpty(currentAggregationLookup)) {
-        apiRef.current.setState((state) => ({
-          ...state,
-          aggregation: { ...state.aggregation, lookup: {} },
-        }));
-      }
-    },
-    [
-      apiRef,
-      props.getAggregationPosition,
-      props.aggregationFunctions,
-      props.aggregationRowsScope,
-      props.dataSource,
-    ],
-  );
+    // processChunk() does nothing if there are no aggregated fields
+    // make sure that the lookup is empty in this case
+    if (aggregatedFields.length === 0 && !isObjectEmpty(currentAggregationLookup)) {
+      apiRef.current.setState((state) => ({
+        ...state,
+        aggregation: { ...state.aggregation, lookup: {} },
+      }));
+    }
+  }, [
+    apiRef,
+    props.getAggregationPosition,
+    props.aggregationFunctions,
+    props.aggregationRowsScope,
+    props.dataSource,
+  ]);
 
   React.useEffect(() => {
     return () => {
@@ -248,7 +252,6 @@ export const useGridAggregation = (
    * EVENTS
    */
   const checkAggregationRulesDiff = React.useCallback(() => {
-    const pivotingActive = gridPivotActiveSelector(apiRef);
     const { rulesOnLastRowHydration, rulesOnLastColumnHydration } =
       apiRef.current.caches.aggregation;
 
@@ -262,10 +265,7 @@ export const useGridAggregation = (
         );
 
     // Re-apply the row hydration to add / remove the aggregation footers
-    if (
-      (!props.dataSource || pivotingActive) &&
-      !areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)
-    ) {
+    if (!props.dataSource && !areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
       apiRef.current.requestPipeProcessorsApplication('hydrateRows');
       deferredApplyAggregation();
     }
@@ -285,7 +285,29 @@ export const useGridAggregation = (
   useGridEvent(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   useGridEvent(apiRef, 'columnsChange', checkAggregationRulesDiff);
   useGridEvent(apiRef, 'filteredRowsSet', deferredApplyAggregation);
-  useGridEvent(apiRef, 'sortedRowsSet', () => deferredApplyAggregation('sort'));
+
+  const lastSortModel = React.useRef(gridSortModelSelector(apiRef));
+  useGridEvent(apiRef, 'sortedRowsSet', () => {
+    const sortModel = gridSortModelSelector(apiRef);
+    if (lastSortModel.current === sortModel) {
+      return;
+    }
+    lastSortModel.current = sortModel;
+
+    const aggregationRules = getAggregationRules(
+      gridColumnLookupSelector(apiRef),
+      gridAggregationModelSelector(apiRef),
+      props.aggregationFunctions,
+      !!props.dataSource,
+    );
+    const aggregatedFields = Object.keys(aggregationRules);
+    const needsSorting = shouldApplySorting(aggregationRules, aggregatedFields);
+    if (!needsSorting) {
+      return;
+    }
+
+    deferredApplyAggregation();
+  });
 
   /**
    * EFFECTS

packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx

@@ -3,6 +3,7 @@ import { lruMemoize } from '@mui/x-internals/lruMemoize';
 import { RefObject } from '@mui/x-internals/types';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
 import { GridEventListener } from '../../../models/events';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -108,6 +109,7 @@ export const useGridFilter = (
   });
 
   const updateFilteredRows = React.useCallback(() => {
+    let didChange = false;
     apiRef.current.setState((state) => {
       const filterModel = gridFilterModelSelector(apiRef);
       const filterState = apiRef.current.getFilterState(filterModel);
@@ -122,12 +124,22 @@ export const useGridFilter = (
 
       const visibleRowsLookupState = getVisibleRowsLookupState(apiRef, newState);
 
+      if (
+        visibleRowsLookupState !== state.visibleRowsLookup &&
+        !(isObjectEmpty(visibleRowsLookupState) && !isObjectEmpty(state.visibleRowsLookup))
+      ) {
+        didChange = true;
+        newState.visibleRowsLookup = visibleRowsLookupState;
+      }
+
       return {
         ...newState,
         visibleRowsLookup: visibleRowsLookupState,
       };
     });
-    apiRef.current.publishEvent('filteredRowsSet');
+    if (didChange) {
+      apiRef.current.publishEvent('filteredRowsSet');
+    }
   }, [apiRef]);
 
   const addColumnMenuItem = React.useCallback<GridPipeProcessor<'columnMenu'>>(

packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
 import { GridEventListener } from '../../../models/events';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -140,6 +141,7 @@ export const useGridSorting = (
    * API METHODS
    */
   const applySorting = React.useCallback<GridSortApi['applySorting']>(() => {
+    let didChange = false;
     apiRef.current.setState((state) => {
       if (props.sortingMode === 'server') {
         logger.debug('Skipping sorting rows as sortingMode = server');
@@ -162,13 +164,23 @@ export const useGridSorting = (
         sortRowList,
       });
 
-      return {
-        ...state,
-        sorting: { ...state.sorting, sortedRows },
-      };
+      if (
+        sortedRows !== state.sorting.sortedRows &&
+        !(isObjectEmpty(sortedRows) && isObjectEmpty(state.sorting.sortedRows))
+      ) {
+        didChange = true;
+        return {
+          ...state,
+          sorting: { ...state.sorting, sortedRows },
+        };
+      }
+
+      return state;
     });
 
-    apiRef.current.publishEvent('sortedRowsSet');
+    if (didChange) {
+      apiRef.current.publishEvent('sortedRowsSet');
+    }
   }, [apiRef, logger, props.sortingMode]);
 
   const setSortModel = React.useCallback<GridSortApi['setSortModel']>(