Skip to content

Commit

Permalink
Merge pull request #394 from martinRenou/explore_datagrid_perf
Browse files Browse the repository at this point in the history 
Improve datagrid performance
  • Loading branch information
@afshin
afshin committed Sep 22, 2022
2 parents 7706898 + 479075b commit ebaefcc
Show file tree
Hide file tree
Showing 4 changed files with 530 additions and 437 deletions.
40 changes: 27 additions & 13 deletions examples/example-datagrid/src/index.ts
View file
Expand Up @@ -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 {
Expand All @@ -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;
}
Expand All @@ -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') {
Expand All @@ -90,6 +101,9 @@ class MergedCellModel extends DataModel {

return null;
}

rowHeaderGroups: CellGroup[] = [];
bodyGroups: CellGroup[] = [];
}

class LargeDataModel extends DataModel {
Expand Down
124 changes: 0 additions & 124 deletions packages/datagrid/src/cellgroup.ts
View file
Expand Up @@ -4,7 +4,6 @@
*/

import { DataModel } from './datamodel';
import { SectionList } from './sectionlist';

/**
* An interface describing a merged cell group.
Expand All @@ -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.
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit ebaefcc

Please sign in to comment.