Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

perf: don't invalidate grid rows more than once #409

Merged
merged 2 commits into from
Sep 14, 2024
Merged

perf: don't invalidate grid rows more than once #409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3846005
perf: don't invalidate grid rows more than once
ghiscoding Sep 14, 2024
f9944ff
chore: decrease number of invalidate rows calls
ghiscoding Sep 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 12 additions & 17 deletions src/examples/slickgrid/Example13.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,8 @@ export default class Example13 extends React.Component<Props, State> {
}

groupByDuration() {
// you need to manually add the sort icon(s) in UI
this.reactGrid.filterService.setSortColumnIcons([{ columnId: 'duration', sortAsc: true }]);
this.dataviewObj.setGrouping({
getter: 'duration',
formatter: (g) => `Duration: ${g.value} <span style="color:green">(${g.count} items)</span>`,
Expand All @@ -310,9 +312,6 @@ export default class Example13 extends React.Component<Props, State> {
aggregateCollapsed: false,
lazyTotalsCalculation: true
} as Grouping);

// you need to manually add the sort icon(s) in UI
this.reactGrid.filterService.setSortColumnIcons([{ columnId: 'duration', sortAsc: true }]);
this.gridObj.invalidate(); // invalidate all rows and re-render
}

Expand All @@ -335,7 +334,9 @@ export default class Example13 extends React.Component<Props, State> {
}

groupByDurationEffortDriven() {
this.reactGrid.filterService.setSortColumnIcons([]);
// you need to manually add the sort icon(s) in UI
const sortColumns = [{ columnId: 'duration', sortAsc: true }, { columnId: 'effortDriven', sortAsc: true }];
this.reactGrid.filterService.setSortColumnIcons(sortColumns);
this.dataviewObj.setGrouping([
{
getter: 'duration',
Expand All @@ -358,15 +359,17 @@ export default class Example13 extends React.Component<Props, State> {
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.reactGrid.filterService.setSortColumnIcons(sortColumns);
this.gridObj.invalidate(); // invalidate all rows and re-render
}

groupByDurationEffortDrivenPercent() {
this.reactGrid.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.reactGrid.filterService.setSortColumnIcons(sortColumns);
this.dataviewObj.setGrouping([
{
getter: 'duration',
Expand Down Expand Up @@ -398,14 +401,6 @@ export default class Example13 extends React.Component<Props, State> {
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.reactGrid.filterService.setSortColumnIcons(sortColumns);
this.gridObj.invalidate(); // invalidate all rows and re-render
}

Expand Down
52 changes: 17 additions & 35 deletions src/examples/slickgrid/Example18.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,11 +354,11 @@ export default class Example18 extends React.Component<Props, State> {
}), setStateCallback);
}

clearGrouping() {
if (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() {
Expand All @@ -384,45 +384,27 @@ export default class Example18 extends React.Component<Props, State> {
});
}

groupByDuration() {
this.clearGrouping();
this.clearGroupingSelects();

if (this.draggableGroupingPlugin) {
this.showPreHeader();
this.draggableGroupingPlugin.setDroppedGroups('duration');
this.gridObj.invalidate(); // invalidate all rows and re-render
}
// use JS to change 1st select dropdown value
this.dynamicallyChangeSelectGroupByValue(0, 'duration');
}

groupByDurationOrderByCount(sortedByCount = false) {
this.setState((state: State) => ({ ...state, durationOrderByCount: sortedByCount }));
this.clearGrouping(false);

this.clearGrouping();
this.groupByDuration();
if (this.draggableGroupingPlugin?.setDroppedGroups) {
this.showPreHeader();
this.draggableGroupingPlugin.setDroppedGroups('duration');

// you need to manually add the sort icon(s) in UI
const sortColumns = sortedByCount ? [] : [{ columnId: 'duration', sortAsc: true }];
this.reactGrid.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.clearGrouping(false);
if (this.draggableGroupingPlugin?.setDroppedGroups) {
this.showPreHeader();
const groupingFields = ['duration', 'effortDriven'];
this.draggableGroupingPlugin.setDroppedGroups(groupingFields);
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.reactGrid.filterService.setSortColumnIcons(sortColumns);

// use JS to change 1st select dropdown value
groupingFields.forEach((groupingVal, index) => this.dynamicallyChangeSelectGroupByValue(index, groupingVal));
this.draggableGroupingPlugin.setDroppedGroups(['duration', 'effortDriven']);
this.gridObj?.invalidate(); // invalidate all rows and re-render
}
}

Expand Down
11 changes: 7 additions & 4 deletions src/slickgrid-react/components/slickgrid-react.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -834,12 +834,15 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
});

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/slickgrid-universal/aurelia-slickgrid/commit/8c503a4d45fba11cbd8d8cc467fae8d177cc4f60
if (args?.rows && Array.isArray(args.rows)) {
args.rows.forEach((row: number) => grid.updateRow(row));
// see commit: https://github.com/ghiscoding/aurelia-slickgrid/commit/8c503a4d45fba11cbd8d8cc467fae8d177cc4f60
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();
}
});
Expand Down