feat: dag文件数据添加节点名

packages/yili-dag/src/Dag.tsx

@@ -36,7 +36,7 @@ const dataSourceNodes = [
   }
 ];
 
-// 数据处理节点
+/* // 数据处理节点
 const dataHandleNodes = [
   {
     id: '1',
@@ -72,7 +72,7 @@ const otherScriptNodes = [
       ]
     }
   }
-];
+]; */
 
 // 用户自定义脚本节点
 const customScriptNodes = [
@@ -467,21 +467,21 @@ export default class Dag extends React.Component<any, any> {
 
     // 将可拖拽项加载到侧边栏中
     stencil.load(dataSourceNodes, 'dataSource');
-    stencil.load(dataHandleNodes, 'dataHandle');
-    stencil.load(otherScriptNodes, 'otherScript');
+    // stencil.load(dataHandleNodes, 'dataHandle');
+    // stencil.load(otherScriptNodes, 'otherScript');
     stencil.load(customScriptNodes, 'customScript');
     stencil.resizeGroup('dataSource', {
       width: 200,
       height: dataSourceNodes.length * 120
     });
-    stencil.resizeGroup('dataHandle', {
+    /* 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
@@ -563,7 +563,7 @@ function initNodeData(newNode: Node<Node.Properties>) {
       break;
     case 'script':
       newNode.data.paramText = undefined;
-      newNode.data.scriptText = undefined;
+      newNode.data.scriptText = '';
       newNode.data.outputData = undefined;
       newNode.data.inputNumber = 0;
       newNode.data.packageData = undefined;

packages/yili-dag/src/DatasourceNodeInfo.tsx

@@ -27,13 +27,6 @@ export default class DatasourceNodeInfo extends React.Component<any, any> {
     }
   }
 
-  componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any){
-    (this.formRef.current as any).setFieldsValue({
-      inputDatasource: this.state.inputFields
-    })
-    this.props.nodeInfo.inputSource = this.state.inputFields
-  }
-
   render() {
     return (
       <div className='node-datasource'>
@@ -50,33 +43,37 @@ export default class DatasourceNodeInfo extends React.Component<any, any> {
           <Form.Item name='dataTable' style={{width: '80%', marginTop: '5px'}}>
             <Select options={this.state.debugTable.map((item: any) => {
               return {label: item.name, value: item.id}
-            })} placeholder='选择调试数据表' onSelect={(val: any) => {
+            })} placeholder='选择调试数据表'
+            onSelect={(val: any) => {
               this.props.nodeInfo.dataTable = val
               switch(val) {
                 case 4:
-                  this.setState({inputFields: [
+                  this.props.nodeInfo.inputSource = [
                     {dataSelect: true, dataField: 'name', dataType: 'string'},
                     {dataSelect: true, dataField: 'address', dataType: 'string'},
                     {dataSelect: false, dataField: 'age', dataType: 'int'},
-                  ]})
+                  ]
                   break
                 case 5:
-                  this.setState({inputFields: [
+                  this.props.nodeInfo.inputSource = [
                     {dataSelect: false, dataField: 'name', dataType: 'string'},
                     {dataSelect: true, dataField: 'address', dataType: 'string'},
-                  ]})
+                  ]
                   break
                 case 6:
-                  this.setState({inputFields: [
+                  this.props.nodeInfo.inputSource = [
                     {dataSelect: true, dataField: 'name', dataType: 'string'},
-                  ]})
+                  ]
                   break
                 case 7:
-                  this.setState({inputFields: [
+                  this.props.nodeInfo.inputSource = [
                     {dataSelect: false, dataField: 'name', dataType: 'string'},
-                  ]})
+                  ]
                   break
               }
+              (this.formRef.current as any).setFieldsValue({
+                inputDatasource: this.props.nodeInfo.inputSource
+              })
             }}/>
           </Form.Item>
           <p>输入源:</p>
@@ -90,7 +87,9 @@ export default class DatasourceNodeInfo extends React.Component<any, any> {
                       name={[name, 'dataSelect']}
                       valuePropName="checked"
                     >
-                      <Checkbox/>
+                      <Checkbox onChange={(e) => {
+                        this.props.nodeInfo.inputSource = (this.formRef.current as any).getFieldsValue().inputDatasource
+                      }}/>
                     </Form.Item>
                     <Form.Item
                       {...restField}

packages/yili-dag/src/ScriptEditor.tsx

@@ -12,15 +12,19 @@ import 'codemirror/addon/hint/sql-hint.js' // 用来做代码提示
 export default class ScriptEditor extends React.Component<any, any> {
   constructor(props: any) {
     super(props)
-    this.state = {}
+    this.state = {
+      editor: {}
+    }
   }
 
   componentDidMount() {
     const editor = CodeMirror.fromTextArea(document.querySelector('.editor') as any, {
       lineNumbers: true,
-      mode: 'python',
+      mode: this.props.type === 'SQL' ? 'sql' : 'python',
     })
     editor.setSize(null, '100%')
+    editor.setValue(this.props.scriptText)
+    this.setState({editor})
   }
 
   render () {

packages/yili-dag/src/ScriptNodeInfo.tsx

@@ -122,19 +122,25 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
     super(props)
     this.state = {
       scriptModalVisible: false,
-      scriptText: ''
     }
   }
+  
+  editorRef = React.createRef()
 
   showScriptModal = () => {
     this.setState({scriptModalVisible: true})
   }
 
   submitScriptEdit = () => {
-    this.props.nodeInfo.scriptText = this.state.scriptText
+    const eidtorValue = (this.editorRef.current as any).state.editor.getValue()
+    this.props.nodeInfo.scriptText = eidtorValue
     this.setState({scriptModalVisible: false})
   }
 
+  componentDidMount(): void {
+    console.log('this.props.nodeInfo:', this.props.nodeInfo);
+  }
+
   render() {
     return (
       <div className='node-script'>
@@ -220,7 +226,7 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
           onCancel={() => {this.setState({scriptModalVisible: false})}}
           footer={[
             <Button key="back" onClick={() => {this.setState({scriptModalVisible: false})}}>取消</Button>,
-            <Button key="check" type='primary' onClick={() => {console.log('代码校验');}}>代码校验</Button>,
+            // <Button key="check" type='primary' onClick={() => {console.log('代码校验');}}>代码校验</Button>,
             <Button key="submit" type='primary' onClick={this.submitScriptEdit}>确定修改</Button>
           ]}
         >
@@ -240,7 +246,11 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
             {/* 脚本编辑 */}
             <div className='modal-script'>
               <div className='script-header'></div>
-              <ScriptEditor />
+              <ScriptEditor
+                type={this.props.nodeInfo.label}
+                scriptText={this.props.nodeInfo.scriptText}
+                ref={this.editorRef as any}
+              />
               {/* <CodeMirror
                 style={{flex: 1}}
                 height='100%'

packages/yili-dag/src/utils.ts

@@ -1,6 +1,52 @@
 export const DagToData = (Dag: any) => {
+  console.log('Dag:', Dag);
+  const nodes: any = []
+  const edges: any = []
+  Dag.cells.forEach((item: any) => {
+    if (item?.shape === 'dag-edge') {
+      edges.push({
+        id: item.id,
+        source: item.source.cell,
+        target: item.target.cell
+      })
+    } else {
+      switch (item.data?.type) {
+        case "datasource":
+          nodes.push({
+            id: item.id,
+            name: item.data.label,
+            op: item.data.type,
+            data: {
+              input_source: item.data.inputSource,
+              input_table: item.data.dataTable,
+            }
+          })
+          break;
+        default:
+          nodes.push({
+            id: item.id,
+            name: item.data.label,
+            op: item.data.type,
+            data: {
+              input: item.data.inputNumber,
+              output: item.data.outputData,
+              script: item.data.scriptText,
+              param: item.data.paramText,
+              package: item.data.packageData
+            }
+          })
+          break;
+      }
+    }
+  });
   return {
-    title: 'DagData',
+    user_name: "XXX",
+    user_id: 1,
+    project_name: "dfs",
+    project_id: 123,
+    itermidate_data: ["hdfs://host:port/uri"],
+    nodes,
+    edges,
     graph: Dag
   }
 }