From 48995bc3958dff55e63a07de4b11e9c14f59d0df Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 29 Mar 2023 20:27:39 -0300 Subject: [PATCH 1/4] implemented inputFile component --- .../components/parameterComponent/index.tsx | 16 ++++- .../components/inputFileComponent/index.tsx | 58 +++++++++++++++++++ src/frontend/src/contexts/tabsContext.tsx | 3 +- src/frontend/src/types/flow/index.ts | 1 + 4 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 src/frontend/src/components/inputFileComponent/index.tsx diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index c4b4346fa..203907ff1 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -11,6 +11,7 @@ import { ParameterComponentType } from "../../../../types/components"; import FloatComponent from "../../../../components/floatComponent"; import Dropdown from "../../../../components/dropdownComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent"; +import InputFileComponent from "../../../../components/inputFileComponent"; export default function ParameterComponent({ left, @@ -54,7 +55,12 @@ export default function ParameterComponent({ {title} {required ? " *" : ""} - {left && (type === "str" || type === "bool" || type === "float"||type=="code") ? ( + {left && + (type === "str" || + type === "bool" || + type === "float" || + type === "code" || + type === "file") ? ( <> ) : ( @@ -148,6 +154,14 @@ export default function ParameterComponent({ data.node.template[name].value = t; }} /> + ) : left === true && type === "file" ? ( + { + data.node.template[name].value = t; + }} + > ) : ( <> )} diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx new file mode 100644 index 000000000..c1dfae10c --- /dev/null +++ b/src/frontend/src/components/inputFileComponent/index.tsx @@ -0,0 +1,58 @@ +import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline"; +import { useContext, useEffect, useState } from "react"; +import { TextAreaComponentType } from "../../types/components"; + +export default function InputFileComponent({ + value, + onChange, + disabled, +}: TextAreaComponentType) { + const [myValue, setMyValue] = useState(value); + useEffect(() => { + if (disabled) { + setMyValue(""); + onChange(""); + } + }, [disabled, onChange]); + + const handleButtonClick = () => { + const input = document.createElement("input"); + input.type = "file"; + // input.accept = ".yaml"; + input.style.display = "none"; + input.onchange = (e: Event) => { + const file = (e.target as HTMLInputElement).files?.[0]; + //check file type + // file.name.endsWith(".yaml") + if (file) { + setMyValue(file.name); + onChange(file.name); + } + }; + input.click(); + }; + + return ( +
+
+ + {myValue !== "" ? myValue : "No file"} + + +
+
+ ); +} diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 10c0b943e..1c75a1466 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -16,7 +16,7 @@ const TabsContextInitialValue: TabsContextType = { uploadFlow: () => {}, lockChat: false, setLockChat:(prevState:boolean)=>{}, - hardReset:()=>{} + hardReset:()=>{}, }; export const TabsContext = createContext( @@ -142,6 +142,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { id: id.toString(), data, chat: flow ? flow.chat : [], + files:{} }; // Increment the ID counter. diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index 50b0cab7a..90dc6ac5f 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -8,6 +8,7 @@ export type FlowType = { data: ReactFlowJsonObject; chat: Array; description:string; + files:{[char: string]: string}; }; export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType} export type NodeDataType = {type:string,node?:APIClassType,id:string,value:any} \ No newline at end of file From a38d71bc4f87dcc42370a16c6da3f119f9ccd974 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 29 Mar 2023 21:09:24 -0300 Subject: [PATCH 2/4] ui ready, need to implement dinamic file type check --- .../components/parameterComponent/index.tsx | 4 ++-- .../src/CustomNodes/GenericNode/index.tsx | 1 + .../components/codeAreaComponent/index.tsx | 2 +- .../components/inputFileComponent/index.tsx | 23 +++++++++++-------- 4 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 203907ff1..ab4ae8dca 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -154,10 +154,10 @@ export default function ParameterComponent({ data.node.template[name].value = t; }} /> - ) : left === true && type === "file" ? ( + ) : (left === true && type === "file")||data.type==="JsonSpec" ? ( { data.node.template[name].value = t; }} diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 6e3aa6e67..368b3c2ed 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -22,6 +22,7 @@ export default function GenericNode({ const showError = useRef(true); const { types, deleteNode } = useContext(typesContext); const Icon = nodeIcons[types[data.type]]; + console.log(data) if (!Icon) { if (showError.current) { setErrorData({ diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 95aa720b0..756296970 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/src/frontend/src/components/codeAreaComponent/index.tsx @@ -23,7 +23,7 @@ export default function CodeAreaComponent({
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index c1dfae10c..f8a9f942e 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/src/frontend/src/components/inputFileComponent/index.tsx @@ -1,5 +1,6 @@ import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { useContext, useEffect, useState } from "react"; +import { alertContext } from "../../contexts/alertContext"; import { TextAreaComponentType } from "../../types/components"; export default function InputFileComponent({ @@ -8,6 +9,7 @@ export default function InputFileComponent({ disabled, }: TextAreaComponentType) { const [myValue, setMyValue] = useState(value); + const { setErrorData } = useContext(alertContext); useEffect(() => { if (disabled) { setMyValue(""); @@ -18,15 +20,20 @@ export default function InputFileComponent({ const handleButtonClick = () => { const input = document.createElement("input"); input.type = "file"; - // input.accept = ".yaml"; + input.accept = ".json"; input.style.display = "none"; + input.multiple = false; input.onchange = (e: Event) => { const file = (e.target as HTMLInputElement).files?.[0]; - //check file type - // file.name.endsWith(".yaml") - if (file) { + if (file && file.name.endsWith(".json")) { setMyValue(file.name); onChange(file.name); + } else { + setErrorData({ + title: + "Please select a valid file. Only files this files are allowed:", + list: ["*.json"], + }); } }; input.click(); @@ -41,16 +48,14 @@ export default function InputFileComponent({
{myValue !== "" ? myValue : "No file"} -
From 7529892ebc1a7a214806371f038d193f54b6a684 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 29 Mar 2023 22:51:46 -0300 Subject: [PATCH 3/4] file component almost ready, need to implemente backend connection --- .../GenericNode/components/parameterComponent/index.tsx | 4 +++- src/frontend/src/CustomNodes/GenericNode/index.tsx | 1 - src/frontend/src/components/inputFileComponent/index.tsx | 9 +++++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index ab4ae8dca..aaaade2fa 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -159,7 +159,9 @@ export default function ParameterComponent({ disabled={disabled} value={data.node.template[name]?.value ?? ""} onChange={(t: string) => { - data.node.template[name].value = t; + if(data.node.template[name]?.value){ + data.node.template[name].value = t; + } }} > ) : ( diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 368b3c2ed..6e3aa6e67 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -22,7 +22,6 @@ export default function GenericNode({ const showError = useRef(true); const { types, deleteNode } = useContext(typesContext); const Icon = nodeIcons[types[data.type]]; - console.log(data) if (!Icon) { if (showError.current) { setErrorData({ diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index f8a9f942e..b7a8a0bf0 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/src/frontend/src/components/inputFileComponent/index.tsx @@ -17,6 +17,12 @@ export default function InputFileComponent({ } }, [disabled, onChange]); + function attachFile(fileReadEvent: ProgressEvent) { + fileReadEvent.preventDefault(); + const file = fileReadEvent.target.result; + console.log(file); + } + const handleButtonClick = () => { const input = document.createElement("input"); input.type = "file"; @@ -25,7 +31,10 @@ export default function InputFileComponent({ input.multiple = false; input.onchange = (e: Event) => { const file = (e.target as HTMLInputElement).files?.[0]; + const fileData = new FileReader(); + fileData.onload = attachFile; if (file && file.name.endsWith(".json")) { + fileData.readAsDataURL(file); setMyValue(file.name); onChange(file.name); } else { From 119585b2f09df62211d81907501e071ffae273df Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 29 Mar 2023 22:52:40 -0300 Subject: [PATCH 4/4] removed file section from flow structure --- src/frontend/src/contexts/tabsContext.tsx | 1 - src/frontend/src/types/flow/index.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 1c75a1466..6626ff0cc 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -142,7 +142,6 @@ export function TabsProvider({ children }: { children: ReactNode }) { id: id.toString(), data, chat: flow ? flow.chat : [], - files:{} }; // Increment the ID counter. diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index 90dc6ac5f..50b0cab7a 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -8,7 +8,6 @@ export type FlowType = { data: ReactFlowJsonObject; chat: Array; description:string; - files:{[char: string]: string}; }; export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType} export type NodeDataType = {type:string,node?:APIClassType,id:string,value:any} \ No newline at end of file