refactor(api/index.ts): add FlowType import to improve code readability and maintainability

feat(reactflowUtils.ts): add concatFlows function to concatenate nodes and edges from a FlowType object to a ReactFlowInstance

feat(reactflowUtils.ts): add generateNodeFromFlow function to generate a NodeType object from a FlowType object

src/frontend/src/types/api/index.ts

@@ -1,4 +1,5 @@
 import { Edge, Node, Viewport } from "reactflow";
+import { FlowType } from "../flow";
 //kind and class are just representative names to represent the actual structure of the object received by the API
 export type APIDataType = { [key: string]: APIKindType };
 export type APIObjectType = { kind: APIKindType; [key: string]: APIKindType };
@@ -17,7 +18,8 @@ export type APIClassType = {
   beta?: boolean;
   documentation: string;
   error?: string;
-  [key: string]: Array<string> | string | APITemplateType | boolean | undefined;
+  flow?:FlowType;
+  [key: string]: Array<string> | string | APITemplateType | boolean | FlowType | undefined;
 };
 
 export type TemplateVariableType = {

src/frontend/src/utils/reactflowUtils.ts

@@ -476,4 +476,39 @@ export function updateFlowPosition(NewPosition: XYPosition, flow: FlowType) {
     node.position.x += deltaPosition.x;
     node.position.y += deltaPosition.y;
   });
+}
+
+export function concatFlows(
+  flow: FlowType,
+  ReactFlowInstance: ReactFlowInstance
+) {
+  const { nodes, edges } = flow.data!;
+  ReactFlowInstance.addNodes(nodes);
+  ReactFlowInstance.addEdges(edges);
+}
+
+export function generateNodeFromFlow(flow: FlowType): NodeType {
+  const { nodes } = flow.data!;
+  const outputNode = _.cloneDeep(findLastNode(flow.data!));
+  // console.log(flow)
+  const position = getMiddlePoint(nodes);
+  let data = _.cloneDeep(flow);
+  const newGroupNode: NodeType = {
+    data: {
+      id: data.id,
+      type: outputNode!.data.type,
+      node: {
+        display_name:"group Node",
+        documentation: "",
+        base_classes: outputNode!.data.node!.base_classes,
+        description: "group Node",
+        template: generateNodeTemplate(data),
+        flow: data,
+      },
+    },
+    id: data.id,
+    position,
+    type: "groupNode",
+  };
+  return newGroupNode;
 }