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

merge fix

Browse source
This commit is contained in:
cristhianzl 2024-01-17 16:57:58 -03:00
commit e48c5d06c0
12 changed files with 105 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/frontend/playwright-report/index.html
View file

@ -1,18 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<ul> <ul>
<li> <li>
<a href="./e2e/index.html">e2e report</a> <a href="./e2e/index.html">e2e report</a>
</li> </li>
<li> <li>
<a href="./onlyFront/index.html">frontEnd Only report</a> <a href="./onlyFront/index.html">frontEnd Only report</a>
</li> </li>
</ul> </ul>
</body> </body>
</html> </html>

2
src/frontend/src/App.tsx
View file

@ -149,7 +149,7 @@ export default function App() {
.catch(() => { .catch(() => {
setFetchError(true); setFetchError(true);
}); });
}, 5000); }, 20000);
// Clean up the timer on component unmount // Clean up the timer on component unmount
return () => { return () => {

25
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -1,6 +1,6 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import React, { ReactNode, useEffect, useRef, useState } from "react"; import React, { ReactNode, useEffect, useRef, useState } from "react";
import { Handle, Position } from "reactflow"; import { Handle, Position, useUpdateNodeInternals } from "reactflow";
import ShadTooltip from "../../../../components/ShadTooltipComponent"; import ShadTooltip from "../../../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent";
import DictComponent from "../../../../components/dictComponent"; import DictComponent from "../../../../components/dictComponent";
@ -71,7 +71,7 @@ export default function ParameterComponent({
const groupedEdge = useRef(null); const groupedEdge = useRef(null);
const setFilterEdge = useTypesStore((state) => state.setFilterEdge); const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
let disabled = let disabled =
edges.some( edges.some(
@ -124,27 +124,32 @@ export default function ParameterComponent({
renderTooltips(); renderTooltips();
}; };
const updateNodeInternals = useUpdateNodeInternals();
const handleNodeClass = (newNodeClass: APIClassType, code?: string): void => { const handleNodeClass = (newNodeClass: APIClassType, code?: string): void => {
if (!data.node) return; if (!data.node) return;
if (data.node!.template[name].value !== code) { if (data.node!.template[name].value !== code) {
takeSnapshot(); takeSnapshot();
} }
setNode(data.id, (oldNode) => { setNode(data.id, (oldNode) => {
let newNode = cloneDeep(oldNode); let newNode = cloneDeep(oldNode);
newNode.data = { newNode.data = {
...newNode.data, ...newNode.data,
node: newNodeClass, node: newNodeClass,
description: newNodeClass.description ?? data.node!.description, description: newNodeClass.description ?? data.node!.description,
display_name: newNodeClass.display_name ?? data.node!.display_name, display_name: newNodeClass.display_name ?? data.node!.display_name,
}; };
newNode.data.node.template[name].value = code; newNode.data.node.template[name].value = code;
return newNode; return newNode;
}); });
updateNodeInternals(data.id);
renderTooltips(); renderTooltips();
}; };
@ -268,6 +273,9 @@ export default function ParameterComponent({
<Handle <Handle
type={left ? "target" : "source"} type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right} position={left ? Position.Left : Position.Right}
key={proxy
? scapedJSONStringfy({ ...id, proxy })
: scapedJSONStringfy(id)}
id={ id={
proxy proxy
? scapedJSONStringfy({ ...id, proxy }) ? scapedJSONStringfy({ ...id, proxy })
@ -340,6 +348,9 @@ export default function ParameterComponent({
<Handle <Handle
type={left ? "target" : "source"} type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right} position={left ? Position.Left : Position.Right}
key={proxy
? scapedJSONStringfy({ ...id, proxy })
: scapedJSONStringfy(id)}
id={ id={
proxy proxy
? scapedJSONStringfy({ ...id, proxy }) ? scapedJSONStringfy({ ...id, proxy })

2
src/frontend/src/components/dictComponent/index.tsx
View file

@ -6,7 +6,7 @@ import { classNames } from "../../utils/utils";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
export default function DictComponent({ export default function DictComponent({
value, value = [],
onChange, onChange,
disabled, disabled,
editNode = false, editNode = false,

2
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -23,6 +23,8 @@ export default function InputListComponent({
value = [value]; value = [value];
} }
if (!value.length) value = [""];
return ( return (
<div <div
className={classNames( className={classNames(

47
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -50,7 +50,7 @@ export default function Page({
); );
const types = useTypesStore((state) => state.types); const types = useTypesStore((state) => state.types);
const templates = useTypesStore((state) => state.templates); const templates = useTypesStore((state) => state.templates);
const setFilterEdge = useTypesStore((state) => state.setFilterEdge); const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const reactFlowWrapper = useRef<HTMLDivElement>(null); const reactFlowWrapper = useRef<HTMLDivElement>(null);
const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance); const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
@ -64,6 +64,7 @@ export default function Page({
const onEdgesChange = useFlowStore((state) => state.onEdgesChange); const onEdgesChange = useFlowStore((state) => state.onEdgesChange);
const setNodes = useFlowStore((state) => state.setNodes); const setNodes = useFlowStore((state) => state.setNodes);
const setEdges = useFlowStore((state) => state.setEdges); const setEdges = useFlowStore((state) => state.setEdges);
const cleanFlow = useFlowStore((state) => state.cleanFlow);
const deleteNode = useFlowStore((state) => state.deleteNode); const deleteNode = useFlowStore((state) => state.deleteNode);
const deleteEdge = useFlowStore((state) => state.deleteEdge); const deleteEdge = useFlowStore((state) => state.deleteEdge);
const undo = useFlowsManagerStore((state) => state.undo); const undo = useFlowsManagerStore((state) => state.undo);
@ -77,6 +78,7 @@ export default function Page({
const setLastCopiedSelection = useFlowStore( const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection (state) => state.setLastCopiedSelection
); );
const onConnect = useFlowStore((state) => state.onConnect);
const position = useRef({ x: 0, y: 0 }); const position = useRef({ x: 0, y: 0 });
const [lastSelection, setLastSelection] = const [lastSelection, setLastSelection] =
@ -170,12 +172,18 @@ export default function Page({
} }
}, [currentFlowId, reactFlowInstance]); }, [currentFlowId, reactFlowInstance]);
useEffect(() => {
return () => {
cleanFlow();
}
}, [])
const onConnectMod = useCallback( const onConnectMod = useCallback(
(params: Connection) => { (params: Connection) => {
takeSnapshot(); takeSnapshot();
onConnect(params); onConnect(params);
}, },
[setEdges, takeSnapshot, addEdge] [takeSnapshot, onConnect]
); );
const onNodeDragStart: NodeDragHandler = useCallback(() => { const onNodeDragStart: NodeDragHandler = useCallback(() => {
@ -208,39 +216,6 @@ export default function Page({
} }
}, []); }, []);
const onConnect = useCallback(
(connection: Connection) => {
const newEdges = addEdge(
{
...connection,
data: {
targetHandle: scapeJSONParse(connection.targetHandle!),
sourceHandle: scapeJSONParse(connection.sourceHandle!),
},
style: { stroke: "#555" },
className:
((scapeJSONParse(connection.targetHandle!) as targetHandleType)
.type === "Text"
? "stroke-foreground "
: "stroke-foreground ") + " stroke-connection",
animated:
(scapeJSONParse(connection.targetHandle!) as targetHandleType)
.type === "Text",
},
edges
);
setEdges(newEdges);
useFlowsManagerStore
.getState()
.autoSaveCurrentFlow(
nodes,
newEdges,
reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
);
},
[nodes, edges, setEdges, reactFlowInstance, addEdge]
);
const onDrop = useCallback( const onDrop = useCallback(
(event: React.DragEvent) => { (event: React.DragEvent) => {
event.preventDefault(); event.preventDefault();
@ -357,7 +332,7 @@ export default function Page({
<div className="h-full w-full"> <div className="h-full w-full">
<div className="h-full w-full" ref={reactFlowWrapper}> <div className="h-full w-full" ref={reactFlowWrapper}>
{Object.keys(templates).length > 0 && {Object.keys(templates).length > 0 &&
Object.keys(types).length > 0 ? ( Object.keys(types).length > 0 ? (
<div id="react-flow-id" className="h-full w-full"> <div id="react-flow-id" className="h-full w-full">
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}

4
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -29,8 +29,8 @@ import SidebarDraggableComponent from "./sideBarDraggableComponent";
export default function ExtraSidebar(): JSX.Element { export default function ExtraSidebar(): JSX.Element {
const data = useTypesStore((state) => state.data); const data = useTypesStore((state) => state.data);
const templates = useTypesStore((state) => state.templates); const templates = useTypesStore((state) => state.templates);
const getFilterEdge = useTypesStore((state) => state.getFilterEdge); const getFilterEdge = useFlowStore((state) => state.getFilterEdge);
const setFilterEdge = useTypesStore((state) => state.setFilterEdge); const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow); const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const hasStore = useStoreStore((state) => state.hasStore); const hasStore = useStoreStore((state) => state.hasStore);

47
src/frontend/src/stores/flowStore.ts
View file

@ -250,6 +250,53 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
setLastCopiedSelection: (newSelection) => { setLastCopiedSelection: (newSelection) => {
set({ lastCopiedSelection: newSelection }); set({ lastCopiedSelection: newSelection });
}, },
cleanFlow: () => {
set({
nodes: [],
edges: [],
flowState: undefined,
sseData: {},
isBuilt: false,
getFilterEdge: [],
});
},
setFilterEdge: (newState) => {
set({ getFilterEdge: newState });
},
getFilterEdge: [],
onConnect: (connection) => {
let newEdges: Edge[] = []
get().setEdges((oldEdges) => {
newEdges = addEdge(
{
...connection,
data: {
targetHandle: scapeJSONParse(connection.targetHandle!),
sourceHandle: scapeJSONParse(connection.sourceHandle!),
},
style: { stroke: "#555" },
className:
((scapeJSONParse(connection.targetHandle!) as targetHandleType)
.type === "Text"
? "stroke-foreground "
: "stroke-foreground ") + " stroke-connection",
animated:
(scapeJSONParse(connection.targetHandle!) as targetHandleType)
.type === "Text",
},
oldEdges
);
return newEdges;
})
useFlowsManagerStore
.getState()
.autoSaveCurrentFlow(
get().nodes,
newEdges,
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
);
},
})); }));
export default useFlowStore; export default useFlowStore;

5
src/frontend/src/stores/typesStore.ts
View file

@ -9,7 +9,6 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
types: {}, types: {},
templates: {}, templates: {},
data: {}, data: {},
getFilterEdge: [],
getTypes: () => { getTypes: () => {
return new Promise<void>(async (resolve, reject) => { return new Promise<void>(async (resolve, reject) => {
getAll() getAll()
@ -44,7 +43,5 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
let newChange = typeof change === "function" ? change(get().data) : change; let newChange = typeof change === "function" ? change(get().data) : change;
set({ data: newChange }); set({ data: newChange });
}, },
setFilterEdge: (newState) => {
set({ getFilterEdge: newState });
},
})); }));

5
src/frontend/src/types/zustand/flow/index.ts
View file

@ -1,4 +1,5 @@
import { import {
Connection,
Edge, Edge,
Node, Node,
OnEdgesChange, OnEdgesChange,
@ -49,4 +50,8 @@ export type FlowStoreType = {
) => void; ) => void;
isBuilt: boolean; isBuilt: boolean;
setIsBuilt: (isBuilt: boolean) => void; setIsBuilt: (isBuilt: boolean) => void;
cleanFlow: () => void;
setFilterEdge: (newState) => void;
getFilterEdge: any[];
onConnect: (connection: Connection) => void;
}; };

2
src/frontend/src/types/zustand/types/index.ts
View file

@ -8,6 +8,4 @@ export type TypesStoreType = {
data: APIDataType; data: APIDataType;
setData: (newState: {}) => void; setData: (newState: {}) => void;
getTypes: () => Promise<void>; getTypes: () => Promise<void>;
setFilterEdge: (newState) => void;
getFilterEdge: any[];
}; };

4
src/frontend/src/utils/reactflowUtils.ts
View file

@ -474,6 +474,8 @@ export function convertArrayToObj(arrayOfObjects) {
export function hasDuplicateKeys(array) { export function hasDuplicateKeys(array) {
const keys = {}; const keys = {};
// Transforms an empty object into an object array without opening the 'editNode' modal to prevent the flow build from breaking.
if (!Array.isArray(array)) array = [{"": ""}];
for (const obj of array) { for (const obj of array) {
for (const key in obj) { for (const key in obj) {
if (keys[key]) { if (keys[key]) {
@ -486,6 +488,8 @@ export function hasDuplicateKeys(array) {
} }
export function hasEmptyKey(objArray) { export function hasEmptyKey(objArray) {
// Transforms an empty object into an array without opening the 'editNode' modal to prevent the flow build from breaking.
if (!Array.isArray(objArray)) objArray = [];
for (const obj of objArray) { for (const obj of objArray) {
for (const key in obj) { for (const key in obj) {
if (obj.hasOwnProperty(key) && key === "") { if (obj.hasOwnProperty(key) && key === "") {