feat: fixed issue with threshold translation #882 and add NodeContextMenu (#906)

### What problem does this PR solve?

feat: fixed issue with threshold translation #882
feat: add NodeContextMenu

### Type of change


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

web/src/pages/flow/flow-sider/index.tsx

@@ -1,6 +1,5 @@
 import { Avatar, Card, Flex, Layout, Space } from 'antd';
 import classNames from 'classnames';
-import { useState } from 'react';
 import { componentList } from '../mock';
 
 import { useHandleDrag } from '../hooks';
@@ -8,9 +7,13 @@ import styles from './index.less';
 
 const { Sider } = Layout;
 
-const FlowSider = () => {
-  const [collapsed, setCollapsed] = useState(true);
-  const { handleDrag } = useHandleDrag();
+interface IProps {
+  setCollapsed: (width: boolean) => void;
+  collapsed: boolean;
+}
+
+const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
+  const { handleDragStart } = useHandleDrag();
 
   return (
     <Sider
@@ -27,7 +30,7 @@ const FlowSider = () => {
             hoverable
             draggable
             className={classNames(styles.operatorCard)}
-            onDragStart={handleDrag(x.name)}
+            onDragStart={handleDragStart(x.name)}
           >
             <Flex justify="space-between" align="center">
               <Space size={15}>
@@ -45,4 +48,4 @@ const FlowSider = () => {
   );
 };
 
-export default FlowSider;
+export default FlowSide;