From 31da511d1d5e147e5257919fd3e2144279070f3b Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 7 Jun 2024 13:46:50 +0800
Subject: [PATCH] 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            |  3 +++
 web/src/pages/flow/chat/drawer.tsx             |  0
 .../pages/flow/{constant.ts => constant.tsx}   | 12 ++++++++++++
 web/src/pages/flow/flow-sider/index.tsx        |  2 +-
 web/src/pages/flow/hooks.ts                    | 18 +++++++++++++++++-
 web/src/pages/flow/mock.tsx                    |  6 ------
 6 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 web/src/pages/flow/chat/drawer.tsx
 rename web/src/pages/flow/{constant.ts => constant.tsx} (73%)

diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
index dc1d47579..0d11aa8b9 100644
--- a/web/src/pages/flow/canvas/index.tsx
+++ b/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: {
diff --git a/web/src/pages/flow/chat/drawer.tsx b/web/src/pages/flow/chat/drawer.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/src/pages/flow/constant.ts b/web/src/pages/flow/constant.tsx
similarity index 73%
rename from web/src/pages/flow/constant.ts
rename to web/src/pages/flow/constant.tsx
index 0f29c775f..ccd42b6c0 100644
--- a/web/src/pages/flow/constant.ts
+++ b/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,
diff --git a/web/src/pages/flow/flow-sider/index.tsx b/web/src/pages/flow/flow-sider/index.tsx
index e82043e9d..484196446 100644
--- a/web/src/pages/flow/flow-sider/index.tsx
+++ b/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';
 
diff --git a/web/src/pages/flow/hooks.ts b/web/src/pages/flow/hooks.ts
index 81152d0ae..d0bc528bd 100644
--- a/web/src/pages/flow/hooks.ts
+++ b/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();
 
diff --git a/web/src/pages/flow/mock.tsx b/web/src/pages/flow/mock.tsx
index d5ba5edce..98be66004 100644
--- a/web/src/pages/flow/mock.tsx
+++ b/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,