jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🐛 fix(ApiModal/index.tsx): fix linting issues and improve code readability

Browse source 
✨ feat(ApiModal/index.tsx): add support for displaying tweaks code in a separate tab if there are any tweaks present
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-29 14:17:55 -03:00
commit 7c777bf692
2 changed files with 57 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/frontend/package-lock.json generated
View file

@ -3563,7 +3563,7 @@
"version": "16.18.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz",
"integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==",
"dev": true
"devOptional": true
},
"node_modules/@types/parse-json": {
"version": "4.0.0",
@ -5633,7 +5633,6 @@
"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": [

115
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -75,6 +75,55 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
}, 2000);
});
};
const pythonApiCode = getPythonApiCode(flow, tweak.current);
const curl_code = getCurlCode(flow, tweak.current);
const pythonCode = getPythonCode(flow, tweak.current);
const tweaksCode = buildTweaks(flow);
const tabs = [
{
name: "cURL",
mode: "bash",
image: "https://curl.se/logo/curl-symbol-transparent.png",
code: curl_code,
},
{
name: "Python API",
mode: "python",
image:
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
code: pythonApiCode,
},
{
name: "Python Code",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode,
},
];
useEffect(() => {
if (closeEdit !== "") {
setActiveTab("3");
tweak.current = getTweak;
openAccordions();
} else {
startTweaks();
}
}, [closeEdit]);
useEffect(() => {
filterNodes();
}, []);
if (Object.keys(tweaksCode).length > 0) {
tabs.push({
name: "Tweaks",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode,
});
}
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
@ -84,26 +133,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
}
}
useEffect(() => {
if (closeEdit !== "") {
setActiveTab("3");
tweak.current = getTweak;
openAccordions();
}
else{
startTweaks();
}
}, [closeEdit]);
const pythonApiCode = getPythonApiCode(flow, tweak.current);
const curl_code = getCurlCode(flow, tweak.current);
const pythonCode = getPythonCode(flow, tweak.current);
const tweaksCode = buildTweaks(flow);
useEffect(() => {
filterNodes();
}, []);
function startTweaks() {
tweak.current.push(buildTweaks(flow));
}
@ -135,37 +164,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
});
}
const tabs = [
{
name: "cURL",
mode: "bash",
image: "https://curl.se/logo/curl-symbol-transparent.png",
code: curl_code,
},
{
name: "Python API",
mode: "python",
image:
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
code: pythonApiCode,
},
{
name: "Python Code",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode,
},
];
if (Object.keys(tweaksCode).length > 0) {
tabs.push({
name: "Tweaks",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode,
});
}
function buildTweakObject(tw, changes, template) {
if (template.type === "float") {
changes = parseFloat(changes);
@ -201,7 +199,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
},
};
tweak.current.push(newTweak);
}
const pythonApiCode = getPythonApiCode(flow, tweak.current);
@ -229,7 +226,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
if (getTweak.length > 0) {
for (const obj of getTweak) {
Object.keys(obj).forEach(key =>{
Object.keys(obj).forEach((key) => {
const value = obj[key];
if (key == node["id"]) {
Object.keys(value).forEach((key) => {
@ -238,7 +235,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
}
});
}
})
});
}
} else {
return value ?? "";
@ -246,16 +243,16 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
return returnValue;
}
function openAccordions(){
function openAccordions() {
let accordionsToOpen = [];
tweak.current.forEach((el) => {
Object.keys(el).forEach((key) => {
if (Object.keys(el[key]).length > 0) {
accordionsToOpen.push(key)
accordionsToOpen.push(key);
setOpenAccordion(accordionsToOpen);
}
});
});
});
}
return (
@ -278,8 +275,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(value === "3"){
openAccordions()
if (value === "3") {
openAccordions();
}
}}
>