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

feat: improve performance of Table node #211

Merged
merged 18 commits into from
May 18, 2024
Merged

feat: improve performance of Table node #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d67df9e
feat: add @tanstack/react-virtual
stone-lyl May 14, 2024
5c1b188
feat: Improve table rendering with virtualization
stone-lyl May 14, 2024
56f6264
feat: optimized table rendering using virtualization techniques
stone-lyl May 14, 2024
2b8bb3b
fix: resolve the tableComponent infinite render
stone-lyl May 14, 2024
ae71aad
refactor: Extract Table handle and loading components
stone-lyl May 15, 2024
b3b1151
fix: incorrect TableNodeCell render height
stone-lyl May 15, 2024
e08ede7
fix: resolved the issue where xx.x couldn't render
stone-lyl May 15, 2024
b80466c
fix: implement dynamic height for table display when no data
stone-lyl May 15, 2024
26b752c
feat: implement adaptive width for td and th elements
stone-lyl May 16, 2024
65cfa84
fix: resolve incorrect td height in table
stone-lyl May 16, 2024
b45bf06
fix: resolve test failures
stone-lyl May 16, 2024
8af9dde
feat: table height is no longer fixed
stone-lyl May 16, 2024
1fe25f9
feat: make the header sticky when using react-virtual
stone-lyl May 18, 2024
de57027
chore: remove unused code
stone-lyl May 18, 2024
7d0422d
fix: register only once dataStory event
stone-lyl May 18, 2024
ed71e2c
fix: resolve the test failed
stone-lyl May 18, 2024
a382364
fix: resolve tooltip mounting to the wrong parent
stone-lyl May 18, 2024
9cd123e
feat: remove the xxxs attribute
stone-lyl May 18, 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
2 changes: 2 additions & 0 deletions cypress.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ export default defineConfig({
bundler: 'webpack',
webpackConfig: webpackConfig
},
viewportWidth: 384,
viewportHeight: 216,
},

e2e: {
Expand Down
1 change: 1 addition & 0 deletions packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/Node/ItemCollection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ export class ItemCollection {
});

return {
headers: Array.from(headers),
rows
headers: Array.from(headers) ?? [],
rows: rows ?? [],
};
}

Expand Down
22 changes: 14 additions & 8 deletions packages/ui/src/components/Node/TableNodeComponent.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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'];
Expand Down Expand Up @@ -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');
Expand All @@ -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;

Expand Down Expand Up @@ -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', () => {
Expand All @@ -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();
Expand Down
Loading
Loading