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

73
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(
newGroupNode,
removedEdges
);
setNodes([...clonedNodes.filter(
(oldNodes) => (oldNodes) =>
!clonedSelection?.nodes.some( !clonedSelection?.nodes.some(
(selectionNode) => (selectionNode) => selectionNode.id === oldNodes.id
selectionNode.id === oldNodes.id )
)), newGroupNode]) ),
setEdges([...clonedEdges.filter( newGroupNode,
]);
setEdges([
...clonedEdges.filter(
(oldEdge) => (oldEdge) =>
!clonedSelection!.nodes.some( !clonedSelection!.nodes.some(
(selectionNode) => (selectionNode) =>
selectionNode.id === oldEdge.target || selectionNode.id === oldEdge.target ||
selectionNode.id === oldEdge.source selectionNode.id === oldEdge.source
)), ...newEdges]) )
),
...newEdges,
]);
} else { } else {
setErrorData({ setErrorData({
title: INVALID_SELECTION_ERROR_ALERT, title: INVALID_SELECTION_ERROR_ALERT,
@ -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([
...clonedNodes.filter(
(oldNodes) => (oldNodes) =>
!clonedSelection?.nodes.some( !clonedSelection?.nodes.some(
(selectionNode) => (selectionNode) =>
selectionNode.id === oldNodes.id selectionNode.id === oldNodes.id
)), newGroupNode]) )
setEdges([...clonedEdges.filter( ),
newGroupNode,
]);
setEdges([
...clonedEdges.filter(
(oldEdge) => (oldEdge) =>
!clonedSelection!.nodes.some( !clonedSelection!.nodes.some(
(selectionNode) => (selectionNode) =>
selectionNode.id === oldEdge.target || selectionNode.id === oldEdge.target ||
selectionNode.id === oldEdge.source selectionNode.id === oldEdge.source
)), ...newEdges]) )
),
...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 = {

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

@ -1280,7 +1280,7 @@ export function updateGroupRecursion(groupNode:NodeType,edges:Edge[]){
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);

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

@ -708,5 +708,5 @@ 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));
} }