perf(ui): virtualize schema table rows for rendering performance (dat…

…ahub-project#6287)
stanbaker · Nov 17, 2022 · 21e4d8e · 21e4d8e
1 parent af6a423
commit 21e4d8e
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 46 deletions.
diff --git a/datahub-web-react/package.json b/datahub-web-react/package.json
@@ -88,6 +88,7 @@
         "styled-components": "^5.2.1",
         "typescript": "^4.1.3",
         "uuid": "^8.3.2",
+        "virtualizedtableforantd4": "^1.2.1",
         "vx": "^0.0.1",
         "web-vitals": "^0.2.4",
         "yamljs": "^0.3.0"

diff --git a/datahub-web-react/src/app/entity/dataset/profile/__tests__/Schema.test.tsx b/datahub-web-react/src/app/entity/dataset/profile/__tests__/Schema.test.tsx
@@ -15,6 +15,15 @@ import { SchemaTab } from '../../../shared/tabs/Dataset/Schema/SchemaTab';
 import EntityContext from '../../../shared/EntityContext';
 import { EntityType, SchemaMetadata } from '../../../../../types.generated';
 
+jest.mock('virtualizedtableforantd4', () => {
+    /* eslint-disable-next-line */
+    const { SchemaRow } = require('../../../shared/tabs/Dataset/Schema/components/SchemaRow');
+    return {
+        ...jest.requireActual('virtualizedtableforantd4'),
+        useVT: () => [{ body: { row: SchemaRow } }, jest.fn()],
+    };
+});
+
 describe('Schema', () => {
     it('renders', () => {
         const { getByText } = render(

diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StyledTable.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StyledTable.tsx
@@ -1,8 +1,11 @@
-import styled from 'styled-components';
 import { Table } from 'antd';
+import styled from 'styled-components';
 import { ANTD_GRAY } from '../../constants';
 
 export const StyledTable = styled(Table)`
+    overflow: inherit;
+    height: inherit;
+
     &&& .ant-table-cell {
         background-color: #fff;
     }

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { ColumnsType } from 'antd/es/table';
+import { useVT } from 'virtualizedtableforantd4';
+import ResizeObserver from 'rc-resize-observer';
 import styled from 'styled-components';
-import {} from 'antd';
 import {
     EditableSchemaMetadata,
     ForeignKeyConstraint,
@@ -23,6 +24,9 @@ import useSchemaBlameRenderer from './utils/useSchemaBlameRenderer';
 import { ANTD_GRAY } from '../../../constants';
 
 const TableContainer = styled.div`
+    overflow: inherit;
+    height: inherit;
+
     &&& .ant-table-tbody > tr > .ant-table-cell-with-append {
         border-right: none;
         padding: 0px;
@@ -48,6 +52,9 @@ export type Props = {
     expandedRowsFromFilter?: Set<string>;
     filterText?: string;
 };
+
+const TABLE_HEADER_HEIGHT = 52;
+
 export default function SchemaTable({
     rows,
     schemaMetadata,
@@ -60,7 +67,7 @@ export default function SchemaTable({
     filterText = '',
 }: Props): JSX.Element {
     const hasUsageStats = useMemo(() => (usageStats?.aggregations?.fields?.length || 0) > 0, [usageStats]);
-
+    const [tableHeight, setTableHeight] = useState(0);
     const [tagHoveredIndex, setTagHoveredIndex] = useState<string | undefined>(undefined);
     const [selectedFkFieldPath, setSelectedFkFieldPath] =
         useState<null | { fieldPath: string; constraint?: ForeignKeyConstraint | null }>(null);
@@ -181,40 +188,43 @@ export default function SchemaTable({
         });
     }, [expandedRowsFromFilter]);
 
+    const [VT, setVT] = useVT(() => ({ scroll: { y: tableHeight } }), [tableHeight]);
+
+    useMemo(() => setVT({ body: { row: SchemaRow } }), [setVT]);
+
     return (
         <FkContext.Provider value={selectedFkFieldPath}>
             <TableContainer>
-                <StyledTable
-                    rowClassName={(record) =>
-                        record.fieldPath === selectedFkFieldPath?.fieldPath ? 'open-fk-row' : ''
-                    }
-                    columns={allColumns}
-                    dataSource={rows}
-                    rowKey="fieldPath"
-                    components={{
-                        body: {
-                            row: SchemaRow,
-                        },
-                    }}
-                    expandable={{
-                        expandedRowKeys: [...Array.from(expandedRows)],
-                        defaultExpandAllRows: false,
-                        expandRowByClick: false,
-                        expandIcon: ExpandIcon,
-                        onExpand: (expanded, record) => {
-                            if (expanded) {
-                                setExpandedRows((previousRows) => new Set(previousRows.add(record.fieldPath)));
-                            } else {
-                                setExpandedRows((previousRows) => {
-                                    previousRows.delete(record.fieldPath);
-                                    return new Set(previousRows);
-                                });
-                            }
-                        },
-                        indentSize: 0,
-                    }}
-                    pagination={false}
-                />
+                <ResizeObserver onResize={(dimensions) => setTableHeight(dimensions.height - TABLE_HEADER_HEIGHT)}>
+                    <StyledTable
+                        rowClassName={(record) =>
+                            record.fieldPath === selectedFkFieldPath?.fieldPath ? 'open-fk-row' : ''
+                        }
+                        columns={allColumns}
+                        dataSource={rows}
+                        rowKey="fieldPath"
+                        scroll={{ y: tableHeight }}
+                        components={VT}
+                        expandable={{
+                            expandedRowKeys: [...Array.from(expandedRows)],
+                            defaultExpandAllRows: false,
+                            expandRowByClick: false,
+                            expandIcon: ExpandIcon,
+                            onExpand: (expanded, record) => {
+                                if (expanded) {
+                                    setExpandedRows((previousRows) => new Set(previousRows.add(record.fieldPath)));
+                                } else {
+                                    setExpandedRows((previousRows) => {
+                                        previousRows.delete(record.fieldPath);
+                                        return new Set(previousRows);
+                                    });
+                                }
+                            },
+                            indentSize: 0,
+                        }}
+                        pagination={false}
+                    />
+                </ResizeObserver>
             </TableContainer>
         </FkContext.Provider>
     );

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaRow.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaRow.tsx
@@ -86,23 +86,19 @@ const ArrowContainer = styled.div`
     margin-top: 40px;
 `;
 
-export const SchemaRow = ({
-    children,
-    className,
-    'data-row-key': fieldPath,
-}: {
-    children: any;
-    className: string;
-    'data-row-key': string;
-}) => {
+export const SchemaRow = React.forwardRef<HTMLTableRowElement>((props, ref) => {
+    /* eslint-disable react/prop-types */
+    const { children, ...rest } = props;
     const selectedFk = useContext(FkContext);
     const entityRegistry = useEntityRegistry();
     const baseEntity = useBaseEntity<GetDatasetQuery>();
 
     return (
         <>
-            <tr className={className}>{children}</tr>
-            {fieldPath && fieldPath === selectedFk?.fieldPath && (
+            <tr {...rest} ref={ref}>
+                {children}
+            </tr>
+            {selectedFk?.fieldPath && props['data-row-key'] === selectedFk?.fieldPath && (
                 <ForeignKeyContent>
                     <ForiegnKeyTd>
                         <HeaderContent>
@@ -150,4 +146,4 @@ export const SchemaRow = ({
             )}
         </>
     );
-};
+});
diff --git a/datahub-web-react/yarn.lock b/datahub-web-react/yarn.lock
@@ -16791,6 +16791,11 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+virtualizedtableforantd4@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/virtualizedtableforantd4/-/virtualizedtableforantd4-1.2.1.tgz#331e8d2f203cdee6667cb5b9cbd7af823f99f65a"
+  integrity sha512-Hl21jF3WZESanz/iKIjvbjeZ5gGX2t85h2cWQFJAagOQnN7t/pvC4kXhfYNseJtaiU6QHOm5RgX3ud+oXeST1Q==
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"