feat: construct the edge of the classification operator from dsl #918 (#1329)

### What problem does this PR solve?

feat: construct the edge of the classification operator from dsl #918

### Type of change


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

web/src/pages/flow/utils.ts

@@ -6,19 +6,21 @@ import pipe from 'lodash/fp/pipe';
 import { Edge, MarkerType, Node, Position } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
 import { NodeMap, Operator, initialFormValuesMap } from './constant';
-import { NodeData } from './interface';
+import { ICategorizeItemResult, NodeData } from './interface';
 
 const buildEdges = (
   operatorIds: string[],
   currentId: string,
   allEdges: Edge[],
   isUpstream = false,
+  componentName: string,
+  nodeParams: Record<string, unknown>,
 ) => {
   operatorIds.forEach((cur) => {
     const source = isUpstream ? cur : currentId;
     const target = isUpstream ? currentId : cur;
     if (!allEdges.some((e) => e.source === source && e.target === target)) {
-      allEdges.push({
+      const edge: Edge = {
         id: uuidv4(),
         label: '',
         // type: 'step',
@@ -27,7 +29,20 @@ const buildEdges = (
         markerEnd: {
           type: MarkerType.Arrow,
         },
-      });
+      };
+      if (componentName === Operator.Categorize && !isUpstream) {
+        const categoryDescription =
+          nodeParams.category_description as ICategorizeItemResult;
+
+        const name = Object.keys(categoryDescription).find(
+          (x) => categoryDescription[x].to === target,
+        );
+
+        if (name) {
+          edge.sourceHandle = name;
+        }
+      }
+      allEdges.push(edge);
     }
   });
 };
@@ -39,22 +54,21 @@ export const buildNodesAndEdgesFromDSLComponents = (data: DSLComponents) => {
   Object.entries(data).forEach(([key, value]) => {
     const downstream = [...value.downstream];
     const upstream = [...value.upstream];
+    const { component_name: componentName, params } = value.obj;
     nodes.push({
       id: key,
       type: NodeMap[value.obj.component_name as Operator] || 'ragNode',
       position: { x: 0, y: 0 },
       data: {
-        label: value.obj.component_name,
-        params: value.obj.params,
-        downstream: downstream,
-        upstream: upstream,
+        label: componentName,
+        form: params,
       },
       sourcePosition: Position.Left,
       targetPosition: Position.Right,
     });
 
-    buildEdges(upstream, key, edges, true);
-    buildEdges(downstream, key, edges, false);
+    buildEdges(upstream, key, edges, true, componentName, params);
+    buildEdges(downstream, key, edges, false, componentName, params);
   });
 
   return { nodes, edges };