feat: watch graph change (#1092)

### What problem does this PR solve?

feat: watch graph change #918 

### Type of change

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

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

@@ -78,6 +78,9 @@ function FlowCanvas({ sideWidth }: IProps) {
         onKeyUp={handleKeyUp}
         onSelectionChange={onSelectionChange}
         nodeOrigin={[0.5, 0]}
+        onChange={(...params) => {
+          console.info('params:', ...params);
+        }}
         defaultEdgeOptions={{
           type: 'buttonEdge',
           markerEnd: {

web/src/pages/flow/constant.ts → web/src/pages/flow/constant.tsx

@@ -1,3 +1,9 @@
+import {
+  MergeCellsOutlined,
+  RocketOutlined,
+  SendOutlined,
+} from '@ant-design/icons';
+
 export enum Operator {
   Begin = 'Begin',
   Retrieval = 'Retrieval',
@@ -5,6 +11,12 @@ export enum Operator {
   Answer = 'Answer',
 }
 
+export const componentList = [
+  { name: Operator.Retrieval, icon: <RocketOutlined />, description: '' },
+  { name: Operator.Generate, icon: <MergeCellsOutlined />, description: '' },
+  { name: Operator.Answer, icon: <SendOutlined />, description: '' },
+];
+
 export const initialRetrievalValues = {
   similarity_threshold: 0.2,
   keywords_similarity_weight: 0.3,

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

@@ -1,7 +1,7 @@
 import { Avatar, Card, Flex, Layout, Space } from 'antd';
 import classNames from 'classnames';
-import { componentList } from '../mock';
 
+import { componentList } from '../constant';
 import { useHandleDrag } from '../hooks';
 import styles from './index.less';
 

web/src/pages/flow/hooks.ts

@@ -17,6 +17,7 @@ import React, {
 import { Node, Position, ReactFlowInstance } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
 // import { shallow } from 'zustand/shallow';
+import { useDebounceEffect } from 'ahooks';
 import { useParams } from 'umi';
 import useGraphStore, { RFState } from './store';
 import { buildDslComponentsByGraph } from './utils';
@@ -154,11 +155,24 @@ export const useSaveGraph = () => {
   return { saveGraph };
 };
 
+export const useWatchGraphChange = () => {
+  const nodes = useGraphStore((state) => state.nodes);
+  const edges = useGraphStore((state) => state.edges);
+  useDebounceEffect(
+    () => {
+      console.info('useDebounceEffect');
+    },
+    [nodes, edges],
+    {
+      wait: 1000,
+    },
+  );
+};
+
 export const useHandleFormValuesChange = (id?: string) => {
   const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
   const handleValuesChange = useCallback(
     (changedValues: any, values: any) => {
-      console.info(changedValues, values);
       if (id) {
         updateNodeForm(id, values);
       }
@@ -191,6 +205,8 @@ export const useFetchDataOnMount = () => {
     setGraphInfo(data?.dsl?.graph ?? {});
   }, [setGraphInfo, data?.dsl?.graph]);
 
+  useWatchGraphChange();
+
   useFetchFlowTemplates();
   useFetchLlmList();
 

web/src/pages/flow/mock.tsx

@@ -1,11 +1,5 @@
-import { MergeCellsOutlined, RocketOutlined } from '@ant-design/icons';
 import { Position } from 'reactflow';
 
-export const componentList = [
-  { name: 'Retrieval', icon: <RocketOutlined />, description: '' },
-  { name: 'Generate', icon: <MergeCellsOutlined />, description: '' },
-];
-
 export const initialNodes = [
   {
     sourcePosition: Position.Left,