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/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}>