From c7ca8e2f11e18a4e4313687fbcf78ae7bbb35ea9 Mon Sep 17 00:00:00 2001
From: Zzm0809 <934230207@qq.com>
Date: Wed, 28 Aug 2024 12:20:49 +0800
Subject: [PATCH] [Optimization] Optimizing the virtual scrolling problem of
 data source detail list (#3754)

Signed-off-by: Zzm0809 <934230207@qq.com>
Co-authored-by: Zzm0809 <Zzm0809@users.noreply.github.com>
---
 dinky-web/src/global.less                                   | 4 ++--
 .../src/pages/DataStudio/LeftContainer/DataSource/index.tsx | 2 +-
 .../components/DataSourceDetail/SchemaTree/index.tsx        | 6 +++---
 .../DataSource/components/DataSourceDetail/index.tsx        | 1 +
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/dinky-web/src/global.less b/dinky-web/src/global.less
index 98ddc22951..5c13661ba7 100644
--- 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
index 59da4cd604..9a5dcedcb0 100644
--- 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
index fa9c55ac2e..fac85ebb9a 100644
--- 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
index 9007d75c68..b4b7d92298 100644
--- 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>