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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</head>
<body>
<ul>
<li>
<a href="./e2e/index.html">e2e report</a>
</li>
<li>
<a href="./onlyFront/index.html">frontEnd Only report</a>
</li>
<li>
<a href="./e2e/index.html">e2e report</a>
</li>
<li>
<a href="./onlyFront/index.html">frontEnd Only report</a>
</li>
</ul>
</body>
</html>
</body>
</html>

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

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

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

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

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

@ -23,6 +23,8 @@ export default function InputListComponent({
value = [value];
}
if (!value.length) value = [""];
return (
<div
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 templates = useTypesStore((state) => state.templates);
const setFilterEdge = useTypesStore((state) => state.setFilterEdge);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const reactFlowWrapper = useRef<HTMLDivElement>(null);
const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
@ -64,6 +64,7 @@ export default function Page({
const onEdgesChange = useFlowStore((state) => state.onEdgesChange);
const setNodes = useFlowStore((state) => state.setNodes);
const setEdges = useFlowStore((state) => state.setEdges);
const cleanFlow = useFlowStore((state) => state.cleanFlow);
const deleteNode = useFlowStore((state) => state.deleteNode);
const deleteEdge = useFlowStore((state) => state.deleteEdge);
const undo = useFlowsManagerStore((state) => state.undo);
@ -77,6 +78,7 @@ export default function Page({
const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection
);
const onConnect = useFlowStore((state) => state.onConnect);
const position = useRef({ x: 0, y: 0 });
const [lastSelection, setLastSelection] =
@ -170,12 +172,18 @@ export default function Page({
}
}, [currentFlowId, reactFlowInstance]);
useEffect(() => {
return () => {
cleanFlow();
}
}, [])
const onConnectMod = useCallback(
(params: Connection) => {
takeSnapshot();
onConnect(params);
},
[setEdges, takeSnapshot, addEdge]
[takeSnapshot, onConnect]
);
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(
(event: React.DragEvent) => {
event.preventDefault();
@ -357,7 +332,7 @@ export default function Page({
<div className="h-full w-full">
<div className="h-full w-full" ref={reactFlowWrapper}>
{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">
<ReactFlow
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 {
const data = useTypesStore((state) => state.data);
const templates = useTypesStore((state) => state.templates);
const getFilterEdge = useTypesStore((state) => state.getFilterEdge);
const setFilterEdge = useTypesStore((state) => state.setFilterEdge);
const getFilterEdge = useFlowStore((state) => state.getFilterEdge);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
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) => {
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;

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

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

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

@ -1,4 +1,5 @@
import {
Connection,
Edge,
Node,
OnEdgesChange,
@ -49,4 +50,8 @@ export type FlowStoreType = {
) => void;
isBuilt: boolean;
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;
setData: (newState: {}) => 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) {
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 key in obj) {
if (keys[key]) {
@ -486,6 +488,8 @@ export function hasDuplicateKeys(array) {
}
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 key in obj) {
if (obj.hasOwnProperty(key) && key === "") {