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

Merge branch 'dynamicNode' into python_custom_node_component

Browse source
This commit is contained in:
gustavoschaedler 2023-06-23 17:18:23 +01:00
commit 2eb677f1db
7 changed files with 90 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -227,6 +227,8 @@ export default function ParameterComponent({
</div>
) : left === true && type === "code" ? (
<CodeAreaComponent
setTemplate={(template)=>{data.node.template = template}}
template={data.node.template}
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue}

2
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -62,7 +62,7 @@ export default function GenericNode({
}
useEffect(() => {}, [closePopUp, data.node.template]);
console.log({data})
return (
<>
<NodeToolbar>

10
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import CodeAreaModal from "../../modals/codeAreaModal";
import TextAreaModal from "../../modals/textAreaModal";
import { TextAreaComponentType } from "../../types/components";
import { CodeAreaComponentType, TextAreaComponentType } from "../../types/components";
import { INPUT_STYLE } from "../../constants";
export default function CodeAreaComponent({
@ -11,7 +11,9 @@ export default function CodeAreaComponent({
onChange,
disabled,
editNode = false,
}: TextAreaComponentType) {
template,
setTemplate,
}: CodeAreaComponentType) {
const [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext);
useEffect(() => {
@ -37,6 +39,8 @@ export default function CodeAreaComponent({
openPopUp(
<CodeAreaModal
value={myValue}
template={template}
setTemplate={setTemplate}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
@ -59,7 +63,9 @@ export default function CodeAreaComponent({
onClick={() => {
openPopUp(
<CodeAreaModal
setTemplate={setTemplate}
value={myValue}
template={template}
setValue={(t: string) => {
setMyValue(t);
onChange(t);

6
src/frontend/src/controllers/API/index.ts
View file

@ -3,6 +3,8 @@ import {
PromptTypeAPI,
errorsTypeAPI,
InitTypeAPI,
TemplateVariableType,
APITemplateType,
} from "./../../types/api/index";
import { APIObjectType, sendAllProps } from "../../types/api/index";
import axios, { AxiosResponse } from "axios";
@ -319,3 +321,7 @@ export async function postBuildInit(
): Promise<AxiosResponse<InitTypeAPI>> {
return await axios.post(`/api/v1/build/init`, flow);
}
export async function UpdateTemplate(type:string, template:APITemplateType):Promise<AxiosResponse<{template:APITemplateType}>>{
return await axios.get(`/dynamic_node`);
}

102
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -8,7 +8,7 @@ import "ace-builds/src-noconflict/theme-twilight";
import "ace-builds/src-noconflict/ext-language_tools";
// import "ace-builds/webpack-resolver";
import { darkContext } from "../../contexts/darkContext";
import { postValidateCode } from "../../controllers/API";
import { UpdateTemplate, postValidateCode } from "../../controllers/API";
import { alertContext } from "../../contexts/alertContext";
import { TabsContext } from "../../contexts/tabsContext";
import {
@ -22,16 +22,23 @@ import {
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
import Loading from "../../components/ui/loading";
import { APITemplateType } from "../../types/api";
export default function CodeAreaModal({
value,
setValue,
template,
setTemplate
}: {
setValue: (value: string) => void;
value: string;
template: APITemplateType,
setTemplate: (template: APITemplateType) => void;
}) {
const [open, setOpen] = useState(true);
const [code, setCode] = useState(value);
const [loading, setLoading] = useState(false);
const { dark } = useContext(darkContext);
const { setErrorData, setSuccessData } = useContext(alertContext);
const { closePopUp } = useContext(PopUpContext);
@ -44,6 +51,58 @@ export default function CodeAreaModal({
}, 300);
}
}
function handleClick() {
setLoading(true);
postValidateCode(code)
.then((apiReturn) => {
setLoading(false);
if (apiReturn.data) {
let importsErrors = apiReturn.data.imports.errors;
let funcErrors = apiReturn.data.function.errors;
if (funcErrors.length === 0 && importsErrors.length === 0) {
setSuccessData({
title: "Code is ready to run",
});
// setValue(code);
} else {
if (funcErrors.length !== 0) {
setErrorData({
title: "There is an error in your function",
list: funcErrors,
});
}
if (importsErrors.length !== 0) {
setErrorData({
title: "There is an error in your imports",
list: importsErrors,
});
}
}
} else {
setErrorData({
title: "Something went wrong, please try again",
});
}
})
.catch((_) => {
setLoading(false);
setErrorData({
title:
"There is something wrong with this code, please review it",
})
}
);
UpdateTemplate('code',template).then((apiReturn) => {
const data = apiReturn.data;
if (data.template) {
console.log('updated')
setTemplate(data.template);
setModalOpen(false);
}
})
}
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
@ -80,47 +139,10 @@ export default function CodeAreaModal({
<DialogFooter>
<Button
className="mt-3"
onClick={() => {
postValidateCode(code)
.then((apiReturn) => {
if (apiReturn.data) {
let importsErrors = apiReturn.data.imports.errors;
let funcErrors = apiReturn.data.function.errors;
if (funcErrors.length === 0 && importsErrors.length === 0) {
setSuccessData({
title: "Code is ready to run",
});
setModalOpen(false);
setValue(code);
} else {
if (funcErrors.length !== 0) {
setErrorData({
title: "There is an error in your function",
list: funcErrors,
});
}
if (importsErrors.length !== 0) {
setErrorData({
title: "There is an error in your imports",
list: importsErrors,
});
}
}
} else {
setErrorData({
title: "Something went wrong, please try again",
});
}
})
.catch((_) =>
setErrorData({
title:
"There is something wrong with this code, please review it",
})
);
}}
onClick={handleClick}
type="submit"
>
{/* {loading?(<Loading/>):'Check & Save'} */}
Check & Save
</Button>
</DialogFooter>

10
src/frontend/src/types/components/index.ts
View file

@ -1,6 +1,7 @@
import { ForwardRefExoticComponent, ReactElement, ReactNode } from "react";
import { NodeDataType } from "../flow/index";
import { typesContextType } from "../typesContext";
import { APITemplateType } from "../api";
export type InputComponentType = {
value: string;
disabled?: boolean;
@ -50,6 +51,15 @@ export type TextAreaComponentType = {
editNode?: boolean;
};
export type CodeAreaComponentType = {
disabled: boolean;
onChange: (value: string[] | string) => void;
value: string;
editNode?: boolean;
template: APITemplateType;
setTemplate: (value: APITemplateType) => void;
};
export type FileComponentType = {
disabled: boolean;
onChange: (value: string[] | string) => void;

2
src/frontend/vite.config.ts
View file

@ -1,7 +1,7 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import svgr from "vite-plugin-svgr";
const apiRoutes = ["^/api/v1/", "/health"];
const apiRoutes = ["^/api/v1/", "/health","/dynamic_node"];
// Use environment variable to determine the target.
const target = process.env.VITE_PROXY_TARGET || "http://127.0.0.1:7860";