feat: set the edge as the data source to achieve two-way linkage betw… (#1299)

### What problem does this PR solve?

feat: set the edge as the data source to achieve two-way linkage between
the edge and the to field. #918

### Type of change

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

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

@@ -22,7 +22,8 @@ const CategorizeHandle = ({ top, right, text, idx }: IProps) => {
     <Handle
       type="source"
       position={Position.Right}
-      id={`CategorizeHandle${idx}`}
+      // id={`CategorizeHandle${idx}`}
+      id={text}
       isConnectable
       style={{
         ...DEFAULT_HANDLE_STYLE,

web/src/pages/flow/categorize-form/dynamic-categorize.tsx

@@ -11,10 +11,7 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
   const updateNodeInternals = useUpdateNodeInternals();
   const form = Form.useFormInstance();
   const options = useBuildCategorizeToOptions();
-  const { handleSelectChange } = useHandleToSelectChange(
-    options.map((x) => x.value),
-    nodeId,
-  );
+  const { handleSelectChange } = useHandleToSelectChange(nodeId);
 
   return (
     <>
@@ -64,7 +61,9 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
                     <Select
                       allowClear
                       options={options}
-                      onChange={handleSelectChange}
+                      onChange={handleSelectChange(
+                        form.getFieldValue(['items', field.name, 'name']),
+                      )}
                     />
                   </Form.Item>
                 </Card>

web/src/pages/flow/categorize-form/hooks.ts

@@ -1,11 +1,13 @@
 import get from 'lodash/get';
 import omit from 'lodash/omit';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect } from 'react';
+import { Edge, Node } from 'reactflow';
 import { Operator } from '../constant';
 import {
   ICategorizeItem,
   ICategorizeItemResult,
   IOperatorForm,
+  NodeData,
 } from '../interface';
 import useGraphStore from '../store';
 
@@ -33,10 +35,18 @@ export const useBuildCategorizeToOptions = () => {
 */
 const buildCategorizeListFromObject = (
   categorizeItem: ICategorizeItemResult,
+  edges: Edge[],
+  node?: Node<NodeData>,
 ) => {
+  // Categorize's to field has two data sources, with edges as the data source.
+  // Changes in the edge or to field need to be synchronized to the form field.
   return Object.keys(categorizeItem).reduce<Array<ICategorizeItem>>(
     (pre, cur) => {
-      pre.push({ name: cur, ...categorizeItem[cur] });
+      // synchronize edge data to the to field
+      const edge = edges.find(
+        (x) => x.source === node?.id && x.sourceHandle === cur,
+      );
+      pre.push({ name: cur, ...categorizeItem[cur], to: edge?.target });
       return pre;
     },
     [],
@@ -70,6 +80,8 @@ export const useHandleFormValuesChange = ({
   form,
   node,
 }: IOperatorForm) => {
+  const edges = useGraphStore((state) => state.edges);
+
   const handleValuesChange = useCallback(
     (changedValues: any, values: any) => {
       console.info(changedValues, values);
@@ -85,43 +97,29 @@ export const useHandleFormValuesChange = ({
     form?.setFieldsValue({
       items: buildCategorizeListFromObject(
         get(node, 'data.form.category_description', {}),
+        edges,
+        node,
       ),
     });
-  }, [form, node]);
+  }, [form, node, edges]);
 
   return { handleValuesChange };
 };
 
-export const useHandleToSelectChange = (
-  opstionIds: string[],
-  nodeId?: string,
-) => {
-  // const [previousTarget, setPreviousTarget] = useState('');
-  const previousTarget = useRef('');
-  const { addEdge, deleteEdgeBySourceAndTarget } = useGraphStore(
-    (state) => state,
-  );
+export const useHandleToSelectChange = (nodeId?: string) => {
+  const { addEdge } = useGraphStore((state) => state);
   const handleSelectChange = useCallback(
-    (value?: string) => {
-      if (nodeId) {
-        if (previousTarget.current) {
-          // delete previous edge
-          deleteEdgeBySourceAndTarget(nodeId, previousTarget.current);
-        }
-        if (value) {
-          addEdge({
-            source: nodeId,
-            target: value,
-            sourceHandle: 'b',
-            targetHandle: 'd',
-          });
-        } else {
-          // if the value is empty, delete the edges between the current node and all nodes in the drop-down box.
-        }
-        previousTarget.current = value;
+    (name?: string) => (value?: string) => {
+      if (nodeId && value && name) {
+        addEdge({
+          source: nodeId,
+          target: value,
+          sourceHandle: name,
+          targetHandle: null,
+        });
       }
     },
-    [addEdge, nodeId, deleteEdgeBySourceAndTarget],
+    [addEdge, nodeId],
   );
 
   return { handleSelectChange };

web/src/pages/flow/hooks.ts

@@ -169,7 +169,7 @@ export const useWatchGraphChange = () => {
   const edges = useGraphStore((state) => state.edges);
   useDebounceEffect(
     () => {
-      console.info('useDebounceEffect');
+      // console.info('useDebounceEffect');
     },
     [nodes, edges],
     {

web/src/pages/flow/store.ts

@@ -1,5 +1,6 @@
 import type {} from '@redux-devtools/extension';
 import { humanId } from 'human-id';
+import lodashSet from 'lodash/set';
 import {
   Connection,
   Edge,
@@ -36,6 +37,7 @@ export type RFState = {
   addNode: (nodes: Node) => void;
   getNode: (id: string) => Node | undefined;
   addEdge: (connection: Connection) => void;
+  getEdge: (id: string) => Edge | undefined;
   deletePreviousEdgeOfClassificationNode: (connection: Connection) => void;
   duplicateNode: (id: string) => void;
   deleteEdge: () => void;
@@ -43,7 +45,7 @@ export type RFState = {
   deleteNodeById: (id: string) => void;
   deleteEdgeBySourceAndTarget: (source: string, target: string) => void;
   findNodeByName: (operatorName: Operator) => Node | undefined;
-  findNodeById: (id: string) => Node | undefined;
+  updateMutableNodeFormItem: (id: string, field: string, value: any) => void;
 };
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
@@ -92,6 +94,10 @@ const useGraphStore = create<RFState>()(
         set({
           edges: addEdge(connection, get().edges),
         });
+        get().deletePreviousEdgeOfClassificationNode(connection);
+      },
+      getEdge: (id: string) => {
+        return get().edges.find((x) => x.id === id);
       },
       deletePreviousEdgeOfClassificationNode: (connection: Connection) => {
         // Delete the edge on the classification node anchor when the anchor is connected to other nodes
@@ -164,9 +170,6 @@ const useGraphStore = create<RFState>()(
       findNodeByName: (name: Operator) => {
         return get().nodes.find((x) => x.data.label === name);
       },
-      findNodeById: (id: string) => {
-        return get().nodes.find((x) => x.id === id);
-      },
       updateNodeForm: (nodeId: string, values: any) => {
         set({
           nodes: get().nodes.map((node) => {
@@ -178,6 +181,13 @@ const useGraphStore = create<RFState>()(
           }),
         });
       },
+      updateMutableNodeFormItem: (id: string, field: string, value: any) => {
+        const { nodes } = get();
+        const idx = nodes.findIndex((x) => x.id === id);
+        if (idx) {
+          lodashSet(nodes, [idx, 'data', 'form', field], value);
+        }
+      },
     }),
     { name: 'graph' },
   ),