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

fix(parameterComponent): add options prop to ParameterComponent to display global variables in dropdown

Browse source 
feat(codeTabsComponent): add support for global variables in InputComponent and DictComponent
feat(inputComponent): remove dependency on globalVariablesStore and use options prop instead
feat(editNodeModal): add support for global variables in InputComponent
This commit is contained in:
anovazzi1 2024-02-08 13:45:18 -03:00
commit a91668b5f2
4 changed files with 64 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -413,6 +413,7 @@ export default function ParameterComponent({
disabled={disabled}
password={data.node?.template[name].password ?? false}
value={data.node?.template[name].value ?? ""}
options={globalVariablesEntries}
onChange={(value) => {
handleOnNewValue(value);
if (globalVariablesEntries.includes(value)) {

19
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -28,8 +28,10 @@ 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,
@ -54,8 +56,12 @@ export default function CodeTabsComponent({
const [openAccordion, setOpenAccordion] = useState<string[]>([]);
const dark = useDarkStore((state) => state.dark);
const unselectAll = useFlowStore((state) => state.unselectAll);
const globalVariablesEntries = useGlobalVariablesStore(
(state) => state.globalVariablesEntries
);
const setNodes = useFlowStore((state) => state.setNodes);
const setNoticeData = useAlertStore((state) => state.setNoticeData);
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
@ -347,6 +353,9 @@ export default function CodeTabsComponent({
</div>
) : (
<InputComponent
options={
globalVariablesEntries
}
editNode={true}
disabled={false}
password={
@ -376,6 +385,16 @@ export default function CodeTabsComponent({
].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`,
});
}
return newInputList;
});
tweaks.buildTweakObject!(

36
src/frontend/src/components/inputComponent/index.tsx
View file

@ -1,7 +1,6 @@
import { Listbox, Transition } from "@headlessui/react";
import * as Form from "@radix-ui/react-form";
import { Fragment, useEffect, useRef, useState } from "react";
import { useGlobalVariablesStore } from "../../stores/globalVariables";
import { InputComponentType } from "../../types/components";
import { handleKeyDown } from "../../utils/reactflowUtils";
import { classNames } from "../../utils/utils";
@ -27,12 +26,7 @@ export default function InputComponent({
const [pwdVisible, setPwdVisible] = useState(false);
const refInput = useRef<HTMLInputElement>(null);
const [showOptions, setShowOptions] = useState<boolean>(false);
const globalVariablesEntries = useGlobalVariablesStore(
(state) => state.globalVariablesEntries
);
const [filteredOpts, setFilteredValue] = useState<string[]>(
globalVariablesEntries
);
const [filteredOpts, setFilteredValue] = useState<string[]>(options);
// Clear component state
useEffect(() => {
@ -197,19 +191,21 @@ export default function InputComponent({
</>
)}
<span
className={
password
? "dropdown-component-arrow right-8"
: "dropdown-component-arrow right-0"
}
>
<IconComponent
name="ChevronsUpDown"
className="dropdown-component-arrow-color"
aria-hidden="true"
/>
</span>
{options.length > 0 && (
<span
className={
password
? "dropdown-component-arrow right-8"
: "dropdown-component-arrow right-0"
}
>
<IconComponent
name="ChevronsUpDown"
className="dropdown-component-arrow-color"
aria-hidden="true"
/>
</span>
)}
{password && (
<button

28
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -28,7 +28,9 @@ import {
LANGFLOW_SUPPORTED_TYPES,
limitScrollFieldsModal,
} from "../../constants/constants";
import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore";
import { useGlobalVariablesStore } from "../../stores/globalVariables";
import { NodeDataType } from "../../types/flow";
import {
convertObjToArray,
@ -59,6 +61,10 @@ const EditNodeModal = forwardRef(
const setPending = useFlowStore((state) => state.setPending);
const edges = useFlowStore((state) => state.edges);
const setNode = useFlowStore((state) => state.setNode);
const setNoticeData = useAlertStore((state) => state.setNoticeData);
const globalVariablesEntries = useGlobalVariablesStore(
(state) => state.globalVariablesEntries
);
function changeAdvanced(n) {
setMyData((old) => {
@ -245,6 +251,7 @@ const EditNodeModal = forwardRef(
<InputComponent
id={"input-" + index}
editNode={true}
options={globalVariablesEntries}
disabled={disabled}
password={
myData.node.template[templateParam]
@ -259,6 +266,27 @@ const EditNodeModal = forwardRef(
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;
});
}}
/>
)}