feat: build react flow nodes and edges from mock data #918 (#919)

### What problem does this PR solve?
feat: build react flow nodes and edges from mock data #918

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/canvas/node/index.tsx

@@ -1,41 +1,24 @@
-import { useCallback } from 'react';
 import { Handle, NodeProps, Position } from 'reactflow';
 
 import styles from './index.less';
 
-const handleStyle = { left: 10 };
-
 export function TextUpdaterNode({
   data,
   isConnectable = true,
-}: NodeProps<{ value: number }>) {
-  const onChange = useCallback((evt) => {
-    console.log(evt.target.value);
-  }, []);
-
+}: NodeProps<{ label: string }>) {
   return (
     <div className={styles.textUpdaterNode}>
       <Handle
         type="target"
-        position={Position.Top}
+        position={Position.Left}
         isConnectable={isConnectable}
       />
       <Handle
         type="source"
-        position={Position.Bottom}
-        // style={handleStyle}
+        position={Position.Right}
         isConnectable={isConnectable}
       />
-      <div>
-        <label htmlFor="text">Text:</label>
-        <input id="text" name="text" onChange={onChange} className="nodrag" />
-      </div>
-      {/* <Handle
-        type="source"
-        position={Position.Bottom}
-        id="b"
-        isConnectable={isConnectable}
-      /> */}
+      <div>{data.label}</div>
     </div>
   );
 }