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

Refactor code for better readability and maintainability

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-03-20 20:48:47 -03:00
commit fe7fc3927e
4 changed files with 71 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import _, { cloneDeep, set } from "lodash"; import _, { cloneDeep } from "lodash";
import { MouseEvent, useCallback, useEffect, useRef, useState } from "react"; import { MouseEvent, useCallback, useEffect, useRef, useState } from "react";
import ReactFlow, { import ReactFlow, {
Background, Background,
@ -105,40 +105,42 @@ export default function Page({
) { ) {
event.preventDefault(); event.preventDefault();
takeSnapshot(); takeSnapshot();
if ( if (validateSelection(lastSelection!, edges).length === 0) {
validateSelection(lastSelection!, edges).length === 0 const clonedNodes = cloneDeep(nodes);
) { const clonedEdges = cloneDeep(edges);
const clonedNodes = cloneDeep(nodes) const clonedSelection = cloneDeep(lastSelection);
const clonedEdges = cloneDeep(edges) updateIds(
const clonedSelection = cloneDeep(lastSelection) { nodes: clonedNodes, edges: clonedEdges },
updateIds({ nodes: clonedNodes, edges: clonedEdges }, clonedSelection!) clonedSelection!
);
const { newFlow, removedEdges } = generateFlow( const { newFlow, removedEdges } = generateFlow(
clonedSelection!, clonedSelection!,
clonedNodes, clonedNodes,
clonedEdges, clonedEdges,
getRandomName() getRandomName()
); );
const newGroupNode = generateNodeFromFlow( const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
newFlow, const newEdges = reconnectEdges(newGroupNode, removedEdges);
getNodeId setNodes([
); ...clonedNodes.filter(
const newEdges = reconnectEdges( (oldNodes) =>
!clonedSelection?.nodes.some(
(selectionNode) => selectionNode.id === oldNodes.id
)
),
newGroupNode, newGroupNode,
removedEdges ]);
); setEdges([
setNodes([...clonedNodes.filter( ...clonedEdges.filter(
(oldNodes) => (oldEdge) =>
!clonedSelection?.nodes.some( !clonedSelection!.nodes.some(
(selectionNode) => (selectionNode) =>
selectionNode.id === oldNodes.id selectionNode.id === oldEdge.target ||
)), newGroupNode]) selectionNode.id === oldEdge.source
setEdges([...clonedEdges.filter( )
(oldEdge) => ),
!clonedSelection!.nodes.some( ...newEdges,
(selectionNode) => ]);
selectionNode.id === oldEdge.target ||
selectionNode.id === oldEdge.source
)), ...newEdges])
} else { } else {
setErrorData({ setErrorData({
title: INVALID_SELECTION_ERROR_ALERT, title: INVALID_SELECTION_ERROR_ALERT,
@ -437,7 +439,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}
@ -486,10 +488,13 @@ export default function Page({
if ( if (
validateSelection(lastSelection!, edges).length === 0 validateSelection(lastSelection!, edges).length === 0
) { ) {
const clonedNodes = cloneDeep(nodes) const clonedNodes = cloneDeep(nodes);
const clonedEdges = cloneDeep(edges) const clonedEdges = cloneDeep(edges);
const clonedSelection = cloneDeep(lastSelection) const clonedSelection = cloneDeep(lastSelection);
updateIds({ nodes: clonedNodes, edges: clonedEdges }, clonedSelection!) updateIds(
{ nodes: clonedNodes, edges: clonedEdges },
clonedSelection!
);
const { newFlow, removedEdges } = generateFlow( const { newFlow, removedEdges } = generateFlow(
clonedSelection!, clonedSelection!,
clonedNodes, clonedNodes,
@ -504,19 +509,27 @@ export default function Page({
newGroupNode, newGroupNode,
removedEdges removedEdges
); );
setNodes([...clonedNodes.filter( setNodes([
(oldNodes) => ...clonedNodes.filter(
!clonedSelection?.nodes.some( (oldNodes) =>
(selectionNode) => !clonedSelection?.nodes.some(
selectionNode.id === oldNodes.id (selectionNode) =>
)), newGroupNode]) selectionNode.id === oldNodes.id
setEdges([...clonedEdges.filter( )
(oldEdge) => ),
!clonedSelection!.nodes.some( newGroupNode,
(selectionNode) => ]);
selectionNode.id === oldEdge.target || setEdges([
selectionNode.id === oldEdge.source ...clonedEdges.filter(
)), ...newEdges]) (oldEdge) =>
!clonedSelection!.nodes.some(
(selectionNode) =>
selectionNode.id === oldEdge.target ||
selectionNode.id === oldEdge.source
)
),
...newEdges,
]);
} else { } else {
setErrorData({ setErrorData({
title: INVALID_SELECTION_ERROR_ALERT, title: INVALID_SELECTION_ERROR_ALERT,

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

@ -37,10 +37,7 @@ import {
getNodeId, getNodeId,
scapeJSONParse, scapeJSONParse,
scapedJSONStringfy, scapedJSONStringfy,
updateEdgesIds,
updateGroupRecursion, updateGroupRecursion,
updateIds,
updateProxyIdsOnTemplate,
validateNodes, validateNodes,
} from "../utils/reactflowUtils"; } from "../utils/reactflowUtils";
import { getInputsAndOutputs } from "../utils/storeUtils"; import { getInputsAndOutputs } from "../utils/storeUtils";
@ -226,10 +223,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
); );
}, },
paste: (selection, position) => { paste: (selection, position) => {
function updateGroup() {}
function updateGroup(){
}
if ( if (
selection.nodes.some((node) => node.data.type === "ChatInput") && selection.nodes.some((node) => node.data.type === "ChatInput") &&
@ -267,7 +261,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
let newId = getNodeId(node.data.type); let newId = getNodeId(node.data.type);
idsMap[node.id] = newId; idsMap[node.id] = newId;
updateGroupRecursion(node,selection.edges) updateGroupRecursion(node, selection.edges);
// Create a new node object // Create a new node object
const newNode: NodeType = { const newNode: NodeType = {

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

@ -1274,17 +1274,17 @@ export function isOutputType(type: string): boolean {
return OUTPUT_TYPES.has(type); return OUTPUT_TYPES.has(type);
} }
export function updateGroupRecursion(groupNode:NodeType,edges:Edge[]){ export function updateGroupRecursion(groupNode: NodeType, edges: Edge[]) {
if(groupNode.data.node?.flow){ if (groupNode.data.node?.flow) {
groupNode.data.node.flow.data!.nodes.forEach((node)=>{ groupNode.data.node.flow.data!.nodes.forEach((node) => {
if(node.data.node?.flow){ if (node.data.node?.flow) {
updateGroupRecursion(node,node.data.node.flow.data!.edges); updateGroupRecursion(node, node.data.node.flow.data!.edges);
} }
}) });
let newFlow = groupNode.data.node!.flow; let newFlow = groupNode.data.node!.flow;
const idsMap = updateIds(newFlow.data!); const idsMap = updateIds(newFlow.data!);
updateProxyIdsOnTemplate(groupNode.data.node!.template, idsMap); updateProxyIdsOnTemplate(groupNode.data.node!.template, idsMap);
let flowEdges = edges; let flowEdges = edges;
updateEdgesIds(flowEdges, idsMap); updateEdgesIds(flowEdges, idsMap);
} }
} }

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

@ -707,6 +707,6 @@ export function sortFields(a, b, fieldOrder) {
} }
export function freezeObject(obj: any) { export function freezeObject(obj: any) {
if(!obj) return obj; if (!obj) return obj;
return(JSON.parse(JSON.stringify(obj))); return JSON.parse(JSON.stringify(obj));
} }