feat: 调整dag组件结构和数据

packages/yili-dag/package.json

@@ -50,6 +50,7 @@
     "canvas": "^2.6.1",
     "codemirror": "~5.61.0",
     "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {

packages/yili-dag/src/Dag.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Graph, Addon, Path, Cell, Model, Node } from '@antv/x6';
-import { Drawer, Modal, Table } from 'antd';
+import { Graph, Addon, Path, Cell, Model, Node, Markup } from '@antv/x6';
+import { Drawer, Modal, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import AlgoNode from './AlgoNode';
 import ToolBar from './ToolBar';
@@ -8,6 +8,7 @@ import DatasourceNodeInfo from './DatasourceNodeInfo';
 import ScriptNodeInfo from './ScriptNodeInfo';
 import OutputNodeInfo from './OutputNodeInfo';
 import ContextMenuView from './ContextMenu';
+import ReactDOM from 'react-dom';
 
 // 侧边栏UI组件
 const { Stencil } = Addon;
@@ -16,7 +17,7 @@ const { Stencil } = Addon;
 interface NodeStatus {
   id: string;
   status: 'default' | 'success' | 'failed' | 'running';
-  type: 'script' | 'datasource';
+  type: 'script' | 'datasource' | 'outputsource';
   label?: string;
 }
 
@@ -28,18 +29,14 @@ const dataSourceNodes = [
     height: 80,
     width: 180,
     data: {
-      label: 'DataSource',
+      label: 'InputSource',
       status: 'default',
       type: 'datasource'
     },
     ports: {
       items: [{ id: 'bottomPort', group: 'bottom' }]
     }
-  }
-];
-
-// 输出源节点
-const outputSourceNodes = [
+  },
   {
     id: '10',
     shape: 'dag-node',
@@ -53,61 +50,22 @@ const outputSourceNodes = [
     ports: {
       items: [{ id: 'topPort', group: 'top' }]
     }
-  } 
-]
-
-/* // 数据处理节点
-const dataHandleNodes = [
-  {
-    id: '1',
-    shape: 'dag-node',
-    data: {
-      label: '数据处理节点',
-      status: 'default',
-      type: 'script'
-    },
-    ports: {
-      items: [
-        { id: 'topPort', group: 'top' },
-        { id: 'bottomPort', group: 'bottom' }
-      ]
-    }
   }
 ];
-
-// 其它节点
-const otherScriptNodes = [
-  {
-    id: '2',
-    shape: 'dag-node',
-    data: {
-      label: '其它节点',
-      status: 'default',
-      type: 'script'
-    },
-    ports: {
-      items: [
-        { id: 'topPort', group: 'top' },
-        { id: 'bottomPort', group: 'bottom' }
-      ]
-    }
-  }
-]; */
-
 // 用户自定义脚本节点
 const customScriptNodes = [
   {
     id: '5',
     shape: 'dag-node',
     data: {
-      label: 'SQL',
+      label: 'sql',
       status: 'default',
       type: 'script'
     },
     ports: {
       items: [
-        { id: 'topPort', group: 'top' },
-        { id: 'bottomPort', group: 'bottom' }
+        // { id: 'topPort', group: 'top' },
+        // { id: 'bottomPort', group: 'bottom' }
       ]
     }
   },
@@ -115,14 +73,14 @@ const customScriptNodes = [
     id: '6',
     shape: 'dag-node',
     data: {
-      label: 'PySpark',
+      label: 'pyspark',
       status: 'default',
       type: 'script'
     },
     ports: {
       items: [
-        { id: 'topPort', group: 'top' },
-        { id: 'bottomPort', group: 'bottom' }
+        // { id: 'topPort', group: 'top' },
+        // { id: 'bottomPort', group: 'bottom' }
       ]
     }
   },
@@ -130,14 +88,14 @@ const customScriptNodes = [
     id: '7',
     shape: 'dag-node',
     data: {
-      label: 'Python',
+      label: 'python',
       status: 'default',
       type: 'script'
     },
     ports: {
       items: [
-        { id: 'topPort', group: 'top' },
-        { id: 'bottomPort', group: 'bottom' }
+        // { id: 'topPort', group: 'top' },
+        // { id: 'bottomPort', group: 'bottom' }
       ]
     }
   }
@@ -151,29 +109,30 @@ Graph.registerNode(
     width: 180,
     height: 36,
     component: <AlgoNode />,
+    portMarkup: [Markup.getForeignObjectMarkup()],
     ports: {
       groups: {
         top: {
           position: 'top',
           attrs: {
-            circle: {
-              r: 4,
-              magnet: true,
-              stroke: '#C2C8D5',
-              strokeWidth: 1,
-              fill: '#fff'
+            fo: {
+              width: 10,
+              height: 10,
+              x: -5,
+              y: -5,
+              magnet: 'true',
             }
           }
         },
         bottom: {
           position: 'bottom',
           attrs: {
-            circle: {
-              r: 4,
-              magnet: true,
-              stroke: '#C2C8D5',
-              strokeWidth: 1,
-              fill: '#fff'
+            fo: {
+              width: 10,
+              height: 10,
+              x: -5,
+              y: -5,
+              magnet: 'true',
             }
           }
         }
@@ -221,9 +180,6 @@ Graph.registerConnector(
   true
 );
 
-// 存储边
-const dagEdges: Array<any> = [];
-
 const columns: ColumnsType<any> = [
   { title: 'pord_order_id', dataIndex: 'pord_order_id', key: 'pord_order_id' },
   {
@@ -408,16 +364,16 @@ export default class Dag extends React.Component<any, any> {
         // 验证
         validateMagnet({ magnet }) {
           return magnet.getAttribute('port-group') !== 'top';
+
         },
-        validateConnection({ targetPort, sourceCell, targetCell }) {
-          const jugeEdge = dagEdges.find(
-            (item: any) =>
-              item?.source === sourceCell?.id && item?.target === targetCell?.id
-          );
-          if (jugeEdge) {
-            return false;
-          }
-          return targetPort === 'topPort';
+        validateConnection({ targetPort, sourceCell, targetCell, targetMagnet }) {
+          if (!targetCell) return false
+          const incomingEdges = this.getIncomingEdges(targetCell)
+          const existPorts = incomingEdges?.map(edge => {
+            return edge.getTargetPortId()
+          })
+          const jugeExist = existPorts?.indexOf(targetPort as any)
+          return targetMagnet?.getAttribute('port-group') === 'top' && (jugeExist === undefined || jugeExist === -1);
         },
         createEdge() {
           return graph.createEdge({
@@ -444,7 +400,22 @@ export default class Dag extends React.Component<any, any> {
       keyboard: {
         enabled: true,
         global: true
-      }
+      },
+      onPortRendered(args) {
+        const selectors = args.contentSelectors
+        const port = args.port
+        const container = selectors && selectors.foContent
+        if (container) {
+          ReactDOM.render(
+            (
+              <Tooltip title={port.id}>
+                <div className="my-port" />
+              </Tooltip>
+            ) as any,
+            container as HTMLElement,
+          )
+        }
+      },
     });
 
     // 删除节点
@@ -456,12 +427,6 @@ export default class Dag extends React.Component<any, any> {
 
     // 监听边连接
     graph.on('edge:connected', ({ edge }) => {
-      dagEdges.push({
-        source: edge.getSourceCell()?.id,
-        target: edge.getTargetCell()?.id
-      });
-      const targetNodeData = edge.getTargetCell()?.data;
-      targetNodeData.inputNumber += 1;
       edge.attr({
         line: {
           strokeDasharray: ''
@@ -469,24 +434,6 @@ export default class Dag extends React.Component<any, any> {
       });
     });
 
-    graph.on('edge:removed', ({ edge }) => {
-      const sourceNodeId = (edge as any).store.data.source.cell;
-      const targetNodeId = (edge as any).store.data.target.cell;
-
-      const index = dagEdges.indexOf({
-        source: sourceNodeId,
-        target: targetNodeId
-      });
-
-      const targetNode = this.state.dagGraph.getCellById(targetNodeId);
-
-      if (targetNode) {
-        targetNode.data.inputNumber -= 1;
-      }
-
-      dagEdges.splice(index, 1);
-    });
-
     // 监听状态改变
     graph.on('node:change:data', ({ node }) => {
       const edges = graph.getIncomingEdges(node);
@@ -557,10 +504,6 @@ export default class Dag extends React.Component<any, any> {
           name: 'dataSource',
           title: '数据源'
         },
-        {
-          name: 'outputSource',
-          title: '输出源'
-        },
         {
           name: 'dataHandle',
           title: '数据处理',
@@ -589,26 +532,11 @@ export default class Dag extends React.Component<any, any> {
 
     // 将可拖拽项加载到侧边栏中
     stencil.load(dataSourceNodes, 'dataSource');
-    stencil.load(outputSourceNodes, 'outputSource')
-    // stencil.load(dataHandleNodes, 'dataHandle');
-    // stencil.load(otherScriptNodes, 'otherScript');
     stencil.load(customScriptNodes, 'customScript');
     stencil.resizeGroup('dataSource', {
       width: 200,
-      height: dataSourceNodes.length * 120
-    });
-    stencil.resizeGroup('outputSource', {
-      width: 200,
-      height: outputSourceNodes.length * 120
+      height: dataSourceNodes.length * 100
     });
-    /* stencil.resizeGroup('dataHandle', {
-      width: 200,
-      height: dataHandleNodes.length * 60
-    });
-    stencil.resizeGroup('otherScript', {
-      width: 200,
-      height: otherScriptNodes.length * 60
-    }); */
     stencil.resizeGroup('customScript', {
       width: 200,
       height: customScriptNodes.length * 60
@@ -698,7 +626,7 @@ export default class Dag extends React.Component<any, any> {
             )}
             {/* 脚本节点 */}
             {this.state.selectedNodeData?.type === 'script' && (
-              <ScriptNodeInfo nodeInfo={this.state.selectedNodeData} />
+              <ScriptNodeInfo nodeInfo={this.state.selectedNodeData} graph={this.state.dagGraph} />
             )}
             {/* 输出源节点 */}
             {this.state.selectedNodeData?.type === 'outputsource' && (
@@ -731,7 +659,7 @@ function initNodeData(newNode: Node<Node.Properties>) {
       newNode.data.paramText = undefined;
       newNode.data.nodeName = undefined;
       newNode.data.scriptText = '';
-      newNode.data.outputData = undefined;
+      newNode.data.outputData = [];
       newNode.data.inputNumber = 0;
       newNode.data.packageData = undefined;
       newNode.data.status = 'undone';

packages/yili-dag/src/ScriptEditor.tsx

@@ -52,37 +52,13 @@ export default class ScriptEditor extends React.Component<any, any> {
     
     console.log('options:', options);
     updateLinting(cm, options.error_list)
-    // function result_cb(error_list: any)
-    // {
-    //     const found: any = [];
-    //     error_list.forEach((error: any) => {
-    //       if(error != null) {
-    //         const start_line = error.line_no;
-    //         const start_char = error.column_no_start;
-    //         const end_line = error.line_no;
-    //         const end_char = error.column_no_stop;
-    //         const message = error.message;
-    //         const severity = error.severity;
-    //         found.push({
-    //             from: CodeMirror.Pos(start_line - 1, start_char),
-    //             to: CodeMirror.Pos(end_line - 1, end_char),
-    //             message: message,
-    //             severity: severity
-    //         });
-    //       }
-    //     })
-    //     updateLinting(cm, found);
-    // }
-    // updateLinting(cm, this.error_found);
-
-    // check_python_syntax(text, result_cb)
   };
 
   async checkSyntax() {
     message.loading({content: '正在校验代码，请稍等...', key: 'check'})
     const editor = this.state.editor
     const code = editor.getValue()
-    const code_type = this.props.type === 'SQL' ? 'sql' : 'python'
+    const code_type = this.props.type === 'sql' ? 'sql' : 'python'
     const { data } = await codeCheck({
       code,
       code_type
@@ -132,7 +108,7 @@ export default class ScriptEditor extends React.Component<any, any> {
   componentDidMount() {
     const editor = CodeMirror.fromTextArea(document.querySelector('.editor') as any, {
       lineNumbers: true,
-      mode: this.props.type === 'SQL' ? 'sql' : 'python',
+      mode: this.props.type === 'sql' ? 'sql' : 'python',
       gutters: ["CodeMirror-lint-markers"],
       lint: {
         getAnnotations: this.python_validator,
@@ -142,22 +118,6 @@ export default class ScriptEditor extends React.Component<any, any> {
         }
       },
     })
-    /* setTimeout(() => {
-      editor.setOption('lint', {
-        getAnnotations: this.python_validator,
-        async: true,
-        options: {
-          error_list: [
-            {
-              from: CodeMirror.Pos(1, 0),
-              to: CodeMirror.Pos(1, 0),
-              message: '456456\n123\n123',
-              severity: 'warning'
-            }
-          ]
-        }
-      })
-    }, 2000) */
     editor.setSize(null, '100%')
     editor.setValue(this.props.scriptText)
     this.setState({editor})

packages/yili-dag/src/ScriptNodeInfo.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { MinusCircleOutlined, PlusCircleOutlined, EditOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Space, Select, Modal, Collapse, Table} from 'antd';
+import { Node } from '@antv/x6';
+import { Button, Form, Input, Space, Modal, Collapse, Table, Empty} from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import ScriptEditor from './ScriptEditor';
 
@@ -100,21 +101,21 @@ const columns: ColumnsType<DataType> = [
 ];
 
 const data: DataType[] = [];
-for (let i = 0; i < 100; i++) {
-  data.push({
-    key: i,
-    name: `data ${i}`,
-    field1: 'field1',
-    field2: 'field2',
-    field3: 'field3',
-    field4: 'field4',
-    field5: 'field5',
-    field6: 'field6',
-    field7: 'field7',
-    field8: 'field8',
-    field9: 'field9',
-  });
-}
+// for (let i = 0; i < 100; i++) {
+//   data.push({
+//     key: i,
+//     name: `data ${i}`,
+//     field1: 'field1',
+//     field2: 'field2',
+//     field3: 'field3',
+//     field4: 'field4',
+//     field5: 'field5',
+//     field6: 'field6',
+//     field7: 'field7',
+//     field8: 'field8',
+//     field9: 'field9',
+//   });
+// }
 
 export default class ScriptNodeInfo extends React.Component<any, any> {
 
@@ -122,7 +123,8 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
     super(props)
     this.state = {
       scriptModalVisible: false,
-      checking: false
+      checking: false,
+      inputNumber: 0
     }
   }
   
@@ -134,8 +136,8 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
 
   // 保存编辑的代码
   submitScriptEdit = () => {
-    const eidtorValue = (this.editorRef.current as any).state.editor.getValue()
-    this.props.nodeInfo.scriptText = eidtorValue
+    const editorValue = (this.editorRef.current as any).state.editor.getValue()
+    this.props.nodeInfo.scriptText = editorValue
     this.setState({scriptModalVisible: false})
   }
 
@@ -147,7 +149,52 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
   }
 
   componentDidMount(): void {
-    console.log('this.props.nodeInfo:', this.props.nodeInfo);
+    this.setState({inputNumber: this.props.nodeInfo.inputNumber})
+    console.log('propData:', this.props.nodeInfo.outputData);
+  }
+
+  // 添加输入端点
+  addInputPorts = (node: Node, number: number) => {
+    const currentInputPortsNumber = node.getPorts().reduce((pre: number, item: any) => {
+      return item.group === 'top' ? pre + 1 : pre
+    }, 0)
+    for (let i = number; i < currentInputPortsNumber; i++) {
+      node.removePortAt(number)
+    }
+    for (let i = currentInputPortsNumber; i < number; i++) {
+      node.addPort({group: 'top', id: `input${i}`})
+    }
+  }
+
+  // 更新输入数量
+  updateNumber(inputNumber: number) {
+    const id = this.props.nodeInfo.id
+    const node = this.props.graph.getCellById(id)
+    this.setState({inputNumber})
+    this.props.nodeInfo.inputNumber = inputNumber
+    this.addInputPorts(node, inputNumber)
+  }
+
+  addOutputPorts(outputData: any) {
+    const id = this.props.nodeInfo.id
+    const node = this.props.graph.getCellById(id)
+    const currentOutputPorts = node.getPorts().reduce((pre: any, item: any) => {
+      return item.group === 'bottom' ? pre.concat(item) : pre
+    }, [])
+    currentOutputPorts.forEach((item: any) => {
+      console.log('item:', item);
+      const index = outputData.findIndex((output: any) => output.outputVar === item.id)
+      if (index === -1) {
+        node.removePort(item.id)
+      }
+    })
+    outputData.forEach((item: any) => {
+      const index = currentOutputPorts?.findIndex((port: any) => port.id === item.outputVar)
+      if (index === -1) {
+        node.addPort({group: 'bottom', id: item.outputVar})
+      }
+    })
+    // console.log('currentOutputPorts:', currentOutputPorts);
   }
 
   render() {
@@ -165,11 +212,15 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
             outputData: this.props.nodeInfo.outputData
           }}
           onValuesChange={(changedValue, values) => {
-            this.props.nodeInfo.paramText = values.paramText
-            this.props.nodeInfo.nodeName = values.nodeName
-            this.props.nodeInfo.outputData = values.outputData?.filter((item: any) => {
+            const paramText = values.paramText
+            const nodeName = values.nodeName
+            const outputData = values.outputData?.filter((item: any) => {
               return item && item.outputVar
             })
+            this.props.nodeInfo.outputData = outputData
+            this.props.nodeInfo.paramText = paramText
+            this.props.nodeInfo.nodeName = nodeName
+            this.addOutputPorts(outputData)
           }}
         >
           <Form.Item name='nodeId' label="节点ID">
@@ -180,13 +231,27 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
           </Form.Item>
           <p>输入:</p>
           { 
-            Array.from({ length: this.props.nodeInfo.inputNumber }, (_, i) => (
-              <div style={{display: 'flex', alignItems: 'center', marginBottom: '8px', columnGap: '2px'}} key={i}>
-                <Input disabled style={{flex: 1}} defaultValue={`t`+ i}/>
-                <span style={{flex: 5}}>TABLE</span>
+            Array.from({ length: this.state.inputNumber }, (_, i) => (
+              <div style={{display: 'flex', alignItems: 'center', columnGap: '2px', width: '30%', marginBottom: '5px'}} key={i}>
+                <Input disabled style={{width: '70%'}} defaultValue={`input`+ i}/>
+                { i === this.state.inputNumber - 1 && 
+                  <MinusCircleOutlined
+                    onClick={() => {
+                      this.updateNumber(this.state.inputNumber - 1)
+                    }}
+                    style={{color:'#147BD1'}}
+                  />
+                }
               </div>
-            )) 
+            ))
           }
+          <Button
+            type="link"
+            onClick={ () => {
+              this.updateNumber(this.state.inputNumber + 1)
+            }} icon={<PlusCircleOutlined />} style={{paddingLeft: 0, paddingRight: 0}}>
+            添加输入
+          </Button>
           <Form.Item name='paramText' label="参数文本:">
             <Input.TextArea placeholder='# input will be transfered into context_string'/>
           </Form.Item>
@@ -206,25 +271,24 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
                 {fields.map(({ key, name, ...restField }) => (
                   <Space key={key} style={{ display: 'flex', padding: '10px 10px 0', background: '#EDF0F6', marginBottom: '2px' }} align="baseline">
                     <Form.Item
-                      label={'输出结果' + (key + 1)}
+                      label={'输出结果'}
                       {...restField}
                       name={[name, 'outputVar']}
                     >
-                      <Select options={[
-                        {label: 'r1', value: 'r1'},
-                        {label: 'r2', value: 'r2'},
-                        {label: 'r3', value: 'r3'},
-                        {label: 'r4', value: 'r4'},
-                      ]} placeholder='请选择输出变量'/>
+                      <Input placeholder='请输入输出变量' />
                     </Form.Item>
                     <MinusCircleOutlined onClick={() => remove(name)} style={{color:'#147BD1'}}/>
                   </Space>
                 ))}
-                <Form.Item>
-                  <Button type="link" onClick={() => add()} icon={<PlusCircleOutlined />} style={{paddingLeft: 0, paddingRight: 0}}>
-                    添加输出源
-                  </Button>
-                </Form.Item>
+                { !(this.props.nodeInfo.label === 'sql' && fields.length > 0) &&
+                  <Form.Item>
+                    <Button type="link" onClick={() => {
+                      return add()
+                    }} icon={<PlusCircleOutlined />} style={{paddingLeft: 0, paddingRight: 0}}>
+                      添加输出
+                    </Button>
+                  </Form.Item>
+                }
               </>
             )}
           </Form.List>
@@ -247,15 +311,32 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
           <div className='modal-container'>
             {/* 数据表展示 */}
             <div className='modal-table'>
-              <Collapse accordion>
-                <Panel header="t1" key="1" style={{position: 'relative', paddingTop: 0}}>
-                  <div style={{position: 'absolute', right: 0, left: 0}}>
-                    <Table bordered columns={columns} dataSource={data} scroll={{ x: 1500, y: 400 }} />
-                  </div>
-                </Panel>
-                <Panel header="t2" key="2"></Panel>
-                <Panel header="t3" key="3"></Panel>
-              </Collapse>
+              { this.state.inputNumber === 0 ?
+                <Empty
+                  style={{
+                    margin: '50% 0',
+                    transform: 'translate(0, -50%)'
+                  }}
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  description={
+                    <span>暂无输入数据</span>
+                  }
+                  /> :
+                <Collapse accordion>
+                  {Array.from({length: this.state.inputNumber}, (_, i) => (
+                    <Panel header={`input${i}`} key={i} style={{position: 'relative', paddingTop: 0}}>
+                      <div style={{position: 'absolute', right: 0, left: 0}}>
+                        <Table showHeader={data?.length !== 0} bordered columns={columns} dataSource={data} scroll={{ x: 1500, y: 400 }} />
+                      </div>
+                    </Panel>
+                  ))}
+                  {/* <Panel header="input1" key="1" style={{position: 'relative', paddingTop: 0}}>
+                    
+                  </Panel>
+                  <Panel header="input2" key="2"></Panel>
+                  <Panel header="input3" key="3"></Panel> */}
+                </Collapse>
+              }
             </div>
             {/* 脚本编辑 */}
             <div className='modal-script'>
@@ -265,18 +346,9 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
                 scriptText={this.props.nodeInfo.scriptText}
                 ref={this.editorRef as any}
               />
-              {/* <CodeMirror
-                style={{flex: 1}}
-                height='100%'
-                value={this.props.nodeInfo.scriptText}
-                extensions={[sql()]}
-                onChange={(val) => {
-                  this.setState({scriptText: val})
-                }}/> */}
             </div>
           </div>
         </Modal>
-        
       </div>
     )
   }

packages/yili-dag/src/utils.ts

@@ -15,7 +15,7 @@ export const DagToData = (Dag: any) => {
           nodes.push({
             id: item.id,
             name: item.data.nodeName,
-            op: item.data.type,
+            op: "datasource",
             data: {
               input_source: item.data.inputSource,
               input_table: item.data.dataTable,
@@ -26,7 +26,7 @@ export const DagToData = (Dag: any) => {
           nodes.push({
             id: item.id,
             name: item.data.nodeName,
-            op: item.data.type,
+            op: "datasource",
             data: {
               output_source: item.data.outputSource,
             }
@@ -36,9 +36,9 @@ export const DagToData = (Dag: any) => {
           nodes.push({
             id: item.id,
             name: item.data.nodeName,
-            op: item.data.type,
+            op: item.data.label,
             data: {
-              input: item.data.inputNumber,
+              input_number: item.data.inputNumber,
               output: item.data.outputData,
               script: item.data.scriptText,
               param: item.data.paramText,
@@ -52,8 +52,8 @@ export const DagToData = (Dag: any) => {
   return {
     user_name: "XXX",
     user_id: 1,
-    project_name: "dfs",
-    project_id: 123,
+    nodes_task_name: "dfs",
+    nodes_task_id: 123,
     itermidate_data: ["hdfs://host:port/uri"],
     nodes,
     edges,

packages/yili-dag/style/Dag.css

@@ -66,6 +66,14 @@
   scrollbar-width: none; /* Firefox */
 }
 
+.my-port {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #31d0c6;
+  border-radius: 100%;
+  background: #fff;
+}
+
 ::-webkit-scrollbar {
   display: none; /* Chrome Safari */
 }

tsconfigdoc.json

@@ -20,280 +20,280 @@
   },
   "references": [
     {
-      "path": "./packages\\application"
+      "path": "./packages/application"
     },
     {
-      "path": "./packages\\apputils"
+      "path": "./packages/apputils"
     },
     {
-      "path": "./packages\\apputils-extension"
+      "path": "./packages/apputils-extension"
     },
     {
-      "path": "./packages\\attachments"
+      "path": "./packages/attachments"
     },
     {
-      "path": "./packages\\cell-toolbar"
+      "path": "./packages/cell-toolbar"
     },
     {
-      "path": "./packages\\cell-toolbar-extension"
+      "path": "./packages/cell-toolbar-extension"
     },
     {
-      "path": "./packages\\cells"
+      "path": "./packages/cells"
     },
     {
-      "path": "./packages\\celltags"
+      "path": "./packages/celltags"
     },
     {
-      "path": "./packages\\celltags-extension"
+      "path": "./packages/celltags-extension"
     },
     {
-      "path": "./packages\\codeeditor"
+      "path": "./packages/codeeditor"
     },
     {
-      "path": "./packages\\codemirror"
+      "path": "./packages/codemirror"
     },
     {
-      "path": "./packages\\codemirror-extension"
+      "path": "./packages/codemirror-extension"
     },
     {
-      "path": "./packages\\completer"
+      "path": "./packages/completer"
     },
     {
-      "path": "./packages\\completer-extension"
+      "path": "./packages/completer-extension"
     },
     {
-      "path": "./packages\\console"
+      "path": "./packages/console"
     },
     {
-      "path": "./packages\\console-extension"
+      "path": "./packages/console-extension"
     },
     {
-      "path": "./packages\\coreutils"
+      "path": "./packages/coreutils"
     },
     {
-      "path": "./packages\\csvviewer"
+      "path": "./packages/csvviewer"
     },
     {
-      "path": "./packages\\csvviewer-extension"
+      "path": "./packages/csvviewer-extension"
     },
     {
-      "path": "./packages\\debugger"
+      "path": "./packages/debugger"
     },
     {
-      "path": "./packages\\debugger-extension"
+      "path": "./packages/debugger-extension"
     },
     {
-      "path": "./packages\\docmanager"
+      "path": "./packages/docmanager"
     },
     {
-      "path": "./packages\\docmanager-extension"
+      "path": "./packages/docmanager-extension"
     },
     {
-      "path": "./packages\\docprovider"
+      "path": "./packages/docprovider"
     },
     {
-      "path": "./packages\\docprovider-extension"
+      "path": "./packages/docprovider-extension"
     },
     {
-      "path": "./packages\\docregistry"
+      "path": "./packages/docregistry"
     },
     {
-      "path": "./packages\\documentsearch"
+      "path": "./packages/documentsearch"
     },
     {
-      "path": "./packages\\documentsearch-extension"
+      "path": "./packages/documentsearch-extension"
     },
     {
-      "path": "./packages\\extensionmanager"
+      "path": "./packages/extensionmanager"
     },
     {
-      "path": "./packages\\extensionmanager-extension"
+      "path": "./packages/extensionmanager-extension"
     },
     {
-      "path": "./packages\\filebrowser"
+      "path": "./packages/filebrowser"
     },
     {
-      "path": "./packages\\filebrowser-extension"
+      "path": "./packages/filebrowser-extension"
     },
     {
-      "path": "./packages\\fileeditor"
+      "path": "./packages/fileeditor"
     },
     {
-      "path": "./packages\\fileeditor-extension"
+      "path": "./packages/fileeditor-extension"
     },
     {
-      "path": "./packages\\help-extension"
+      "path": "./packages/help-extension"
     },
     {
-      "path": "./packages\\htmlviewer"
+      "path": "./packages/htmlviewer"
     },
     {
-      "path": "./packages\\htmlviewer-extension"
+      "path": "./packages/htmlviewer-extension"
     },
     {
-      "path": "./packages\\hub-extension"
+      "path": "./packages/hub-extension"
     },
     {
-      "path": "./packages\\imageviewer"
+      "path": "./packages/imageviewer"
     },
     {
-      "path": "./packages\\imageviewer-extension"
+      "path": "./packages/imageviewer-extension"
     },
     {
-      "path": "./packages\\inspector"
+      "path": "./packages/inspector"
     },
     {
-      "path": "./packages\\inspector-extension"
+      "path": "./packages/inspector-extension"
     },
     {
-      "path": "./packages\\javascript-extension"
+      "path": "./packages/javascript-extension"
     },
     {
-      "path": "./packages\\jldbq-extenison"
+      "path": "./packages/jldbq-extenison"
     },
     {
-      "path": "./packages\\json-extension"
+      "path": "./packages/json-extension"
     },
     {
-      "path": "./packages\\launcher"
+      "path": "./packages/launcher"
     },
     {
-      "path": "./packages\\launcher-extension"
+      "path": "./packages/launcher-extension"
     },
     {
-      "path": "./packages\\logconsole"
+      "path": "./packages/logconsole"
     },
     {
-      "path": "./packages\\logconsole-extension"
+      "path": "./packages/logconsole-extension"
     },
     {
-      "path": "./packages\\mainmenu"
+      "path": "./packages/mainmenu"
     },
     {
-      "path": "./packages\\mainmenu-extension"
+      "path": "./packages/mainmenu-extension"
     },
     {
-      "path": "./packages\\markdownviewer"
+      "path": "./packages/markdownviewer"
     },
     {
-      "path": "./packages\\markdownviewer-extension"
+      "path": "./packages/markdownviewer-extension"
     },
     {
-      "path": "./packages\\mathjax2"
+      "path": "./packages/mathjax2"
     },
     {
-      "path": "./packages\\mathjax2-extension"
+      "path": "./packages/mathjax2-extension"
     },
     {
-      "path": "./packages\\mytest-extenison"
+      "path": "./packages/mytest-extenison"
     },
     {
-      "path": "./packages\\nbformat"
+      "path": "./packages/nbformat"
     },
     {
-      "path": "./packages\\notebook"
+      "path": "./packages/notebook"
     },
     {
-      "path": "./packages\\notebook-extension"
+      "path": "./packages/notebook-extension"
     },
     {
-      "path": "./packages\\observables"
+      "path": "./packages/observables"
     },
     {
-      "path": "./packages\\outputarea"
+      "path": "./packages/outputarea"
     },
     {
-      "path": "./packages\\pdf-extension"
+      "path": "./packages/pdf-extension"
     },
     {
-      "path": "./packages\\property-inspector"
+      "path": "./packages/property-inspector"
     },
     {
-      "path": "./packages\\rendermime"
+      "path": "./packages/rendermime"
     },
     {
-      "path": "./packages\\rendermime-extension"
+      "path": "./packages/rendermime-extension"
     },
     {
-      "path": "./packages\\rendermime-interfaces"
+      "path": "./packages/rendermime-interfaces"
     },
     {
-      "path": "./packages\\running"
+      "path": "./packages/running"
     },
     {
-      "path": "./packages\\running-extension"
+      "path": "./packages/running-extension"
     },
     {
-      "path": "./packages\\services"
+      "path": "./packages/services"
     },
     {
-      "path": "./packages\\settingeditor"
+      "path": "./packages/settingeditor"
     },
     {
-      "path": "./packages\\settingeditor-extension"
+      "path": "./packages/settingeditor-extension"
     },
     {
-      "path": "./packages\\settingregistry"
+      "path": "./packages/settingregistry"
     },
     {
-      "path": "./packages\\shared-models"
+      "path": "./packages/shared-models"
     },
     {
-      "path": "./packages\\shortcuts-extension"
+      "path": "./packages/shortcuts-extension"
     },
     {
-      "path": "./packages\\statedb"
+      "path": "./packages/statedb"
     },
     {
-      "path": "./packages\\statusbar"
+      "path": "./packages/statusbar"
     },
     {
-      "path": "./packages\\statusbar-extension"
+      "path": "./packages/statusbar-extension"
     },
     {
-      "path": "./packages\\terminal"
+      "path": "./packages/terminal"
     },
     {
-      "path": "./packages\\terminal-extension"
+      "path": "./packages/terminal-extension"
     },
     {
-      "path": "./packages\\theme-light-extension"
+      "path": "./packages/theme-light-extension"
     },
     {
-      "path": "./packages\\toc"
+      "path": "./packages/toc"
     },
     {
-      "path": "./packages\\toc-extension"
+      "path": "./packages/toc-extension"
     },
     {
-      "path": "./packages\\tooltip"
+      "path": "./packages/tooltip"
     },
     {
-      "path": "./packages\\tooltip-extension"
+      "path": "./packages/tooltip-extension"
     },
     {
-      "path": "./packages\\translation"
+      "path": "./packages/translation"
     },
     {
-      "path": "./packages\\translation-extension"
+      "path": "./packages/translation-extension"
     },
     {
-      "path": "./packages\\ui-components"
+      "path": "./packages/ui-components"
     },
     {
-      "path": "./packages\\ui-components-extension"
+      "path": "./packages/ui-components-extension"
     },
     {
-      "path": "./packages\\vdom"
+      "path": "./packages/vdom"
     },
     {
-      "path": "./packages\\vdom-extension"
+      "path": "./packages/vdom-extension"
     },
     {
-      "path": "./packages\\vega5-extension"
+      "path": "./packages/vega5-extension"
     },
     {
-      "path": "./packages\\yili-dag"
+      "path": "./packages/yili-dag"
     }
   ]
 }