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

Removed manual saving, only autosave now

Browse source
This commit is contained in:
Lucas Oliveira 2024-01-06 15:28:05 -03:00
commit c3bfcca6e2
6 changed files with 44 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,7 +16,6 @@ export default function Chat({ flow }: ChatType): JSX.Element {
const [canOpen, setCanOpen] = useState(false);
const isBuilt = useFlowStore((state) => state.isBuilt);
const setIsBuilt = useFlowStore((state) => state.setIsBuilt);
const isPending = useFlowStore((state) => state.isPending);
const currentFlowState = useFlowsManagerStore((state) => state.currentFlowState);
useEffect(() => {
@ -55,7 +54,6 @@ export default function Chat({ flow }: ChatType): JSX.Element {
_.cloneDeep(node.data.node?.template)
);
if (
isPending &&
JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)
) {
setIsBuilt(false);

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

@ -13,6 +13,7 @@ import ReactFlow, {
Controls,
Edge,
NodeDragHandler,
OnMove,
OnSelectionChangeParams,
SelectionDragHandler,
addEdge,
@ -27,12 +28,13 @@ import useFlowStore from "../../../../stores/flowStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useTypesStore } from "../../../../stores/typesStore";
import { APIClassType } from "../../../../types/api";
import { FlowType, NodeType } from "../../../../types/flow";
import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
import {
generateFlow,
generateNodeFromFlow,
getNodeId,
isValidConnection,
scapeJSONParse,
validateSelection,
} from "../../../../utils/reactflowUtils";
import { cn, getRandomName, isWrappedWithClass } from "../../../../utils/utils";
@ -74,16 +76,13 @@ export default function Page({
const edges = useFlowStore((state) => state.edges);
const onNodesChange = useFlowStore((state) => state.onNodesChange);
const onEdgesChange = useFlowStore((state) => state.onEdgesChange);
const onConnect = useFlowStore((state) => state.onConnect);
const setNodes = useFlowStore((state) => state.setNodes);
const setEdges = useFlowStore((state) => state.setEdges);
const deleteNode = useFlowStore((state) => state.deleteNode);
const deleteEdge = useFlowStore((state) => state.deleteEdge);
const setPending = useFlowStore((state) => state.setPending);
const undo = useFlowsManagerStore((state) => state.undo);
const redo = useFlowsManagerStore((state) => state.redo);
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
const isPending = useFlowStore((state) => state.isPending);
const paste = useFlowStore((state) => state.paste);
const position = useRef({ x: 0, y: 0 });
@ -216,10 +215,15 @@ export default function Page({
}, [takeSnapshot]);
const onNodeDragStop: NodeDragHandler = useCallback(() => {
// 👇 make dragging a node undoable
autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!);
// 👉 you can place your event handlers here
}, [takeSnapshot]);
}, [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
const onMoveEnd: OnMove = useCallback(() => {
// 👇 make moving the canvas undoable
autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!);
}
, [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
// 👇 make dragging a selection undoable
@ -235,6 +239,39 @@ 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();
@ -345,9 +382,6 @@ export default function Page({
setFilterEdge([]);
}, []);
const onMove = useCallback(() => {
if (!isPending) setPending(true);
}, [setPending]);
return (
<div className="flex h-full overflow-hidden">
@ -370,7 +404,6 @@ export default function Page({
</div>
<ReactFlow
nodes={nodes}
onMove={onMove}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
@ -388,6 +421,7 @@ export default function Page({
onSelectionStart={onSelectionStart}
connectionLineComponent={ConnectionLineComponent}
onDragOver={onDragOver}
onMoveEnd={onMoveEnd}
onDrop={onDrop}
onSelectionChange={onSelectionChange}
deleteKeyCode={[]}

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

@ -42,7 +42,6 @@ export default function ExtraSidebar(): JSX.Element {
const validApiKey = useStoreStore((state) => state.validApiKey);
const isBuilt = useFlowStore((state) => state.isBuilt);
const isPending = useFlowStore((state) => state.isPending);
const setErrorData = useAlertStore((state) => state.setErrorData);
const [dataFilter, setFilterData] = useState(data);
const [search, setSearch] = useState("");
@ -302,39 +301,6 @@ export default function ExtraSidebar(): JSX.Element {
)}
</div>
</ShadTooltip>
<div className="side-bar-button" data-testid="save-button">
{currentFlow && currentFlow.data && (
<ShadTooltip content="Save" side="top">
<button
className={
"extra-side-bar-buttons " +
(isPending ? "" : "button-disable")
}
onClick={(event) => {
saveFlow(
{
...currentFlow,
data: {
nodes,
edges,
viewport: reactFlowInstance?.getViewport()!,
},
},
true
);
}}
>
<IconComponent
name="Save"
className={
"side-bar-button-size" +
(isPending ? " " : " extra-side-bar-save-disable")
}
/>
</button>
</ShadTooltip>
)}
</div>
</div>
<Separator />
<div className="side-bar-search-div-placement">

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

@ -42,13 +42,11 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
set({
nodes: applyNodeChanges(changes, get().nodes),
});
if (!get().isPending) set({ isPending: true });
},
onEdgesChange: (changes: EdgeChange[]) => {
set({
edges: applyEdgeChanges(changes, get().edges),
});
if (!get().isPending) set({ isPending: true });
},
setNodes: (change) => {
let newChange = typeof change === "function" ? change(get().nodes) : change;
@ -96,29 +94,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
getNode: (id: string) => {
return get().nodes.find((node) => node.id === id);
},
onConnect: (connection: Connection) => {
set({
edges: 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",
},
get().edges
),
});
},
deleteNode: (nodeId) => {
get().setNodes(
get().nodes.filter((node) =>
@ -229,10 +204,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
});
set({ edges: newEdges });
},
isPending: false,
setPending: (pending: boolean) => {
set({ isPending: pending });
},
}));
export default useFlowStore;

1
src/frontend/src/stores/flowsManagerStore.ts
View file

@ -130,7 +130,6 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
);
//update tabs state
useFlowStore.setState({ isPending: false });
resolve();
}
})

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

@ -18,7 +18,6 @@ export type FlowStoreType = {
setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
getNode: (id: string) => Node | undefined;
onConnect: OnConnect;
deleteNode: (nodeId: string | Array<string>) => void;
deleteEdge: (edgeId: string | Array<string>) => void;
paste: (
@ -27,6 +26,4 @@ export type FlowStoreType = {
) => void;
isBuilt: boolean;
setIsBuilt: (isBuilt: boolean) => void;
isPending: boolean;
setPending: (pending: boolean) => void;
};