jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Import flows nodes id fixed

Browse source
This commit is contained in:
Lucas Oliveira 2023-05-29 19:20:47 -03:00
commit cc21fb66a7
3 changed files with 38 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/frontend/src/contexts/tabsContext.tsx
View file

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

1
src/frontend/src/pages/FlowPage/index.tsx
View file

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

57
src/frontend/src/utils.ts
View file

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