fix: monitor changes in the data.form field of the categorize and relevant operators and then synchronize them to the edge #918 (#1469)

### What problem does this PR solve?
feat: monitor changes in the table of relevant operators and synchronize
them to the edge #918
feat: fixed the issue of repeated requests when opening the graph page
#918
feat: cache node anchor coordinate information #918
feat: monitor changes in the data.form field of the categorize and
relevant operators and then synchronize them to the edge #918
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/flow/hooks.ts

@@ -10,7 +10,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { Connection, Node, Position, ReactFlowInstance } from 'reactflow';
+import { Connection, Edge, Node, Position, ReactFlowInstance } from 'reactflow';
 // import { shallow } from 'zustand/shallow';
 import { variableEnabledFieldMap } from '@/constants/chat';
 import {
@@ -25,6 +25,7 @@ import { FormInstance, message } from 'antd';
 import { humanId } from 'human-id';
 import trim from 'lodash/trim';
 import { useParams } from 'umi';
+import { v4 as uuid } from 'uuid';
 import {
   NodeMap,
   Operator,
@@ -37,6 +38,7 @@ import {
   initialRetrievalValues,
   initialRewriteQuestionValues,
 } from './constant';
+import { ICategorizeForm, IRelevantForm } from './interface';
 import useGraphStore, { RFState } from './store';
 import {
   buildDslComponentsByGraph,
@@ -253,7 +255,7 @@ const useSetGraphInfo = () => {
 };
 
 export const useFetchDataOnMount = () => {
-  const { loading, data } = useFetchFlow();
+  const { loading, data, refetch } = useFetchFlow();
   const setGraphInfo = useSetGraphInfo();
 
   useEffect(() => {
@@ -264,6 +266,10 @@ export const useFetchDataOnMount = () => {
 
   useFetchLlmList();
 
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
   return { loading, flowDetail: data };
 };
 
@@ -390,3 +396,78 @@ export const useReplaceIdWithText = (output: unknown) => {
 
   return replaceIdWithText(output, getNameById);
 };
+
+/**
+ *  monitor changes in the data.form field of the categorize and relevant operators
+ *  and then synchronize them to the edge
+ */
+export const useWatchNodeFormDataChange = () => {
+  const { getNode, nodes, setEdgesByNodeId } = useGraphStore((state) => state);
+
+  const buildCategorizeEdgesByFormData = useCallback(
+    (nodeId: string, form: ICategorizeForm) => {
+      // add
+      // delete
+      // edit
+      const categoryDescription = form.category_description;
+      const downstreamEdges = Object.keys(categoryDescription).reduce<Edge[]>(
+        (pre, sourceHandle) => {
+          const target = categoryDescription[sourceHandle]?.to;
+          if (target) {
+            pre.push({
+              id: uuid(),
+              source: nodeId,
+              target,
+              sourceHandle,
+            });
+          }
+
+          return pre;
+        },
+        [],
+      );
+
+      setEdgesByNodeId(nodeId, downstreamEdges);
+    },
+    [setEdgesByNodeId],
+  );
+
+  const buildRelevantEdgesByFormData = useCallback(
+    (nodeId: string, form: IRelevantForm) => {
+      const downstreamEdges = ['yes', 'no'].reduce<Edge[]>((pre, cur) => {
+        const target = form[cur as keyof IRelevantForm] as string;
+        if (target) {
+          pre.push({ id: uuid(), source: nodeId, target, sourceHandle: cur });
+        }
+
+        return pre;
+      }, []);
+
+      setEdgesByNodeId(nodeId, downstreamEdges);
+    },
+    [setEdgesByNodeId],
+  );
+
+  useEffect(() => {
+    nodes.forEach((node) => {
+      const currentNode = getNode(node.id);
+      const form = currentNode?.data.form ?? {};
+      const operatorType = currentNode?.data.label;
+      switch (operatorType) {
+        case Operator.Relevant:
+          buildRelevantEdgesByFormData(node.id, form as IRelevantForm);
+          break;
+        case Operator.Categorize:
+          buildCategorizeEdgesByFormData(node.id, form as ICategorizeForm);
+          break;
+        default:
+          break;
+      }
+    });
+  }, [
+    nodes,
+    buildCategorizeEdgesByFormData,
+    getNode,
+    buildRelevantEdgesByFormData,
+  ]);
+};