chore(flowsIOStore.ts): remove unused variables and functions for better code readability and maintainability
refactor(flowsIOStore.ts): remove unused variables and functions to improve code quality and reduce complexity
This commit is contained in:
anovazzi1
parent
30940cb853
commit
5e5a64872c
2 changed files with 144 additions and 224 deletions
|
|
@ -1,12 +1,11 @@
|
||||||
import { cloneDeep } from "lodash";
|
import { cloneDeep } from "lodash";
|
||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
import { FlowType, NodeDataType, NodeType } from "../types/flow";
|
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";
|
import { flowIOStoreType } from "../types/zustand/flowIOStore";
|
||||||
import { buildVertices } from "../utils/buildUtils";
|
import { isInputNode, isOutputNode } from "../utils/reactflowUtils";
|
||||||
|
import useAlertStore from "./alertStore";
|
||||||
|
import useFlowStore from "./flowStore";
|
||||||
|
import useFlowsManagerStore from "./flowsManagerStore";
|
||||||
/* const { getNodeId, saveFlow } = useContext(FlowsContext);
|
/* const { getNodeId, saveFlow } = useContext(FlowsContext);
|
||||||
const { setErrorData, setNoticeData } = useContext(alertContext); */
|
const { setErrorData, setNoticeData } = useContext(alertContext); */
|
||||||
|
|
||||||
|
|
@ -15,208 +14,146 @@ const { saveFlow } = useFlowsManagerStore();
|
||||||
const { setErrorData, setNoticeData } = useAlertStore();
|
const { setErrorData, setNoticeData } = useAlertStore();
|
||||||
|
|
||||||
const useFlowIOStore = create<flowIOStoreType>((set, get) => ({
|
const useFlowIOStore = create<flowIOStoreType>((set, get) => ({
|
||||||
flowPool: {},
|
flowPool: {},
|
||||||
getFilterEdge: [],
|
outputTypes: [],
|
||||||
isBuilt: false,
|
inputTypes: [],
|
||||||
outputTypes: [],
|
inputIds: [],
|
||||||
inputTypes: [],
|
outputIds: [],
|
||||||
inputIds: [],
|
|
||||||
outputIds: [],
|
|
||||||
isBuilding: true,
|
|
||||||
actualFlow: null,
|
|
||||||
|
|
||||||
setFilterEdge: (filterEdge) => { set({getFilterEdge: filterEdge}) },
|
setFlowPool: (flowPool) => {
|
||||||
setFlowPool: (flowPool) => { set({flowPool}) },
|
set({ flowPool });
|
||||||
setIsBuilt: (isBuilt) => { set({isBuilt}) },
|
},
|
||||||
setOutputTypes: (outputTypes) => { set({outputTypes}) },
|
setOutputTypes: (outputTypes) => {
|
||||||
setInputTypes: (inputTypes) => { set({inputTypes}) },
|
set({ outputTypes });
|
||||||
setInputIds: (inputIds) => { set({ inputIds }) },
|
},
|
||||||
setOutputIds: (outputIds) => { set({outputIds}) },
|
setInputTypes: (inputTypes) => {
|
||||||
setIsBuilding: (isBuilding) => { set({isBuilding}) },
|
set({ inputTypes });
|
||||||
|
},
|
||||||
|
setInputIds: (inputIds) => {
|
||||||
|
set({ inputIds });
|
||||||
|
},
|
||||||
|
setOutputIds: (outputIds) => {
|
||||||
|
set({ outputIds });
|
||||||
|
},
|
||||||
|
|
||||||
updateFlowPoolNodes: (nodes: NodeType[]) => {
|
updateFlowPoolNodes: (nodes: NodeType[]) => {
|
||||||
//this function will update the removing the old ones
|
//this function will update the removing the old ones
|
||||||
const nodeIdsSet = new Set(nodes.map((node) => node.id));
|
const nodeIdsSet = new Set(nodes.map((node) => node.id));
|
||||||
set((state) => {
|
set((state) => {
|
||||||
let newFlowPool = cloneDeep({ ...state.flowPool });
|
let newFlowPool = cloneDeep({ ...state.flowPool });
|
||||||
Object.keys(newFlowPool).forEach((nodeId) => {
|
Object.keys(newFlowPool).forEach((nodeId) => {
|
||||||
if (!nodeIdsSet.has(nodeId)) {
|
if (!nodeIdsSet.has(nodeId)) {
|
||||||
delete newFlowPool[nodeId];
|
delete newFlowPool[nodeId];
|
||||||
}
|
}
|
||||||
});
|
|
||||||
return { flowPool: newFlowPool };
|
|
||||||
});
|
});
|
||||||
},
|
return { flowPool: newFlowPool };
|
||||||
addDataToFlowPool: (data: any, nodeId: string) => {
|
});
|
||||||
set((state) => {
|
},
|
||||||
let newFlowPool = cloneDeep({ ...state.flowPool });
|
addDataToFlowPool: (data: any, nodeId: string) => {
|
||||||
if (!newFlowPool[nodeId]) newFlowPool[nodeId] = [data];
|
set((state) => {
|
||||||
else {
|
let newFlowPool = cloneDeep({ ...state.flowPool });
|
||||||
newFlowPool[nodeId].push(data);
|
if (!newFlowPool[nodeId]) newFlowPool[nodeId] = [data];
|
||||||
}
|
else {
|
||||||
return { flowPool: newFlowPool };
|
newFlowPool[nodeId].push(data);
|
||||||
});
|
}
|
||||||
},
|
return { flowPool: newFlowPool };
|
||||||
CleanFlowPool: () => {
|
});
|
||||||
set({ flowPool: {} });
|
},
|
||||||
},
|
CleanFlowPool: () => {
|
||||||
updateNodeFlowData: (nodeId: string, newData: NodeDataType) => {
|
set({ flowPool: {} });
|
||||||
let oldNodes = reactFlowInstance?.getNodes();
|
},
|
||||||
let targetNode = oldNodes?.find((node) => node.id === nodeId);
|
checkInputandOutput: (flow?: FlowType) => {
|
||||||
if (targetNode) {
|
let has_input = false;
|
||||||
targetNode.data = cloneDeep(newData);
|
let has_output = false;
|
||||||
reactFlowInstance?.setNodes([...oldNodes!]);
|
if (!flow && !reactFlowInstance) {
|
||||||
console.log(
|
return false;
|
||||||
"after reactflow update",
|
}
|
||||||
JSON.parse(JSON.stringify(reactFlowInstance?.toObject()))
|
const nodes = flow?.data?.nodes
|
||||||
);
|
? flow.data.nodes
|
||||||
}
|
: reactFlowInstance!.getNodes();
|
||||||
},
|
nodes.forEach((node) => {
|
||||||
checkInputandOutput: (flow?: FlowType) => {
|
const nodeData: NodeDataType = node.data as NodeDataType;
|
||||||
let has_input = false;
|
if (isInputNode(nodeData)) {
|
||||||
let has_output = false;
|
has_input = true;
|
||||||
if (!flow && !reactFlowInstance) {
|
}
|
||||||
return false;
|
if (isOutputNode(nodeData)) {
|
||||||
}
|
has_output = true;
|
||||||
const nodes = flow?.data?.nodes
|
}
|
||||||
? flow.data.nodes
|
});
|
||||||
: reactFlowInstance!.getNodes();
|
return has_input && has_output;
|
||||||
nodes.forEach((node) => {
|
},
|
||||||
const nodeData: NodeDataType = node.data as NodeDataType;
|
getInputTypes: (flow?: FlowType) => {
|
||||||
if (isInputNode(nodeData)) {
|
let inputType: string[] = [];
|
||||||
has_input = true;
|
if (!flow && !reactFlowInstance) {
|
||||||
}
|
return [];
|
||||||
if (isOutputNode(nodeData)) {
|
}
|
||||||
has_output = true;
|
const nodes = flow?.data?.nodes
|
||||||
}
|
? flow.data.nodes
|
||||||
});
|
: reactFlowInstance!.getNodes();
|
||||||
return has_input && has_output;
|
nodes.forEach((node) => {
|
||||||
},
|
const nodeData: NodeDataType = node.data as NodeDataType;
|
||||||
getInputTypes: (flow?: FlowType) => {
|
if (isInputNode(nodeData)) {
|
||||||
let inputType: string[] = [];
|
// TODO remove count and ramdom key from type before pushing
|
||||||
if (!flow && !reactFlowInstance) {
|
inputType.push(nodeData.type);
|
||||||
return [];
|
}
|
||||||
}
|
});
|
||||||
const nodes = flow?.data?.nodes
|
set({ inputTypes: inputType });
|
||||||
? flow.data.nodes
|
return inputType;
|
||||||
: reactFlowInstance!.getNodes();
|
},
|
||||||
nodes.forEach((node) => {
|
getOutputTypes: (flow?: FlowType) => {
|
||||||
const nodeData: NodeDataType = node.data as NodeDataType;
|
let outputType: string[] = [];
|
||||||
if (isInputNode(nodeData)) {
|
if (!flow && !reactFlowInstance) {
|
||||||
// TODO remove count and ramdom key from type before pushing
|
return [];
|
||||||
inputType.push(nodeData.type);
|
}
|
||||||
}
|
const nodes = flow?.data?.nodes
|
||||||
});
|
? flow.data.nodes
|
||||||
set({ inputTypes: inputType });
|
: reactFlowInstance!.getNodes();
|
||||||
return inputType;
|
nodes.forEach((node) => {
|
||||||
},
|
const nodeData: NodeDataType = node.data as NodeDataType;
|
||||||
getOutputTypes: (flow?: FlowType) => {
|
if (isOutputNode(nodeData)) {
|
||||||
let outputType: string[] = [];
|
// TODO remove count and ramdom key from type before pushing
|
||||||
if (!flow && !reactFlowInstance) {
|
outputType.push(nodeData.type);
|
||||||
return [];
|
}
|
||||||
}
|
});
|
||||||
const nodes = flow?.data?.nodes
|
set({ outputTypes: outputType });
|
||||||
? flow.data.nodes
|
return outputType;
|
||||||
: reactFlowInstance!.getNodes();
|
},
|
||||||
nodes.forEach((node) => {
|
getInputIds: (flow?: FlowType) => {
|
||||||
const nodeData: NodeDataType = node.data as NodeDataType;
|
let inputIds: string[] = [];
|
||||||
if (isOutputNode(nodeData)) {
|
if (!flow && !reactFlowInstance) {
|
||||||
// TODO remove count and ramdom key from type before pushing
|
return [];
|
||||||
outputType.push(nodeData.type);
|
}
|
||||||
}
|
const nodes = flow?.data?.nodes
|
||||||
});
|
? flow.data.nodes
|
||||||
set({ outputTypes: outputType });
|
: reactFlowInstance!.getNodes();
|
||||||
return outputType;
|
nodes.forEach((node) => {
|
||||||
},
|
const nodeData: NodeDataType = node.data as NodeDataType;
|
||||||
getInputIds: (flow?: FlowType) => {
|
if (isInputNode(nodeData)) {
|
||||||
let inputIds: string[] = [];
|
inputIds.push(nodeData.id);
|
||||||
if (!flow && !reactFlowInstance) {
|
}
|
||||||
return [];
|
});
|
||||||
}
|
set({ inputIds });
|
||||||
const nodes = flow?.data?.nodes
|
return inputIds;
|
||||||
? flow.data.nodes
|
},
|
||||||
: reactFlowInstance!.getNodes();
|
getOutputIds: (flow?: FlowType) => {
|
||||||
nodes.forEach((node) => {
|
let outputIds: string[] = [];
|
||||||
const nodeData: NodeDataType = node.data as NodeDataType;
|
if (!flow && !reactFlowInstance) {
|
||||||
if (isInputNode(nodeData)) {
|
return [];
|
||||||
inputIds.push(nodeData.id);
|
}
|
||||||
}
|
const nodes = flow?.data?.nodes
|
||||||
});
|
? flow.data.nodes
|
||||||
set({ inputIds });
|
: reactFlowInstance!.getNodes();
|
||||||
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) => {
|
nodes.forEach((node) => {
|
||||||
const nodeData: NodeDataType = node.data as NodeDataType;
|
const nodeData: NodeDataType = node.data as NodeDataType;
|
||||||
if (isOutputNode(nodeData)) {
|
if (isOutputNode(nodeData)) {
|
||||||
outputIds.push(nodeData.id);
|
outputIds.push(nodeData.id);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
set({ outputIds });
|
set({ outputIds });
|
||||||
return outputIds;
|
return outputIds;
|
||||||
},
|
},
|
||||||
pasteFileOnFLow: async (file?: File) => {
|
/* buildFlow: async (nodeId?: string) => {
|
||||||
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) {
|
function handleBuildUpdate(data: any) {
|
||||||
get().addDataToFlowPool(data.data[data.id], data.id);
|
get().addDataToFlowPool(data.data[data.id], data.id);
|
||||||
}
|
}
|
||||||
|
|
@ -251,7 +188,7 @@ const useFlowIOStore = create<flowIOStoreType>((set, get) => ({
|
||||||
setErrorData({ list, title });
|
setErrorData({ list, title });
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
}, */
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export default useFlowIOStore;
|
export default useFlowIOStore;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
import { ReactFlowInstance } from "reactflow";
|
import { FlowType, NodeType } from "../../flow";
|
||||||
import { tweakType } from "../../components";
|
|
||||||
import { FlowType, NodeDataType, NodeType } from "../../flow";
|
|
||||||
|
|
||||||
export type chatInputType = {
|
export type chatInputType = {
|
||||||
result: string;
|
result: string;
|
||||||
|
|
@ -25,37 +23,22 @@ export type FlowPoolType = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export type flowIOStoreType = {
|
export type flowIOStoreType = {
|
||||||
actualFlow: null | FlowType;
|
|
||||||
flowPool: FlowPoolType;
|
flowPool: FlowPoolType;
|
||||||
getFilterEdge: any[];
|
|
||||||
isBuilt: boolean;
|
|
||||||
inputTypes: string[];
|
inputTypes: string[];
|
||||||
outputTypes: string[];
|
outputTypes: string[];
|
||||||
inputIds: string[];
|
inputIds: string[];
|
||||||
outputIds: string[];
|
outputIds: string[];
|
||||||
isBuilding: boolean;
|
|
||||||
setFlowPool: (flowPool: FlowPoolType) => void;
|
setFlowPool: (flowPool: FlowPoolType) => void;
|
||||||
setIsBuilding: (state: boolean) => void;
|
|
||||||
setIsBuilt: (state: boolean) => void;
|
|
||||||
setOutputTypes: (outputTypes: string[]) => void;
|
setOutputTypes: (outputTypes: string[]) => void;
|
||||||
setInputTypes: (inputTypes: string[]) => void;
|
setInputTypes: (inputTypes: string[]) => void;
|
||||||
setInputIds: (inputIds: string[]) => void;
|
setInputIds: (inputIds: string[]) => void;
|
||||||
setOutputIds: (outputIds: string[]) => void;
|
setOutputIds: (outputIds: string[]) => void;
|
||||||
setFilterEdge: (newState) => void;
|
|
||||||
updateFlowPoolNodes: (nodes: NodeType[]) => void;
|
updateFlowPoolNodes: (nodes: NodeType[]) => void;
|
||||||
addDataToFlowPool: (data: any, nodeId: string) => void;
|
addDataToFlowPool: (data: any, nodeId: string) => void;
|
||||||
CleanFlowPool: () => void;
|
CleanFlowPool: () => void;
|
||||||
updateNodeFlowData: (nodeId: string, newData: NodeDataType) => void;
|
|
||||||
checkInputandOutput: (flow?: FlowType) => boolean;
|
checkInputandOutput: (flow?: FlowType) => boolean;
|
||||||
getInputTypes: (flow?: FlowType) => string[];
|
getInputTypes: (flow?: FlowType) => string[];
|
||||||
getOutputTypes: (flow?: FlowType) => string[];
|
getOutputTypes: (flow?: FlowType) => string[];
|
||||||
getInputIds: (flow?: FlowType) => string[];
|
getInputIds: (flow?: FlowType) => string[];
|
||||||
getOutputIds: (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>;
|
|
||||||
};
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue