feat: dashbaord ui

eosphoros-ai · Mar 21, 2024 · 63b74f2 · 63b74f2
1 parent 4104783
commit 63b74f2
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 13 deletions.
diff --git a/web/components/chat/db-editor.tsx b/web/components/chat/db-editor.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useRequest } from 'ahooks';
 import { Button, Select, Table, Tooltip } from 'antd';
 import { Input, Tree, Empty, Tabs } from 'antd';
@@ -9,8 +9,11 @@ import { useSearchParams } from 'next/navigation';
 import { OnChange } from '@monaco-editor/react';
 import Header from './header';
 import Chart from '../chart';
-import { CaretRightOutlined, SaveFilled } from '@ant-design/icons';
+import { CaretRightOutlined, MenuFoldOutlined, MenuUnfoldOutlined, SaveFilled } from '@ant-design/icons';
 import { ColumnType } from 'antd/es/table';
+import Database from '../icons/database';
+import TableIcon from '../icons/table';
+import Field from '../icons/field';
 
 const { Search } = Input;
 
@@ -92,6 +95,7 @@ function DbEditor() {
   const [newEditorValue, setNewEditorValue] = React.useState<EditorValueProps>();
   const [tableData, setTableData] = React.useState<{ columns: string[]; values: any }>();
   const [currentTabIndex, setCurrentTabIndex] = React.useState<string>();
+  const [isMenuExpand, setIsMenuExpand] = useState<boolean>(true);
 
   const searchParams = useSearchParams();
   const id = searchParams?.get('id');
@@ -274,24 +278,37 @@ function DbEditor() {
         const index = strTitle.indexOf(searchValue);
         const beforeStr = strTitle.substring(0, index);
         const afterStr = strTitle.slice(index + searchValue.length);
+        const renderIcon = (type: string) => {
+          switch (type) {
+            case 'db':
+              return <Database />;
+            case 'table':
+              return <TableIcon />;
+            default:
+              return <Field />;
+          }
+        };
         const showTitle =
           index > -1 ? (
             <Tooltip title={(item?.comment || item?.title) + (item?.can_null === 'YES' ? '(can null)' : `(can't null)`)}>
-              <span>
+              <div className="flex items-center">
+                {renderIcon(item.type)}&nbsp;&nbsp;&nbsp;
                 {beforeStr}
                 <span className="text-[#1677ff]">{searchValue}</span>
-                {afterStr}
-                {item?.type && <div>{`[${item?.type}]`}</div>}
-              </span>
+                {afterStr}&nbsp;
+                {item?.type && <div className="text-gray-400">{item?.type}</div>}
+              </div>
             </Tooltip>
           ) : (
             <Tooltip title={(item?.comment || item?.title) + (item?.can_null === 'YES' ? '(can null)' : `(can't null)`)}>
-              <span>
-                {strTitle}
-                {item?.type && <div>{`[${item?.type}]`}</div>}
-              </span>
+              <div className="flex items-center">
+                {renderIcon(item.type)}&nbsp;&nbsp;&nbsp;
+                {strTitle}&nbsp;
+                {item?.type && <div className="text-gray-400">{item?.type}</div>}
+              </div>
             </Tooltip>
           );
+
         if (item.children) {
           const itemKey = parentKey ? String(parentKey) + '_' + item.key : item.key;
           return { title: strTitle, showTitle, key: itemKey, children: loop(item.children, itemKey) };
@@ -318,6 +335,7 @@ function DbEditor() {
       for (let i = 0; i < data.length; i++) {
         const node = data[i];
         const { key, title } = node;
+
         res.push({ key, title: title as string, parentKey });
         if (node.children) {
           generateList(node.children, key);
@@ -402,10 +420,11 @@ function DbEditor() {
     <div className="flex flex-col w-full h-full">
       <Header />
       <div className="relative flex flex-1 overflow-auto">
-        <div className="w-80 h-full overflow-y-auto">
+        <div className={`w-80 ml-4 ${isMenuExpand && 'hidden'}`}>
           <div className="flex items-center py-3">
             <Select
               size="small"
+              className="w-60"
               value={currentRound}
               options={rounds?.data?.map((item: RoundProps) => {
                 return {
@@ -419,8 +438,10 @@ function DbEditor() {
             />
           </div>
           <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={onChange} />
+
           {treeData && treeData.length > 0 && (
             <Tree
+              className="h-[795px] overflow-y-auto flex-1"
               onExpand={(newExpandedKeys: React.Key[]) => {
                 setExpandedKeys(newExpandedKeys);
                 setAutoExpandParent(false);
@@ -434,9 +455,24 @@ function DbEditor() {
             />
           )}
         </div>
+        {!isMenuExpand ? (
+          <MenuFoldOutlined
+            onClick={() => {
+              setIsMenuExpand(!isMenuExpand);
+            }}
+            className="w-4 cursor-pointer"
+          />
+        ) : (
+          <MenuUnfoldOutlined
+            onClick={() => {
+              setIsMenuExpand(!isMenuExpand);
+            }}
+            className="w-4 cursor-pointer"
+          />
+        )}
+        {/* operations */}
         <div className="flex flex-col flex-1 max-w-full overflow-hidden p-4">
-          {/* operations */}
-          <div className="mb-4">
+          <div className="mb-4 bg-white pl-4 pt-2 pb-2">
             <Button
               className="mr-2"
               type="primary"
@@ -453,6 +489,7 @@ function DbEditor() {
               Run
             </Button>
             <Button
+              type="primary"
               loading={submitLoading || submitChartLoading}
               icon={<SaveFilled />}
               onClick={async () => {

diff --git a/web/components/icons/database.tsx b/web/components/icons/database.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default function Database() {
+  return (
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="49817" width="1em" height="1em">
+      <path
+        d="M512 64c-247.424 0-448 62.72-448 140.032v112c0 77.312 200.576 139.968 448 139.968s448-62.72 448-140.032v-112C960 126.72 759.424 64 512 64z m0 728c-247.424 0-448-62.72-448-140.032v168.064C64 897.28 264.576 960 512 960s448-62.72 448-140.032v-167.936c0 77.312-200.576 139.968-448 139.968z"
+        fill="#3699FF"
+        p-id="49818"
+      ></path>
+      <path
+        d="M512 540.032c-247.424 0-448-62.72-448-140.032v168c0 77.312 200.576 140.032 448 140.032s448-62.72 448-140.032V400c0 77.312-200.576 140.032-448 140.032z"
+        fill="#3699FF"
+        opacity=".32"
+        p-id="49819"
+      ></path>
+    </svg>
+  );
+}
diff --git a/web/components/icons/field.tsx b/web/components/icons/field.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default function Field() {
+  return (
+    <svg
+
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="67616"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M39.385 204.83h346.571L252.054 976.74l-23.63 39.383h259.929v-31.506L614.379 204.83H771.91S960.951 220.584 984.581 0.038H236.3S94.52-7.84 39.384 204.83"
+        fill="#1296db"
+        p-id="67617"
+      ></path>
+    </svg>
+  );
+}
diff --git a/web/components/icons/table.tsx b/web/components/icons/table.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default function Table() {
+  return (
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="59847" width="1em" height="1em">
+      <path d="M149.2 99.7h726.6c27.7 0 50.1 22.4 50.1 50.1V336H99.1V149.8c0-27.6 22.4-50.1 50.1-50.1z" fill="#1ECD93" p-id="59848"></path>
+      <path
+        d="M99.1 395h236.2v236.3H99.1zM99.1 690.3h236.2v236.2H149.2c-27.7 0-50.1-22.4-50.1-50.1V690.3zM394.4 395h236.2v236.3H394.4z"
+        fill="#1ECD93"
+        fill-opacity=".5"
+        p-id="59849"
+      ></path>
+      <path d="M394.4 690.3h236.2v236.3H394.4z" fill="#A1E6C9" p-id="59850" data-spm-anchor-id="a313x.search_index.0.i13.27343a81CqKUWU"></path>
+      <path d="M689.7 395h236.2v236.3H689.7z" fill="#1ECD93" fill-opacity=".5" p-id="59851"></path>
+      <path
+        d="M689.7 690.3h236.2v186.1c0 27.7-22.4 50.1-50.1 50.1H689.7V690.3z"
+        fill="#A1E6C9"
+        p-id="59852"
+        data-spm-anchor-id="a313x.search_index.0.i17.27343a81CqKUWU"
+      ></path>
+    </svg>
+  );
+}