diff --git a/app/config/locale/en-US.json b/app/config/locale/en-US.json
index 2956fa42..fb3e8789 100644
--- a/app/config/locale/en-US.json
+++ b/app/config/locale/en-US.json
@@ -19,7 +19,6 @@
     "confirm": "Confirm",
     "import": "Import",
     "ask": "Are you sure to proceed?",
-    "output": "Export CSV File",
     "openInExplore": "Open In Explorer",
     "schema": "Schema",
     "create": "Create",
@@ -77,7 +76,7 @@
     "username": "Username",
     "password": "Password",
     "success": "succeed",
-    "clear": "Clear Connection",
+    "clear": "Log out",
     "title": "Connect to Nebula Graph"
   },
   "formRules": {
@@ -85,6 +84,7 @@
     "usernameRequired": "Username Required",
     "passwordRequired": "Password Required",
     "positiveIntegerRequired": "Please enter a non-negative integer",
+    "nameValidate": "The name must start with a letter, and it only supports English letters, numbers and underscores",
     "nameRequired": "Please enter the name",
     "numberRequired": "Please enter a positive integer",
     "replicaLimit": "Replica factor must not exceed the number of your current online machines({number})",
@@ -130,7 +130,6 @@
     "fileSize": "Size",
     "fileTitle": "Select Files",
     "bindDatasource": "Bind Datasource",
-    "confirm": "Confirm",
     "endImport": "Stop Import",
     "prop": "Prop",
     "mapping": "CSV Index",
@@ -154,10 +153,15 @@
     "addTag": "Add Tag",
     "config": "Task Config",
     "parseFailed": "File parsing failed",
-    "uploadTemplate": "Click or drag the yaml configuration file to this area to upload",
-    "uploadTemplateTip": "Please keep only the file name (retain the file extension) for all file paths in the template, such as logPath: config.csv",
-    "fileUploadRequired": "Make sure all csv data files are uploaded before uploading the configuration",
-    "reUpload": "Re-upload"
+    "uploadTemplate": "Drag & drop the YAML configuration file to this area",
+    "uploadBoxTip": "The YAML configuration file is used to describe information about the files to be imported, the Nebula Graph server, and more. ",
+    "fileUploadRequired": "1. Please make sure all CSV data files are uploaded before import the YAML file. If not, please go to ",
+    "fileUploadRequired2": " first.",
+    "exampleDownload": "2. An example for the configuration file: ",
+    "uploadTemplateTip": "3. 3. Configure the Yaml file: please keep only the file name (retain the file extension) for all file paths (path, failDataPath, logPath) in the template, e.g. logPath: config.csv",
+    "reUpload": "Re-upload",
+    "fileNotExist": "{name} file does not exist！",
+    "importYaml": "Import the YAML file"
   },
   "schema": {
     "spaceList": "Graph Space List",
@@ -215,11 +219,13 @@
     "deleteSpace": "Delete Graph Space",
     "cloneSpace": "Clone Graph Space",
     "length": "Length",
-    "selectVidTypeTip": "Please select the type"
+    "selectVidTypeTip": "Please select the type",
+    "csvDownload": "Export CSV File",
+    "pngDownload": "Export PNG File"
   },
   "menu": {
     "use": "Use Manual",
-    "release": "New Version",
+    "release": "Release Note",
     "forum": "Help Forum",
     "nGql": "nGQL"
   },
diff --git a/app/config/locale/zh-CN.json b/app/config/locale/zh-CN.json
index 170ed0f2..2bfe14b1 100644
--- a/app/config/locale/zh-CN.json
+++ b/app/config/locale/zh-CN.json
@@ -19,7 +19,6 @@
     "confirm": "确认",
     "import": "导入",
     "ask": "确定进行当前操作？",
-    "output":"导出CSV文件",
     "openInExplore": "导入图探索",
     "schema": "Schema",
     "create": "创建",
@@ -77,7 +76,7 @@
     "username": "用户名",
     "password": "密码",
     "success": "配置成功",
-    "clear": "清除连接",
+    "clear": "登出",
     "title": "配置数据库"
   },
   "formRules": {
@@ -85,6 +84,7 @@
     "usernameRequired": "请填写用户名",
     "passwordRequired": "请填写密码",
     "positiveIntegerRequired": "请输入一个非负整数",
+    "nameValidate": "命名必须以字母开头，且只支持输入英文字母、数字以及下划线_",
     "nameRequired": "请输入名称",
     "numberRequired": "请输入正整数",
     "replicaLimit": "副本数量不得超过你当前 online 机器数量({number})",
@@ -130,7 +130,6 @@
     "fileSize": "大小",
     "fileTitle": "文件列表",
     "bindDatasource": "绑定数据源",
-    "confirm": "确认",
     "endImport": "终止导入",
     "prop": "属性",
     "mapping": "对应列标",
@@ -154,10 +153,15 @@
     "addTag": "添加 Tag",
     "config": "任务配置",
     "parseFailed": "文件解析失败",
-    "uploadTemplate": "点击或拖动yaml配置文件到该区域上传",
-    "uploadTemplateTip": "模板中所有文件路径请仅保留文件名(保留文件扩展名），比如 logPath: config.csv",
-    "fileUploadRequired": "上传配置前请确保所有 csv 数据文件已上传",
-    "reUpload": "重新上传"
+    "uploadTemplate": "将 YAML 配置文件拖放到该区域",
+    "uploadBoxTip": "The YAML configuration file is used to describe information about the files to be imported, the Nebula Graph server, and more. ",
+    "fileUploadRequired": "1. 请确保在导入 YAML 文件之前上传所有 CSV 数据文件。 如果没有，请先前往",
+    "fileUploadRequired2": "数据文件",
+    "exampleDownload": "2. 配置文件示例:",
+    "uploadTemplateTip": "3.配置Yaml文件：模板中所有文件路径（path、failDataPath、logPath）请只保留文件名（保留文件扩展名），例如： 日志路径：config.csv",
+    "reUpload": "重新上传",
+    "fileNotExist": "文件 {name} 不存在",
+    "importYaml": "导入 YAML 文件"
   },
   "schema": {
     "spaceList": "图空间列表",
@@ -215,11 +219,13 @@
     "deleteSpace": "删除图空间",
     "cloneSpace": "克隆图空间",
     "length": "长度",
-    "selectVidTypeTip": "选择 Vid 类型"
+    "selectVidTypeTip": "选择 Vid 类型",
+    "csvDownload": "导出 CSV",
+    "pngDownload": " 导出 PNG"
   },
   "menu": {
     "use": "使用手册",
-    "release": "新发布",
+    "release": "更新日志",
     "forum": "求助论坛",
     "nGql": "nGQL"
   },
diff --git a/app/config/rules.ts b/app/config/rules.ts
index baa83422..0d0ad482 100644
--- a/app/config/rules.ts
+++ b/app/config/rules.ts
@@ -1,4 +1,4 @@
-import { POSITIVE_INTEGER_REGEX } from '@app/utils/constant';
+import { NAME_REGEX, POSITIVE_INTEGER_REGEX } from '@app/utils/constant';
 import intl from 'react-intl-universal';
 
 export const hostRulesFn = () => [
@@ -22,12 +22,22 @@ export const passwordRulesFn = () => [
   },
 ];
 
-export const nameRulesFn = () => [
-  {
-    required: true,
-    message: intl.get('formRules.nameRequired'),
-  },
-];
+export const nameRulesFn = () => {
+  const version = sessionStorage.getItem('nebulaVersion');
+  const nameRequired = [
+    {
+      required: true,
+      message: intl.get('formRules.nameRequired'),
+    },
+  ];
+  const nameValidate = [
+    {
+      pattern: NAME_REGEX,
+      message: intl.get('formRules.nameValidate'),
+    },
+  ];
+  return version?.startsWith('v2') ? [...nameRequired, ...nameValidate] : nameRequired;
+};
 
 export const numberRulesFn = () => [
   {
diff --git a/app/pages/Console/ExportModal.tsx b/app/pages/Console/ExportModal.tsx
index 115678d9..92acd8e1 100644
--- a/app/pages/Console/ExportModal.tsx
+++ b/app/pages/Console/ExportModal.tsx
@@ -84,7 +84,7 @@ const ExportModal = (props: IProps) => {
             </Radio.Button>
           </Radio.Group>
         </Form.Item>
-        <Form.Item noStyle={true} dependencies={['type']}>
+        <Form.Item noStyle dependencies={['type']}>
           {({ getFieldValue }) => {
             const type = getFieldValue('type');
             return type === 'vertex' ? <>
@@ -133,7 +133,7 @@ const ExportModal = (props: IProps) => {
             </>;
           }}
         </Form.Item>
-        <Form.Item noStyle={true}>
+        <Form.Item noStyle>
           <Button
             htmlType="submit"
             type="primary"
diff --git a/app/pages/Console/OutputBox/ForceGraph/DisplayPanel/index.less b/app/pages/Console/OutputBox/ForceGraph/DisplayPanel/index.less
index 1b2220ab..840cae67 100644
--- a/app/pages/Console/OutputBox/ForceGraph/DisplayPanel/index.less
+++ b/app/pages/Console/OutputBox/ForceGraph/DisplayPanel/index.less
@@ -1,6 +1,6 @@
 @import '~@app/common.less';
 
-.display-panel {
+.output-display-panel {
 	position: absolute;
 	top: 0;
 	right: 0;
diff --git a/app/pages/Console/OutputBox/ForceGraph/DisplayPanel/index.tsx b/app/pages/Console/OutputBox/ForceGraph/DisplayPanel/index.tsx
index 24b902df..9603033e 100644
--- a/app/pages/Console/OutputBox/ForceGraph/DisplayPanel/index.tsx
+++ b/app/pages/Console/OutputBox/ForceGraph/DisplayPanel/index.tsx
@@ -18,7 +18,7 @@ const DisplayPanel = (props: IProps) => {
   const [visible, setVisible] = useState(false);
   const { data, spaceVidType } = props;
   return (
-    <div className="display-panel">
+    <div className="output-display-panel">
       <div className="btn-toggle-panel" onClick={() => setVisible(!visible)}>
         <Icon type="icon-studio-btn-back" />
       </div>
diff --git a/app/pages/Console/OutputBox/ForceGraph/index.tsx b/app/pages/Console/OutputBox/ForceGraph/index.tsx
index d3ecaf3d..e4993b8e 100644
--- a/app/pages/Console/OutputBox/ForceGraph/index.tsx
+++ b/app/pages/Console/OutputBox/ForceGraph/index.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { parseSubGraph } from '@app/utils/parseData';
 import { v4 as uuidv4 } from 'uuid';
 import { useStore } from '@app/stores';
+import { GraphStore } from '@app/stores/graph';
 import { initTooltip } from './Tootip';
 import DisplayPanel from './DisplayPanel';
 import OperationPanel from './OperationPanel';
@@ -14,12 +15,13 @@ import './index.less';
 interface IProps {
   data: any;
   spaceVidType: string;
+  onGraphInit: (graph: GraphStore) => void;
 }
 const ForceGraphBox = (props: IProps) => {
   const [uuid ] = useState(uuidv4());
   const { graphInstances: { graphs, initGraph, clearGraph } } = useStore();
   const grapfDomRef = useRef<any>();
-  const { data, spaceVidType } = props;
+  const { data, spaceVidType, onGraphInit } = props;
   const [loading, setLoading] = useState(false);
   const init = async () => {
     const { vertexes, edges } = parseSubGraph(data, spaceVidType);
@@ -29,6 +31,7 @@ const ForceGraphBox = (props: IProps) => {
       id: uuid,
       data: { vertexes, edges }
     });
+    onGraphInit(graphs[uuid]);
     initTooltip({ container: grapfDomRef.current, id: uuid });
     initBrushSelect({ container: grapfDomRef.current, id: uuid });
     setLoading(false);
diff --git a/app/pages/Console/OutputBox/index.less b/app/pages/Console/OutputBox/index.less
index 3e7ef007..3f18c54d 100644
--- a/app/pages/Console/OutputBox/index.less
+++ b/app/pages/Console/OutputBox/index.less
@@ -1,6 +1,7 @@
 @import '~@app/common.less';
 .output-box {
 	overflow: hidden;
+	max-height: 850px;
 	background: #fff;
 	position: relative;
 	display: flex;
@@ -49,6 +50,9 @@
 			span.btn-yellow svg{
 				fill: #F2C94C;
 			}
+			.btn-export {
+				cursor: pointer;
+			}
 		}
 	}
 
@@ -126,3 +130,22 @@
 		letter-spacing: 1.48px;
 	}
 }
+
+.export-popover {
+	.ant-popover-inner-content {
+		padding: 0;
+		border-radius: 3px;
+	}
+	.download-item {
+		padding: 10px 20px;
+		display: flex;
+    align-items: center;
+    justify-content: center;
+    color: black;
+    font-weight: 400;
+		font-size: 12px;
+		&[disabled] {
+			color: rgba(0, 0, 0, 0.25);
+		}
+	}
+}
\ No newline at end of file
diff --git a/app/pages/Console/OutputBox/index.tsx b/app/pages/Console/OutputBox/index.tsx
index bef12964..b8d55078 100644
--- a/app/pages/Console/OutputBox/index.tsx
+++ b/app/pages/Console/OutputBox/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Table, Tabs, Tooltip } from 'antd';
+import { Button, Table, Tabs, Tooltip, Popover } from 'antd';
 import { BigNumber } from 'bignumber.js';
 import React, { useCallback, useEffect, useState } from 'react';
 import intl from 'react-intl-universal';
@@ -9,6 +9,7 @@ import { v4 as uuidv4 } from 'uuid';
 import Icon from '@app/components/Icon';
 import { parseSubGraph } from '@app/utils/parseData';
 import classNames from 'classnames';
+import { GraphStore } from '@app/stores/graph';
 import Graphviz from './Graphviz';
 import ForceGraph from './ForceGraph';
 
@@ -38,6 +39,8 @@ const OutputBox = (props: IProps) => {
   const [dataSource, setDataSource] = useState<any>([]);
   const [isFavorited, setIsFavorited] = useState(false);
   const [showGraph, setShowGraph] = useState(false);
+  const [graph, setGraph] = useState<GraphStore | null>(null);
+  const [tab, setTab] = useState('');
   const initData = () => {
     let _columns = [] as any;
     let _dataSource = [] as any;
@@ -110,6 +113,7 @@ const OutputBox = (props: IProps) => {
   }, []);
 
   const handleTabChange = useCallback(key => {
+    setTab(key);
     trackEvent('console', `change_tab_${key}`);
   }, []);
 
@@ -145,7 +149,7 @@ const OutputBox = (props: IProps) => {
     });
   };
 
-  const downloadData = () => {
+  const downloadCsv = () => {
     if (!data) {
       return ;
     }
@@ -178,6 +182,31 @@ const OutputBox = (props: IProps) => {
     link.click();
   };
 
+  const downloadPng = () => {
+    if(graph) {
+      let canvas = graph.twoGraph.canvas;
+      const shadowCanvas = document.createElement('canvas');
+      shadowCanvas.width = canvas.width;
+      shadowCanvas.height = canvas.height;
+      const ctx = shadowCanvas.getContext('2d');
+      ctx.fillStyle = '#F3F6F9';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(canvas, 0, 0);
+      canvas = shadowCanvas;
+      setTimeout(() => {
+        canvas.toBlob(blob => {
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = canvas.toDataURL('image/png');
+          a.download = 'Image.png';
+          a.click();
+          window.URL.revokeObjectURL(url);
+        });
+      }, 0);
+    }
+    trackEvent('console', 'export_graph_png');
+  };
+
   const handleExplore = () => {
     if (
       data.tables.filter(
@@ -220,12 +249,20 @@ const OutputBox = (props: IProps) => {
             onClick={removeFavorite}
           />
         </Tooltip>}
-        <Tooltip title={intl.get('common.output')} placement="top">
-          <Icon
-            type="icon-studio-btn-output"
-            onClick={downloadData}
-          />
-        </Tooltip>
+        <Popover
+          overlayClassName="export-popover"
+          placement="bottom"
+          content={<>
+            <Button type="link" className="download-item" onClick={downloadCsv}>
+              {intl.get('schema.csvDownload')}
+            </Button>
+            <Button disabled={!graph || tab !== 'graph'} type="link" className="download-item" onClick={downloadPng}>
+              {intl.get('schema.pngDownload')}
+            </Button>
+          </>}
+        >
+          <Icon className="btn-export" type="icon-studio-btn-output" />
+        </Popover>
         {visible ? <Icon
           type="icon-studio-btn-up"
           onClick={() => setVisible(false)}
@@ -293,7 +330,7 @@ const OutputBox = (props: IProps) => {
               }
               key="graph"
             >
-              <ForceGraph data={dataSource} spaceVidType={spaceVidType} />
+              <ForceGraph data={dataSource} spaceVidType={spaceVidType} onGraphInit={setGraph} />
             </Tabs.TabPane>
           )}
           {code !== 0 && (
diff --git a/app/pages/Console/index.less b/app/pages/Console/index.less
index 0747e6fb..300bbfd9 100644
--- a/app/pages/Console/index.less
+++ b/app/pages/Console/index.less
@@ -82,6 +82,7 @@
         border: 1px solid @gray;
         border-top: none;
         cursor: pointer;
+        opacity: 0.7;
         svg {
           fill: @darkBlue;
         }
diff --git a/app/pages/Console/index.tsx b/app/pages/Console/index.tsx
index ec735c65..12e0060e 100644
--- a/app/pages/Console/index.tsx
+++ b/app/pages/Console/index.tsx
@@ -39,7 +39,7 @@ const Console = (props: IProps) => {
   const { onExplorer } = props;
   const { spaces, getSpaces, switchSpace, currentSpace } = schema;
   const { runGQL, currentGQL, results, runGQLLoading, getParams, update, paramsMap } = console;
-  const { username, host } = global;
+  const { username, host, nebulaVersion } = global;
   const [isUpDown, setUpDown] = useState(false);
   const [modalVisible, setModalVisible] = useState(false);
   const [modalData, setModalData] = useState<any>(null);
@@ -154,7 +154,7 @@ const Console = (props: IProps) => {
             </div>
           </div>
           <div className="code-input">
-            <CypherParameterBox onSelect={addParam} data={paramsMap} />
+            {nebulaVersion?.startsWith('v3') && <CypherParameterBox onSelect={addParam} data={paramsMap} />}
             <CodeMirror
               value={currentGQL}
               onBlur={value => update({ currentGQL: value })}
diff --git a/app/pages/Doc/index.tsx b/app/pages/Doc/index.tsx
index 60158192..6546f0f4 100644
--- a/app/pages/Doc/index.tsx
+++ b/app/pages/Doc/index.tsx
@@ -20,7 +20,7 @@ const MODULES = [
     icon: 'icon-studio-nav-import',
     title: 'import.importData',
     tip: 'doc.importIntro',
-    link: '/import'
+    link: '/import/files'
   },
   {
     icon: 'icon-studio-nav-console',
diff --git a/app/pages/Import/FileUpload/index.tsx b/app/pages/Import/FileUpload/index.tsx
index cd86c5b6..55610c6b 100644
--- a/app/pages/Import/FileUpload/index.tsx
+++ b/app/pages/Import/FileUpload/index.tsx
@@ -13,7 +13,7 @@ import './index.less';
 
 const FileUpload = () => {
   const { files } = useStore();
-  const { fileList, uploadDir, asyncDeleteFile, asyncGetFiles, asyncUploadFile, asyncGetUploadDir } = files;
+  const { fileList, uploadDir, deleteFile, getFiles, uploadFile, getUploadDir } = files;
   const [loading, setLoading] = useState(false);
   const transformFile = async file => {
     file.path = `${uploadDir}/${file.name}`;
@@ -30,14 +30,14 @@ const FileUpload = () => {
         'content-type': 'multipart/form-data',
       },
     };
-    await asyncUploadFile({ data, config }).then(_ => {
-      asyncGetFiles();
+    await uploadFile({ data, config }).then(_ => {
+      getFiles();
     });
     setLoading(false);
   };
   useEffect(() => {
-    asyncGetFiles();
-    asyncGetUploadDir();
+    getFiles();
+    getUploadDir();
     trackPageView('/import/files');
   }, []);
   const columns = [
@@ -67,7 +67,7 @@ const FileUpload = () => {
                 <Icon type="icon-studio-btn-detail" />
               </CSVPreviewLink>
               <Popconfirm
-                onConfirm={() => asyncDeleteFile(index)}
+                onConfirm={() => deleteFile(index)}
                 title={intl.get('common.ask')}
                 okText={intl.get('common.ok')}
                 cancelText={intl.get('common.cancel')}
diff --git a/app/pages/Import/TaskCreate/FileSelect/index.tsx b/app/pages/Import/TaskCreate/FileSelect/index.tsx
index d9ecd754..36c651cb 100644
--- a/app/pages/Import/TaskCreate/FileSelect/index.tsx
+++ b/app/pages/Import/TaskCreate/FileSelect/index.tsx
@@ -17,7 +17,7 @@ const FormItem = Form.Item;
 const FileSelect = (props: IProps) => {
   const { type } = props;
   const { files, dataImport: { update, verticesConfig, edgesConfig } } = useStore();
-  const { fileList, asyncGetFiles } = files;
+  const { fileList, getFiles } = files;
   const [visible, setVisible] = useState(false);
   const onFinish = (value) => {
     const file = fileList.filter(item => item.name === value.name)[0];
@@ -43,7 +43,7 @@ const FileSelect = (props: IProps) => {
     setVisible(false);
   };
   useEffect(() => {
-    asyncGetFiles();
+    getFiles();
   }, []);
   return (
     <Popover
@@ -64,7 +64,7 @@ const FileSelect = (props: IProps) => {
         </FormItem>
         <FormItem>
           <Button htmlType="submit" type="primary">
-            {intl.get('import.confirm')}
+            {intl.get('common.confirm')}
           </Button>
         </FormItem>
       </Form>}
diff --git a/app/pages/Import/TaskList/TaskItem/LogModal/index.less b/app/pages/Import/TaskList/TaskItem/LogModal/index.less
index 4a3d09f7..66bf2260 100644
--- a/app/pages/Import/TaskList/TaskItem/LogModal/index.less
+++ b/app/pages/Import/TaskList/TaskItem/LogModal/index.less
@@ -33,7 +33,7 @@
     height: 100%;
     overflow: auto;
     padding: 10px 20px 120px;
-    font-size: 18px;
+    font-size: 12px;
     text-align: left;
     background: #333;
     color: #fff;
@@ -55,6 +55,9 @@
         color: #fff;
       }
     }
+    .ant-tabs-nav-list {
+      background-color: @lightGray;
+    }
   }
   .ant-tabs-content-holder > .ant-tabs-content {
     display: none
diff --git a/app/pages/Import/TaskList/TaskItem/index.less b/app/pages/Import/TaskList/TaskItem/index.less
index be8d1eff..18175080 100644
--- a/app/pages/Import/TaskList/TaskItem/index.less
+++ b/app/pages/Import/TaskList/TaskItem/index.less
@@ -25,6 +25,7 @@
       display: flex;
       justify-content: space-between;
       margin-bottom: 12px;
+      padding-right: calc(2em + 8px);
       .task-name {
         font-family: Roboto-Bold, serif;
         font-style: normal;
diff --git a/app/pages/Import/TaskList/TemplateModal/index.less b/app/pages/Import/TaskList/TemplateModal/index.less
index 2269e8f2..e61d1c15 100644
--- a/app/pages/Import/TaskList/TemplateModal/index.less
+++ b/app/pages/Import/TaskList/TemplateModal/index.less
@@ -1,25 +1,63 @@
 @import '~@app/common.less';
 .config-import-modal {
   .ant-modal-body {
-    width: 100%;
-    padding-top: 50px;
+    width:750px;
+    margin: 0 auto;
     .tip {
-      background: @lightBlue;
-      font-size: 16px;
-      padding: 10px;
+      font-size: 14px;
+      color: #828282;
+    }
+    .btn-example-download {
+      padding-left: 0;
     }
   }
   .dragger-template {
     margin-top: 30px;
-    .btn-add-file svg{
-      width: 30px;
-      height: 30px;
+    background: #FFFFFF;
+    border: 1px dashed #000000;
+    .ant-upload-btn {
+      padding: 27px 30px;
+      & > .ant-upload-drag-container {
+        display: flex;
+      }
+      .btn-add-file svg{
+        width: 95px;
+        height: 95px;
+        fill: @darkBlue;
+      }
+      .drag-tip {
+        display: flex;
+        flex-direction: column;
+        margin-left: 28px;
+        align-items: flex-start;
+        text-align: left;
+      }
+      .ant-upload-text {
+        font-weight: 400;
+        font-size: 18px;
+      }
+      .ant-upload-hint {
+        font-weight: 400;
+        font-size: 14px;
+        color: #828282;
+      }
     }
   }
   .ant-form {
-    text-align: right;
-    button:not(:last-child) {
-      margin-right: 10px;
+    text-align: center;
+    .config-area {
+      color: @darkBlue;
+      max-height: 360px !important;
+      overflow: auto;
+      &[disabled] {
+        background-color: #fff;
+      }
+    }
+    button {
+      width: 140px;
+      &:not(:last-child) {
+        margin-right: 10px;
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/app/pages/Import/TaskList/TemplateModal/index.tsx b/app/pages/Import/TaskList/TemplateModal/index.tsx
index 3bc2d75b..5505fdd8 100644
--- a/app/pages/Import/TaskList/TemplateModal/index.tsx
+++ b/app/pages/Import/TaskList/TemplateModal/index.tsx
@@ -3,11 +3,14 @@ import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import intl from 'react-intl-universal';
 import Icon from '@app/components/Icon';
+import { Link } from 'react-router-dom';
 import './index.less';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@app/stores';
 import { readFileContent } from '@app/utils/file';
 import yaml from 'js-yaml';
+import json2yaml from 'json2yaml';
+import { exampleJson } from '@app/utils/import';
 const { Dragger } = Upload;
 const { TextArea } = Input;
 
@@ -22,33 +25,44 @@ const TemplateModal = (props: IProps) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
   const [config, setConfig] = useState('');
-  const { dataImport: { getTaskDir, taskDir, importTask }, files: { uploadDir, asyncGetUploadDir } } = useStore();
+  const { dataImport: { getTaskDir, taskDir, importTask }, files: { uploadDir, getUploadDir, getFiles, fileList } } = useStore();
   useEffect(() => {
     if(!uploadDir) {
-      asyncGetUploadDir();
+      getUploadDir();
     }
     getTaskDir();
+    getFiles();
   }, []);
   const handleFileImport = async ({ file }) => {
     await setLoading(true);
+    const files = fileList.map(item => item.name);
     const content = await readFileContent(file);
     const parseContent = yaml.load(content);
-    if(typeof parseContent === 'object') {
-      const _taskDir = taskDir.endsWith('/') ? taskDir : taskDir + '/';
-      const _uploadDir = uploadDir.endsWith('/') ? uploadDir : uploadDir + '/';
-      parseContent.logPath = _taskDir + parseContent.logPath;
-      parseContent.files.forEach(file => {
-        file.path = _uploadDir + file.path;
-        file.failDataPath = _taskDir + `err/${file.failDataPath}`;
-      });
-      setConfig(JSON.stringify(parseContent, null, 2));
-      form.setFieldsValue({
-        content: JSON.stringify(parseContent, null, 2),
-      });
-    } else {
-      return message.warning(intl.get('import.parseFailed'));
+    try {
+      if(typeof parseContent === 'object') {
+        const _taskDir = taskDir.endsWith('/') ? taskDir : taskDir + '/';
+        const _uploadDir = uploadDir.endsWith('/') ? uploadDir : uploadDir + '/';
+        parseContent.logPath = `${_taskDir}/import.log`;
+        parseContent.files?.forEach(file => {
+          if(!files.includes(file.path)) {
+            message.error(intl.get('import.fileNotExist', { name: file.path }));
+            throw new Error();
+          }
+          file.path = _uploadDir + file.path;
+          file.failDataPath = _taskDir + `err/${file.failDataPath || 'err.log'}`;
+        });
+        setConfig(JSON.stringify(parseContent, null, 2));
+        form.setFieldsValue({
+          content: JSON.stringify(parseContent, null, 2),
+        });
+      } else {
+        return message.warning(intl.get('import.parseFailed'));
+      }
+    } catch (err) {
+      console.log('err', err);
+    } finally {
+      setLoading(false);
     }
-    await setLoading(false);
   };
 
   const handleImport = async (values) => {
@@ -59,39 +73,62 @@ const TemplateModal = (props: IProps) => {
     }
     onClose();
   };
+
+  const handleTemplateDownload = () => {
+    const ymlStr = '### Please refer to the repo (https://github.com/vesoft-inc/nebula-importer) for configuration details' + json2yaml.stringify(exampleJson);
+    const blob = new Blob([ymlStr]);
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = `template.yaml`;
+    link.click();
+  };
   return (
     <Modal
-      width="50%"
+      width="820px"
       visible={visible}
       onCancel={onClose}
       className="config-import-modal"
       destroyOnClose={true}
       footer={false}
+      title={intl.get('import.importYaml')}
     >
       {!config ? <Spin spinning={loading}>
-        <p className="tip">{intl.get('import.fileUploadRequired')}</p>
+        <p className="tip">
+          {intl.get('import.fileUploadRequired')} 
+          <Link to="/import/files">{intl.get('import.uploadFile')}</Link>
+          {intl.get('import.fileUploadRequired2')} 
+        </p>
+        <p className="tip">
+          {intl.get('import.exampleDownload')} 
+          <Button type="link" className="btn-example-download" onClick={handleTemplateDownload}>example.yaml</Button>
+        </p>
+        <p className="tip">
+          {intl.get('import.uploadTemplateTip')} 
+        </p>
         <Dragger className="dragger-template" beforeUpload={() => false} onChange={handleFileImport} showUploadList={false} accept=".yaml, .yml">
           <div>
             <Icon className="btn-add-file" type="icon-studio-btn-add" />
           </div>
-          <p className="ant-upload-text">{intl.get('import.uploadTemplate')}</p>
-          <p className="ant-upload-hint">
-            {intl.get('import.uploadTemplateTip')}
-          </p>
+          <div className="drag-tip">
+            <p className="ant-upload-text">{intl.get('import.uploadTemplate')}</p>
+            <p className="ant-upload-hint">
+              {intl.get('import.uploadBoxTip')}
+            </p>
+          </div>
         </Dragger>
       </Spin> : <Form 
         form={form} 
         layout="vertical" 
         onFinish={handleImport}>
-        <Form.Item noStyle={true}>
-          <Button onClick={() => setConfig('')}>{intl.get('import.reUpload')}</Button>
-          <Button type="primary" htmlType="submit">{intl.get('import.runImport')}</Button>
-        </Form.Item>
         <Form.Item label={intl.get('import.taskName')} name="name" rules={[{ required: true }]}>
           <Input />
         </Form.Item>
         <Form.Item label={intl.get('import.config')} name="content" rules={[{ required: true }]}>
-          <TextArea autoSize={true} disabled={true} />
+          <TextArea className="config-area" autoSize={true} disabled={true} />
+        </Form.Item>
+        <Form.Item noStyle>
+          <Button onClick={() => setConfig('')}>{intl.get('import.reUpload')}</Button>
+          <Button type="primary" htmlType="submit">{intl.get('import.runImport')}</Button>
         </Form.Item>
       </Form>}
     </Modal>
diff --git a/app/pages/Import/index.tsx b/app/pages/Import/index.tsx
index a0f5e053..3d048085 100644
--- a/app/pages/Import/index.tsx
+++ b/app/pages/Import/index.tsx
@@ -13,10 +13,12 @@ const NewImport = () => {
   const location = useLocation();
   const [tab, setTab] = useState('files');
   useEffect(() => {
-    const path = location.pathname;
-    setTab(path.includes('files') ? 'files' : 'tasks');
     trackPageView('/import');
   }, []);
+  useEffect(() => {
+    const path = location.pathname;
+    setTab(path.includes('files') ? 'files' : 'tasks');
+  }, [location.pathname]);
   const handleTabChange = e => {
     setTab(e.target.value);
     history.push(`/import/${e.target.value}`);
diff --git a/app/pages/Login/index.less b/app/pages/Login/index.less
index f5f15a25..34f306b0 100644
--- a/app/pages/Login/index.less
+++ b/app/pages/Login/index.less
@@ -5,8 +5,8 @@
 	flex-direction: row-reverse;
 	justify-content: space-between;
 	background-image: url('~@app/static/images/background_login.png');
-	background-repeat: no-repeat;
-	background-size: cover;
+	background-repeat: round;
+	background-size: calc(100% - 360px) auto;
 	align-items: center;
 	.content {
 		width: 360px;
diff --git a/app/pages/Login/index.tsx b/app/pages/Login/index.tsx
index a6d97bd2..591ee405 100644
--- a/app/pages/Login/index.tsx
+++ b/app/pages/Login/index.tsx
@@ -31,7 +31,7 @@ const LoginPage: React.FC = () => {
     setLoading(false);
     setTimeout(() => {
       ok && history.replace(`/console${location.search}`);
-    }, 300);
+    }, 400);
   };
 
   useEffect(() => {
@@ -46,7 +46,7 @@ const LoginPage: React.FC = () => {
           <span className="title">Nebula Studio</span>
         </div>
         <Form className="login-form" layout="horizontal" {...fomrItemLayout} onFinish={onConfig}>
-          <FormItem noStyle={true}>
+          <FormItem noStyle>
             <span className="form-title">{intl.get('configServer.title')}</span>
           </FormItem>
           <FormItem name="host" rules={hostRulesFn()}>
diff --git a/app/pages/MainPage/routes.tsx b/app/pages/MainPage/routes.tsx
index c84e70d2..ef576aa2 100644
--- a/app/pages/MainPage/routes.tsx
+++ b/app/pages/MainPage/routes.tsx
@@ -35,7 +35,7 @@ export const RoutesList = [
     exact: true,
   },
   {
-    path: '/import/:type',
+    path: '/import/:type?',
     component: Import,
   },
   {
diff --git a/app/pages/Schema/SchemaConfig/Create/CommonCreate/PropertiesForm.tsx b/app/pages/Schema/SchemaConfig/Create/CommonCreate/PropertiesForm.tsx
index 207bae68..f48885fd 100644
--- a/app/pages/Schema/SchemaConfig/Create/CommonCreate/PropertiesForm.tsx
+++ b/app/pages/Schema/SchemaConfig/Create/CommonCreate/PropertiesForm.tsx
@@ -70,14 +70,14 @@ const PropertiesForm = (props: IProps) => {
     formRef.setFieldsValue({ 'properties': _properties });
   };
   return (
-    <Form.Item noStyle={true}>
+    <Form.Item noStyle>
       <div className="form-item">
         <Form.Item name="propertiesRequired" valuePropName="checked" initialValue={true}>
           <Checkbox onChange={handleClearProperties}>
             <span className="label">{intl.get('schema.defineFields')}</span>
           </Checkbox>
         </Form.Item>
-        <Form.Item noStyle={true} shouldUpdate={true}>
+        <Form.Item noStyle shouldUpdate={true}>
           {({ getFieldValue }) => {
             const propertiesRequired = getFieldValue('propertiesRequired');
             const properties = getFieldValue('properties') || [];
@@ -86,8 +86,8 @@ const PropertiesForm = (props: IProps) => {
                 <Form.List name="properties">
                   {(fields, { add, remove }) => {
                     return (
-                      <Form.Item noStyle={true}>
-                        <Form.Item noStyle={true}>
+                      <Form.Item noStyle>
+                        <Form.Item noStyle>
                           <Button 
                             type="primary" 
                             className="studio-add-btn" 
@@ -97,7 +97,7 @@ const PropertiesForm = (props: IProps) => {
                             {intl.get('common.addProperty')}
                           </Button>
                         </Form.Item>
-                        <Form.Item noStyle={true}>
+                        <Form.Item noStyle>
                           <Row className="form-header">
                             <Col span={4} className="required-item">{intl.get('common.propertyName')}</Col>
                             <Col span={6} className="required-item">{intl.get('common.dataType')}</Col>
@@ -166,7 +166,7 @@ const PropertiesForm = (props: IProps) => {
                                 </Form.Item>
                               </Col>
                               <Col span={5}>
-                                <Form.Item noStyle={true}>
+                                <Form.Item noStyle>
                                   {fields &&
                                   fields[index] &&
                                   EXPLAIN_DATA_TYPE.includes(properties[index].type) ? (
@@ -192,7 +192,7 @@ const PropertiesForm = (props: IProps) => {
                                 </Form.Item>
                               </Col>
                               <Col span={2}>
-                                <Form.Item noStyle={true}>
+                                <Form.Item noStyle>
                                   <Button type="link" danger={true} onClick={() => handlePropertyDelete(name, remove)}>{intl.get('common.delete')}</Button>
                                 </Form.Item>
                               </Col>
diff --git a/app/pages/Schema/SchemaConfig/Create/CommonCreate/TTLForm.tsx b/app/pages/Schema/SchemaConfig/Create/CommonCreate/TTLForm.tsx
index fb944ca3..5ed46574 100644
--- a/app/pages/Schema/SchemaConfig/Create/CommonCreate/TTLForm.tsx
+++ b/app/pages/Schema/SchemaConfig/Create/CommonCreate/TTLForm.tsx
@@ -31,14 +31,14 @@ const formRef = ((props: IProps) => {
     }
   };
   return (
-    <Form.Item noStyle={true}>
+    <Form.Item noStyle>
       <div className="form-item">
         <Form.Item name="ttlRequired" valuePropName="checked" initialValue={false}>
           <Checkbox onChange={handleClearTtl}>
             <span className="label">{intl.get('schema.setTTL')}</span>
           </Checkbox>
         </Form.Item>
-        <Form.Item noStyle={true} shouldUpdate={true}>
+        <Form.Item noStyle shouldUpdate={true}>
           {({ getFieldValue }) => {
             const properties = getFieldValue('properties') || [];
             const ttlRequired = getFieldValue('ttlRequired');
diff --git a/app/pages/Schema/SchemaConfig/Create/CommonCreate/index.tsx b/app/pages/Schema/SchemaConfig/Create/CommonCreate/index.tsx
index a6cd5064..434320bc 100644
--- a/app/pages/Schema/SchemaConfig/Create/CommonCreate/index.tsx
+++ b/app/pages/Schema/SchemaConfig/Create/CommonCreate/index.tsx
@@ -90,10 +90,10 @@ const ConfigCreate = (props: IProps) => {
         </Row>
         <PropertiesForm formRef={basicForm} onUpdate={updateGql} />
         <TTLForm formRef={basicForm} onUpdate={updateGql} />
-        <Form.Item noStyle={true}>
+        <Form.Item noStyle>
           <GQLCodeMirror currentGQL={gql} />
         </Form.Item>
-        <Form.Item noStyle={true}>
+        <Form.Item noStyle>
           <div className="studio-form-footer">
             <Button onClick={() => history.push(`/schema/${createType}/list`)}>{intl.get('common.cancel')}</Button>
             <Button type="primary" loading={loading} htmlType="submit">{intl.get('common.create')}</Button>
diff --git a/app/pages/Schema/SchemaConfig/Create/IndexCreate/FieldSelectModal.tsx b/app/pages/Schema/SchemaConfig/Create/IndexCreate/FieldSelectModal.tsx
index f2463bed..2664c79a 100644
--- a/app/pages/Schema/SchemaConfig/Create/IndexCreate/FieldSelectModal.tsx
+++ b/app/pages/Schema/SchemaConfig/Create/IndexCreate/FieldSelectModal.tsx
@@ -66,7 +66,7 @@ const FieldSelectModal = (props: IProps) => {
             disabled={selectedField === null}
             onClick={handleFieldAdd}
           >
-            {intl.get('explore.confirm')}
+            {intl.get('common.confirm')}
           </Button>
           <Button onClick={handleClose}>
             {intl.get('common.cancel')}
diff --git a/app/pages/Schema/SchemaConfig/Create/IndexCreate/index.tsx b/app/pages/Schema/SchemaConfig/Create/IndexCreate/index.tsx
index 6c129ec0..fabe2eee 100644
--- a/app/pages/Schema/SchemaConfig/Create/IndexCreate/index.tsx
+++ b/app/pages/Schema/SchemaConfig/Create/IndexCreate/index.tsx
@@ -138,7 +138,7 @@ const IndexCreate = () => {
             </Form.Item>
           </Col>
           <Col span={12}>
-            <Form.Item noStyle={true} dependencies={['type']}>
+            <Form.Item noStyle dependencies={['type']}>
               {({ getFieldValue }) => {
                 const type = getFieldValue('type');
                 return (
@@ -181,7 +181,7 @@ const IndexCreate = () => {
             {intl.get('schema.dragSorting')}
           </span>
         </>}>
-          <Form.Item noStyle={true} name="fields">
+          <Form.Item noStyle name="fields">
             <Button 
               type="primary" 
               className="studio-add-btn btn-field-add" 
@@ -190,7 +190,7 @@ const IndexCreate = () => {
               {intl.get('common.addProperty')}
             </Button>
           </Form.Item>
-          <Form.Item noStyle={true} dependencies={['fields']}>
+          <Form.Item noStyle dependencies={['fields']}>
             {({ getFieldValue }) => {
               const fields = getFieldValue('fields') || [];
               const filterList = fieldList.filter(
@@ -212,12 +212,12 @@ const IndexCreate = () => {
             }}
           </Form.Item>
         </Form.Item>
-        <Form.Item noStyle={true}>
+        <Form.Item noStyle>
           <div className="view-row">
             <GQLCodeMirror currentGQL={gql} />
           </div>
         </Form.Item>
-        <Form.Item noStyle={true}>
+        <Form.Item noStyle>
           <div className="studio-form-footer">
             <Button onClick={() => history.push(`/schema/index/list`)}>{intl.get('common.cancel')}</Button>
             <Button type="primary" loading={loading} htmlType="submit">{intl.get('common.create')}</Button>
diff --git a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesForm.tsx b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesForm.tsx
index 9728250f..7371808a 100644
--- a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesForm.tsx
+++ b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesForm.tsx
@@ -155,9 +155,9 @@ const PropertiesForm = (props: IProps) => {
           <span className="label">{intl.get('schema.defineFields')}</span>
         </Checkbox>
       </Form.Item>
-      <Form.Item noStyle={true} shouldUpdate={true}>
+      <Form.Item noStyle shouldUpdate={true}>
         <div className="box-container">
-          <Form.Item noStyle={true}>
+          <Form.Item noStyle>
             <Button 
               type="primary" 
               className="studio-add-btn" 
@@ -167,7 +167,7 @@ const PropertiesForm = (props: IProps) => {
               {intl.get('common.addProperty')}
             </Button>
           </Form.Item>
-          <Form.Item noStyle={true}>
+          <Form.Item noStyle>
             <Row className="form-header">
               <Col span={4} className="required-item">{intl.get('common.propertyName')}</Col>
               <Col span={6} className="required-item">{intl.get('common.dataType')}</Col>
diff --git a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesRow.tsx b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesRow.tsx
index 50d66314..cf1893f8 100644
--- a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesRow.tsx
+++ b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesRow.tsx
@@ -76,7 +76,7 @@ export const EditRow = (props: IEditProps) => {
   }
   const { alterType, name, type, fixedLength, allowNull, value, comment } = data;
   return (
-    <Form.Item noStyle={true} shouldUpdate={true}>
+    <Form.Item noStyle shouldUpdate={true}>
       {({ getFieldValue }) => {
         const currentType = getFieldValue('type');
         return (
@@ -135,7 +135,7 @@ export const EditRow = (props: IEditProps) => {
               </Form.Item>
             </Col>
             <Col span={5}>
-              <Form.Item noStyle={true}>
+              <Form.Item noStyle>
                 {EXPLAIN_DATA_TYPE.includes(type) ? (
                   <Popover
                     trigger="focus"
@@ -159,7 +159,7 @@ export const EditRow = (props: IEditProps) => {
               </Form.Item>
             </Col>
             <Col span={3} className="operations">
-              <Form.Item noStyle={true}>
+              <Form.Item noStyle>
                 <Button
                   type="link"
                   htmlType="submit"
diff --git a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/TTLForm.tsx b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/TTLForm.tsx
index 3b33f74b..316e6f49 100644
--- a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/TTLForm.tsx
+++ b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/TTLForm.tsx
@@ -140,7 +140,7 @@ const formRef = ((props: IProps) => {
           <span className="label">{intl.get('schema.setTTL')}</span>
         </Checkbox>
       </Form.Item>
-      {!isEdit && <Form.Item noStyle={true}>
+      {!isEdit && <Form.Item noStyle>
         <div className="box-container">
           <Row>
             <Col span={12}>
@@ -154,7 +154,7 @@ const formRef = ((props: IProps) => {
               </Form.Item>
             </Col>
             {col !== '' && <Col span={3} className="operations">
-              <Form.Item noStyle={true}>
+              <Form.Item noStyle>
                 <Button
                   type="link"
                   onClick={handleEditBefore}
@@ -181,7 +181,7 @@ const formRef = ((props: IProps) => {
         </div>
       </Form.Item>}
 
-      {isEdit && <Form.Item noStyle={true} shouldUpdate={true}>
+      {isEdit && <Form.Item noStyle shouldUpdate={true}>
         <div className="box-container">
           <Row>
             <Col span={12}>
@@ -233,7 +233,7 @@ const formRef = ((props: IProps) => {
               </Form.Item>
             </Col>
             <Col span={3} className="operations">
-              <Form.Item noStyle={true}>
+              <Form.Item noStyle>
                 <Button
                   type="link"
                   htmlType="submit"
diff --git a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/index.tsx b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/index.tsx
index b026e2be..bd761427 100644
--- a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/index.tsx
+++ b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/index.tsx
@@ -160,7 +160,7 @@ const ConfigEdit = (props: IProps) => {
           className="basic-config" 
           layout="vertical" 
           {...formItemLayout}>
-          <Form.Item noStyle={true} shouldUpdate={true}>
+          <Form.Item noStyle shouldUpdate={true}>
             <Row className="form-item">
               <Col span={12}>
                 <Form.Item label={intl.get('common.name')}>
diff --git a/app/pages/Schema/SpaceCreate/index.tsx b/app/pages/Schema/SpaceCreate/index.tsx
index 3d7141d8..a593a02a 100644
--- a/app/pages/Schema/SpaceCreate/index.tsx
+++ b/app/pages/Schema/SpaceCreate/index.tsx
@@ -117,7 +117,7 @@ const SpaceCreate = () => {
                   <Option value="INT64">INT64</Option>
                 </Select>
               </Form.Item>
-              <FormItem noStyle={true} dependencies={['vidType']}>
+              <FormItem noStyle dependencies={['vidType']}>
                 {({ getFieldValue }) => {
                   const vidType = getFieldValue('vidType');
                   return vidType === 'FIXED_STRING' ? <Col offset={11} className="item-string-length">
diff --git a/app/pages/Schema/index.tsx b/app/pages/Schema/index.tsx
index 4567fb33..25248cfa 100644
--- a/app/pages/Schema/index.tsx
+++ b/app/pages/Schema/index.tsx
@@ -5,17 +5,19 @@ import Icon from '@app/components/Icon';
 import { trackPageView } from '@app/utils/stat';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@app/stores';
+import { NebulaVersion } from '@app/stores/types.d.ts';
 import './index.less';
 import { Link, useHistory } from 'react-router-dom';
 
 interface IOperations {
   space: string;
   onClone: (name: string, oldSpace: string) => void
-  onDelete: (name: string) => void
+  onDelete: (name: string) => void;
+  version: NebulaVersion
 }
 
 const Operations = (props: IOperations) => {
-  const { space, onClone, onDelete } = props;
+  const { space, onClone, onDelete, version } = props;
   const [visible, setVisible] = useState(false);
   const handleClone = (values) => {
     const { name } = values;
@@ -35,7 +37,7 @@ const Operations = (props: IOperations) => {
         </Button>
       </Popconfirm>
     </Menu.Item>
-    <Menu.Item key="clone">
+    {version !== NebulaVersion.V2_5 && <Menu.Item key="clone">
       <Popover
         destroyTooltipOnHide={true}
         placement="leftTop"
@@ -48,7 +50,7 @@ const Operations = (props: IOperations) => {
           </Form.Item>
           <Form.Item>
             <Button htmlType="submit" type="primary">
-              {intl.get('import.confirm')}
+              {intl.get('common.confirm')}
             </Button>
           </Form.Item>
         </Form>}
@@ -57,14 +59,15 @@ const Operations = (props: IOperations) => {
           {intl.get('schema.cloneSpace')}
         </Button>
       </Popover>
-    </Menu.Item>
+    </Menu.Item>}
   </Menu>;
 };
 
 const Schema = () => {
-  const { schema } = useStore();
+  const { schema, global } = useStore();
   const [loading, setLoading] = useState(false);
   const history = useHistory();
+  const { nebulaVersion } = global;
   const { currentSpace, switchSpace, getSpacesList, deleteSpace, spaceList, cloneSpace } = schema;
   useEffect(() => {
     trackPageView('/schema');
@@ -179,7 +182,7 @@ const Schema = () => {
               >
                 {intl.get('common.schema')}
               </Button>
-              <Dropdown overlay={<Operations space={space.Name} onDelete={handleDeleteSpace} onClone={handleCloneSpace} />} placement="bottomLeft">
+              <Dropdown overlay={<Operations version={nebulaVersion} space={space.Name} onDelete={handleDeleteSpace} onClone={handleCloneSpace} />} placement="bottomLeft">
                 <Icon className="btn-more" type="icon-studio-more" />
               </Dropdown>
             </div>
diff --git a/app/stores/files.ts b/app/stores/files.ts
index 6cf9e00d..e356fd67 100644
--- a/app/stores/files.ts
+++ b/app/stores/files.ts
@@ -19,7 +19,7 @@ export class FilesStore {
     Object.keys(payload).forEach(key => Object.prototype.hasOwnProperty.call(this, key) && (this[key] = payload[key]));
   };
 
-  asyncGetFiles = async () => {
+  getFiles = async () => {
     const { code, data } = (await service.getFiles()) as any;
     if (code === 0 && data) {
       this.update({
@@ -27,13 +27,13 @@ export class FilesStore {
       });
     }
   };
-  asyncUploadFile = async (payload: Record<string, unknown>) => {
+  uploadFile = async (payload: Record<string, unknown>) => {
     const { data, config } = payload;
     const res = (await service.uploadFiles(data, config)) as any;
     return res;
   };
 
-  asyncDeleteFile = async (index: number) => {
+  deleteFile = async (index: number) => {
     const res: any = await service.deteleFile({
       filename: this.fileList[index].name,
     });
@@ -46,7 +46,7 @@ export class FilesStore {
   };
 
 
-  asyncGetUploadDir = async () => {
+  getUploadDir = async () => {
     const { code, data } = (await service.getUploadDir()) as any;
     if (code === 0) {
       const { uploadDir } = data;
diff --git a/app/stores/global.ts b/app/stores/global.ts
index e2090177..77a109a2 100644
--- a/app/stores/global.ts
+++ b/app/stores/global.ts
@@ -13,7 +13,7 @@ export class GlobalStore {
   username = cookies.get('nu');
   host = cookies.get('nh');
   version = process.env.VERSION;
-  nebulaVersion?: NebulaVersion = cookies.get('NebulaVersion');
+  nebulaVersion?: NebulaVersion = sessionStorage.getItem('nebulaVersion') as NebulaVersion;
   constructor() {
     makeObservable(this, {
       username: observable,
@@ -47,6 +47,7 @@ export class GlobalStore {
     resetStore();
     cookies.remove('nh');
     cookies.remove('nu');
+    sessionStorage.removeItem('nebulaVersion');
   };
 
   update = (payload: Record<string, any>) => {
@@ -75,6 +76,7 @@ export class GlobalStore {
       message.success(intl.get('configServer.success'));
       cookies.set('nh', host);
       cookies.set('nu', username);
+      sessionStorage.setItem('nebulaVersion', data.version);
       this.update({ host, username, nebulaVersion: data.version });
       return true;
     }
@@ -82,6 +84,7 @@ export class GlobalStore {
     this.update({ host: '', username: '' });
     cookies.remove('nh');
     cookies.remove('nu');
+    sessionStorage.removeItem('nebulaVersion');
     return false;
   };
 }
diff --git a/app/stores/twoGraph.ts b/app/stores/twoGraph.ts
index ac7a7d33..f81b1313 100644
--- a/app/stores/twoGraph.ts
+++ b/app/stores/twoGraph.ts
@@ -1,4 +1,4 @@
-import { autorun, makeObservable, observable, reaction } from 'mobx';
+import { autorun, makeObservable, observable, reaction, IReactionDisposer } from 'mobx';
 import { FONT_SIZE, LINE_LENGTH, NODE_AREA, NODE_SIZE } from '@app/config/explore';
 import ForceGraph, { ForceGraphInstance, LinkObject, NodeObject } from '@app/components/ForceGraph';
 import { Bezier } from 'bezier-js';
@@ -18,6 +18,8 @@ class TwoGraph {
   progressValue: number = 0;
   transform: ITransform = { k: 1, x: 0, y: 0 };
   instance: ForceGraphInstance;
+  autorunDisposer: IReactionDisposer;
+  reactionDisposer: IReactionDisposer;
 
   constructor(graph: GraphStore, container: HTMLElement) {
     this.graph = graph;
@@ -26,6 +28,7 @@ class TwoGraph {
       transform: observable,
       instance: false,
       graph: false,
+      autorunDisposer: false,
     });
     this.init();
   }
@@ -177,7 +180,7 @@ class TwoGraph {
         // cuclate link's curvature by graphIndex
         let curvature = 0;
         if (link.source === link.target) {
-          curvature = 1;
+          curvature = link.graphIndex as number;
         } else {
           const { graphIndex = 0 } = <any>link;
           // the seem direction links will be the seem side
@@ -210,7 +213,7 @@ class TwoGraph {
         const controlPoints = link.__controlPoints as [number, number, number, number];
         if (link.curvature !== 0 && controlPoints) {
           // sometimes controlpoints not exist
-          if (link.curvature === 1) {
+          if (link.source === link.target) {
             relLink.x = controlPoints[2] - controlPoints[0];
             relLink.y = controlPoints[3] - controlPoints[1];
           }
@@ -267,7 +270,7 @@ class TwoGraph {
 
     this.instance = Graph;
     // rerender when data change
-    autorun(() => {
+    this.autorunDisposer = autorun(() => {
       graph.makeLineSort();
       // reset node's v
       graph.nodes.forEach((node) => {
@@ -279,7 +282,7 @@ class TwoGraph {
     });
 
     // rerender
-    reaction(
+    this.reactionDisposer = reaction(
       () => [
         graph.nodeHovering,
         graph.linksSelected.toJSON(),
@@ -330,6 +333,8 @@ class TwoGraph {
    * soft destroy
    */
   destroy() {
+    this.autorunDisposer();
+    this.reactionDisposer();
     this.instance._destructor();
     this.canvas?.remove();
   }
diff --git a/app/utils/constant.ts b/app/utils/constant.ts
index 3680e711..28780259 100644
--- a/app/utils/constant.ts
+++ b/app/utils/constant.ts
@@ -209,4 +209,6 @@ export const EXPLAIN_DATA_TYPE = [
   'duration',
 ];
 
+export const NAME_REGEX = /^[a-zA-Z][a-zA-Z0-9_]*$/;
+
 export const POSITIVE_INTEGER_REGEX = /^[1-9]\d*$/g;
diff --git a/app/utils/import.ts b/app/utils/import.ts
index fa1add48..0afd588f 100644
--- a/app/utils/import.ts
+++ b/app/utils/import.ts
@@ -2,7 +2,7 @@ import { message } from 'antd';
 import _ from 'lodash';
 import intl from 'react-intl-universal';
 
-import { handleEscape, handleKeyword, handleVidStringName } from './function';
+import { handleEscape } from './function';
 
 export function configToJson(payload) {
   const {
@@ -177,110 +177,147 @@ export function indexJudge(index: number | null, name: string) {
   return index;
 }
 
-export function getStringByteLength(str: string) {
-  let bytesCount = 0;
-  const len = str.length;
-  for (let i = 0, n = len; i < n; i++) {
-    const c = str.charCodeAt(i);
-    if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
-      bytesCount += 1;
-    } else {
-      bytesCount += 2;
-    }
-  }
-  return bytesCount;
-}
-
-export function createTaskID(instanceId: string) {
-  return `${instanceId}.${new Date().getTime()}`;
-}
-
-export function getGQLByConfig(payload) {
-  const { verticesConfig, edgesConfig, spaceVidType } = payload;
-  const NGQL: string[] = [];
-  verticesConfig.forEach(vertexConfig => {
-    if (vertexConfig.idMapping === null) {
-      message.error(`vertexId ${intl.get('import.indexNotEmpty')}`);
-      throw new Error();
-    }
-    const csvTable = vertexConfig.file.content;
-    vertexConfig.tags.forEach(tag => {
-      csvTable.forEach(columns => {
-        const tagField: string[] = [];
-        const values: any[] = [];
-        if (!tag.name) {
-          message.error(`Tag ${intl.get('import.notEmpty')}`);
-          throw new Error();
+export const exampleJson = {
+  'version': 'v2',
+  'description': 'web console import',
+  'removeTempFiles': null,
+  'clientSettings': {
+    'retry': 3,
+    'concurrency': 10,
+    'channelBufferSize': 128,
+    'space': 'sales',
+    'connection': {
+      'user': '',
+      'password': '',
+      'address': ''
+    },
+    'postStart': null,
+    'preStop': null
+  },
+  'logPath': 'import.log',
+  'files': [
+    {
+      'path': 'item.csv',
+      'failDataPath': 'itemFail.csv',
+      'batchSize': 60,
+      'limit': null,
+      'inOrder': null,
+      'type': 'csv',
+      'csv': {
+        'withHeader': false,
+        'withLabel': false,
+        'delimiter': null
+      },
+      'schema': {
+        'type': 'vertex',
+        'edge': null,
+        'vertex': {
+          'vid': {
+            'index': 0,
+            'function': null,
+            'type': 'string',
+            'prefix': null
+          },
+          'tags': [
+            {
+              'name': 'item',
+              'props': [
+                {
+                  'name': 'id_single_item',
+                  'type': 'string',
+                  'index': 0
+                },
+                {
+                  'name': 'region',
+                  'type': 'string',
+                  'index': 1
+                },
+                {
+                  'name': 'country',
+                  'type': 'string',
+                  'index': 2
+                },
+                {
+                  'name': 'item_type',
+                  'type': 'string',
+                  'index': 3
+                },
+                {
+                  'name': 'sales_channel',
+                  'type': 'string',
+                  'index': 4
+                }
+              ]
+            }
+          ]
         }
-        tag.props.forEach(prop => {
-          if (prop.mapping === null && !prop.isDefault) {
-            message.error(`${prop.name} ${intl.get('import.indexNotEmpty')}`);
-            throw new Error();
-          }
-          if (prop.mapping !== null) {
-            // HACK: Processing keyword
-            tagField.push(handleKeyword(prop.name));
-            const value =
-              prop.type === 'string'
-                ? `"${columns[prop.mapping]}"`
-                : columns[prop.mapping];
-            values.push(value);
-          }
-        });
-        NGQL.push(
-          `INSERT VERTEX ${handleKeyword(tag.name)}` +
-            `(${tagField}) VALUES ${handleVidStringName(
-              columns[vertexConfig.idMapping],
-              spaceVidType,
-            )}:(${values})`,
-        );
-      });
-    });
-  });
-  edgesConfig.forEach(edgeConfig => {
-    const csvTable = edgeConfig.file.content;
-    csvTable.forEach(columns => {
-      const edgeField: string[] = [];
-      const values: any[] = [];
-      if (!edgeConfig.type) {
-        message.error(`edgeType ${intl.get('import.notEmpty')}`);
-        throw new Error();
       }
-      edgeConfig.props.forEach(prop => {
-        if (prop.mapping === null && prop.name !== 'rank' && !prop.isDefault) {
-          message.error(`${prop.name} ${intl.get('import.indexNotEmpty')}`);
-          throw new Error();
-        }
-        if (
-          prop.name !== 'srcId' &&
-          prop.name !== 'dstId' &&
-          prop.name !== 'rank' &&
-          prop.mapping !== null
-        ) {
-          // HACK: Processing keyword
-          edgeField.push(handleKeyword(prop.name));
-          const value =
-            prop.type === 'string'
-              ? `"${columns[prop.mapping]}"`
-              : columns[prop.mapping];
-          values.push(value);
-        }
-      });
-      const rank =
-        edgeConfig.props[2].mapping === null
-          ? ''
-          : `@${columns[edgeConfig.props[2].mapping]}`;
-      NGQL.push(
-        `INSERT EDGE ${handleKeyword(edgeConfig.type)}` +
-          `(${edgeField.join(',')}) VALUES ${handleVidStringName(
-            columns[edgeConfig.props[0].mapping],
-            spaceVidType,
-          )} -> ${handleVidStringName(
-            columns[edgeConfig.props[1].mapping],
-            spaceVidType,
-          )} ${rank}:(${values})`,
-      );
-    });
-  });
-  return NGQL;
-}
+    },
+    {
+      'path': 'orderr.csv',
+      'failDataPath': 'orderrFail.csv',
+      'batchSize': 60,
+      'limit': null,
+      'inOrder': null,
+      'type': 'csv',
+      'csv': {
+        'withHeader': false,
+        'withLabel': false,
+        'delimiter': null
+      },
+      'schema': {
+        'type': 'edge',
+        'edge': {
+          'name': 'order',
+          'withRanking': false,
+          'props': [
+            {
+              'name': 'order_id',
+              'type': 'string',
+              'index': 0
+            },
+            {
+              'name': 'id_item',
+              'type': 'string',
+              'index': 0
+            },
+            {
+              'name': 'unit_sold',
+              'type': 'string',
+              'index': 2
+            },
+            {
+              'name': 'unit_price',
+              'type': 'string',
+              'index': 3
+            },
+            {
+              'name': 'unit_cost',
+              'type': 'string',
+              'index': 4
+            },
+            {
+              'name': 'total_profit',
+              'type': 'string',
+              'index': 5
+            }
+          ],
+          'srcVID': {
+            'index': 1,
+            'function': null,
+            'type': 'string',
+            'prefix': null
+          },
+          'dstVID': {
+            'index': 1,
+            'function': null,
+            'type': 'string',
+            'prefix': null
+          },
+          'rank': null
+        },
+        'vertex': null
+      }
+    }
+  ]
+};
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e086af79..404266c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1827,14 +1827,6 @@
         "scheduler": "^0.20.2"
       }
     },
-    "@hpcc-js/wasm": {
-      "version": "1.12.8",
-      "resolved": "https://registry.npmmirror.com/@hpcc-js/wasm/-/wasm-1.12.8.tgz",
-      "integrity": "sha512-n4q9ARKco2hpCLsuVaW6Az3cDVaua7B3DSONHkc49WtEzgY/btvcDG5Zr1P6PZDv0sQ7oPnAi9Y+W2DI++MgcQ==",
-      "requires": {
-        "yargs": "^17.3.1"
-      }
-    },
     "@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -2773,7 +2765,8 @@
     "ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -3555,6 +3548,7 @@
       "version": "7.0.4",
       "resolved": "https://registry.npmmirror.com/cliui/-/cliui-7.0.4.tgz",
       "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
       "requires": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.0",
@@ -4025,47 +4019,46 @@
       "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
     },
     "d3-graphviz": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/d3-graphviz/-/d3-graphviz-4.1.0.tgz",
-      "integrity": "sha512-RtCGnEROcte5npTfjhiNR3kSbwhBl8LA6NNq0oFRXEIFB9N4xHQgGjZWfAHVsN9NQVctEEkRQ4H0GGdqfStlZQ==",
-      "requires": {
-        "@hpcc-js/wasm": "1.12.8",
-        "d3-dispatch": "^2.0.0",
-        "d3-format": "^2.0.0",
-        "d3-interpolate": "^2.0.1",
-        "d3-path": "^2.0.0",
-        "d3-timer": "^2.0.0",
-        "d3-transition": "^2.0.0",
-        "d3-zoom": "^2.0.0"
+      "version": "2.6.1",
+      "resolved": "https://registry.npmmirror.com/d3-graphviz/-/d3-graphviz-2.6.1.tgz",
+      "integrity": "sha512-878AFSagQyr5tTOrM7YiVYeUC2/NoFcOB3/oew+LAML0xekyJSw9j3WOCUMBsc95KYe9XBYZ+SKKuObVya1tJQ==",
+      "requires": {
+        "d3-dispatch": "^1.0.3",
+        "d3-format": "^1.2.0",
+        "d3-interpolate": "^1.1.5",
+        "d3-path": "^1.0.5",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "^1.0.6",
+        "d3-transition": "^1.1.1",
+        "d3-zoom": "^1.5.0",
+        "viz.js": "^1.8.2"
       },
       "dependencies": {
-        "d3-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-2.0.0.tgz",
-          "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
-        },
-        "d3-dispatch": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
-          "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
+        "d3-drag": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-1.2.5.tgz",
+          "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+          "requires": {
+            "d3-dispatch": "1",
+            "d3-selection": "1"
+          }
         },
-        "d3-format": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmmirror.com/d3-format/-/d3-format-2.0.0.tgz",
-          "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+        "d3-selection": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-1.4.2.tgz",
+          "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
         },
-        "d3-interpolate": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
-          "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+        "d3-zoom": {
+          "version": "1.8.3",
+          "resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-1.8.3.tgz",
+          "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
           "requires": {
-            "d3-color": "1 - 2"
+            "d3-dispatch": "1",
+            "d3-drag": "1",
+            "d3-interpolate": "1",
+            "d3-selection": "1",
+            "d3-transition": "1"
           }
-        },
-        "d3-timer": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-2.0.0.tgz",
-          "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
         }
       }
     },
@@ -4090,9 +4083,9 @@
       "integrity": "sha512-ysk9uSPAhZVb0Gq4GXzghl/Yqxu80dHrq55I53qaIMdGB65+0UfO84sr4Fci2JHumcgh6H4WE0r8LwxPagkE+g=="
     },
     "d3-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/d3-path/-/d3-path-2.0.0.tgz",
-      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+      "version": "1.0.9",
+      "resolved": "https://registry.npmmirror.com/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
     },
     "d3-quadtree": {
       "version": "1.0.7",
@@ -4159,21 +4152,27 @@
       "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
     },
     "d3-transition": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-2.0.0.tgz",
-      "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
       "requires": {
-        "d3-color": "1 - 2",
-        "d3-dispatch": "1 - 2",
-        "d3-ease": "1 - 2",
-        "d3-interpolate": "1 - 2",
-        "d3-timer": "1 - 2"
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
       },
       "dependencies": {
         "d3-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-2.0.0.tgz",
-          "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+          "version": "1.4.1",
+          "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-1.4.1.tgz",
+          "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+        },
+        "d3-selection": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-1.4.2.tgz",
+          "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
         }
       }
     },
@@ -4696,7 +4695,8 @@
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true
     },
     "escape-html": {
       "version": "1.0.3",
@@ -5792,7 +5792,8 @@
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
     },
     "get-intrinsic": {
       "version": "1.1.1",
@@ -6560,7 +6561,8 @@
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true
     },
     "is-glob": {
       "version": "4.0.3",
@@ -6880,6 +6882,14 @@
         "string-convert": "^0.2.0"
       }
     },
+    "json2yaml": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/json2yaml/-/json2yaml-1.1.0.tgz",
+      "integrity": "sha512-/xse+m0SlllfZahQrNOelmLrFNfeZv4QG0QKlvg7VsPSGIxpB3X+ggLkdffwmI1DdQ3o9XjZX+K+EOI1epdKgg==",
+      "requires": {
+        "remedial": "1.x"
+      }
+    },
     "json5": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.0.tgz",
@@ -9703,6 +9713,11 @@
         "mdast-util-to-markdown": "^0.6.0"
       }
     },
+    "remedial": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/remedial/-/remedial-1.0.8.tgz",
+      "integrity": "sha512-/62tYiOe6DzS5BqVsNpH/nkGlX45C/Sp6V+NtiN6JQNS1Viay7cWkazmRkrQrdFj2eshDe96SIQNIoMxqhzBOg=="
+    },
     "renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/renderkid/-/renderkid-3.0.0.tgz",
@@ -9725,7 +9740,8 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true
     },
     "require-from-string": {
       "version": "2.0.2",
@@ -10257,6 +10273,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "requires": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -10266,7 +10283,8 @@
         "emoji-regex": {
           "version": "8.0.0",
           "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
         }
       }
     },
@@ -10327,6 +10345,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "requires": {
         "ansi-regex": "^5.0.1"
       }
@@ -11147,6 +11166,11 @@
         "unist-util-stringify-position": "^2.0.0"
       }
     },
+    "viz.js": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/viz.js/-/viz.js-1.8.2.tgz",
+      "integrity": "sha512-W+1+N/hdzLpQZEcvz79n2IgUE9pfx6JLdHh3Kh8RGvLL8P1LdJVQmi2OsDcLdY4QVID4OUy+FPelyerX0nJxIQ=="
+    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.3.1.tgz",
@@ -11625,6 +11649,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -11635,6 +11660,7 @@
           "version": "4.3.0",
           "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -11643,6 +11669,7 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -11650,7 +11677,8 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
         }
       }
     },
@@ -11680,7 +11708,8 @@
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true
     },
     "yallist": {
       "version": "4.0.0",
@@ -11698,6 +11727,7 @@
       "version": "17.3.1",
       "resolved": "https://registry.npmmirror.com/yargs/-/yargs-17.3.1.tgz",
       "integrity": "sha512-WUANQeVgjLbNsEmGk20f+nlHgOqzRFpiGWVaBrYGYIGANIIu3lWjoyi0fNlFmJkvfhCZ6BXINe7/W2O2bV4iaA==",
+      "dev": true,
       "requires": {
         "cliui": "^7.0.2",
         "escalade": "^3.1.1",
@@ -11711,7 +11741,8 @@
         "yargs-parser": {
           "version": "21.0.0",
           "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-21.0.0.tgz",
-          "integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA=="
+          "integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==",
+          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index febe75ae..66a4b659 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "d3-color": "^3.0.1",
     "d3-drag": "3.0.0",
     "d3-force-3d": "^3.0.2",
-    "d3-graphviz": "^4.1.0",
+    "d3-graphviz": "^2.6.1",
     "d3-selection": "2.0.0",
     "d3-zoom": "2.0.0",
     "dagre": "^0.8.5",
@@ -42,6 +42,7 @@
     "js-yaml": "^4.1.0",
     "json-bigint": "^1.0.0",
     "json2csv": "^5.0.6",
+    "json2yaml": "^1.1.0",
     "lodash": "^4.17.15",
     "lodash.debounce": "^4.0.8",
     "mobx": "^6.3.8",