fix: 调整节点数据

packages/yili-dag/src/Dag.tsx

@@ -560,9 +560,11 @@ function initNodeData(newNode: Node<Node.Properties>) {
     case 'datasource':
       newNode.data.inputSource = undefined;
       newNode.data.dataTable = undefined;
+      newNode.data.nodeName = undefined;
       break;
     case 'script':
       newNode.data.paramText = undefined;
+      newNode.data.nodeName = undefined;
       newNode.data.scriptText = '';
       newNode.data.outputData = undefined;
       newNode.data.inputNumber = 0;

packages/yili-dag/src/DatasourceNodeInfo.tsx

@@ -34,11 +34,18 @@ export default class DatasourceNodeInfo extends React.Component<any, any> {
           ref={this.formRef as any}
           name="datasourceInfo"
           autoComplete="off"
+          layout='vertical'
           initialValues={{
             inputDatasource: this.props.nodeInfo.inputSource,
-            dataTable: this.props.nodeInfo.dataTable
+            dataTable: this.props.nodeInfo.dataTable,
+            nodeName: this.props.nodeInfo.nodeName,
           }}
         >
+          <Form.Item name='nodeName' label="节点名称:">
+            <Input placeholder='请输入节点名称' onChange={(e) => {
+              this.props.nodeInfo.nodeName = e.target.value
+            }}/>
+          </Form.Item>
           <p>添加调试数据表</p>
           <Form.Item name='dataTable' style={{width: '80%', marginTop: '5px'}}>
             <Select options={this.state.debugTable.map((item: any) => {

packages/yili-dag/src/ScriptEditor.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import CodeMirror from "codemirror";
+import { codeCheck } from "./request";
 import 'codemirror/lib/codemirror.css' // CodeMirrory原生样式
 import 'codemirror/mode/sql/sql'
 import 'codemirror/mode/python/python'
@@ -8,20 +9,155 @@ import 'codemirror/addon/display/placeholder'
 import 'codemirror/addon/hint/show-hint.css' // 用来做代码提示
 import 'codemirror/addon/hint/show-hint.js' // 用来做代码提示
 import 'codemirror/addon/hint/sql-hint.js' // 用来做代码提示
+import 'codemirror/addon/lint/lint.js'
+import 'codemirror/addon/lint/lint.css'
+import { message } from "antd";
 
+/* async function check_python_syntax(text: any, result_cb: any) {
+  const error_list = [
+    {
+      line_no: 1,
+      column_no_start: 0,
+      column_no_stop: 3,
+      message: "invalid syntax",
+      severity: "error"
+    },
+    {
+      line_no: 2,
+      column_no_start: 1,
+      column_no_stop: 5,
+      message: "convention violation",
+      severity: "warning"
+    }
+  ]
+  console.log('text:', text);
+  result_cb(error_list)
+} */
 export default class ScriptEditor extends React.Component<any, any> {
   constructor(props: any) {
     super(props)
     this.state = {
-      editor: {}
+      editor: {},
+    }
+  }
+
+  python_validator(content: any, updateLinting: any, options: any, cm: any) {
+    const text = cm.getValue() + "\n";
+
+    if(text.trim() == "")
+    {
+        updateLinting(cm, []);
+        return;
     }
+    
+    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 { data } = await codeCheck({
+      code,
+      code_type
+    })
+    const error_list: Array<any> = []
+    if (data.code === 200) {
+      switch (code_type) {
+        case 'python':
+          data.data.forEach((item: any) => {
+            if(item.type === 'error' || item.type === 'warning') {
+              error_list.push({
+                from: CodeMirror.Pos(item.line - 1, 0),
+                to: CodeMirror.Pos(item.line - 1, 0),
+                message: item.message,
+                severity: item.type
+              })
+            }
+          })
+          break;
+        case 'sql':
+          data.data.forEach((item: any) => {
+            error_list.push({
+              from: CodeMirror.Pos(item.line_no - 1, 0),
+              to: CodeMirror.Pos(item.line_no - 1, 0),
+              message: item.description,
+              severity: 'error'
+            })
+          })
+      
+        default:
+          break;
+      }
+      
+    } else {
+      message.error('获取校验数据失败')
+    }
+    editor.setOption('lint', {
+      getAnnotations: this.python_validator,
+      async: true,
+      options: {
+        error_list,
+      }
+    })
+    message.success({content: '代码校验完成!', key: 'check', duration: 2})
   }
 
   componentDidMount() {
     const editor = CodeMirror.fromTextArea(document.querySelector('.editor') as any, {
       lineNumbers: true,
       mode: this.props.type === 'SQL' ? 'sql' : 'python',
+      gutters: ["CodeMirror-lint-markers"],
+      lint: {
+        getAnnotations: this.python_validator,
+        async: true,
+        options: {
+          error_list: [],
+        }
+      },
     })
+    /* 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

@@ -122,6 +122,7 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
     super(props)
     this.state = {
       scriptModalVisible: false,
+      checking: false
     }
   }
   
@@ -131,12 +132,20 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
     this.setState({scriptModalVisible: true})
   }
 
+  // 保存编辑的代码
   submitScriptEdit = () => {
     const eidtorValue = (this.editorRef.current as any).state.editor.getValue()
     this.props.nodeInfo.scriptText = eidtorValue
     this.setState({scriptModalVisible: false})
   }
 
+  // 提交代码校验
+  submitSyntaxCheck = async () => {
+    this.setState({checking: true});
+    await (this.editorRef.current as any).checkSyntax()
+    this.setState({checking: false});
+  }
+
   componentDidMount(): void {
     console.log('this.props.nodeInfo:', this.props.nodeInfo);
   }
@@ -152,10 +161,12 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
           initialValues={{
             nodeId: this.props.nodeInfo.id,
             paramText: this.props.nodeInfo.paramText,
+            nodeName: this.props.nodeInfo.nodeName,
             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) => {
               return item && item.outputVar
             })
@@ -164,6 +175,9 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
           <Form.Item name='nodeId' label="节点ID">
             <Input disabled/>
           </Form.Item>
+          <Form.Item name='nodeName' label="节点名称:">
+            <Input placeholder='请输入节点名称'/>
+          </Form.Item>
           <p>输入:</p>
           { 
             Array.from({ length: this.props.nodeInfo.inputNumber }, (_, i) => (
@@ -226,7 +240,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 loading={this.state.checking} key="check" type='primary' onClick={() => {this.submitSyntaxCheck()}}>代码校验</Button>,
             <Button key="submit" type='primary' onClick={this.submitScriptEdit}>确定修改</Button>
           ]}
         >

packages/yili-dag/src/declaration.d.ts

@@ -1,4 +1,5 @@
 declare module 'codemirror/mode/sql/sql'
 declare module 'codemirror/mode/python/python'
 declare module 'codemirror/mode/shell/shell'
-declare module 'codemirror/addon/hint/sql-hint.js'
+declare module 'codemirror/addon/hint/sql-hint.js'
+declare module  'codemirror/addon/lint/lint.js'

packages/yili-dag/src/request.ts

@@ -29,3 +29,10 @@ export const getFileData = (params: any) => request({
   method: 'get',
   params
 })
+
+// 代码校验
+export const codeCheck = (params: any) => request({
+  url: `/jpt/code_check`,
+  method: 'post',
+  params
+})

packages/yili-dag/src/utils.ts

@@ -14,7 +14,7 @@ export const DagToData = (Dag: any) => {
         case "datasource":
           nodes.push({
             id: item.id,
-            name: item.data.label,
+            name: item.data.nodeName,
             op: item.data.type,
             data: {
               input_source: item.data.inputSource,
@@ -25,7 +25,7 @@ export const DagToData = (Dag: any) => {
         default:
           nodes.push({
             id: item.id,
-            name: item.data.label,
+            name: item.data.nodeName,
             op: item.data.type,
             data: {
               input: item.data.inputNumber,

packages/yili-dag/style/base.css

@@ -7,6 +7,10 @@
   width: auto !important;
 }
 
+.CodeMirror-lint-tooltip {
+  z-index: 9999 !important;
+}
+
 @import url('./AlgoNode.css');
 @import url('./Dag.css');
 @import url('./MediateDataInfo.css');