perf(common): improve Select All row selections toggling on large dataset by 9x faster (#1295)

Author: ghiscoding

src/plugins/slick.checkboxselectcolumn.ts

@@ -333,7 +333,7 @@ export class SlickCheckboxSelectColumn<T = any> implements SlickPlugin {
             ids.push(dataviewRowItem[this._dataView.getIdPropertyName() as keyof T] as number | string);
           }
         }
-        this._dataView.setSelectedIds(ids, { isRowBeingAdded: isAllSelected });
+        this._dataView.setSelectedIds(ids, { isRowBeingAdded: isAllSelected, shouldTriggerEvent: false, applyRowSelectionToGrid: false });
       }
       this._grid.setSelectedRows(rows, caller);
       e.stopPropagation();
@@ -460,4 +460,3 @@ if (IIFE_ONLY && window.Slick) {
     }
   });
 }
-

src/slick.dataview.ts

@@ -120,6 +120,7 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
   protected toggledGroupsByLevel: any[] = [];
   protected groupingDelimiter = ':|:';
   protected selectedRowIds: DataIdType[] = [];
+  protected pendingSelectedFilteredIds?: { ids: DataIdType[]; selectedRowIds: DataIdType[] };
   protected preSelectedRowIdsChangeFn?: (args?: any) => void;
 
   protected pagesize = 0;
@@ -1285,8 +1286,21 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
       if (rowIds === false) {
         this.selectedRowIds = [];
       } else {
-        if (this.selectedRowIds!.sort().join(',') !== rowIds.sort().join(',')) {
-          this.selectedRowIds = rowIds;
+        const sortedRowIds = rowIds.every((id, index) => index === 0 || `${rowIds[index - 1]}` <= `${id}`) ? rowIds : rowIds.slice().sort();
+        const sortedSelectedRowIds = this.selectedRowIds!.every(
+          (id, index) => index === 0 || `${this.selectedRowIds![index - 1]}` <= `${id}`
+        )
+          ? this.selectedRowIds
+          : this.selectedRowIds!.slice().sort();
+        let selectedRowIdsChanged = this.selectedRowIds!.length !== sortedRowIds.length;
+        if (!selectedRowIdsChanged) {
+          const selectedRowIdsSet = new Set(this.selectedRowIds);
+          selectedRowIdsChanged = sortedRowIds.some((id) => !selectedRowIdsSet.has(id));
+        }
+        if (selectedRowIdsChanged) {
+          this.selectedRowIds = sortedRowIds;
+        } else if (sortedSelectedRowIds !== this.selectedRowIds) {
+          this.selectedRowIds = sortedSelectedRowIds;
         }
       }
     };
@@ -1313,7 +1327,7 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
       }
     };
 
-    grid.onSelectedRowsChanged.subscribe((_e: SlickEventData_, args: { rows: number[]; }) => {
+    grid.onSelectedRowsChanged.subscribe((_e: SlickEventData_, args: { rows: number[]; caller?: string; }) => {
       if (!inHandler) {
         const newSelectedRowIds = this.mapRowsToIds(args.rows);
         const selectedRowsChangedArgs = {
@@ -1324,9 +1338,16 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
           dataView: this
         };
         this.preSelectedRowIdsChangeFn!(selectedRowsChangedArgs);
+        const isBulkSelection = args.caller === 'click.selectAll' || args.caller === 'click.unselectAll';
+        const pendingSelectedFilteredIds = this.pendingSelectedFilteredIds;
+        const filteredIds =
+          isBulkSelection && pendingSelectedFilteredIds?.selectedRowIds === this.selectedRowIds
+            ? pendingSelectedFilteredIds.ids
+            : (this.getAllSelectedFilteredIds() as DataIdType[]);
+        this.pendingSelectedFilteredIds = undefined;
         this.onSelectedRowIdsChanged.notify(Object.assign(selectedRowsChangedArgs, {
           selectedRowIds: this.selectedRowIds,
-          filteredIds: this.getAllSelectedFilteredIds() as DataIdType[],
+          filteredIds,
         }), new SlickEventData(), this);
       }
     });
@@ -1413,6 +1434,10 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
     };
     this.preSelectedRowIdsChangeFn?.(selectedRowsChangedArgs);
 
+    if (shouldTriggerEvent === false && applyRowSelectionToGrid === false) {
+      this.pendingSelectedFilteredIds = { ids: isRowBeingAdded ? selectedIds.slice() : [], selectedRowIds: this.selectedRowIds };
+    }
+
     if (shouldTriggerEvent !== false) {
       this.onSelectedRowIdsChanged.notify(Object.assign(selectedRowsChangedArgs, {
         selectedRowIds: this.selectedRowIds,

src/slick.grid.ts

@@ -4217,7 +4217,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       throw new Error('SlickGrid Selection model is not set');
     }
     if (this && this.getEditorLock && !this.getEditorLock()?.isActive()) {
-      this.selectionModel.setSelectedRanges(this.rowsToRanges(rows), caller || 'SlickGrid.setSelectedRows');
+      this.selectionModel.setSelectedRanges(this.rowsToRanges(rows, caller === 'click.selectAll'), caller || 'SlickGrid.setSelectedRows');
     }
   }
 
@@ -4288,7 +4288,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   protected handleSelectedRangesChanged(e: SlickEventData_, ranges: SlickRange_[]) {
     const ne = e.getNativeEvent<CustomEvent>();
     const selectionMode = ne?.detail?.selectionMode ?? '';
+    const caller = ne?.detail?.caller ?? 'click';
+    const isBulkSelection = caller === 'click.selectAll' || caller === 'click.unselectAll';
     let addDragHandle = !!ne?.detail?.addDragHandle;
+    const selectedCellCssClass = this._options.selectedCellCssClass || '';
     const selectionType = this.getSelectionModel()?.getOptions()?.selectionType;
     const showDragHandle = this.getDragHandleVisibility();
     addDragHandle = selectionType === 'cell' || selectionType === 'mixed';
@@ -4336,15 +4339,21 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
     this.selectedRows = [];
     const hash: CssStyleHash = Object.create(null);
+    const selectedRowsSet = ranges.length > 1 ? new Set<number>() : undefined;
+    let rangesAreOrdered = true;
     for (let i = 0; i < ranges.length; i++) {
+      if (i > 0 && ranges[i - 1].toRow >= ranges[i].fromRow) {
+        rangesAreOrdered = false;
+      }
       for (let j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
-        if (!hash[j]) {  // prevent duplicates
+        if (!selectedRowsSet || !selectedRowsSet.has(j)) {
+          selectedRowsSet?.add(j);
           this.selectedRows.push(j);
-          hash[j] = Object.create(null);
         }
+        const rowHash = this.rowsCache[j] ? (hash[j] ??= Object.create(null)) : undefined;
         for (let k = ranges[i].fromCell; k <= ranges[i].toCell; k++) {
-          if (this.canCellBeSelected(j, k)) {
-            hash[j][this.columns[k].id] = this._options.selectedCellCssClass;
+          if (rowHash && this.canCellBeSelected(j, k)) {
+            rowHash[this.columns[k].id] = selectedCellCssClass;
           }
         }
       }
@@ -4356,25 +4365,32 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       this.selectionRightCell = activeRange.toCell;
     }
 
-    this.setCellCssStyles(this._options.selectedCellCssClass || '', hash);
+    if (!isBulkSelection || !rangesAreOrdered) {
+      // Preserve the legacy default sort order (numeric values are compared as strings).
+      this.selectedRows.sort();
+    }
+
+    this.setCellCssStyles(selectedCellCssClass, hash);
 
     if (this.selectionBottomRow >= 0 && this.selectionRightCell >= 0 && addDragHandle && showDragHandle !== false) {
       const lowerRightCell = this.getCellNode(this.selectionBottomRow, this.selectionRightCell)
       this.dragReplaceEl.createEl(lowerRightCell, showDragHandle);
     }
 
-    // check if the selected rows have changed (index order isn't important, so we'll sort them both before comparing them)
-    if (!this.arrayEquals(previousSelectedRows.sort(), this.selectedRows.sort())) {
-      const caller = ne?.detail?.caller ?? 'click';
-      // Use Set for faster performance
-      const selectedRowsSet = new Set(this.getSelectedRows());
+    let selectedRowsChanged = previousSelectedRows.length !== this.selectedRows.length;
+    if (!selectedRowsChanged) {
       const previousSelectedRowsSet = new Set(previousSelectedRows);
-
-      const newSelectedAdditions = Array.from(selectedRowsSet).filter(i => !previousSelectedRowsSet.has(i));
-      const newSelectedDeletions = Array.from(previousSelectedRowsSet).filter(i => !selectedRowsSet.has(i));
+      selectedRowsChanged = this.selectedRows.some((row) => !previousSelectedRowsSet.has(row));
+    }
+    if (selectedRowsChanged) {
+      const selectedRows = this.getSelectedRows();
+      const selectedRowsSet = selectedRows.length ? new Set(selectedRows) : undefined;
+      const previousSelectedRowsSet = previousSelectedRows.length ? new Set(previousSelectedRows) : undefined;
+      const newSelectedAdditions = previousSelectedRowsSet ? selectedRows.filter((i) => !previousSelectedRowsSet.has(i)) : selectedRows;
+      const newSelectedDeletions = selectedRowsSet ? previousSelectedRows.filter((i) => !selectedRowsSet.has(i)) : previousSelectedRows;
 
       this.trigger(this.onSelectedRowsChanged, {
-        rows: this.getSelectedRows(),
+        rows: selectedRows,
         previousSelectedRows,
         caller,
         changedSelectedRows: newSelectedAdditions,
@@ -5821,6 +5837,9 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     if (cellCssClasses) {
       cellCss += ` ${cellCssClasses}`;
     }
+    if (this.isCellSelected(row, cell) && !cellCssClasses?.includes(this._options.selectedCellCssClass || '')) {
+      cellCss += ` ${this._options.selectedCellCssClass}`;
+    }
 
     let value: any = null;
     let formatterResult: FormatterResultWithHtml | FormatterResultWithText | HTMLElement | DocumentFragment | string = '';
@@ -8103,6 +8122,14 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     return this.cellCssClasses[key];
   }
 
+  protected isCellSelected(row: number, cell: number): boolean {
+    return (
+      !!this._options.selectedCellCssClass &&
+      this.selectedRanges.some((range) => range.contains(row, cell)) &&
+      this.canCellBeSelected(row, cell)
+    );
+  }
+
   /**
    * Flashes the cell twice by toggling the CSS class 4 times.
    * @param {Number} row A row index.
@@ -8848,11 +8875,29 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
    * @param {number[]} rows - The row indices.
    * @returns {SlickRange_[]} An array of ranges covering the specified rows.
    */
-  protected rowsToRanges(rows: number[]) {
-    const ranges: SlickRange_[] = [];
+  protected rowsToRanges(rows: number[], compactRows = false) {
     const lastCell = this.columns.length - 1;
-    for (let i = 0; i < rows.length; i++) {
-      ranges.push(new SlickRange(rows[i], 0, rows[i], lastCell));
+    const ranges: SlickRange_[] = [];
+    if (!compactRows) {
+      rows.forEach((row) => ranges.push(new SlickRange(row, 0, row, lastCell)));
+      return ranges;
+    }
+
+    let rangeStart = rows[0];
+    let previousRow = rangeStart;
+    for (let i = 1; i < rows.length; i++) {
+      const row = rows[i];
+      if (row <= previousRow) {
+        return rows.map((row) => new SlickRange(row, 0, row, lastCell));
+      }
+      if (row !== previousRow + 1) {
+        ranges.push(new SlickRange(rangeStart, 0, previousRow, lastCell));
+        rangeStart = row;
+      }
+      previousRow = row;
+    }
+    if (rangeStart !== undefined) {
+      ranges.push(new SlickRange(rangeStart, 0, previousRow, lastCell));
     }
     return ranges;
   }