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

Fixed flowsContext to work using useFlow zustand, removed unused functions

Browse source
This commit is contained in:
Lucas Oliveira 2024-01-05 11:31:40 -03:00
commit 3d720f7f79
5 changed files with 37 additions and 262 deletions
Download patch file Download diff file Expand all files Collapse all files

256
src/frontend/src/contexts/flowsContext.tsx
View file

@ -46,9 +46,11 @@ import {
checkOldEdgesHandles,
cleanEdges,
createFlowComponent,
processFlowEdges,
removeFileNameFromComponents,
scapeJSONParse,
scapedJSONStringfy,
updateEdges,
updateEdgesHandleIds,
updateIds,
} from "../utils/reactflowUtils";
@ -60,6 +62,7 @@ import {
import { alertContext } from "./alertContext";
import { AuthContext } from "./authContext";
import { typesContext } from "./typesContext";
import useFlow from "../stores/flowManagerStore";
const uid = new ShortUniqueId({ length: 5 });
@ -98,98 +101,10 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
const [tabId, setTabId] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [flows, setFlows] = useState<Array<FlowType>>([]);
const { reactFlowInstance, setData } = useContext(typesContext);
const [lastCopiedSelection, setLastCopiedSelection] = useState<{
nodes: any;
edges: any;
} | null>(null);
const { setData } = useContext(typesContext);
const [tabsState, setTabsState] = useState<FlowsState>({});
const [getTweak, setTweak] = useState<tweakType>([]);
const [nodes, setNodesInternal, onNodesChangeInternal] = useNodesState([]);
const [edges, setEdgesInternal, onEdgesChangeInternal] = useEdgesState([]);
const setPending = (pending: boolean) => {
setTabsState((prev: FlowsState) => {
return {
...prev,
[tabId]: {
...prev[tabId],
isPending: pending,
},
};
});
};
const isPending = tabsState[tabId]?.isPending ?? false;
const onNodesChange = useCallback(
(change: NodeChange[]) => {
onNodesChangeInternal(change);
if (!isPending) setPending(true);
},
[onNodesChangeInternal, setPending, isPending]
);
const onEdgesChange = useCallback(
(edges: EdgeChange[]) => {
onEdgesChangeInternal(edges);
if (!isPending) setPending(true);
},
[onEdgesChangeInternal, setPending, isPending]
);
const setNodes = (change: Node[] | ((oldState: Node[]) => Node[])) => {
let newChange = typeof change === "function" ? change(nodes) : change;
let newEdges = cleanEdges(newChange, edges);
saveCurrentFlow(
newChange,
newEdges,
reactFlowInstance?.getViewport() ?? { zoom: 1, x: 0, y: 0 }
);
setEdgesInternal(newEdges);
setNodesInternal(newChange);
};
const setNode = (id: string, change: Node | ((oldState: Node) => Node)) => {
let newChange =
typeof change === "function"
? change(nodes.find((node) => node.id === id)!)
: change;
setNodes((oldNodes) =>
oldNodes.map((node) => {
if (node.id === id) {
return newChange;
}
return node;
})
);
};
const getNode = (id: string) => {
return nodes.find((node) => node.id === id);
};
const setEdges = (change: Edge[] | ((oldState: Edge[]) => Edge[])) => {
let newChange = typeof change === "function" ? change(edges) : change;
saveCurrentFlow(
nodes,
newChange,
reactFlowInstance?.getViewport() ?? { zoom: 1, x: 0, y: 0 }
);
setEdgesInternal(newChange);
};
const newNodeId = useRef(uid());
function incrementNodeId() {
newNodeId.current = uid();
return newNodeId.current;
}
const {nodes, edges, paste, setPending, reactFlowInstance} = useFlow();
function refreshFlows() {
setIsLoading(true);
@ -197,7 +112,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
if (DbData) {
try {
processFlows(DbData, false);
updateStateWithDbData(DbData);
setFlows(DbData);
setIsLoading(false);
} catch (e) {}
}
@ -247,23 +162,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
});
}
function processFlowEdges(flow: FlowType) {
if (!flow.data || !flow.data.edges) return;
if (checkOldEdgesHandles(flow.data.edges)) {
const newEdges = updateEdgesHandleIds(flow.data);
flow.data.edges = newEdges;
}
//update edges colors
flow.data.edges.forEach((edge) => {
edge.className = "";
edge.style = { stroke: "#555" };
});
}
function updateStateWithDbData(tabsData: FlowType[]) {
setFlows(tabsData);
}
/**
* Downloads the current flow as a JSON file
*/
@ -311,11 +209,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
link.click();
});
}
function getNodeId(nodeType: string) {
return nodeType + "-" + incrementNodeId();
}
/**
* Creates a file input and listens to a change event to upload a JSON flow file.
* If the file type is application/json, the file is read and parsed into a JSON object.
@ -424,111 +317,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
processFlows(flows.filter((flow) => flow.id !== id));
}
}
/**
* Add a new flow to the list of flows.
* @param flow Optional flow to add.
*/
function paste(
selectionInstance: { nodes: Node[]; edges: Edge[] },
position: { x: number; y: number; paneX?: number; paneY?: number }
) {
let minimumX = Infinity;
let minimumY = Infinity;
let idsMap = {};
let newNodes: Node<NodeDataType>[] = nodes;
let newEdges = edges;
selectionInstance.nodes.forEach((node: Node) => {
if (node.position.y < minimumY) {
minimumY = node.position.y;
}
if (node.position.x < minimumX) {
minimumX = node.position.x;
}
});
const insidePosition = position.paneX
? { x: position.paneX + position.x, y: position.paneY! + position.y }
: reactFlowInstance!.screenToFlowPosition({
x: position.x,
y: position.y,
});
selectionInstance.nodes.forEach((node: NodeType) => {
// Generate a unique node ID
let newId = getNodeId(node.data.type);
idsMap[node.id] = newId;
// Create a new node object
const newNode: NodeType = {
id: newId,
type: "genericNode",
position: {
x: insidePosition.x + node.position!.x - minimumX,
y: insidePosition.y + node.position!.y - minimumY,
},
data: {
..._.cloneDeep(node.data),
id: newId,
},
};
// Add the new node to the list of nodes in state
newNodes = newNodes
.map((node) => ({ ...node, selected: false }))
.concat({ ...newNode, selected: false });
});
setNodes(newNodes);
selectionInstance.edges.forEach((edge: Edge) => {
let source = idsMap[edge.source];
let target = idsMap[edge.target];
const sourceHandleObject: sourceHandleType = scapeJSONParse(
edge.sourceHandle!
);
let sourceHandle = scapedJSONStringfy({
...sourceHandleObject,
id: source,
});
sourceHandleObject.id = source;
edge.data.sourceHandle = sourceHandleObject;
const targetHandleObject: targetHandleType = scapeJSONParse(
edge.targetHandle!
);
let targetHandle = scapedJSONStringfy({
...targetHandleObject,
id: target,
});
targetHandleObject.id = target;
edge.data.targetHandle = targetHandleObject;
let id =
"reactflow__edge-" +
source +
sourceHandle +
"-" +
target +
targetHandle;
newEdges = addEdge(
{
source,
target,
sourceHandle,
targetHandle,
id,
data: cloneDeep(edge.data),
style: { stroke: "#555" },
className:
targetHandleObject.type === "Text"
? "stroke-gray-800 "
: "stroke-gray-900 ",
animated: targetHandleObject.type === "Text",
selected: false,
},
newEdges.map((edge) => ({ ...edge, selected: false }))
);
});
setEdges(newEdges);
}
const addFlow = async (
newProject: Boolean,
@ -592,26 +380,12 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
//add animation to text type edges
updateEdges(data.edges);
// updateNodes(data.nodes, data.edges);
if (refreshIds) updateIds(data, getNodeId); // Assuming updateIds is defined elsewhere
if (refreshIds) updateIds(data); // Assuming updateIds is defined elsewhere
}
return data;
};
const updateEdges = (edges: Edge[]) => {
if (edges)
edges.forEach((edge) => {
const targetHandleObject: targetHandleType = scapeJSONParse(
edge.targetHandle!
);
edge.className =
(targetHandleObject.type === "Text"
? "stroke-gray-800 "
: "stroke-gray-900 ") + " stroke-connection";
edge.animated = targetHandleObject.type === "Text";
});
};
const createNewFlow = (
flowData: ReactFlowJsonObject | null,
flow: FlowType
@ -726,7 +500,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
}
}
const [isBuilt, setIsBuilt] = useState(false);
// Initialize state variable for the version
const [version, setVersion] = useState("");
useEffect(() => {
@ -735,21 +508,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
});
}, []);
function deleteNode(idx: string | Array<string>) {
setNodes((oldNodes) =>
oldNodes.filter((node) =>
typeof idx === "string" ? node.id !== idx : !idx.includes(node.id)
)
);
}
function deleteEdge(idx: string | Array<string>) {
setEdges((oldEdges) =>
oldEdges.filter((edge) =>
typeof idx === "string" ? edge.id !== idx : !idx.includes(edge.id)
)
);
}
return (
<FlowsContext.Provider

6
src/frontend/src/contexts/typesContext.tsx
View file

@ -16,8 +16,6 @@ import { AuthContext } from "./authContext";
//context to share types adn functions from nodes to flow
const initialValue: typesContextType = {
reactFlowInstance: null,
setReactFlowInstance: (newState: ReactFlowInstance) => {},
types: {},
setTypes: () => {},
templates: {},
@ -34,8 +32,6 @@ export const typesContext = createContext<typesContextType>(initialValue);
export function TypesProvider({ children }: { children: ReactNode }) {
const [types, setTypes] = useState({});
const [reactFlowInstance, setReactFlowInstance] =
useState<ReactFlowInstance | null>(null);
const [templates, setTemplates] = useState({});
const [data, setData] = useState({});
const [fetchError, setFetchError] = useState(false);
@ -100,8 +96,6 @@ export function TypesProvider({ children }: { children: ReactNode }) {
value={{
types,
setTypes,
reactFlowInstance,
setReactFlowInstance,
setTemplates,
templates,
data,

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

@ -290,10 +290,9 @@ export default function ExtraSidebar(): JSX.Element {
{flow && flow.data && (
<ShadTooltip content="Save" side="top">
<button
disabled={flow?.data?.nodes.length === 0}
className={
"extra-side-bar-buttons " +
(isPending && flow!.data!.nodes?.length > 0
(isPending
? ""
: "button-disable")
}
@ -305,7 +304,7 @@ export default function ExtraSidebar(): JSX.Element {
name="Save"
className={
"side-bar-button-size" +
(isPending && flow!.data!.nodes?.length > 0
(isPending
? " "
: " extra-side-bar-save-disable")
}

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

@ -7,8 +7,6 @@ const template: { [char: string]: APIClassType } = {};
const data: { [char: string]: string } = {};
export type typesContextType = {
reactFlowInstance: ReactFlowInstance | null;
setReactFlowInstance: (newState: ReactFlowInstance) => void;
types: typeof types;
setTypes: (newState: {}) => void;
templates: typeof template;

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

@ -150,7 +150,6 @@ export function updateTemplate(
export function updateIds(
newFlow: ReactFlowJsonObject,
getNodeId: (type: string) => string
) {
let idsMap = {};
@ -269,6 +268,20 @@ export function validateNodes(nodes: Node[], edges: Edge[]) {
return nodes.flatMap((n: NodeType) => validateNode(n, edges));
}
export function updateEdges(edges: Edge[]) {
if (edges)
edges.forEach((edge) => {
const targetHandleObject: targetHandleType = scapeJSONParse(
edge.targetHandle!
);
edge.className =
(targetHandleObject.type === "Text"
? "stroke-gray-800 "
: "stroke-gray-900 ") + " stroke-connection";
edge.animated = targetHandleObject.type === "Text";
});
};
export function addVersionToDuplicates(flow: FlowType, flows: FlowType[]) {
const existingNames = flows.map((item) => item.name);
let newName = flow.name;
@ -922,6 +935,19 @@ function updateEdgesIds(edges: Edge[], idsMap: { [key: string]: string }) {
});
}
export function processFlowEdges(flow: FlowType) {
if (!flow.data || !flow.data.edges) return;
if (checkOldEdgesHandles(flow.data.edges)) {
const newEdges = updateEdgesHandleIds(flow.data);
flow.data.edges = newEdges;
}
//update edges colors
flow.data.edges.forEach((edge) => {
edge.className = "";
edge.style = { stroke: "#555" };
});
}
export function expandGroupNode(
groupNode: NodeDataType,
nodes: Node[],
@ -930,7 +956,7 @@ export function expandGroupNode(
setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
) {
const { template, flow } = _.cloneDeep(groupNode.node!);
const idsMap = updateIds(flow!.data!, getNodeId);
const idsMap = updateIds(flow!.data!);
updateProxyIdsOnTemplate(template, idsMap);
let flowEdges = edges;
updateEdgesIds(flowEdges, idsMap);