From c954f8d33800fcbe1361a498a7d3ba15c44a0b12 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 29 Jun 2023 10:44:32 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(AccordionComponent):=20fix?= =?UTF-8?q?=20the=20logic=20to=20set=20the=20initial=20value=20of=20the=20?= =?UTF-8?q?accordion=20based=20on=20the=20open=20prop=20array=20=E2=9C=A8?= =?UTF-8?q?=20feat(AccordionComponent):=20add=20support=20for=20multiple?= =?UTF-8?q?=20open=20accordions=20by=20changing=20the=20open=20prop=20from?= =?UTF-8?q?=20boolean=20to=20string=20array=20=F0=9F=90=9B=20fix(constants?= =?UTF-8?q?.tsx):=20remove=20escape=20characters=20from=20the=20JSON=20str?= =?UTF-8?q?ingified=20tweaks=20to=20fix=20parsing=20issues=20=E2=9C=A8=20f?= =?UTF-8?q?eat(constants.tsx):=20add=20support=20for=20tweaks=20dictionary?= =?UTF-8?q?=20in=20the=20getCurlCode=20and=20getPythonCode=20functions=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(ApiModal):=20fix=20the=20logic=20to=20set=20?= =?UTF-8?q?the=20initial=20value=20of=20the=20openAccordion=20state=20base?= =?UTF-8?q?d=20on=20the=20getTweak=20array=20=E2=9C=A8=20feat(ApiModal):?= =?UTF-8?q?=20add=20support=20for=20opening=20accordions=20based=20on=20th?= =?UTF-8?q?e=20getTweak=20array=20when=20switching=20to=20the=20Tweak=20ta?= =?UTF-8?q?b=20=F0=9F=90=9B=20fix(ApiModal):=20fix=20the=20logic=20to=20fi?= =?UTF-8?q?lter=20and=20remove=20empty=20tweaks=20from=20the=20tweak.curre?= =?UTF-8?q?nt=20array=20=E2=9C=A8=20feat(ApiModal):=20add=20support=20for?= =?UTF-8?q?=20adding=20new=20tweaks=20to=20the=20tweak.current=20array=20a?= =?UTF-8?q?nd=20generating=20Python=20API=20code=20=F0=9F=90=9B=20fix(ApiM?= =?UTF-8?q?odal):=20fix=20the=20logic=20to=20get=20the=20value=20of=20a=20?= =?UTF-8?q?specific=20tweak=20template=20based=20on=20the=20node=20id=20an?= =?UTF-8?q?d=20template=20name=20=E2=9C=A8=20feat(ApiModal):=20add=20suppo?= =?UTF-8?q?rt=20for=20opening=20accordions=20based=20on=20the=20tweak.curr?= =?UTF-8?q?ent=20array=20when=20switching=20to=20the=20Tweak=20tab=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(types):=20add=20missing=20newline=20at=20the?= =?UTF-8?q?=20end=20of=20the=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/package-lock.json | 15 ++--- .../components/AccordionComponent/index.tsx | 16 ++++- src/frontend/src/constants.tsx | 6 +- src/frontend/src/modals/ApiModal/index.tsx | 63 ++++++++++--------- src/frontend/src/types/components/index.ts | 2 +- 5 files changed, 61 insertions(+), 41 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 1c185a3b9..a4128b48e 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -3563,7 +3563,7 @@ "version": "16.18.12", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz", "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==", - "devOptional": true + "dev": true }, "node_modules/@types/parse-json": { "version": "4.0.0", @@ -5633,6 +5633,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -6992,9 +6993,9 @@ } }, "node_modules/log-symbols/node_modules/chalk": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz", - "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", "engines": { "node": "^12.17.0 || ^14.13 || >=16.0.0" }, @@ -8262,9 +8263,9 @@ } }, "node_modules/ora/node_modules/chalk": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz", - "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", "engines": { "node": "^12.17.0 || ^14.13 || >=16.0.0" }, diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index c1174269a..825a2c19d 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -15,9 +15,21 @@ import { export default function AccordionComponent({ trigger, children, - open = false, + open = [], }: AccordionComponentType) { - const [value, setValue] = useState(!open ? "" : trigger); + const [value, setValue] = useState(open.length == 0 ? "" : getOpenAccordion()); + + function getOpenAccordion(){ + let value = ""; + open.forEach(el => { + if(el == trigger){ + value = trigger; + } + }) + + return value; + } + function handleClick() { value == "" ? setValue(trigger) : setValue(""); } diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index 4aee27d83..9bfb4bcd5 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -71,7 +71,7 @@ FLOW_ID = "${flowId}" # You can tweak the flow by adding a tweaks dictionary # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}} TWEAKS = ${ - tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2) } def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict: @@ -111,7 +111,7 @@ export const getCurlCode = (flow: FlowType, tweak?): string => { }/api/v1/process/${flowId} \\ -H 'Content-Type: application/json' \\ -d '{"inputs": {"input": message}, "tweaks": ${ - tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2) }}'`; }; /** @@ -124,7 +124,7 @@ export const getPythonCode = (flow: FlowType, tweak?): string => { const tweaks = buildTweaks(flow); return `from langflow import load_flow_from_json TWEAKS = ${ - tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2) } flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS) # Now you can use it like any chain diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 1000a52d6..6f0014f33 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -58,7 +58,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { const [activeTab, setActiveTab] = useState("0"); const [isCopied, setIsCopied] = useState(false); const [enabled, setEnabled] = useState(null); - const [openAccordion, setOpenAccordion] = useState(false); + const [openAccordion, setOpenAccordion] = useState([]); const tweak = useRef([]); const tweaksList = useRef([]); const { setTweak, getTweak } = useContext(TabsContext); @@ -87,8 +87,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) { useEffect(() => { if (closeEdit !== "") { setActiveTab("3"); - setOpenAccordion(true); tweak.current = getTweak; + openAccordions(); + } + else{ + startTweaks(); } }, [closeEdit]); @@ -100,6 +103,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) { useEffect(() => { filterNodes(); }, []); + + function startTweaks() { + tweak.current.push(buildTweaks(flow)); + } + function filterNodes() { let arrNodesWithValues = []; @@ -176,25 +184,13 @@ export default function ApiModal({ flow }: { flow: FlowType }) { if (existingTweak) { existingTweak[tw][template["name"]] = changes; - if (template.list === true) { - if (changes.length === 0) { - if (existingTweak[tw] && existingTweak[tw][template["name"]]) { - delete existingTweak[tw][template["name"]]; - } - } - } - if (existingTweak[tw][template["name"]] == template.value) { tweak.current.forEach((element) => { - if (element[tw] && element[tw][template["name"]]) { - delete element[tw][template["name"]]; - } if (element[tw] && Object.keys(element[tw])?.length === 0) { tweak.current = tweak.current.filter((obj) => { const prop = obj[Object.keys(obj)[0]].prop; return prop !== undefined && prop !== null && prop !== ""; }); - delete element[tw]; } }); } @@ -205,6 +201,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { }, }; tweak.current.push(newTweak); + } const pythonApiCode = getPythonApiCode(flow, tweak.current); @@ -232,17 +229,16 @@ export default function ApiModal({ flow }: { flow: FlowType }) { if (getTweak.length > 0) { for (const obj of getTweak) { - // Obtém a chave do objeto interno - const key = Object.keys(obj)[0]; - // Obtém o valor do objeto interno - const value = obj[key]; - if (key == node["id"]) { - Object.keys(value).forEach((key) => { - if (key == template["name"]) { - returnValue = value[key]; - } - }); - } + Object.keys(obj).forEach(key =>{ + const value = obj[key]; + if (key == node["id"]) { + Object.keys(value).forEach((key) => { + if (key == template["name"]) { + returnValue = value[key]; + } + }); + } + }) } } else { return value ?? ""; @@ -250,6 +246,18 @@ export default function ApiModal({ flow }: { flow: FlowType }) { return returnValue; } + function openAccordions(){ + let accordionsToOpen = []; + tweak.current.forEach((el) => { + Object.keys(el).forEach((key) => { + if (Object.keys(el[key]).length > 0) { + accordionsToOpen.push(key) + setOpenAccordion(accordionsToOpen); + } + }); + }); + } + return ( @@ -270,9 +278,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) { className="w-full h-full overflow-hidden text-center bg-muted rounded-md border" onValueChange={(value) => { setActiveTab(value); - - if (tweak.current.length > 0) { - setOpenAccordion(true); + if(value === "3"){ + openAccordions() } }} > diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 4c936cabe..347554682 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -121,6 +121,6 @@ export type RadialProgressType = { export type AccordionComponentType = { children?: ReactElement; - open?: boolean; + open?: string[]; trigger?: string; }; \ No newline at end of file