From 8f5cb0998d9e1f90c6c13b83d3f089eb9f03f436 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 24 Jan 2024 15:21:31 -0300 Subject: [PATCH] fix(chatComponent): rename checkInputAndOutput to hasIO for better semantics fix(chatComponent): replace checkInputAndOutput with hasIO in relevant places fix(flowStore): remove checkInputAndOutput function and replace it with hasIO property fix(flowStore): update inputIds, outputIds, inputTypes, and outputTypes when resetting or setting nodes to reflect changes in inputs and outputs fix(flowStore): update hasIO property based on the presence of inputs and outputs in nodes fix(flowStore): remove getOutputs and getInputs functions and replace them with getInputsAndOutputs utility function fix(flowStore): update inputIds, outputIds, inputTypes, and outputTypes when resetting or setting nodes to reflect changes in inputs and outputs fix(flowStore): update hasIO property based on the presence of inputs and outputs in nodes fix(flowStore): remove getOutputs and getInputs functions and replace them with getInputsAndOutputs utility function fix(flowStore): remove unused imports in flowStore type definition file --- .../chatComponent/buildTrigger/index.tsx | 10 +-- .../src/components/chatComponent/index.tsx | 19 +----- src/frontend/src/stores/flowStore.ts | 65 +++++-------------- src/frontend/src/types/zustand/flow/index.ts | 4 +- 4 files changed, 23 insertions(+), 75 deletions(-) diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx index 084afc455..8ea6f9048 100644 --- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx +++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx @@ -52,9 +52,7 @@ export default function BuildTrigger({ } } - const checkInputAndOutput = useFlowStore( - (state) => state.checkInputAndOutput - ); + const hasIO = useFlowStore((state) => state.hasIO); async function enforceMinimumLoadingTime( startTime: number, @@ -80,11 +78,7 @@ export default function BuildTrigger({ leaveTo="translate-y-96" >
state.flowState); const nodes = useFlowStore((state) => state.nodes); - const checkInputAndOutput = useFlowStore( - (state) => state.checkInputAndOutput - ); - const getOutputs = useFlowStore((state) => state.getOutputs); - const getInputs = useFlowStore((state) => state.getInputs); - const [showTrigger, setShowTrigger] = useState(checkInputAndOutput()); - useEffect(() => { - const haveIO = checkInputAndOutput(); - setShowTrigger(haveIO); - if (haveIO) { - getOutputs(); - getInputs(); - } - }, [nodes]); + const hasIO = useFlowStore((state) => state.hasIO); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ( (event.key === "K" || event.key === "k") && (event.metaKey || event.ctrlKey) && - checkInputAndOutput() + useFlowStore.getState().hasIO ) { event.preventDefault(); setOpen((oldState) => !oldState); @@ -50,7 +37,7 @@ export default function Chat({ flow }: ChatType): JSX.Element { <>
- {showTrigger && ( + {hasIO && (
setOpen(true)}> diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 329e02055..4127de910 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -21,11 +21,10 @@ import { cleanEdges, getHandleId, getNodeId, - isInputNode, - isOutputNode, scapeJSONParse, scapedJSONStringfy, } from "../utils/reactflowUtils"; +import { getInputsAndOutputs } from "../utils/storeUtils"; import useAlertStore from "./alertStore"; import useFlowsManagerStore from "./flowsManagerStore"; @@ -36,6 +35,7 @@ const useFlowStore = create((set, get) => ({ edges: [], isBuilding: false, isPending: false, + hasIO: false, reactFlowInstance: null, lastCopiedSelection: null, flowPool: {}, @@ -61,10 +61,18 @@ const useFlowStore = create((set, get) => ({ set({ isPending }); }, resetFlow: ({ nodes, edges, viewport }) => { + let newEdges = cleanEdges(nodes, edges); + const { inputs, outputs } = getInputsAndOutputs(nodes); + set({ nodes, - edges, + edges: newEdges, flowState: undefined, + inputIds: inputs.map((input) => input.id), + outputIds: outputs.map((output) => output.id), + inputTypes: inputs.map((input) => input.type), + outputTypes: outputs.map((output) => output.type), + hasIO: inputs.length > 0 && outputs.length > 0, }); get().reactFlowInstance!.setViewport(viewport); }, @@ -97,11 +105,17 @@ const useFlowStore = create((set, get) => ({ setNodes: (change) => { let newChange = typeof change === "function" ? change(get().nodes) : change; let newEdges = cleanEdges(newChange, get().edges); + const { inputs, outputs } = getInputsAndOutputs(newChange); set({ edges: newEdges, nodes: newChange, flowState: undefined, + inputIds: inputs.map((input) => input.id), + outputIds: outputs.map((output) => output.id), + inputTypes: inputs.map((input) => input.type), + outputTypes: outputs.map((output) => output.type), + hasIO: inputs.length > 0 && outputs.length > 0, }); const flowsManager = useFlowsManagerStore.getState(); @@ -144,21 +158,6 @@ const useFlowStore = create((set, get) => ({ }) ); }, - checkInputAndOutput: () => { - let has_input = false; - let has_output = false; - const nodes = get().nodes; - 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; - }, getNode: (id: string) => { return get().nodes.find((node) => node.id === id); }, @@ -369,36 +368,6 @@ const useFlowStore = create((set, get) => ({ viewport: get().reactFlowInstance?.getViewport()!, }; }, - getOutputs(): { type: string; id: string }[] { - let outputs: { type: string; id: string }[] = []; - const nodes = get().nodes; - nodes.forEach((node) => { - const nodeData: NodeDataType = node.data as NodeDataType; - if (isOutputNode(nodeData)) { - outputs.push({ type: nodeData.type, id: nodeData.id }); - } - }); - set({ - outputIds: outputs.map((output) => output.id), - outputTypes: outputs.map((output) => output.type), - }); - return outputs; - }, - getInputs(): { type: string; id: string }[] { - let inputs: { type: string; id: string }[] = []; - const nodes = get().nodes; - nodes.forEach((node) => { - const nodeData: NodeDataType = node.data as NodeDataType; - if (isOutputNode(nodeData)) { - inputs.push({ type: nodeData.type, id: nodeData.id }); - } - }); - set({ - inputIds: inputs.map((input) => input.id), - inputTypes: inputs.map((input) => input.type), - }); - return inputs; - }, })); export default useFlowStore; diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 5b5ac495f..69e59c08d 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -38,6 +38,7 @@ export type FlowStoreType = { inputTypes: string[]; outputTypes: string[]; inputIds: string[]; + hasIO: boolean; outputIds: string[]; setFlowPool: (flowPool: FlowPoolType) => void; addDataToFlowPool: (data: any, nodeId: string) => void; @@ -84,8 +85,5 @@ export type FlowStoreType = { onConnect: (connection: Connection) => void; unselectAll: () => void; buildFlow: (nodeId?: string) => Promise; - checkInputAndOutput: () => boolean; getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport }; - getOutputs: () => { type: string; id: string }[]; - getInputs: () => { type: string; id: string }[]; };