From 14af71221f25fcc0b51bb243ada077962f5b88af Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Thu, 31 Oct 2024 16:36:11 +0800
Subject: [PATCH] feat: Select the tree node to display the background color
 #1841

---
 gui/app/(dashboard)/database/hooks.ts   | 37 +++++--------------------
 gui/app/(dashboard)/database/styles.css | 10 +++++--
 gui/app/(dashboard)/database/tree.tsx   | 36 ++++++++++++------------
 3 files changed, 33 insertions(+), 50 deletions(-)

diff --git a/gui/app/(dashboard)/database/hooks.ts b/gui/app/(dashboard)/database/hooks.ts
index b73eb10113..2f4cc7382f 100644
--- a/gui/app/(dashboard)/database/hooks.ts
+++ b/gui/app/(dashboard)/database/hooks.ts
@@ -30,15 +30,14 @@ export const useHandleClickTreeName = () => {
       name: string;
       parent: TreeParentId;
       data: INode[];
-    }) =>
-      () => {
-        if (level === 3) {
-          const databaseId = getParentIdById(data, parent);
-          if (databaseId) {
-            router.push(`/database/${databaseId}/table/${parent}?tab=${name}`);
-          }
+    }) => {
+      if (level === 3) {
+        const databaseId = getParentIdById(data, parent);
+        if (databaseId) {
+          router.push(`/database/${databaseId}/table/${parent}?tab=${name}`);
         }
-      },
+      }
+    },
     [router]
   );
 
@@ -132,28 +131,6 @@ export const useBuildTreeData = () => {
     await fetchTables(element.id as string);
 
     return undefined;
-    // return new Promise((resolve) => {
-    //   setTimeout(() => {
-    //     setData((value) =>
-    //       updateTreeData(value, element.id, [
-    //         {
-    //           name: `Child Node ${value.length}`,
-    //           children: [],
-    //           id: value.length,
-    //           parent: element.id,
-    //           isBranch: true
-    //         },
-    //         {
-    //           name: 'Another child Node',
-    //           children: [],
-    //           id: value.length + 1,
-    //           parent: element.id
-    //         }
-    //       ])
-    //     );
-    //     resolve(undefined);
-    //   }, 1000);
-    // });
   };
 
   const wrappedOnLoadData = async (props: ITreeViewOnLoadDataProps) => {
diff --git a/gui/app/(dashboard)/database/styles.css b/gui/app/(dashboard)/database/styles.css
index 5ec9bedc21..0f1b0c6722 100644
--- a/gui/app/(dashboard)/database/styles.css
+++ b/gui/app/(dashboard)/database/styles.css
@@ -31,11 +31,15 @@
 }
 
 .tree-node:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgb(240, 244, 254);
 }
 
-.tree-node--focused {
-  background-color: #d7d7d7;
+.tree .tree-node--focused {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.tree .tree-node--selected {
+  background: rgb(213, 222, 249);
 }
 
 .arrow--open {
diff --git a/gui/app/(dashboard)/database/tree.tsx b/gui/app/(dashboard)/database/tree.tsx
index e2bf9b77a6..1b68f33ab8 100644
--- a/gui/app/(dashboard)/database/tree.tsx
+++ b/gui/app/(dashboard)/database/tree.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import cx from 'classnames';
-import TreeView, { INode } from 'react-accessible-treeview';
+import TreeView, { EventCallback, INode } from 'react-accessible-treeview';
 import { AiOutlineLoading } from 'react-icons/ai';
 import { IoMdArrowDropright } from 'react-icons/io';
 import { Leaf, LeafIconMap } from './constants';
@@ -40,22 +40,31 @@ function AsyncTree() {
       ></div>
       <TreeView
         data={data}
-        aria-label="Checkbox tree"
+        aria-label="directory tree"
         onLoadData={wrappedOnLoadData}
-        propagateSelect
-        togglableSelect
-        propagateSelectUpwards
         nodeRenderer={({
           element,
           isBranch,
           isExpanded,
-          // isSelected,
-          // isHalfSelected,
-          // handleSelect,
           getNodeProps,
           level,
-          handleExpand
+          handleExpand,
+          handleSelect
         }) => {
+          const handleNodeClick: EventCallback = (e) => {
+            handleSelect(e);
+            if (isBranch) {
+              handleExpand(e);
+            } else {
+              handleClickTreeName({
+                level,
+                name: element.name,
+                parent: element.parent,
+                data
+              });
+            }
+          };
+
           const branchNode = (isExpanded: boolean, element: INode) => {
             return isExpanded &&
               !element.metadata?.isEmpty &&
@@ -77,14 +86,7 @@ function AsyncTree() {
           return (
             <div
               {...getNodeProps({
-                onClick: isBranch
-                  ? handleExpand
-                  : handleClickTreeName({
-                      level,
-                      name: element.name,
-                      parent: element.parent,
-                      data
-                    })
+                onClick: handleNodeClick
               })}
               style={{ marginLeft: 40 * (level - 1) }}
             >