Merge pull request #727 from xuewenjie123/fix-upfile-graphModel

Fix upfile graph model

Author: pomelo-nwu

packages/studio-components/src/EmptyCanvas/index.md

@@ -6,7 +6,7 @@ import { EmptyCanvas } from '@graphscope/studio-components';
 export default () => {
   return (
     <div>
-      <EmptyCanvas />
+      <EmptyCanvas description="This is a empty canvas"/>
     </div>
   );
 };

packages/studio-components/src/ImportFiles/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, LegacyRef } from 'react';
+import React, { forwardRef, useState, LegacyRef, useEffect } from 'react';
 import UploadFile from './update-file';
 import { Button, Collapse, Space, Typography } from 'antd';
 import Mapping from './mapping';
@@ -12,6 +12,7 @@ export interface IState {
   files: ParsedFile[];
   loading: boolean;
   csvFiles: File[];
+  completed: boolean;
 }
 
 export interface IImportFromFileProps {
@@ -33,11 +34,21 @@ const ImportFromCSV = forwardRef((props: IImportFromFileProps, ref: LegacyRef<HT
     files: [],
     loading: false,
     csvFiles: [],
+    completed: false
   });
 
-  const { files } = state;
+  const { files } = state;  
+  const handleAllCompleted = () => {
+    setState(preState => {
+      return {
+        ...preState,
+        completed: true,
+      };
+    });
+  };
+
+
   const onChange = (value: ParsedFile[], csvFiles?: File[]) => {
-    console.log(value);
     setState(preState => {
       return {
         ...preState,
@@ -53,12 +64,24 @@ const ImportFromCSV = forwardRef((props: IImportFromFileProps, ref: LegacyRef<HT
         ...preState,
         files: [],
         csvFiles: [],
+        completed: false,
       };
     });
     localforage.setItem('DRAFT_GRAPH_FILES', []);
   };
   const isEmpty = files.length === 0;
 
+  useEffect(() => {
+    if(isEmpty){
+      setState(preState => {
+        return {
+          ...preState,
+          completed: false,
+        };
+      });
+    }
+  }, [isEmpty]);
+
   const items = files.map((item, index) => {
     const { meta, id } = item;
     return {
@@ -96,7 +119,7 @@ const ImportFromCSV = forwardRef((props: IImportFromFileProps, ref: LegacyRef<HT
         }}
       >
         {isEmpty ? (
-          <UploadFile isSaveFiles={isSaveFiles} onChange={onChange} {...upload} />
+          <UploadFile onAllCompleted={handleAllCompleted} isSaveFiles={isSaveFiles} onChange={onChange} {...upload} />
         ) : (
           <>
             {/* <Typography.Text type="secondary">fffdsaf</Typography.Text> */}

packages/studio-components/src/ImportFiles/mapping-header.tsx

@@ -14,6 +14,7 @@ interface IMappingHeaderProps {
       files: ParsedFile[];
       loading: boolean;
       csvFiles: File[];
+      completed: boolean;
     }>
   >;
   meta: IMeta;

packages/studio-components/src/ImportFiles/mapping.tsx

@@ -11,6 +11,7 @@ interface IMappingProps {
       files: ParsedFile[];
       loading: boolean;
       csvFiles: File[];
+      completed: boolean;
     }>
   >;
 

packages/studio-components/src/ImportFiles/update-file.tsx

@@ -10,26 +10,43 @@ const { Dragger } = Upload;
 export type IProps = {
   onChange?: (value: ParsedFile[], csvFiles?: File[]) => void;
   isSaveFiles?: boolean;
+  onAllCompleted?: () => void; // 新增：所有文件上传完成后的回调
 } & Pick<IImportFromFileProps['upload'], 'accept' | 'description' | 'title'>;
 
-const UploadFile = ({ onChange, accept, title, description, isSaveFiles }: IProps) => {
+const UploadFile = ({ onChange, accept, title, description, isSaveFiles, onAllCompleted }: IProps) => {
+  const activePromises = React.useRef<Promise<void>[]>([]);
   const customRequest: UploadProps['customRequest'] = async options => {
     const { file } = options;
     const { type } = file as File;
 
-    try {
-      if (type === 'application/json') {
-        const files = await parseJSON(file as File);
-        onChange && onChange(files);
+    const uploadPromise = (async () => {
+      try {
+        if (type === 'application/json') {
+          const files = await parseJSON(file as File);
+          if(onChange){
+            onChange(files);
+          }
+        }
+        if (type === 'text/csv') {
+          const csvFiles = isSaveFiles ? [file] : [];
+          const files = await parseCSV(file as File);
+          if(onChange){
+            onChange([files], csvFiles as File[]);
+          }
+        }
+      } catch (error) {
+        console.error('解析文件失败:', error);
       }
-      if (type === 'text/csv') {
-        const csvFiles = isSaveFiles ? [file] : [];
-        const files = await parseCSV(file as File);
-        onChange && onChange([files], csvFiles as File[]);
+    })();
+    activePromises.current.push(uploadPromise);
+
+    uploadPromise.finally(() => {
+      activePromises.current = activePromises.current.filter(p => p !== uploadPromise);
+      if (activePromises.current.length === 0 && onAllCompleted) {
+        onAllCompleted();
       }
-    } catch (error) {
-      console.error('解析文件失败:', error);
-    }
+    });
+    return uploadPromise;
   };
   const onDrop = e => {
     console.log('Dropped files', e.dataTransfer.files);

packages/studio-components/src/Importor/index.zh-CN.md

@@ -21,7 +21,7 @@ export default () => {
     return { nodes: [], edges: [] };
   };
   return (
-    <div style={{ position: 'relative', height: '400px' }}>
+    <div >
       <ImportorApp
         /** 属性下拉选项值 */
         queryPrimitiveTypes={() => {
@@ -50,7 +50,7 @@ export default () => {
     return { nodes: [], edges: [] };
   };
   return (
-    <div style={{ position: 'relative', height: '400px' }}>
+    <div>
       <ImportorApp
         /** 属性下拉选项值 */
         queryPrimitiveTypes={() => {

packages/studio-components/src/SideTabs/index.md

@@ -3,7 +3,7 @@
 ```jsx
 import React, { useState } from 'react';
 import { Space } from 'antd';
-import { SegmentedTabs } from '@graphscope/studio-components';
+import { SideTabs } from '@graphscope/studio-components';
 const Tab1 = () => {
   return <div>Tab-1 components</div>;
 };
@@ -33,7 +33,7 @@ export default () => {
   ];
   return (
     <div>
-      <Sidebar options={items} value="Tab-1" collapse={false} />
+      <SideTabs items={items}  />
     </div>
   );
 };

packages/studio-importor/src/app/import-schema/import-from-csv/index.tsx

@@ -6,6 +6,8 @@ import { transform } from './transform';
 import { Button } from 'antd';
 import localforage from 'localforage';
 import { FormattedMessage } from 'react-intl';
+
+
 interface IImportFromCSVProps {
   onCallback?: () => void;
 }
@@ -18,6 +20,7 @@ const ImportFromCSV: React.FunctionComponent<IImportFromCSVProps> = props => {
     params: {
       files: ParsedFile[];
       csvFiles: File[];
+      completed: boolean;
     },
     updateState,
   ) => {
@@ -67,7 +70,7 @@ const ImportFromCSV: React.FunctionComponent<IImportFromCSVProps> = props => {
     >
       {(params, updateState) => {
         return (
-          <Button type="primary" onClick={() => onSubmit(params, updateState)} loading={params.loading}>
+          <Button type="primary" onClick={() => onSubmit(params, updateState)} loading={!params.completed||params.loading}>
             <FormattedMessage id="Generate graph model" />
           </Button>
         );