[Optimization] Optimizing the virtual scrolling problem of data sourc…

…e detail list (DataLinkDC#3754) Signed-off-by: Zzm0809 <[email protected]> Co-authored-by: Zzm0809 <[email protected]>
Zzm0809 · Aug 28, 2024 · c7ca8e2 · c7ca8e2
1 parent 63f6318
commit c7ca8e2
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/dinky-web/src/global.less b/dinky-web/src/global.less
@@ -259,8 +259,8 @@ ol {
 }
 
 .schemaTree {
-  min-height: 89vh;
-  max-height: 89vh;
+  min-height: 92vh;
+  max-height: 92vh;
 }
 
 .code-content-empty {

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx
@@ -228,7 +228,7 @@ const DataSource = (props: any) => {
       <SchemaTree
         selectKeys={selectKeys}
         expandKeys={expandKeys}
-        style={{ height: toolContentHeight - 64 - 20 }}
+        height={toolContentHeight - 64 - 20}
         onNodeClick={handleTreeNodeClick}
         treeData={treeData}
         onExpand={handleTreeExpand}

diff --git a/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceDetail/SchemaTree/index.tsx b/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceDetail/SchemaTree/index.tsx
@@ -30,14 +30,14 @@ const { DirectoryTree } = Tree;
 type SchemaTreeProps = {
   treeData: Partial<any>[];
   onNodeClick: (keys: Key[], info: any) => void;
-  style?: React.CSSProperties;
+  height: number; // Calculate the height of the virtual scrolling container, required, otherwise it may cause page lag
   expandKeys: Key[];
   onExpand: (keys: Key[]) => void;
   selectKeys: Key[];
 };
 
 const SchemaTree: React.FC<SchemaTreeProps> = (props) => {
-  const { treeData, onNodeClick, style, expandKeys, onExpand, selectKeys } = props;
+  const { treeData, onNodeClick, height, expandKeys, onExpand, selectKeys } = props;
 
   const [searchValue, setSearchValue] = useState('');
 
@@ -67,10 +67,10 @@ const SchemaTree: React.FC<SchemaTreeProps> = (props) => {
             onChange={onSearchChange}
           />
           <DirectoryTree
+            height={height}
             expandedKeys={expandKeys}
             selectedKeys={selectKeys}
             onExpand={onExpand}
-            style={style}
             onSelect={onNodeClick}
             treeData={buildSchemaTree(treeData, searchValue)}
           />

diff --git a/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceDetail/index.tsx b/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceDetail/index.tsx
@@ -185,6 +185,7 @@ const DataSourceDetail = (props: connect) => {
             onExpand={handleTreeExpand}
             onNodeClick={onSchemaTreeNodeClick}
             treeData={treeData}
+            height={innerHeight - 190}
           />
         </Authorized>
       </ProCard>