Feat: Add the iteration Node #4242 (#4247)

### What problem does this PR solve?

Feat: Add the iteration Node #4242

### Type of change


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

web/src/pages/flow/store.ts

@@ -1,5 +1,5 @@
 import type {} from '@redux-devtools/extension';
-import { humanId } from 'human-id';
+import { omit } from 'lodash';
 import differenceWith from 'lodash/differenceWith';
 import intersectionWith from 'lodash/intersectionWith';
 import lodashSet from 'lodash/set';
@@ -25,8 +25,8 @@ import { Operator, SwitchElseTo } from './constant';
 import { NodeData } from './interface';
 import {
   duplicateNodeForm,
+  generateDuplicateNode,
   generateNodeNamesWithIncreasingIndex,
-  getNodeDragHandle,
   getOperatorIndex,
   isEdgeEqual,
 } from './utils';
@@ -61,13 +61,16 @@ export type RFState = {
   ) => void;
   deletePreviousEdgeOfClassificationNode: (connection: Connection) => void;
   duplicateNode: (id: string, name: string) => void;
+  duplicateIterationNode: (id: string, name: string) => void;
   deleteEdge: () => void;
   deleteEdgeById: (id: string) => void;
   deleteNodeById: (id: string) => void;
+  deleteIterationNodeById: (id: string) => void;
   deleteEdgeBySourceAndSourceHandle: (connection: Partial<Connection>) => void;
   findNodeByName: (operatorName: Operator) => Node | undefined;
   updateMutableNodeFormItem: (id: string, field: string, value: any) => void;
   getOperatorTypeFromId: (id?: string | null) => string | undefined;
+  getParentIdById: (id?: string | null) => string | undefined;
   updateNodeName: (id: string, name: string) => void;
   generateNodeName: (name: string) => string;
   setClickedNodeId: (id?: string) => void;
@@ -170,6 +173,9 @@ const useGraphStore = create<RFState>()(
       getOperatorTypeFromId: (id?: string | null) => {
         return get().getNode(id)?.data?.label;
       },
+      getParentIdById: (id?: string | null) => {
+        return get().getNode(id)?.parentId;
+      },
       addEdge: (connection: Connection) => {
         set({
           edges: addEdge(connection, get().edges),
@@ -234,12 +240,14 @@ const useGraphStore = create<RFState>()(
         }
       },
       duplicateNode: (id: string, name: string) => {
-        const { getNode, addNode, generateNodeName } = get();
+        const { getNode, addNode, generateNodeName, duplicateIterationNode } =
+          get();
         const node = getNode(id);
-        const position = {
-          x: (node?.position?.x || 0) + 50,
-          y: (node?.position?.y || 0) + 50,
-        };
+
+        if (node?.data.label === Operator.Iteration) {
+          duplicateIterationNode(id, name);
+          return;
+        }
 
         addNode({
           ...(node || {}),
@@ -247,13 +255,38 @@ const useGraphStore = create<RFState>()(
             ...duplicateNodeForm(node?.data),
             name: generateNodeName(name),
           },
-          selected: false,
-          dragging: false,
-          id: `${node?.data?.label}:${humanId()}`,
-          position,
-          dragHandle: getNodeDragHandle(node?.data?.label),
+          ...generateDuplicateNode(node?.position, node?.data?.label),
         });
       },
+      duplicateIterationNode: (id: string, name: string) => {
+        const { getNode, generateNodeName, nodes } = get();
+        const node = getNode(id);
+
+        const iterationNode: Node<NodeData> = {
+          ...(node || {}),
+          data: {
+            ...(node?.data || { label: Operator.Iteration, form: {} }),
+            name: generateNodeName(name),
+          },
+          ...generateDuplicateNode(node?.position, node?.data?.label),
+        };
+
+        const children = nodes
+          .filter((x) => x.parentId === node?.id)
+          .map((x) => ({
+            ...(x || {}),
+            data: {
+              ...duplicateNodeForm(x?.data),
+              name: generateNodeName(x.data.name),
+            },
+            ...omit(generateDuplicateNode(x?.position, x?.data?.label), [
+              'position',
+            ]),
+            parentId: iterationNode.id,
+          }));
+
+        set({ nodes: nodes.concat(iterationNode, ...children) });
+      },
       deleteEdge: () => {
         const { edges, selectedEdgeIds } = get();
         set({
@@ -323,6 +356,21 @@ const useGraphStore = create<RFState>()(
             .filter((edge) => edge.target !== id),
         });
       },
+      deleteIterationNodeById: (id: string) => {
+        const { nodes, edges } = get();
+        const children = nodes.filter((node) => node.parentId === id);
+        set({
+          nodes: nodes.filter((node) => node.id !== id && node.parentId !== id),
+          edges: edges.filter(
+            (edge) =>
+              edge.source !== id &&
+              edge.target !== id &&
+              !children.some(
+                (child) => edge.source === child.id && edge.target === child.id,
+              ),
+          ),
+        });
+      },
       findNodeByName: (name: Operator) => {
         return get().nodes.find((x) => x.data.label === name);
       },