From fe2f30d5c5110c88c57fed9e354e82f1be3ee21c Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 22 Mar 2024 17:18:29 +0100 Subject: [PATCH] Added global input component to modularize --- langflow1.db | Bin 90112 -> 0 bytes .../components/parameterComponent/index.tsx | 152 ++---------------- .../components/codeTabsComponent/index.tsx | 105 +++++------- .../components/inputGlobalComponent/index.tsx | 131 +++++++++++++++ .../src/modals/EditNodeModal/index.tsx | 138 ++++++---------- 5 files changed, 233 insertions(+), 293 deletions(-) delete mode 100644 langflow1.db create mode 100644 src/frontend/src/components/inputGlobalComponent/index.tsx diff --git a/langflow1.db b/langflow1.db deleted file mode 100644 index 2b39da5dd15e9197718ae2575b99af51f65a1115..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 90112 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 X9RKrzoX<;g9xe;;H_y`X state.nodes); const edges = useFlowStore((state) => state.edges); const setNode = useFlowStore((state) => state.setNode); - const globalVariablesEntries = useGlobalVariablesStore( - (state) => state.globalVariablesEntries - ); - - const getVariableId = useGlobalVariablesStore((state) => state.getVariableId); - const removeGlobalVariable = useGlobalVariablesStore( - (state) => state.removeGlobalVariable - ); - function handleDelete(key: string) { - const id = getVariableId(key); - if (id !== undefined) { - deleteGlobalVariable(id) - .then((_) => { - removeGlobalVariable(key); - if ( - data?.node?.template[name].value === key && - data?.node?.template[name].load_from_db - ) { - handleOnNewValue(""); - setNode(data.id, (oldNode) => { - let newNode = cloneDeep(oldNode); - newNode.data = { - ...newNode.data, - }; - newNode.data.node.template[name].load_from_db = false; - return newNode; - }); - } - }) - .catch((error) => { - let responseError = error as ResponseErrorDetailAPI; - setErrorData({ - title: "Error deleting variable", - list: [responseError.response.data.detail ?? "Unknown error"], - }); - }); - } else { - setErrorData({ - title: "Error deleting variable", - list: [cn("ID not found for variable: ", key)], - }); - } - } const [isLoading, setIsLoading] = useState(false); const flow = currentFlow?.data?.nodes ?? null; @@ -169,24 +114,6 @@ export default function ParameterComponent({ renderTooltips(); }; - useEffect(() => { - if (data.node?.template[name]) - if ( - !globalVariablesEntries.includes(data.node?.template[name].value) && - data.node?.template[name].load_from_db - ) { - handleOnNewValue(""); - setNode(data.id, (oldNode) => { - let newNode = cloneDeep(oldNode); - newNode.data = { - ...newNode.data, - }; - newNode.data.node.template[name].load_from_db = false; - return newNode; - }); - } - }, [globalVariablesEntries]); - useEffect(() => { async function fetchData() { if ( @@ -609,80 +536,21 @@ export default function ParameterComponent({ (data.node?.template[name].refresh_button ? "w-5/6" : "") } > - - - - - } - optionButton={(option) => ( - { - e.stopPropagation(); - e.preventDefault(); - handleDelete(option); - }} - description={'variable "' + option + '"'} - asChild - > - - - )} - selectedOption={ - data?.node?.template[name].load_from_db ?? false - ? data?.node?.template[name].value - : "" - } - setSelectedOption={(value) => { - handleOnNewValue(value); + onChange={handleOnNewValue} + setDb={(value) => { setNode(data.id, (oldNode) => { let newNode = cloneDeep(oldNode); newNode.data = { ...newNode.data, }; - newNode.data.node.template[name].load_from_db = - value === "" ? false : true; - return newNode; - }); - }} - onChange={(value) => { - handleOnNewValue(value); - setNode(data.id, (oldNode) => { - let newNode = cloneDeep(oldNode); - newNode.data = { - ...newNode.data, - }; - newNode.data.node.template[name].load_from_db = false; + newNode.data.node.template[name].load_from_db = value; return newNode; }); }} + name={name} + data={data} /> {data.node?.template[name].refresh_button && ( diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index 66b4d64c9..fc33982d2 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/src/frontend/src/components/codeTabsComponent/index.tsx @@ -6,7 +6,6 @@ import AccordionComponent from "../../components/AccordionComponent"; import CodeAreaComponent from "../../components/codeAreaComponent"; import Dropdown from "../../components/dropdownComponent"; import FloatComponent from "../../components/floatComponent"; -import InputComponent from "../../components/inputComponent"; import InputFileComponent from "../../components/inputFileComponent"; import InputListComponent from "../../components/inputListComponent"; import IntComponent from "../../components/intComponent"; @@ -28,10 +27,8 @@ import { TabsTrigger, } from "../../components/ui/tabs"; import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants"; -import useAlertStore from "../../stores/alertStore"; import { useDarkStore } from "../../stores/darkStore"; import useFlowStore from "../../stores/flowStore"; -import { useGlobalVariablesStore } from "../../stores/globalVariables"; import { codeTabsPropsType } from "../../types/components"; import { convertObjToArray, @@ -41,6 +38,7 @@ import { import { classNames } from "../../utils/utils"; import DictComponent from "../dictComponent"; import IconComponent from "../genericIconComponent"; +import InputGlobalComponent from "../inputGlobalComponent"; import KeypairListComponent from "../keypairListComponent"; export default function CodeTabsComponent({ @@ -56,10 +54,7 @@ export default function CodeTabsComponent({ const [openAccordion, setOpenAccordion] = useState([]); const dark = useDarkStore((state) => state.dark); const unselectAll = useFlowStore((state) => state.unselectAll); - const globalVariablesEntries = useGlobalVariablesStore( - (state) => state.globalVariablesEntries - ); - const setNoticeData = useAlertStore((state) => state.setNoticeData); + const setNode = useFlowStore((state) => state.setNode); const [errorDuplicateKey, setErrorDuplicateKey] = useState(false); @@ -350,63 +345,30 @@ export default function CodeTabsComponent({ /> ) : ( - { - setData((old) => { - let newInputList = - cloneDeep(old); - newInputList![ - i - ].data.node.template[ - templateField - ].value = target; - if ( - globalVariablesEntries.includes( - target - ) - ) { - setNoticeData({ - title: `the value inserted in ${templateField} is a global variable, \n - the real value will be update on run`, - }); - newInputList![ - i - ].data.node.template[ - templateField - ].load_from_db = true; - } - else{ - newInputList![ - i - ].data.node.template[ - templateField - ].load_from_db = false; - } - return newInputList; - }); + if (node.data) { + setNode( + node.data.id, + (oldNode) => { + let newNode = + cloneDeep( + oldNode + ); + + newNode.data = { + ...newNode.data, + }; + + newNode.data.node.template[ + templateField + ].value = target; + + return newNode; + } + ); + } tweaks.buildTweakObject!( node["data"]["id"], target, @@ -415,6 +377,25 @@ export default function CodeTabsComponent({ ] ); }} + setDb={(value) => { + setNode( + node.data.id, + (oldNode) => { + let newNode = + cloneDeep(oldNode); + newNode.data = { + ...newNode.data, + }; + newNode.data.node.template[ + templateField + ].load_from_db = + value; + return newNode; + } + ); + }} + name={templateField} + data={node.data} /> )} diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx new file mode 100644 index 000000000..5fa64c4de --- /dev/null +++ b/src/frontend/src/components/inputGlobalComponent/index.tsx @@ -0,0 +1,131 @@ +import { useEffect } from "react"; +import { deleteGlobalVariable } from "../../controllers/API"; +import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal"; +import useAlertStore from "../../stores/alertStore"; +import { useGlobalVariablesStore } from "../../stores/globalVariables"; +import { ResponseErrorDetailAPI } from "../../types/api"; +import { cn } from "../../utils/utils"; +import AddNewVariableButton from "../addNewVariableButtonComponent/addNewVariableButton"; +import ForwardedIconComponent from "../genericIconComponent"; +import InputComponent from "../inputComponent"; +import { CommandItem } from "../ui/command"; + +export default function InputGlobalComponent({ + disabled, + onChange, + setDb, + name, + data, +}) { + const globalVariablesEntries = useGlobalVariablesStore( + (state) => state.globalVariablesEntries + ); + + const getVariableId = useGlobalVariablesStore((state) => state.getVariableId); + const removeGlobalVariable = useGlobalVariablesStore( + (state) => state.removeGlobalVariable + ); + const setErrorData = useAlertStore((state) => state.setErrorData); + + useEffect(() => { + if (data.node?.template[name]) + if ( + !globalVariablesEntries.includes(data.node?.template[name].value) && + data.node?.template[name].load_from_db + ) { + onChange(""); + setDb(false); + } + }, [globalVariablesEntries]); + + function handleDelete(key: string) { + const id = getVariableId(key); + if (id !== undefined) { + deleteGlobalVariable(id) + .then((_) => { + removeGlobalVariable(key); + if ( + data?.node?.template[name].value === key && + data?.node?.template[name].load_from_db + ) { + onChange(""); + setDb(false); + } + }) + .catch((error) => { + let responseError = error as ResponseErrorDetailAPI; + setErrorData({ + title: "Error deleting variable", + list: [responseError.response.data.detail ?? "Unknown error"], + }); + }); + } else { + setErrorData({ + title: "Error deleting variable", + list: [cn("ID not found for variable: ", key)], + }); + } + } + return ( + + + + + } + optionButton={(option) => ( + { + e.stopPropagation(); + e.preventDefault(); + handleDelete(option); + }} + description={'variable "' + option + '"'} + asChild + > + + + )} + selectedOption={ + data?.node?.template[name].load_from_db ?? false + ? data?.node?.template[name].value + : "" + } + setSelectedOption={(value) => { + onChange(value); + setDb(value !== "" ? true : false); + }} + onChange={(value) => { + onChange(value); + setDb(false); + }} + /> + ); +} diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 35ea0d8db..2ea10fdc5 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -6,8 +6,8 @@ import DictComponent from "../../components/dictComponent"; import Dropdown from "../../components/dropdownComponent"; import FloatComponent from "../../components/floatComponent"; import IconComponent from "../../components/genericIconComponent"; -import InputComponent from "../../components/inputComponent"; import InputFileComponent from "../../components/inputFileComponent"; +import InputGlobalComponent from "../../components/inputGlobalComponent"; import InputListComponent from "../../components/inputListComponent"; import IntComponent from "../../components/intComponent"; import KeypairListComponent from "../../components/keypairListComponent"; @@ -162,11 +162,11 @@ const EditNodeModal = forwardRef( scapedJSONStringfy( myData.node!.template[templateParam].proxy ? { - ...id, - proxy: - myData.node?.template[templateParam] - .proxy, - } + ...id, + proxy: + myData.node?.template[templateParam] + .proxy, + } : id ) ) ?? false; @@ -189,7 +189,7 @@ const EditNodeModal = forwardRef( content={ myData.node?.template[templateParam].proxy ? myData.node?.template[templateParam] - .proxy?.id + .proxy?.id : null } > @@ -197,16 +197,16 @@ const EditNodeModal = forwardRef( {myData.node?.template[templateParam] .display_name ? myData.node.template[templateParam] - .display_name + .display_name : myData.node?.template[templateParam] - .name} + .name} {myData.node?.template[templateParam].type === "str" && - !myData.node.template[templateParam].options ? ( + !myData.node.template[templateParam].options ? (
{myData.node.template[templateParam] .list ? ( @@ -216,12 +216,12 @@ const EditNodeModal = forwardRef( value={ !myData.node.template[templateParam] .value || - myData.node.template[templateParam] - .value === "" + myData.node.template[templateParam] + .value === "" ? [""] : myData.node.template[ - templateParam - ].value + templateParam + ].value } onChange={(value: string[]) => { handleOnNewValue( @@ -231,7 +231,7 @@ const EditNodeModal = forwardRef( }} /> ) : myData.node.template[templateParam] - .multiline ? ( + .multiline ? ( ) : ( - + handleOnNewValue(value, templateParam) } - value={ - myData.node.template[templateParam] - .value ?? "" - } - onChange={(value) => { - handleOnNewValue( - value, - templateParam - ); - if ( - globalVariablesEntries.includes( - value - ) - ) { - setNoticeData({ - title: `the value inserted in ${data.node?.display_name} is a global variable, \n - the real value will be update on run`, - }); - //mark as global variable - setNode(data.id, (oldNode) => { - let newNode = cloneDeep(oldNode); - newNode.data = { - ...newNode.data, - }; - newNode.data.node.template[ - templateParam - ].load_from_db = true; - return newNode; - }); - } - else { - setNode(data.id, (oldNode) => { - let newNode = cloneDeep(oldNode); - newNode.data = { - ...newNode.data, - }; - newNode.data.node.template[ - templateParam - ].load_from_db = false; - return newNode; - }); - } + setDb={(value) => { + setMyData((oldData) => { + let newData = cloneDeep(oldData); + newData.node!.template[ + templateParam + ].load_from_db = value; + return newData; + }); }} + name={templateParam} + data={myData} /> )}
) : myData.node?.template[templateParam] - .type === "NestedDict" ? ( + .type === "NestedDict" ? (
{ myData.node!.template[ @@ -347,7 +307,7 @@ const EditNodeModal = forwardRef( />
) : myData.node?.template[templateParam] - .type === "dict" ? ( + .type === "dict" ? (
{ @@ -390,7 +350,7 @@ const EditNodeModal = forwardRef( />
) : myData.node?.template[templateParam] - .type === "bool" ? ( + .type === "bool" ? (
{" "}
) : myData.node?.template[templateParam] - .type === "float" ? ( + .type === "float" ? (
) : myData.node?.template[templateParam] - .type === "str" && + .type === "str" && myData.node.template[templateParam] .options ? (
@@ -458,7 +418,7 @@ const EditNodeModal = forwardRef( >
) : myData.node?.template[templateParam] - .type === "int" ? ( + .type === "int" ? (
) : myData.node?.template[templateParam] - .type === "file" ? ( + .type === "file" ? (
) : myData.node?.template[templateParam] - .type === "prompt" ? ( + .type === "prompt" ? (
) : myData.node?.template[templateParam] - .type === "code" ? ( + .type === "code" ? (
) : myData.node?.template[templateParam] - .type === "Any" ? ( + .type === "Any" ? ( "-" ) : (