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/canvas/edge/index.tsx

@@ -6,7 +6,8 @@ import {
 } from 'reactflow';
 import useGraphStore from '../../store';
 
-import { useFetchFlow } from '@/hooks/flow-hooks';
+import { IFlow } from '@/interfaces/database/flow';
+import { useQueryClient } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import styles from './index.less';
 
@@ -43,10 +44,12 @@ export function ButtonEdge({
   };
 
   // highlight the nodes that the workflow passes through
-  const { data: flowDetail } = useFetchFlow();
+  const queryClient = useQueryClient();
+  const flowDetail = queryClient.getQueryData<IFlow>(['flowDetail']);
+
   const graphPath = useMemo(() => {
     // TODO: this will be called multiple times
-    const path = flowDetail.dsl.path ?? [];
+    const path = flowDetail?.dsl.path ?? [];
     // The second to last
     const previousGraphPath: string[] = path.at(-2) ?? [];
     let graphPath: string[] = path.at(-1) ?? [];
@@ -56,7 +59,7 @@ export function ButtonEdge({
       graphPath = [previousLatestElement, ...graphPath];
     }
     return graphPath;
-  }, [flowDetail.dsl.path]);
+  }, [flowDetail?.dsl.path]);
 
   const highlightStyle = useMemo(() => {
     const idx = graphPath.findIndex((x) => x === source);

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

@@ -16,6 +16,7 @@ import {
   useSelectCanvasData,
   useShowDrawer,
   useValidateConnection,
+  useWatchNodeFormDataChange,
 } from '../hooks';
 import { RagNode } from './node';
 
@@ -69,6 +70,7 @@ function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
   const { onDrop, onDragOver, setReactFlowInstance } = useHandleDrop();
 
   const { handleKeyUp } = useHandleKeyUp();
+  useWatchNodeFormDataChange();
 
   return (
     <div className={styles.canvasWrapper}>

web/src/pages/flow/canvas/node/categorize-node.tsx

@@ -1,25 +1,68 @@
 import { useTranslate } from '@/hooks/commonHooks';
 import { Flex } from 'antd';
 import classNames from 'classnames';
+import { pick } from 'lodash';
 import get from 'lodash/get';
+import intersectionWith from 'lodash/intersectionWith';
+import isEqual from 'lodash/isEqual';
 import lowerFirst from 'lodash/lowerFirst';
-import { Handle, NodeProps, Position } from 'reactflow';
-import {
-  CategorizeAnchorPointPositions,
-  Operator,
-  operatorMap,
-} from '../../constant';
-import { NodeData } from '../../interface';
+import { useEffect, useMemo, useState } from 'react';
+import { Handle, NodeProps, Position, useUpdateNodeInternals } from 'reactflow';
+import { Operator, operatorMap } from '../../constant';
+import { IPosition, NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
+import { buildNewPositionMap } from '../../utils';
 import CategorizeHandle from './categorize-handle';
 import NodeDropdown from './dropdown';
 import styles from './index.less';
 import NodePopover from './popover';
 
 export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
-  const categoryData = get(data, 'form.category_description') ?? {};
+  const updateNodeInternals = useUpdateNodeInternals();
+  const [postionMap, setPositionMap] = useState<Record<string, IPosition>>({});
+  const categoryData = useMemo(
+    () => get(data, 'form.category_description') ?? {},
+    [data],
+  );
   const style = operatorMap[data.label as Operator];
   const { t } = useTranslate('flow');
+
+  useEffect(() => {
+    // Cache used coordinates
+    setPositionMap((state) => {
+      // index in use
+      const indexesInUse = Object.values(state).map((x) => x.idx);
+      const categoryDataKeys = Object.keys(categoryData);
+      const stateKeys = Object.keys(state);
+      if (!isEqual(categoryDataKeys.sort(), stateKeys.sort())) {
+        const intersectionKeys = intersectionWith(
+          stateKeys,
+          categoryDataKeys,
+          (categoryDataKey, postionMapKey) => categoryDataKey === postionMapKey,
+        );
+        const newPositionMap = buildNewPositionMap(
+          categoryDataKeys.filter(
+            (x) => !intersectionKeys.some((y) => y === x),
+          ),
+          indexesInUse,
+        );
+        console.info('newPositionMap:', newPositionMap);
+
+        const nextPostionMap = {
+          ...pick(state, intersectionKeys),
+          ...newPositionMap,
+        };
+
+        return nextPostionMap;
+      }
+      return state;
+    });
+  }, [categoryData]);
+
+  useEffect(() => {
+    updateNodeInternals(id);
+  }, [id, updateNodeInternals, postionMap]);
+
   return (
     <NodePopover nodeId={id}>
       <section
@@ -53,14 +96,17 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
           id={'c'}
         ></Handle>
         {Object.keys(categoryData).map((x, idx) => {
+          const position = postionMap[x];
           return (
-            <CategorizeHandle
-              top={CategorizeAnchorPointPositions[idx].top}
-              right={CategorizeAnchorPointPositions[idx].right}
-              key={idx}
-              text={x}
-              idx={idx}
-            ></CategorizeHandle>
+            position && (
+              <CategorizeHandle
+                top={position.top}
+                right={position.right}
+                key={idx}
+                text={x}
+                idx={idx}
+              ></CategorizeHandle>
+            )
           );
         })}
         <Flex vertical align="center" justify="center" gap={6}>