From ad8e8c3c3a763de2eaec488b8b5ce264c7b12ae0 Mon Sep 17 00:00:00 2001
From: pomelo-nwu <czynwu@outlook.com>
Date: Tue, 12 Nov 2024 18:51:20 +0800
Subject: [PATCH] feat: update site

---
 .../graphy/src/pages/dataset/embed/view.tsx   | 50 +++++++--------
 .../graphy/src/pages/dataset/list/action.tsx  | 51 +++++++++++++++
 .../graphy/src/pages/dataset/list/index.tsx   | 29 +++++----
 .../graphy/src/pages/dataset/list/item.tsx    | 62 +++++++++++++------
 .../graphy/src/pages/dataset/list/steps.tsx   | 33 ----------
 .../src/pages/explore/services/kuzu.tsx       |  1 +
 6 files changed, 135 insertions(+), 91 deletions(-)
 create mode 100644 examples/graphy/src/pages/dataset/list/action.tsx

diff --git a/examples/graphy/src/pages/dataset/embed/view.tsx b/examples/graphy/src/pages/dataset/embed/view.tsx
index 58eba9823..b1ae1af9b 100644
--- a/examples/graphy/src/pages/dataset/embed/view.tsx
+++ b/examples/graphy/src/pages/dataset/embed/view.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import ImportorApp, { useContext } from '@graphscope/studio-importor';
 import { Button } from 'antd';
-import { Toolbar, Utils, MultipleInstance } from '@graphscope/studio-components';
+import { Toolbar, Utils } from '@graphscope/studio-components';
 
 import SaveButton from './save';
 import { transformDataToSchema } from './transform';
@@ -36,31 +36,29 @@ const Init = ({ data }) => {
 const EmbedSchemaView: React.FunctionComponent<IModelingProps> = props => {
   const { data } = props;
   return (
-    <MultipleInstance>
-      <ImportorApp
-        style={{
-          height: '300px',
-        }}
-        appMode="PURE"
-        defaultCollapsed={{
-          leftSide: true,
-          rightSide: true,
-        }}
-        leftSide={<LeftSide />}
-        rightSide={<RightSide />}
-        rightSideStyle={{
-          width: '0px',
-          padding: '0px 12px',
-        }}
-        queryPrimitiveTypes={() => {
-          return ['DT_DOUBLE', 'DT_STRING', 'DT_SIGNED_INT32', 'DT_SIGNED_INT64'].map(item => {
-            return { label: item, value: item };
-          });
-        }}
-      >
-        <Init data={data} />
-      </ImportorApp>
-    </MultipleInstance>
+    <ImportorApp
+      style={{
+        height: '300px',
+      }}
+      appMode="PURE"
+      defaultCollapsed={{
+        leftSide: true,
+        rightSide: true,
+      }}
+      leftSide={<LeftSide />}
+      rightSide={<RightSide />}
+      rightSideStyle={{
+        width: '0px',
+        padding: '0px 12px',
+      }}
+      queryPrimitiveTypes={() => {
+        return ['DT_DOUBLE', 'DT_STRING', 'DT_SIGNED_INT32', 'DT_SIGNED_INT64'].map(item => {
+          return { label: item, value: item };
+        });
+      }}
+    >
+      <Init data={data} />
+    </ImportorApp>
   );
 };
 
diff --git a/examples/graphy/src/pages/dataset/list/action.tsx b/examples/graphy/src/pages/dataset/list/action.tsx
new file mode 100644
index 000000000..e21edda88
--- /dev/null
+++ b/examples/graphy/src/pages/dataset/list/action.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+import { Space, Button, theme, Tooltip } from 'antd';
+
+import type { IDataset } from '../typing';
+
+import { downloadDataset, runExtract, deleteDataset, useKuzuGraph } from '../service';
+
+import { FileZipOutlined, DeleteOutlined, GlobalOutlined } from '@ant-design/icons';
+
+const Action: React.FunctionComponent<IDataset> = props => {
+  const { id, refreshList } = props;
+  const [loading, setLoading] = useState(false);
+  const handleDelete = async () => {
+    await deleteDataset(id);
+    refreshList && refreshList();
+  };
+
+  return (
+    <Space>
+      <Tooltip title="Import into GraphScope for graph analysis">
+        <Button
+          icon={<GlobalOutlined />}
+          loading={loading}
+          onClick={async () => {
+            // const rest = await runInteractive(id);
+            setLoading(true);
+            const rest = await useKuzuGraph(id);
+            setLoading(false);
+            window.open(`#/paper-reading?graph_id=${id}`, '_blank');
+          }}
+        >
+          Graph Analysis
+        </Button>
+      </Tooltip>
+      <Tooltip title="Download extracted graph dataset">
+        <Button
+          icon={<FileZipOutlined />}
+          onClick={() => {
+            downloadDataset(id);
+          }}
+        ></Button>
+      </Tooltip>
+      <Tooltip title="Delete dataset">
+        <Button onClick={handleDelete} icon={<DeleteOutlined />}></Button>
+      </Tooltip>
+    </Space>
+  );
+};
+
+export default Action;
diff --git a/examples/graphy/src/pages/dataset/list/index.tsx b/examples/graphy/src/pages/dataset/list/index.tsx
index 8ae0d3504..aa6741108 100644
--- a/examples/graphy/src/pages/dataset/list/index.tsx
+++ b/examples/graphy/src/pages/dataset/list/index.tsx
@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { GraphList, GraphSchema } from '../../components';
 import { queryDataset } from '../service';
 import ListItem from './item';
+import Action from './action';
 const { useToken } = theme;
 import type { IDataset } from '../typing';
 
@@ -34,7 +35,6 @@ const List: React.FunctionComponent<IListProps> = props => {
   const { lists } = state;
   const queryData = async () => {
     const data = await queryDataset();
-
     setState(preState => {
       return {
         ...preState,
@@ -54,18 +54,23 @@ const List: React.FunctionComponent<IListProps> = props => {
         },
       ]}
     >
-      <Flex justify="flex-end" align="center">
-        <Button
-          onClick={() => {
-            navigation('/dataset/create');
-          }}
-        >
-          Create Dataset
-        </Button>
+      {!isEmpty && (
+        <Flex justify="flex-start" align="center">
+          <Button
+            type="primary"
+            onClick={() => {
+              navigation('/dataset/create');
+            }}
+          >
+            Create Dataset
+          </Button>
+        </Flex>
+      )}
+      <Flex vertical gap={24} style={{ marginTop: '24px' }}>
+        {lists.map(item => {
+          return <ListItem key={item.id} {...item} refreshList={queryData} />;
+        })}
       </Flex>
-      {lists.map(item => {
-        return <ListItem key={item.id} {...item} refreshList={queryData} />;
-      })}
       {isEmpty && (
         <Result
           status="404"
diff --git a/examples/graphy/src/pages/dataset/list/item.tsx b/examples/graphy/src/pages/dataset/list/item.tsx
index f114ea6d0..d0669d40c 100644
--- a/examples/graphy/src/pages/dataset/list/item.tsx
+++ b/examples/graphy/src/pages/dataset/list/item.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Typography, Flex, Space, Button, theme, Divider, Tooltip } from 'antd';
+import { Typography, Flex, Space, Button, theme, Divider, Tooltip, Card } from 'antd';
 
 import { useNavigate } from 'react-router-dom';
 
@@ -7,27 +7,35 @@ import { GraphList, GraphSchema } from '../../components';
 import type { IDataset } from '../typing';
 import GraphView from '../embed/view';
 import { downloadDataset, deleteDataset } from '../service';
-import { SettingOutlined, FileZipOutlined, DeploymentUnitOutlined, DeleteOutlined } from '@ant-design/icons';
+import {
+  SettingOutlined,
+  FileZipOutlined,
+  DeploymentUnitOutlined,
+  DeleteOutlined,
+  DatabaseOutlined,
+} from '@ant-design/icons';
 import Steps from './steps';
+import Action from './action';
 // import Steps from './step-custom';
 
 const { useToken } = theme;
 
 export const styles: Record<string, React.CSSProperties> = {
   container: {
-    margin: '24px 0px',
-    padding: '12px',
-    background: '#f4f6f8',
+    margin: '0px',
+    padding: '1px',
+    // background: '#f4f6f8',
   },
   card: {
     borderRadius: '4px',
     padding: '12px',
     background: '#fff',
+    // border: '1px solid #ddd',
   },
 };
 
 const List: React.FunctionComponent<IDataset & { refreshList: () => any }> = props => {
-  const { id, schema, entity, status, refreshList } = props;
+  const { id, schema, entity } = props;
   console.log(props);
   let summarized = false;
   if (entity.length > 0) {
@@ -35,24 +43,38 @@ const List: React.FunctionComponent<IDataset & { refreshList: () => any }> = pro
       return item.summarized === true;
     });
   }
-  const navigation = useNavigate();
-  const handleDelete = () => {
-    deleteDataset(id);
-    refreshList();
-  };
 
   return (
-    <Flex vertical flex={1} style={styles.container} gap={8}>
-      <Steps {...props} />
-      <Flex justify="space-between" gap={8}>
-        <Flex style={{ ...styles.card, flexBasis: '300px' }}>
-          <GraphView data={schema} />
-        </Flex>
-        <Flex flex={1} style={styles.card}>
-          <GraphList dataSource={entity} datasetId={id}></GraphList>
+    <Card
+      title={
+        <Typography.Text>
+          <Button icon={<DatabaseOutlined />} type="text" />
+          {id}
+        </Typography.Text>
+      }
+      extra={<Action {...props} />}
+      styles={{
+        body: { padding: '0px', margin: '0px' },
+        header: {
+          padding: '12px',
+        },
+      }}
+    >
+      <Flex vertical flex={1} style={styles.container}>
+        <Steps {...props} />
+        <Divider style={{ margin: 0 }} />
+
+        <Flex justify="space-between" gap={8}>
+          <Flex style={{ ...styles.card, flexBasis: '300px' }}>
+            <GraphView data={schema} />
+          </Flex>
+          <Divider type="vertical" style={{ height: '327px' }} />
+          <Flex flex={1} style={styles.card}>
+            <GraphList dataSource={entity} datasetId={id}></GraphList>
+          </Flex>
         </Flex>
       </Flex>
-    </Flex>
+    </Card>
   );
 };
 
diff --git a/examples/graphy/src/pages/dataset/list/steps.tsx b/examples/graphy/src/pages/dataset/list/steps.tsx
index c01fb2160..09e462c3f 100644
--- a/examples/graphy/src/pages/dataset/list/steps.tsx
+++ b/examples/graphy/src/pages/dataset/list/steps.tsx
@@ -46,14 +46,6 @@ const DatasetSteps: React.FunctionComponent<IDataset> = props => {
     const data = await runExtract(id);
     refreshList && refreshList();
   };
-  const handleDownload = async () => {
-    const data = await runExtract(id);
-    console.log('data', data);
-  };
-  const handleDelete = () => {
-    deleteDataset(id);
-    refreshList && refreshList();
-  };
 
   return (
     <Flex justify="space-between" align="center" style={styles.card} gap={100}>
@@ -104,31 +96,6 @@ const DatasetSteps: React.FunctionComponent<IDataset> = props => {
           },
         ]}
       />
-
-      <Space>
-        <Tooltip title="Import into GraphScope for graph analysis">
-          <Button
-            icon={<GlobalOutlined />}
-            onClick={async () => {
-              // const rest = await runInteractive(id);
-              const rest = await useKuzuGraph(id);
-              console.log(rest, id);
-              window.open(`#/paper-reading?graph_id=${id}`, '_blank');
-            }}
-          ></Button>
-        </Tooltip>
-        <Tooltip title="Download extracted graph dataset">
-          <Button
-            icon={<FileZipOutlined />}
-            onClick={() => {
-              downloadDataset(id);
-            }}
-          ></Button>
-        </Tooltip>
-        <Tooltip title="Delete dataset">
-          <Button onClick={handleDelete} icon={<DeleteOutlined />}></Button>
-        </Tooltip>
-      </Space>
     </Flex>
   );
 };
diff --git a/examples/graphy/src/pages/explore/services/kuzu.tsx b/examples/graphy/src/pages/explore/services/kuzu.tsx
index ee5577212..63c84f740 100644
--- a/examples/graphy/src/pages/explore/services/kuzu.tsx
+++ b/examples/graphy/src/pages/explore/services/kuzu.tsx
@@ -29,6 +29,7 @@ export const queryStatistics = async () => {
 };
 export const reload = async () => {
   const graph_id = (Utils.getSearchParams('graph_id') || '0') as string;
+  debugger;
   const driver = await getDriver();
   await driver.switchDataset(graph_id);
   window.KUZU_DRIVER = driver;