Merge branch 'dev' of personal:logspace-ai/langflow into dev

src/frontend/src/contexts/tabsContext.tsx

@@ -8,7 +8,7 @@ import {
 } from "react";
 import { FlowType, NodeType } from "../types/flow";
 import { LangFlowState, TabsContextType } from "../types/tabs";
-import { normalCaseToSnakeCase, updateObject, updateTemplate } from "../utils";
+import { normalCaseToSnakeCase, updateIds, updateObject, updateTemplate } from "../utils";
 import { alertContext } from "./alertContext";
 import { typesContext } from "./typesContext";
 import { APITemplateType, TemplateVariableType } from "../types/api";
@@ -58,11 +58,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       Saveflows.forEach((flow) => {
         if (flow.data && flow.data?.nodes)
           flow.data?.nodes.forEach((node) => {
-            console.log(node.data.type);
             Object.keys(node.data.node.template).forEach((key) => {
-              console.log(node.data.node.template[key].type);
               if (node.data.node.template[key].type === "file") {
-                console.log(node.data.node.template[key]);
                 // ! Commenting this out for now, as it is causing issues with the file upload
                 // node.data.node.template[key].content = "";
               }
@@ -286,7 +283,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   function addFlow(flow?: FlowType) {
     // Get data from the flow or set it to null if there's no flow provided.
-    const data = flow?.data ? flow.data : null;
+
+    let data = flow?.data ? flow.data : null;
     const description = flow?.description ? flow.description : "";
     if (data) {
       data.edges.forEach((edge) => {
@@ -312,6 +310,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           );
         }
       });
+      updateIds(data, getNodeId);
     }
     // Create a new flow with a default name if no flow is provided.
     let newFlow: FlowType = {

src/frontend/src/pages/FlowPage/index.tsx

@@ -318,7 +318,6 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
               setDisableCopyPaste(false);
             }}
             onPaneMouseLeave={() => {
-              console.log("saiu o mouse");
               setDisableCopyPaste(true);
             }}
             onNodesChange={onNodesChange}

src/frontend/src/utils.ts

@@ -16,8 +16,8 @@ import {
   CircleStackIcon,
   Squares2X2Icon,
 } from "@heroicons/react/24/outline";
-import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
-import { FlowType } from "./types/flow";
+import { Connection, Edge, Node, ReactFlowInstance, addEdge } from "reactflow";
+import { FlowType, NodeType } from "./types/flow";
 import { APITemplateType, TemplateVariableType } from "./types/api";
 import _ from "lodash";
 import { ChromaIcon } from "./icons";
@@ -540,26 +540,37 @@ export function checkUpperWords(str: string) {
   return words.join(" ");
 }
 
-export function updateIds(newFLow: FlowType, baseFlow: FlowType) {
-  newFLow.data.nodes.forEach((node) => {
-    while (baseFlow.data.nodes.some((n) => n.id === node.id)) {
-      const newId = uuidv4();
-      newFLow.data.edges.forEach((edge) => {
-        if (edge.source === node.id) {
-          edge.source = newId;
-        }
-        if (edge.target === node.id) {
-          edge.target = newId;
-        }
-        const index = edge.id.split("|").findIndex((e) => e === node.id);
-        if (index != -1) {
-          let tempList = edge.id.split("|");
-          tempList[index] = newId;
-          edge.id = tempList.concat(newId).join("|");
-        }
-        node.id = newId;
-      });
-    }
+export function updateIds(newFlow, getNodeId) {
+  let idsMap = {};
+
+  newFlow.nodes.forEach((n) => {
+    // Generate a unique node ID
+    let newId = getNodeId();
+    idsMap[n.id] = newId;
+    n.id = newId;
+    n.data.id = newId;
+    // Add the new node to the list of nodes in state
+  });
+
+  newFlow.edges.forEach((e) => {
+    e.source = idsMap[e.source];
+    e.target = idsMap[e.target];
+    let sourceHandleSplitted = e.sourceHandle.split("|");
+    e.sourceHandle =
+      sourceHandleSplitted[0] +
+      "|" +
+      e.source +
+      "|" +
+      sourceHandleSplitted.slice(2).join("|");
+    let targetHandleSplitted = e.targetHandle.split("|");
+    e.targetHandle =
+      targetHandleSplitted.slice(0, -1).join("|") + "|" + e.target;
+    e.id =
+      "reactflow__edge-" +
+      e.source +
+      e.sourceHandle +
+      "-" +
+      e.target +
+      e.targetHandle;
   });
-  return newFLow;
 }