From 44d15c5582dc764778e19a6e3c5fc57e03295445 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 24 Jan 2024 15:00:14 -0300 Subject: [PATCH] Refactor flowStore and add getInputs and getOutputs functions --- src/frontend/src/components/IOview/index.tsx | 4 +- .../src/components/chatComponent/index.tsx | 13 ++- src/frontend/src/stores/flowStore.ts | 80 +++++++------------ src/frontend/src/types/flow/index.ts | 1 + src/frontend/src/types/zustand/flow/index.ts | 2 + src/frontend/src/utils/storeUtils.ts | 19 ++++- 6 files changed, 65 insertions(+), 54 deletions(-) diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx index cb63c2f8a..7cba3b23a 100644 --- a/src/frontend/src/components/IOview/index.tsx +++ b/src/frontend/src/components/IOview/index.tsx @@ -10,10 +10,12 @@ import { Badge } from "../ui/badge"; import { Textarea } from "../ui/textarea"; export default function IOView(): JSX.Element { - const { inputIds, outputIds } = useFlowStore(); + const inputIds = useFlowStore((state) => state.inputIds); + const outputIds = useFlowStore((state) => state.outputIds); const nodes = useFlowStore((state) => state.nodes); const setNode = useFlowStore((state) => state.setNode); const options = inputIds.concat(outputIds); + console.log(options); const [selectedView, setSelectedView] = useState( handleSelectChange(options[0]) ); diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index 5d0416ff7..fb3ad5001 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -15,9 +15,16 @@ export default function Chat({ flow }: ChatType): JSX.Element { const checkInputAndOutput = useFlowStore( (state) => state.checkInputAndOutput ); + const getOutputs = useFlowStore((state) => state.getOutputs); + const getInputs = useFlowStore((state) => state.getInputs); const [showTrigger, setShowTrigger] = useState(checkInputAndOutput()); useEffect(() => { - setShowTrigger(checkInputAndOutput()); + const haveIO = checkInputAndOutput(); + setShowTrigger(haveIO); + if (haveIO) { + getOutputs(); + getInputs(); + } }, [nodes]); useEffect(() => { @@ -46,7 +53,9 @@ export default function Chat({ flow }: ChatType): JSX.Element { {showTrigger && ( - +
setOpen(true)}> + +
{/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */} diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index f28fcb5db..6572e3b24 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -330,56 +330,6 @@ const useFlowStore = create((set, get) => ({ }); }); }, - getInputTypes: () => { - let inputType: string[] = []; - const nodes = get().nodes; - 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: () => { - let outputType: string[] = []; - const nodes = get().nodes; - nodes.forEach((node) => { - const nodeData: NodeDataType = node.data as NodeDataType; - if (isOutputNode(nodeData)) { - outputType.push(nodeData.type); - } - }); - set({ outputTypes: outputType }); - return outputType; - }, - getInputIds: () => { - let inputIds: string[] = []; - const nodes = get().nodes; - nodes.forEach((node) => { - const nodeData: NodeDataType = node.data as NodeDataType; - if (isInputNode(nodeData)) { - inputIds.push(nodeData.id); - } - }); - set({ inputIds }); - return inputIds; - }, - getOutputIds: () => { - let outputIds: string[] = []; - const nodes = get().nodes; - - nodes.forEach((node) => { - const nodeData: NodeDataType = node.data as NodeDataType; - if (isOutputNode(nodeData)) { - outputIds.push(nodeData.id); - } - }); - set({ outputIds }); - return outputIds; - }, buildFlow: async (nodeId?: string) => { function handleBuildUpdate(data: any) { get().addDataToFlowPool(data.data[data.id], data.id); @@ -419,6 +369,36 @@ 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/flow/index.ts b/src/frontend/src/types/flow/index.ts index 783a8963d..544e78a45 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -9,6 +9,7 @@ export type FlowType = { style?: FlowStyleType; is_component?: boolean; last_tested_version?: string; + parent?: string; }; export type NodeType = { diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 522251cff..5b5ac495f 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -86,4 +86,6 @@ export type FlowStoreType = { buildFlow: (nodeId?: string) => Promise; checkInputAndOutput: () => boolean; getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport }; + getOutputs: () => { type: string; id: string }[]; + getInputs: () => { type: string; id: string }[]; }; diff --git a/src/frontend/src/utils/storeUtils.ts b/src/frontend/src/utils/storeUtils.ts index 8738bac75..cfdfe5096 100644 --- a/src/frontend/src/utils/storeUtils.ts +++ b/src/frontend/src/utils/storeUtils.ts @@ -1,5 +1,7 @@ import { cloneDeep } from "lodash"; -import { FlowType } from "../types/flow"; +import { Node } from "reactflow"; +import { FlowType, NodeDataType } from "../types/flow"; +import { isInputNode, isOutputNode } from "./reactflowUtils"; export default function cloneFLowWithParent( flow: FlowType, @@ -21,3 +23,18 @@ export function getTagsIds( .map((tag) => tagListId.find((tagObj) => tagObj.name === tag))! .map((tag) => tag!.id); } + +export function getInputsAndOutputs(nodes: Node[]) { + let inputs: { type: string; id: string }[] = []; + let outputs: { type: string; id: string }[] = []; + nodes.forEach((node) => { + const nodeData: NodeDataType = node.data as NodeDataType; + if (isOutputNode(nodeData)) { + outputs.push({ type: nodeData.type, id: nodeData.id }); + } + if (isInputNode(nodeData)) { + inputs.push({ type: nodeData.type, id: nodeData.id }); + } + }); + return { inputs, outputs }; +}