perf: don't invalidate grid rows more than once (#1265)

* perf: don't invalidate grid rows more than once
ghiscoding · Sep 14, 2024 · 740995c · 740995c
1 parent ec2a86e
commit 740995c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 45 deletions.
diff --git a/packages/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts b/packages/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts
@@ -762,12 +762,15 @@ export class AureliaSlickgridCustomElement {
         });
 
         if (gridOptions?.enableFiltering && !gridOptions.enableRowDetailView) {
-          this._eventHandler.subscribe(dataView.onRowsChanged, (_e, args) => {
+          this._eventHandler.subscribe(dataView.onRowsChanged, (_e, { calledOnRowCountChanged, rows }) => {
             // filtering data with local dataset will not always show correctly unless we call this updateRow/render
             // also don't use "invalidateRows" since it destroys the entire row and as bad user experience when updating a row
             // see commit: https://github.com/ghiscoding/aurelia-slickgrid/commit/8c503a4d45fba11cbd8d8cc467fae8d177cc4f60
-            if (Array.isArray(args?.rows)) {
-              args.rows.forEach((row: number) => grid.updateRow(row));
+            if (!calledOnRowCountChanged && Array.isArray(rows)) {
+              const ranges = grid.getRenderedRange();
+              rows
+                .filter(row => row >= ranges.top && row <= ranges.bottom)
+                .forEach((row: number) => grid.updateRow(row));
               grid.render();
             }
           });

diff --git a/packages/demo/src/examples/slickgrid/example13.ts b/packages/demo/src/examples/slickgrid/example13.ts
@@ -258,6 +258,8 @@ export class Example13 {
   }
 
   groupByDuration() {
+    // you need to manually add the sort icon(s) in UI
+    this.aureliaGrid.filterService.setSortColumnIcons([{ columnId: 'duration', sortAsc: true }]);
     this.dataviewObj.setGrouping({
       getter: 'duration',
       formatter: (g) => `Duration: ${g.value} <span style="color:green">(${g.count} items)</span>`,
@@ -271,9 +273,6 @@ export class Example13 {
       aggregateCollapsed: false,
       lazyTotalsCalculation: true
     } as Grouping);
-
-    // you need to manually add the sort icon(s) in UI
-    this.aureliaGrid.filterService.setSortColumnIcons([{ columnId: 'duration', sortAsc: true }]);
     this.gridObj.invalidate(); // invalidate all rows and re-render
   }
 
@@ -296,7 +295,9 @@ export class Example13 {
   }
 
   groupByDurationEffortDriven() {
-    this.aureliaGrid.filterService.setSortColumnIcons([]);
+    // you need to manually add the sort icon(s) in UI
+    const sortColumns = [{ columnId: 'duration', sortAsc: true }, { columnId: 'effortDriven', sortAsc: true }];
+    this.aureliaGrid.filterService.setSortColumnIcons(sortColumns);
     this.dataviewObj.setGrouping([
       {
         getter: 'duration',
@@ -319,15 +320,17 @@ export class Example13 {
         lazyTotalsCalculation: true
       }
     ] as Grouping[]);
-
-    // you need to manually add the sort icon(s) in UI
-    const sortColumns = [{ columnId: 'duration', sortAsc: true }, { columnId: 'effortDriven', sortAsc: true }];
-    this.aureliaGrid.filterService.setSortColumnIcons(sortColumns);
     this.gridObj.invalidate(); // invalidate all rows and re-render
   }
 
   groupByDurationEffortDrivenPercent() {
-    this.aureliaGrid.filterService.setSortColumnIcons([]);
+    // you need to manually add the sort icon(s) in UI
+    const sortColumns = [
+      { columnId: 'duration', sortAsc: true },
+      { columnId: 'effortDriven', sortAsc: true },
+      { columnId: 'percentComplete', sortAsc: true }
+    ];
+    this.aureliaGrid.filterService.setSortColumnIcons(sortColumns);
     this.dataviewObj.setGrouping([
       {
         getter: 'duration',
@@ -359,14 +362,6 @@ export class Example13 {
         lazyTotalsCalculation: true
       }
     ] as Grouping[]);
-
-    // you need to manually add the sort icon(s) in UI
-    const sortColumns = [
-      { columnId: 'duration', sortAsc: true },
-      { columnId: 'effortDriven', sortAsc: true },
-      { columnId: 'percentComplete', sortAsc: true }
-    ];
-    this.aureliaGrid.filterService.setSortColumnIcons(sortColumns);
     this.gridObj.invalidate(); // invalidate all rows and re-render
   }
 }
diff --git a/packages/demo/src/examples/slickgrid/example18.ts b/packages/demo/src/examples/slickgrid/example18.ts
@@ -295,11 +295,11 @@ export class Example18 {
     this.selectedGroupingFields = [...this.selectedGroupingFields]; // force dirty checking
   }
 
-  clearGrouping() {
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
-      this.draggableGroupingPlugin.clearDroppedGroups();
+  clearGrouping(invalidateRows = true) {
+    this.draggableGroupingPlugin?.clearDroppedGroups();
+    if (invalidateRows) {
+      this.gridObj?.invalidate(); // invalidate all rows and re-render
     }
-    this.gridObj.invalidate(); // invalidate all rows and re-render
   }
 
   collapseAllGroups() {
@@ -325,36 +325,27 @@ export class Example18 {
     });
   }
 
-  groupByDuration() {
-    this.clearGrouping();
+  groupByDurationOrderByCount(sortedByCount = false) {
+    this.durationOrderByCount = sortedByCount;
+    this.clearGrouping(false);
+
     if (this.draggableGroupingPlugin?.setDroppedGroups) {
       this.showPreHeader();
       this.draggableGroupingPlugin.setDroppedGroups('duration');
-      this.gridObj.invalidate(); // invalidate all rows and re-render
-    }
-  }
-
-  groupByDurationOrderByCount(sortedByCount = false) {
-    this.durationOrderByCount = sortedByCount;
-    this.clearGrouping();
-    this.groupByDuration();
 
-    // you need to manually add the sort icon(s) in UI
-    const sortColumns = sortedByCount ? [] : [{ columnId: 'duration', sortAsc: true }];
-    this.aureliaGrid.filterService.setSortColumnIcons(sortColumns);
-    this.gridObj.invalidate(); // invalidate all rows and re-render
+      // you need to manually add the sort icon(s) in UI
+      const sortColumns = sortedByCount ? [] : [{ columnId: 'duration', sortAsc: true }];
+      this.gridObj?.setSortColumns(sortColumns);
+      this.gridObj?.invalidate(); // invalidate all rows and re-render
+    }
   }
 
   groupByDurationEffortDriven() {
-    this.clearGrouping();
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
+    this.clearGrouping(false);
+    if (this.draggableGroupingPlugin?.setDroppedGroups) {
       this.showPreHeader();
       this.draggableGroupingPlugin.setDroppedGroups(['duration', 'effortDriven']);
-      this.gridObj.invalidate(); // invalidate all rows and re-render
-
-      // you need to manually add the sort icon(s) in UI
-      const sortColumns = [{ columnId: 'duration', sortAsc: true }];
-      this.aureliaGrid.filterService.setSortColumnIcons(sortColumns);
+      this.gridObj?.invalidate(); // invalidate all rows and re-render
     }
   }