Improve datagrid performance

examples/example-datagrid/src/index.ts

@@ -30,12 +30,30 @@ import { getKeyboardLayout } from '@lumino/keyboard';
 import '../style/index.css';
 
 class MergedCellModel extends DataModel {
+  constructor() {
+    super();
+
+    // Initializing the body groups
+    for (
+      let r = 0, c = 0;
+      r < this.rowCount('body') && c < this.columnCount('body');
+      r += 3, c += 3
+    ) {
+      this.bodyGroups.push({ r1: r, c1: c, r2: r + 2, c2: c + 2 });
+    }
+
+    // Initializing the row-header groups
+    for (let r = 0; r < this.rowCount('body'); r += 2) {
+      this.rowHeaderGroups.push({ r1: r, c1: 0, r2: r + 1, c2: 1 });
+    }
+  }
+
   rowCount(region: DataModel.RowRegion): number {
-    return region === 'body' ? 20 : 3;
+    return region === 'body' ? 500 : 3;
   }
 
   columnCount(region: DataModel.ColumnRegion): number {
-    return region === 'body' ? 6 : 3;
+    return region === 'body' ? 500 : 3;
   }
 
   data(region: DataModel.CellRegion, row: number, column: number): any {
@@ -53,11 +71,11 @@ class MergedCellModel extends DataModel {
 
   groupCount(region: DataModel.RowRegion): number {
     if (region === 'body') {
-      return 3;
+      return this.bodyGroups.length;
     } else if (region === 'column-header') {
       return 1;
     } else if (region === 'row-header') {
-      return 2;
+      return this.rowHeaderGroups.length;
     } else if (region === 'corner-header') {
       return 1;
     }
@@ -66,22 +84,15 @@ class MergedCellModel extends DataModel {
 
   group(region: DataModel.CellRegion, groupIndex: number): CellGroup | null {
     if (region === 'body') {
-      return [
-        { r1: 1, c1: 1, r2: 2, c2: 2 },
-        { r1: 5, c1: 1, r2: 5, c2: 2 },
-        { r1: 3, c1: 5, r2: 4, c2: 5 }
-      ][groupIndex];
+      return this.bodyGroups[groupIndex];
     }
 
     if (region === 'column-header') {
       return [{ r1: 0, c1: 4, r2: 1, c2: 4 }][groupIndex];
     }
 
     if (region === 'row-header') {
-      return [
-        { r1: 0, c1: 0, r2: 1, c2: 1 },
-        { r1: 4, c1: 0, r2: 5, c2: 0 }
-      ][groupIndex];
+      return this.rowHeaderGroups[groupIndex];
     }
 
     if (region === 'corner-header') {
@@ -90,6 +101,9 @@ class MergedCellModel extends DataModel {
 
     return null;
   }
+
+  rowHeaderGroups: CellGroup[] = [];
+  bodyGroups: CellGroup[] = [];
 }
 
 class LargeDataModel extends DataModel {

packages/datagrid/src/cellgroup.ts

@@ -4,7 +4,6 @@
  */
 
 import { DataModel } from './datamodel';
-import { SectionList } from './sectionlist';
 
 /**
  * An interface describing a merged cell group.
@@ -24,106 +23,6 @@ export interface CellGroup {
  * A collection of helper functions relating to merged cell groups
  */
 export namespace CellGroup {
-  export function areCellsMerged(
-    dataModel: DataModel,
-    rgn: DataModel.CellRegion,
-    cell1: number[],
-    cell2: number[]
-  ): boolean {
-    const numGroups = dataModel.groupCount(rgn);
-    const [row1, column1] = cell1;
-    const [row2, column2] = cell2;
-
-    for (let i = 0; i < numGroups; i++) {
-      const group = dataModel.group(rgn, i)!;
-      if (
-        row1 >= group.r1 &&
-        row1 <= group.r2 &&
-        column1 >= group.c1 &&
-        column1 <= group.c2 &&
-        row2 >= group.r1 &&
-        row2 <= group.r2 &&
-        column2 >= group.c1 &&
-        column2 <= group.c2
-      ) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  /**
-   * Calculates the cell boundary offsets needed for
-   * a row or column at the given index by taking
-   * into account merged cell groups in the region.
-   * @param dataModel
-   * @param regions
-   * @param axis
-   * @param sectionList
-   * @param index
-   */
-  export function calculateMergeOffsets(
-    dataModel: DataModel,
-    regions: DataModel.CellRegion[],
-    axis: 'row' | 'column',
-    sectionList: SectionList,
-    index: number
-  ): [number, number, CellGroup] {
-    let mergeStartOffset = 0;
-    let mergeEndOffset = 0;
-    let mergedCellGroups: CellGroup[] = [];
-
-    for (const region of regions) {
-      mergedCellGroups = mergedCellGroups.concat(
-        getCellGroupsAtRegion(dataModel, region)
-      );
-    }
-
-    let groupsAtAxis: CellGroup[] = [];
-
-    if (axis === 'row') {
-      for (const region of regions) {
-        groupsAtAxis = groupsAtAxis.concat(
-          getCellGroupsAtRow(dataModel, region, index)
-        );
-      }
-    } else {
-      for (const region of regions) {
-        groupsAtAxis = groupsAtAxis.concat(
-          getCellGroupsAtColumn(dataModel, region, index)
-        );
-      }
-    }
-
-    if (groupsAtAxis.length === 0) {
-      return [0, 0, { r1: -1, r2: -1, c1: -1, c2: -1 }];
-    }
-
-    let joinedGroup = groupsAtAxis[0];
-
-    for (let g = 0; g < mergedCellGroups.length; g++) {
-      const group = mergedCellGroups[g];
-      if (areCellGroupsIntersectingAtAxis(joinedGroup, group, axis)) {
-        joinedGroup = joinCellGroups([group, joinedGroup]);
-        mergedCellGroups.splice(g, 1);
-        g = 0;
-      }
-    }
-
-    let minRow = joinedGroup.r1;
-    let maxRow = joinedGroup.r2;
-
-    for (let r = index - 1; r >= minRow; r--) {
-      mergeStartOffset += sectionList.sizeOf(r);
-    }
-
-    for (let r = index + 1; r <= maxRow; r++) {
-      mergeEndOffset += sectionList.sizeOf(r);
-    }
-
-    return [mergeStartOffset, mergeEndOffset, joinedGroup];
-  }
-
   /**
    * Checks if two cell-groups are intersecting
    * in the given axis.
@@ -344,29 +243,6 @@ export namespace CellGroup {
     return groupsAtColumn;
   }
 
-  /**
-   * Checks if cell group 1 is above cell group 2.
-   * @param group1 cell group 1.
-   * @param group2 cell group 2.
-   * @returns boolean.
-   */
-  export function isCellGroupAbove(
-    group1: CellGroup,
-    group2: CellGroup
-  ): boolean {
-    return group2.r2 >= group1.r1;
-  }
-
-  /**
-   * Checks if cell group 1 is below cell group 2.
-   */
-  export function isCellGroupBelow(
-    group1: CellGroup,
-    group2: CellGroup
-  ): boolean {
-    return group2.r1 <= group1.r2;
-  }
-
   /**
    * Merges a target cell group with any cell groups
    * it intersects with at a given row or column.