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

fix(tabsContext.tsx): import Edge from reactflow to fix compilation error

Browse source 
fix(tabsContext.tsx): import sourceHandleType and targetHandleType from flow types to fix type errors
refactor(tabsContext.tsx): update usage of Edge type in forEach loop to fix type error
refactor(tabsContext.tsx): update usage of sourceHandle and targetHandle to use JSON.parse and JSON.stringify to fix type errors
refactor(tabsContext.tsx): update className and animated properties of edges to use targetHandleObject.type instead of splitting targetHandle string
refactor(tabsContext.tsx): update updateEdges function to use Edge type and targetHandleObject to fix type errors
refactor(tabsContext.tsx): update sourceHandle in forEach loop to use JSON.stringify instead of splitting and joining the string
refactor(tabsContext.tsx): update sourceHandle in forEach loop to use JSON.stringify instead of splitting and joining the string
This commit is contained in:
anovazzi1 2023-08-04 14:08:51 -03:00
commit 20b28a09a0
1 changed files with 32 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import {
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import { addEdge } from "reactflow"; import { Edge, addEdge } from "reactflow";
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from "short-unique-id";
import { import {
deleteFlowFromDatabase, deleteFlowFromDatabase,
@ -18,7 +18,12 @@ import {
uploadFlowsToDatabase, uploadFlowsToDatabase,
} from "../controllers/API"; } from "../controllers/API";
import { APIClassType, APITemplateType } from "../types/api"; import { APIClassType, APITemplateType } from "../types/api";
import { FlowType, NodeType } from "../types/flow"; import {
FlowType,
NodeType,
sourceHandleType,
targetHandleType,
} from "../types/flow";
import { TabsContextType, TabsState } from "../types/tabs"; import { TabsContextType, TabsState } from "../types/tabs";
import { import {
addVersionToDuplicates, addVersionToDuplicates,
@ -398,19 +403,19 @@ export function TabsProvider({ children }: { children: ReactNode }) {
}); });
reactFlowInstance.setNodes(nodes); reactFlowInstance.setNodes(nodes);
selectionInstance.edges.forEach((e) => { selectionInstance.edges.forEach((e: Edge) => {
let source = idsMap[e.source]; let source = idsMap[e.source];
let target = idsMap[e.target]; let target = idsMap[e.target];
let sourceHandleSplitted = e.sourceHandle.split("|"); const sourceHandleObject: sourceHandleType = JSON.parse(e.sourceHandle);
let sourceHandle = let sourceHandle = JSON.stringify({
sourceHandleSplitted[0] + ...sourceHandleObject,
"|" + id: e.source,
source + });
"|" + const targetHandleObject: targetHandleType = JSON.parse(e.targetHandle);
sourceHandleSplitted.slice(2).join("|"); let targetHandle = JSON.stringify({
let targetHandleSplitted = e.targetHandle.split("|"); ...targetHandleObject,
let targetHandle = id: e.target,
targetHandleSplitted.slice(0, -1).join("|") + "|" + target; });
let id = let id =
"reactflow__edge-" + "reactflow__edge-" +
source + source +
@ -427,10 +432,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
id, id,
style: { stroke: "#555" }, style: { stroke: "#555" },
className: className:
targetHandle.split("|")[0] === "Text" targetHandleObject.type === "Text"
? "stroke-gray-800 " ? "stroke-gray-800 "
: "stroke-gray-900 ", : "stroke-gray-900 ",
animated: targetHandle.split("|")[0] === "Text", animated: targetHandleObject.type === "Text",
selected: false, selected: false,
}, },
edges.map((e) => ({ ...e, selected: false })) edges.map((e) => ({ ...e, selected: false }))
@ -494,13 +499,16 @@ export function TabsProvider({ children }: { children: ReactNode }) {
return { data, description }; return { data, description };
}; };
const updateEdges = (edges) => { const updateEdges = (edges: Edge[]) => {
edges.forEach((edge) => { edges.forEach((edge) => {
const targetHandleObject: targetHandleType = JSON.parse(
edge.targetHandle
);
edge.className = edge.className =
(edge.targetHandle.split("|")[0] === "Text" (targetHandleObject.type === "Text"
? "stroke-gray-800 " ? "stroke-gray-800 "
: "stroke-gray-900 ") + " stroke-connection"; : "stroke-gray-900 ") + " stroke-connection";
edge.animated = edge.targetHandle.split("|")[0] === "Text"; edge.animated = targetHandleObject.type === "Text";
}); });
}; };
@ -514,12 +522,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
if (Object.keys(template["template"]).length > 0) { if (Object.keys(template["template"]).length > 0) {
node.data.node.base_classes = template["base_classes"]; node.data.node.base_classes = template["base_classes"];
edges.forEach((edge) => { edges.forEach((edge) => {
let sourceHandleObject: sourceHandleType = JSON.parse(
edge.sourceHandle
);
if (edge.source === node.id) { if (edge.source === node.id) {
edge.sourceHandle = edge.sourceHandle let newSourceHandle = sourceHandleObject;
.split("|") newSourceHandle.baseClasses.concat(template["base_classes"]);
.slice(0, 2) edge.sourceHandle = JSON.stringify(newSourceHandle);
.concat(template["base_classes"])
.join("|");
} }
}); });
node.data.node.description = template["description"]; node.data.node.description = template["description"];