Refactor: Change context to zustand store
This commit is contained in:
igorrCarvalho
parent
a2096b8e0b
commit
35bdfafa4f
4 changed files with 329 additions and 0 deletions
|
|
@ -677,3 +677,6 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export const priorityFields = new Set(["code", "template"]);
|
export const priorityFields = new Set(["code", "template"]);
|
||||||
|
|
||||||
|
export const INPUT_TYPES = new Set(["ChatInput","TextInput"]);
|
||||||
|
export const OUTPUT_TYPES = new Set(["ChatOutput"]);
|
||||||
|
|
|
||||||
255
src/frontend/src/stores/flowsIOStore.ts
Normal file
255
src/frontend/src/stores/flowsIOStore.ts
Normal file
|
|
@ -0,0 +1,255 @@
|
||||||
|
import { cloneDeep } from "lodash";
|
||||||
|
import { create } from "zustand";
|
||||||
|
import { FlowType, NodeDataType, NodeType } from "../types/flow";
|
||||||
|
import useFlowStore from "./flowStore";
|
||||||
|
import { isInputNode, isOutputNode } from "../utils/reactflowUtils";
|
||||||
|
import useFlowsManagerStore from "./flowsManagerStore";
|
||||||
|
import useAlertStore from "./alertStore";
|
||||||
|
import { flowIOStoreType } from "../types/zustand/flowIOStore";
|
||||||
|
/* const { getNodeId, saveFlow } = useContext(FlowsContext);
|
||||||
|
const { setErrorData, setNoticeData } = useContext(alertContext); */
|
||||||
|
|
||||||
|
const { reactFlowInstance, paste } = useFlowStore();
|
||||||
|
const { saveFlow } = useFlowsManagerStore();
|
||||||
|
const { setErrorData, setNoticeData } = useAlertStore();
|
||||||
|
|
||||||
|
const useFlowIOStore = create<flowIOStoreType>((set, get) => ({
|
||||||
|
flowPool: {},
|
||||||
|
getFilterEdge: [],
|
||||||
|
isBuilt: false,
|
||||||
|
outputTypes: [],
|
||||||
|
inputTypes: [],
|
||||||
|
inputIds: [],
|
||||||
|
outputIds: [],
|
||||||
|
isBuilding: true,
|
||||||
|
|
||||||
|
setFilterEdge: (filterEdge) => { set({getFilterEdge: filterEdge}) },
|
||||||
|
setFlowPool: (flowPool) => { set({flowPool}) },
|
||||||
|
setIsBuilt: (isBuilt) => { set({isBuilt}) },
|
||||||
|
setOutputTypes: (outputTypes) => { set({outputTypes}) },
|
||||||
|
setInputTypes: (inputTypes) => { set({inputTypes}) },
|
||||||
|
setInputIds: (inputIds) => { set({ inputIds }) },
|
||||||
|
setOutputIds: (outputIds) => { set({outputIds}) },
|
||||||
|
setIsBuilding: (isBuilding) => { set({isBuilding}) },
|
||||||
|
|
||||||
|
updateFlowPoolNodes: (nodes: NodeType[]) => {
|
||||||
|
//this function will update the removing the old ones
|
||||||
|
const nodeIdsSet = new Set(nodes.map((node) => node.id));
|
||||||
|
set((state) => {
|
||||||
|
let newFlowPool = cloneDeep({ ...state.flowPool });
|
||||||
|
Object.keys(newFlowPool).forEach((nodeId) => {
|
||||||
|
if (!nodeIdsSet.has(nodeId)) {
|
||||||
|
delete newFlowPool[nodeId];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return { flowPool: newFlowPool };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addDataToFlowPool: (data: any, nodeId: string) => {
|
||||||
|
set((state) => {
|
||||||
|
let newFlowPool = cloneDeep({ ...state.flowPool });
|
||||||
|
if (!newFlowPool[nodeId]) newFlowPool[nodeId] = [data];
|
||||||
|
else {
|
||||||
|
newFlowPool[nodeId].push(data);
|
||||||
|
}
|
||||||
|
return { flowPool: newFlowPool };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
CleanFlowPool: () => {
|
||||||
|
set({ flowPool: {} });
|
||||||
|
},
|
||||||
|
updateNodeFlowData: (nodeId: string, newData: NodeDataType) => {
|
||||||
|
let oldNodes = reactFlowInstance?.getNodes();
|
||||||
|
let targetNode = oldNodes?.find((node) => node.id === nodeId);
|
||||||
|
if (targetNode) {
|
||||||
|
targetNode.data = cloneDeep(newData);
|
||||||
|
reactFlowInstance?.setNodes([...oldNodes!]);
|
||||||
|
console.log(
|
||||||
|
"after reactflow update",
|
||||||
|
JSON.parse(JSON.stringify(reactFlowInstance?.toObject()))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
checkInputandOutput: (flow?: FlowType) => {
|
||||||
|
let has_input = false;
|
||||||
|
let has_output = false;
|
||||||
|
if (!flow && !reactFlowInstance) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const nodes = flow?.data?.nodes
|
||||||
|
? flow.data.nodes
|
||||||
|
: reactFlowInstance!.getNodes();
|
||||||
|
nodes.forEach((node) => {
|
||||||
|
const nodeData: NodeDataType = node.data as NodeDataType;
|
||||||
|
if (isInputNode(nodeData)) {
|
||||||
|
has_input = true;
|
||||||
|
}
|
||||||
|
if (isOutputNode(nodeData)) {
|
||||||
|
has_output = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return has_input && has_output;
|
||||||
|
},
|
||||||
|
getInputTypes: (flow?: FlowType) => {
|
||||||
|
let inputType: string[] = [];
|
||||||
|
if (!flow && !reactFlowInstance) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const nodes = flow?.data?.nodes
|
||||||
|
? flow.data.nodes
|
||||||
|
: reactFlowInstance!.getNodes();
|
||||||
|
nodes.forEach((node) => {
|
||||||
|
const nodeData: NodeDataType = node.data as NodeDataType;
|
||||||
|
if (isInputNode(nodeData)) {
|
||||||
|
// TODO remove count and ramdom key from type before pushing
|
||||||
|
inputType.push(nodeData.type);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
set({ inputTypes: inputType });
|
||||||
|
return inputType;
|
||||||
|
},
|
||||||
|
getOutputTypes: (flow?: FlowType) => {
|
||||||
|
let outputType: string[] = [];
|
||||||
|
if (!flow && !reactFlowInstance) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const nodes = flow?.data?.nodes
|
||||||
|
? flow.data.nodes
|
||||||
|
: reactFlowInstance!.getNodes();
|
||||||
|
nodes.forEach((node) => {
|
||||||
|
const nodeData: NodeDataType = node.data as NodeDataType;
|
||||||
|
if (isOutputNode(nodeData)) {
|
||||||
|
// TODO remove count and ramdom key from type before pushing
|
||||||
|
outputType.push(nodeData.type);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
set({ outputTypes: outputType });
|
||||||
|
return outputType;
|
||||||
|
},
|
||||||
|
getInputIds: (flow?: FlowType) => {
|
||||||
|
let inputIds: string[] = [];
|
||||||
|
if (!flow && !reactFlowInstance) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const nodes = flow?.data?.nodes
|
||||||
|
? flow.data.nodes
|
||||||
|
: reactFlowInstance!.getNodes();
|
||||||
|
nodes.forEach((node) => {
|
||||||
|
const nodeData: NodeDataType = node.data as NodeDataType;
|
||||||
|
if (isInputNode(nodeData)) {
|
||||||
|
inputIds.push(nodeData.id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
set({ inputIds });
|
||||||
|
return inputIds;
|
||||||
|
},
|
||||||
|
getOutputIds: (flow?: FlowType) => {
|
||||||
|
let outputIds: string[] = [];
|
||||||
|
if (!flow && !reactFlowInstance) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const nodes = flow?.data?.nodes
|
||||||
|
? flow.data.nodes
|
||||||
|
: reactFlowInstance!.getNodes();
|
||||||
|
|
||||||
|
nodes.forEach((node) => {
|
||||||
|
const nodeData: NodeDataType = node.data as NodeDataType;
|
||||||
|
if (isOutputNode(nodeData)) {
|
||||||
|
outputIds.push(nodeData.id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
set({ outputIds });
|
||||||
|
return outputIds;
|
||||||
|
},
|
||||||
|
pasteFileOnFLow: async (file?: File) => {
|
||||||
|
if (file) {
|
||||||
|
const text = await file.text();
|
||||||
|
let fileData = JSON.parse(text);
|
||||||
|
if (fileData.flows) {
|
||||||
|
fileData.flows.forEach((flow: FlowType) => {
|
||||||
|
paste(
|
||||||
|
{ nodes: flow!.data!.nodes, edges: flow!.data!.edges },
|
||||||
|
{ x: 10, y: 10 }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
let flow: FlowType = JSON.parse(text);
|
||||||
|
paste(
|
||||||
|
{ nodes: flow.data!.nodes, edges: flow.data!.edges },
|
||||||
|
{ x: 10, y: 10 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const input = document.createElement("input");
|
||||||
|
input.type = "file";
|
||||||
|
input.accept = ".json";
|
||||||
|
// add a change event listener to the file input
|
||||||
|
input.onchange = async (e: Event) => {
|
||||||
|
if (
|
||||||
|
(e.target as HTMLInputElement).files![0].type === "application/json"
|
||||||
|
) {
|
||||||
|
const currentfile = (e.target as HTMLInputElement).files![0];
|
||||||
|
get().pasteFileOnFLow(currentfile);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// trigger the file input click event to open the file dialog
|
||||||
|
input.click();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
downloadFlow: (
|
||||||
|
flow: FlowType,
|
||||||
|
flowName: string,
|
||||||
|
flowDescription?: string
|
||||||
|
) => {
|
||||||
|
// create a data URI with the current flow data
|
||||||
|
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
|
||||||
|
JSON.stringify({ ...flow, name: flowName, description: flowDescription })
|
||||||
|
)}`;
|
||||||
|
|
||||||
|
// create a link element and set its properties
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = jsonString;
|
||||||
|
link.download = `${flowName && flowName != "" ? flowName : "flow"}.json`;
|
||||||
|
|
||||||
|
// simulate a click on the link element to trigger the download
|
||||||
|
link.click();
|
||||||
|
},
|
||||||
|
/* buildFlow: async (nodeId?: string) => {
|
||||||
|
function handleBuildUpdate(data: any) {
|
||||||
|
get().addDataToFlowPool(data.data[data.id], data.id);
|
||||||
|
}
|
||||||
|
console.log(
|
||||||
|
"building flow before save",
|
||||||
|
JSON.parse(JSON.stringify(actualFlow))
|
||||||
|
);
|
||||||
|
console.log(saveFlow);
|
||||||
|
await saveFlow(
|
||||||
|
{ ...actualFlow!, data: reactFlowInstance!.toObject()! },
|
||||||
|
true
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
"building flow AFTER save",
|
||||||
|
JSON.parse(JSON.stringify(actualFlow))
|
||||||
|
);
|
||||||
|
return buildVertices({
|
||||||
|
flow: {
|
||||||
|
data: reactFlowInstance?.toObject()!,
|
||||||
|
description: actualFlow!.description,
|
||||||
|
id: actualFlow!.id,
|
||||||
|
name: actualFlow!.name,
|
||||||
|
},
|
||||||
|
nodeId,
|
||||||
|
onBuildComplete: () => {
|
||||||
|
if (nodeId) {
|
||||||
|
setNoticeData({ title: `${nodeId} built successfully` });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onBuildUpdate: handleBuildUpdate,
|
||||||
|
onBuildError: (title, list) => {
|
||||||
|
setErrorData({ list, title });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, */
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default useFlowIOStore;
|
||||||
61
src/frontend/src/types/zustand/flowIOStore/index.ts
Normal file
61
src/frontend/src/types/zustand/flowIOStore/index.ts
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
import { ReactFlowInstance } from "reactflow";
|
||||||
|
import { tweakType } from "../../components";
|
||||||
|
import { FlowType, NodeDataType, NodeType } from "../../flow";
|
||||||
|
|
||||||
|
export type chatInputType = {
|
||||||
|
result: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ChatOutputType = {
|
||||||
|
message: string;
|
||||||
|
sender: string;
|
||||||
|
sender_name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type FlowPoolObjectType = {
|
||||||
|
timestamp: string;
|
||||||
|
valid: boolean;
|
||||||
|
params: any;
|
||||||
|
data: { artifacts: any; results: any | ChatOutputType | chatInputType };
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type FlowPoolType = {
|
||||||
|
[key: string]: Array<FlowPoolObjectType>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type flowIOStoreType = {
|
||||||
|
flowPool: FlowPoolType;
|
||||||
|
getFilterEdge: any[];
|
||||||
|
isBuilt: boolean;
|
||||||
|
inputTypes: string[];
|
||||||
|
outputTypes: string[];
|
||||||
|
inputIds: string[];
|
||||||
|
outputIds: string[];
|
||||||
|
isBuilding: boolean;
|
||||||
|
setFlowPool: (flowPool: FlowPoolType) => void;
|
||||||
|
setIsBuilding: (state: boolean) => void;
|
||||||
|
setIsBuilt: (state: boolean) => void;
|
||||||
|
setOutputTypes: (outputTypes: string[]) => void;
|
||||||
|
setInputTypes: (inputTypes: string[]) => void;
|
||||||
|
setInputIds: (inputIds: string[]) => void;
|
||||||
|
setOutputIds: (outputIds: string[]) => void;
|
||||||
|
setFilterEdge: (newState) => void;
|
||||||
|
updateFlowPoolNodes: (nodes: NodeType[]) => void;
|
||||||
|
addDataToFlowPool: (data: any, nodeId: string) => void;
|
||||||
|
CleanFlowPool: () => void;
|
||||||
|
updateNodeFlowData: (nodeId: string, newData: NodeDataType) => void;
|
||||||
|
checkInputandOutput: (flow?: FlowType) => boolean;
|
||||||
|
getInputTypes: (flow?: FlowType) => string[];
|
||||||
|
getOutputTypes: (flow?: FlowType) => string[];
|
||||||
|
getInputIds: (flow?: FlowType) => string[];
|
||||||
|
getOutputIds: (flow?: FlowType) => string[];
|
||||||
|
pasteFileOnFLow: (file?: File) => Promise<void>;
|
||||||
|
downloadFlow: (
|
||||||
|
flow: FlowType,
|
||||||
|
flowName: string,
|
||||||
|
flowDescription?: string
|
||||||
|
) => void;
|
||||||
|
|
||||||
|
/* buildFlow: (nodeId?:string) => Promise<void>; */
|
||||||
|
};
|
||||||
|
|
@ -9,7 +9,9 @@ import {
|
||||||
} from "reactflow";
|
} from "reactflow";
|
||||||
import ShortUniqueId from "short-unique-id";
|
import ShortUniqueId from "short-unique-id";
|
||||||
import {
|
import {
|
||||||
|
INPUT_TYPES,
|
||||||
LANGFLOW_SUPPORTED_TYPES,
|
LANGFLOW_SUPPORTED_TYPES,
|
||||||
|
OUTPUT_TYPES,
|
||||||
specialCharsRegex,
|
specialCharsRegex,
|
||||||
} from "../constants/constants";
|
} from "../constants/constants";
|
||||||
import { downloadFlowsFromDatabase } from "../controllers/API";
|
import { downloadFlowsFromDatabase } from "../controllers/API";
|
||||||
|
|
@ -1286,3 +1288,11 @@ export const createNewFlow = (
|
||||||
is_component: flow?.is_component ?? false,
|
is_component: flow?.is_component ?? false,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export function isInputNode(nodeData: NodeDataType): boolean {
|
||||||
|
return INPUT_TYPES.has(nodeData.type);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isOutputNode(nodeData: NodeDataType): boolean {
|
||||||
|
return OUTPUT_TYPES.has(nodeData.type);
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue