feat: Render database tree infiniflow#1841

cike8899 · Oct 11, 2024 · 8c0e989 · 8c0e989
1 parent 6fb6a1e
commit 8c0e989
Show file tree

Hide file tree

Showing 11 changed files with 424 additions and 17 deletions.
diff --git a/gui/app/(dashboard)/actions.ts b/gui/app/(dashboard)/actions.ts
@@ -133,9 +133,7 @@ export const showTable = async ({
 
 export const showConfigs = async () => {
   try {
-    const x = await get(
-        `${ApiUrl.configs}`
-    );
+    const x = await get(`${ApiUrl.configs}`);
     return x;
   } catch (error) {
     console.log('🚀 ~ error:', error);
@@ -144,9 +142,7 @@ export const showConfigs = async () => {
 
 export const showVariables = async () => {
   try {
-    const x = await get(
-        `${ApiUrl.variables}/global`
-    );
+    const x = await get(`${ApiUrl.variables}/global`);
     return x;
   } catch (error) {
     console.log('🚀 ~ error:', error);
@@ -155,9 +151,7 @@ export const showVariables = async () => {
 
 export const showCurrentNode = async () => {
   try {
-    const x = await get(
-        `${ApiUrl.variables}/global`
-    );
+    const x = await get(`${ApiUrl.variables}/global`);
     return x;
   } catch (error) {
     console.log('🚀 ~ error:', error);

diff --git a/gui/app/(dashboard)/database/layout.tsx b/gui/app/(dashboard)/database/layout.tsx
@@ -1,4 +1,4 @@
-import SideMenu, { MenuItem } from '@/components/ui/side-menu';
+import { MenuItem } from '@/components/ui/side-menu';
 import {
   Table,
   TableBody,
@@ -8,7 +8,7 @@ import {
   TableRow
 } from '@/components/ui/table';
 import { listDatabase, listTable } from '../actions';
-import { InfinityContextMenuContent } from '../tables/context-menu';
+import AsyncTree from './tree';
 
 async function InfinityTable() {
   const tables = await listTable('default_db');
@@ -70,16 +70,17 @@ export default async function DatabaseLayout({
   }
 
   return (
-    <div className="flex divide-x ">
-      <section className="w-40">
-        <SideMenu
+    <div className="flex divide-x h-full">
+      <section className="w-1/4">
+        {/* <SideMenu
           items={items}
           contextMenuContent={(key: string) => (
             <InfinityContextMenuContent
               databaseName={key}
             ></InfinityContextMenuContent>
           )}
-        ></SideMenu>
+        ></SideMenu> */}
+        <AsyncTree></AsyncTree>
       </section>
       <section className="flex-1 text-center">{children}</section>
     </div>

diff --git a/gui/app/(dashboard)/database/page.tsx b/gui/app/(dashboard)/database/page.tsx
@@ -1,3 +1,3 @@
 export default async function DatabasePage() {
-  return <div>DatabasePage</div>;
+  return <div className="w-1/4 overflow-auto">DatabasePage</div>;
 }
diff --git a/gui/app/(dashboard)/database/styles.css b/gui/app/(dashboard)/database/styles.css
@@ -0,0 +1,47 @@
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-icon {
+  animation: spinner 1.5s linear infinite;
+  margin-left: 5px;
+}
+
+.visually-hidden {
+  position: absolute;
+  clip-path: circle(0);
+  border: 0;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.tree-node {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.tree-node:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.tree-node--focused {
+  background-color: #d7d7d7;
+}
+
+.arrow--open {
+  transform: rotate(90deg);
+}
+
+.name {
+  margin-left: 6px;
+}