Merge pull request #211 from stone-lyl/main

feat: improve performance of Table node
ajthinking · May 18, 2024 · ee18027 · ee18027
2 parents bd8361b + 9cd123e
commit ee18027
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 101 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -9,6 +9,8 @@ export default defineConfig({
       bundler: 'webpack',
       webpackConfig: webpackConfig
     },
+    viewportWidth: 384,
+    viewportHeight: 216,
   },
 
   e2e: {

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -43,6 +43,7 @@
     "@data-story/core": "workspace:*",
     "@floating-ui/react": "^0.26.10",
     "@tanstack/react-table": "^8.11.7",
+    "@tanstack/react-virtual": "^3.5.0",
     "ahooks": "^3.7.10",
     "clsx": "^2.0.0",
     "concurrently": "^8.2.1",

diff --git a/packages/ui/src/components/Node/ItemCollection.ts b/packages/ui/src/components/Node/ItemCollection.ts
@@ -71,8 +71,8 @@ export class ItemCollection {
     });
 
     return {
-      headers: Array.from(headers),
-      rows
+      headers: Array.from(headers) ?? [],
+      rows: rows ?? [],
     };
   }
 

diff --git a/packages/ui/src/components/Node/TableNodeComponent.cy.tsx b/packages/ui/src/components/Node/TableNodeComponent.cy.tsx
@@ -30,19 +30,22 @@ const mountTableNodeComponent = () => {
         <TableNodeComponent id={id} data={data} selected={false}/>
       </ReactFlowProvider>
     </DataStoryProvider>
-  )
+  );
+}
+
+let testPerformanceLimit = 20;
 
+function runSuccess(): void {
   cy.dataCy('data-story-table')
     .then(() => {
       cy.wait(10).then(() => {
         eventManager.emit({
           type: DataStoryEvents.RUN_SUCCESS
         });
       })
-    })
+    });
 }
 
-let testPerformanceLimit = 20;
 const mockGetItems = (items: unknown[]): void => {
   const observerMap = new Map();
   cy.stub(store, 'createStore').returns(() => {
@@ -75,7 +78,7 @@ describe('test TableNodeComponent for tooltip', () => {
     cy.dataCy('data-story-table-tooltip').should('have.text', longKey);
 
     // click on the table to close the tooltip
-    cy.dataCy('data-story-table').click();
+    cy.dataCy('data-story-table').click({ force: true});
 
     // test long value on tooltip
     const longValue = oversize['long_property'];
@@ -109,6 +112,7 @@ describe('test TableNodeComponent for table', () => {
   it('render component with empty data', () => {
     mockGetItems([]);
     mountTableNodeComponent();
+    runSuccess();
 
     cy.dataCy('data-story-table').should('exist');
     cy.dataCy('data-story-table-no-data').should('have.text', 'No data');
@@ -117,13 +121,14 @@ describe('test TableNodeComponent for table', () => {
   it('render component with Awaiting data', () => {
     mountTableNodeComponent();
 
-    cy.get('th').should('have.length', 1);
-    cy.get('th').should('have.text', 'Awaiting data');
+    cy.get('th').should('have.length', 0);
+    cy.dataCy('data-story-table-await-data').should('contain.text', 'Awaiting data');
   });
 
   it('render component with normal data', () => {
     mockGetItems([normal]);
     mountTableNodeComponent();
+    runSuccess();
 
     const headerLength = Object.keys(normal).length;
 
@@ -203,7 +208,8 @@ describe('test TableNodeComponent for table', () => {
         cy.log(`cypress render Time: ${renderTime}ms`);
       });
 
-    cy.dataCy('data-story-table-row').should('have.length', testPerformanceLimit);
+    // table rows within the user's current viewable area are rendered
+    cy.dataCy('data-story-table-row').should('have.length.lessThan', 20);
   });
 
   it('test table component scroll', () => {
@@ -217,7 +223,7 @@ describe('test TableNodeComponent for table', () => {
     cy.wait(10);
 
     const start = performance.now();
-    cy.dataCy('data-story-table')
+    cy.dataCy('data-story-table-scroll')
       .scrollTo('bottom')
       .then(() => {
         const end = performance.now();