perf: large data with tree grid

packages/toast-ui.grid/cypress/integration/tree.spec.ts

@@ -1,13 +1,13 @@
-import { RowKey, CellValue } from '@t/store/data';
+import { CellValue, RowKey } from '@t/store/data';
 import { OptColumn, OptGrid, OptRow } from '@t/options';
 import GridEvent from '@/event/gridEvent';
 import { CellRenderer, CellRendererProps } from '@t/renderer';
 import { cls } from '../../src/helper/dom';
 import {
   assertGridHasRightRowNumber,
+  assertModifiedRowsLength,
   assertToggleButtonCollapsed,
   assertToggleButtonExpanded,
-  assertModifiedRowsLength,
 } from '../helper/assert';
 import { dragAndDropColumn, dragAndDropRow } from '../helper/util';
 
@@ -478,6 +478,7 @@ describe('appendTreeRow()', () => {
     it('specific parent that internal type.', () => {
       cy.gridInstance().invoke('appendTreeRow', appendedData, { parentRowKey: 0 });
       cy.gridInstance().invoke('expand', 0, true);
+      cy.gridInstance().invoke('expand', 5, true);
 
       cy.getCell(5, 'c1').should('have.text', 'a');
       cy.getCell(6, 'c1').should('have.text', 'b');

packages/toast-ui.grid/src/dispatch/tree.ts

@@ -1,43 +1,49 @@
 import { Row, RowKey } from '@t/store/data';
 import { Store } from '@t/store';
-import { OptRow, OptAppendTreeRow, OptMoveRow } from '@t/options';
+import { OptAppendTreeRow, OptMoveRow, OptRow } from '@t/options';
 import { Column, ColumnInfo } from '@t/store/column';
 import { ColumnCoords } from '@t/store/columnCoords';
 import { Dimension } from '@t/store/dimension';
 import { createViewRow } from '../store/data';
 import {
-  getRowHeight,
   findIndexByRowKey,
   findRowByRowKey,
   getLoadingState,
-  isSorted,
+  getRowHeight,
   isFiltered,
+  isSorted,
 } from '../query/data';
-import { notify, batchObserver, getOriginObject, Observable } from '../helper/observable';
+import {
+  batchObserver,
+  getOriginObject,
+  notify,
+  Observable,
+  unobservable,
+} from '../helper/observable';
 import { getDataManager } from '../instance';
 import {
   isUpdatableRowAttr,
-  setLoadingState,
-  updateRowNumber,
   setCheckedAllRows,
+  setLoadingState,
   uncheck,
+  updateRowNumber,
 } from './data';
 import {
-  getParentRow,
+  getChildRowKeys,
+  getDepth,
   getDescendantRows,
+  getParentRow,
   getStartIndexToAppendRow,
-  traverseAncestorRows,
-  traverseDescendantRows,
-  getChildRowKeys,
-  isLeaf,
   isExpanded,
+  isLeaf,
   isRootChildRow,
-  getDepth,
+  traverseAncestorRows,
+  traverseDescendantRows,
 } from '../query/tree';
 import { getEventBus } from '../event/eventBus';
 import GridEvent from '../event/gridEvent';
 import { flattenTreeData, getTreeIndentWidth } from '../store/helper/tree';
-import { findProp, findPropIndex, removeArrayItem, some, silentSplice } from '../helper/common';
+import { findProp, findPropIndex, removeArrayItem, silentSplice, some } from '../helper/common';
 import { cls, getTextWidth } from '../helper/dom';
 import { fillMissingColumnData } from './lazyObservable';
 import { getColumnSide } from '../query/column';
@@ -218,6 +224,7 @@ function collapse(store: Store, row: Row, recursive?: boolean) {
     }
 
     changeHiddenAttr(childRow, true);
+    unobservable(childRow._attributes.tree!, ['hidden']);
 
     if (!isLeaf(childRow)) {
       if (recursive) {

packages/toast-ui.grid/src/helper/observable.ts

@@ -1,5 +1,5 @@
 import { Dictionary } from '@t/options';
-import { hasOwnProp, isObject, forEachObject, last, isEmpty, isFunction, isNull } from './common';
+import { forEachObject, hasOwnProp, isEmpty, isFunction, isNull, isObject, last } from './common';
 import { patchArrayMethods } from './array';
 
 type BooleanSet = Dictionary<boolean>;
@@ -184,6 +184,20 @@ export function partialObservable<T extends Dictionary<any>>(obj: T, key: string
   makeObservableData(obj, obj, key, storage, propObserverIdSetMap);
 }
 
+export function unobservable<T extends Dictionary<any>>(obj: T, keys: Array<keyof T> = []) {
+  if (isObservable(obj)) {
+    keys.forEach((key) => {
+      const value = obj[key];
+
+      delete obj[key];
+
+      obj[key] = value;
+    });
+
+    delete obj.__storage__;
+  }
+}
+
 export function observable<T extends Dictionary<any>>(obj: T, sync = false): Observable<T> {
   if (Array.isArray(obj)) {
     throw new Error('Array object cannot be Reactive');
@@ -198,7 +212,7 @@ export function observable<T extends Dictionary<any>>(obj: T, sync = false): Obs
   const resultObj = {} as T;
 
   Object.defineProperties(resultObj, {
-    __storage__: { value: storage },
+    __storage__: { value: storage, configurable: true },
     __propObserverIdSetMap__: { value: propObserverIdSetMap },
   });
 

packages/toast-ui.grid/src/view/bodyRow.tsx

@@ -1,5 +1,5 @@
-import { h, Component } from 'preact';
-import { ViewRow, RowKey } from '@t/store/data';
+import { Component, h } from 'preact';
+import { RowKey, ViewRow } from '@t/store/data';
 import { ColumnInfo } from '@t/store/column';
 import { connect } from './hoc';
 import { cls } from '../helper/dom';
@@ -12,6 +12,7 @@ interface OwnProps {
   rowIndex: number;
   viewRow: ViewRow;
   columns: ColumnInfo[];
+  isVisible: boolean;
 }
 
 interface StoreProps {
@@ -52,11 +53,13 @@ class BodyRowComp extends Component<Props> {
     autoRowHeight,
     hoveredRowKey,
     focusedRowKey,
+    isVisible,
   }: Props) {
     const isOddRow = rowIndex % 2 === 0;
 
     return (
-      rowHeight > 0 && (
+      rowHeight > 0 &&
+      isVisible && (
         <tr
           style={{
             height: rowHeight,

packages/toast-ui.grid/src/view/bodyRows.tsx

@@ -1,10 +1,10 @@
-import { h, Component } from 'preact';
+import { Component, h } from 'preact';
 import { Side } from '@t/store/focus';
-import { ViewRow } from '@t/store/data';
+import { Row, RowKey, ViewRow } from '@t/store/data';
 import { ColumnInfo } from '@t/store/column';
 import { BodyRow } from './bodyRow';
 import { BodyDummyRow } from './bodyDummyRow';
-import { shallowEqual, range } from '../helper/common';
+import { range, shallowEqual } from '../helper/common';
 import { connect } from './hoc';
 import { DispatchProps } from '../dispatch/create';
 
@@ -13,21 +13,40 @@ interface OwnProps {
 }
 
 interface StoreProps {
+  rawData: Row[];
   rows: ViewRow[];
   rowIndexOffset: number;
   columns: ColumnInfo[];
   dummyRowCount: number;
+  hasTreeColumn: boolean;
 }
 
 type Props = OwnProps & StoreProps & DispatchProps;
 
 class BodyRowsComp extends Component<Props> {
+  private getVisibleStateOfRows({ rawData, rows }: Pick<Props, 'rows' | 'rawData'>) {
+    const rowKeys = rows.map(({ rowKey }) => rowKey);
+
+    return rawData.reduce((acc, { rowKey, _attributes }) => {
+      if (!rowKeys.includes(rowKey)) {
+        return acc;
+      }
+
+      acc[rowKey] = !_attributes.tree?.hidden;
+
+      return acc;
+    }, {} as Record<RowKey, boolean>);
+  }
+
   public shouldComponentUpdate(nextProps: Props) {
     return !shallowEqual(nextProps, this.props);
   }
 
-  public render({ rows, rowIndexOffset, columns, dummyRowCount }: Props) {
+  public render({ rawData, rows, rowIndexOffset, columns, dummyRowCount, hasTreeColumn }: Props) {
     const columnNames = columns.map(({ name }) => name);
+
+    const visibleStateOfRows = hasTreeColumn ? this.getVisibleStateOfRows({ rows, rawData }) : null;
+
     return (
       <tbody>
         {rows.map((row, index) => (
@@ -36,6 +55,7 @@ class BodyRowsComp extends Component<Props> {
             rowIndex={index + rowIndexOffset}
             viewRow={row}
             columns={columns}
+            isVisible={visibleStateOfRows?.[row.rowKey] ?? true}
           />
         ))}
         {range(dummyRowCount).map((index) => (
@@ -51,8 +71,10 @@ class BodyRowsComp extends Component<Props> {
 }
 
 export const BodyRows = connect<StoreProps, OwnProps>(({ viewport, column, data }, { side }) => ({
+  rawData: data.filteredRawData,
   rowIndexOffset: viewport.rowRange[0] - data.pageRowRange[0],
   rows: viewport.rows,
   columns: side === 'L' ? column.visibleColumnsBySideWithRowHeader.L : viewport.columns,
   dummyRowCount: viewport.dummyRowCount,
+  hasTreeColumn: !!column.treeColumnName,
 }))(BodyRowsComp);