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

start state for nestedDict

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-09-26 20:55:46 -03:00
commit 5feb98466c
4 changed files with 154 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -424,9 +424,11 @@ export default function ParameterComponent({
disabled={disabled} disabled={disabled}
editNode={false} editNode={false}
value={ value={
data.node!.template[name].value ?? { data.node!.template[name].value.toString() === "{}"
yourkey: "value", ? {
} yourkey: "value",
}
: data.node!.template[name].value
} }
onChange={(newValue) => { onChange={(newValue) => {
data.node!.template[name].value = newValue; data.node!.template[name].value = newValue;

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

@ -832,9 +832,15 @@ export default function CodeTabsComponent({
value={ value={
node.data.node!.template[ node.data.node!.template[
templateField templateField
].value ?? { ].value.toString() ===
yourkey: "value", "{}"
} ? {
yourkey: "value",
}
: node.data.node!
.template[
templateField
].value
} }
onChange={(target) => { onChange={(target) => {
setData((old) => { setData((old) => {

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

@ -83,7 +83,7 @@ const ApiModal = forwardRef(
filterNodes(); filterNodes();
if (Object.keys(tweaksCode).length > 0) { if (Object.keys(tweaksCode).length > 0) {
setActiveTab("0"); // setActiveTab("0");
setTabs(tabsArray(codesArray, 1)); setTabs(tabsArray(codesArray, 1));
} else { } else {
setTabs(tabsArray(codesArray, 1)); setTabs(tabsArray(codesArray, 1));
@ -137,6 +137,10 @@ const ApiModal = forwardRef(
changes = convertArrayToObj(changes); changes = convertArrayToObj(changes);
} }
if (template.type === "NestedDict") {
changes = JSON.stringify(changes);
}
const existingTweak = tweak.current.find((element) => const existingTweak = tweak.current.find((element) =>
element.hasOwnProperty(tw) element.hasOwnProperty(tw)
); );

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

@ -1,5 +1,12 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { ReactNode, forwardRef, useContext, useEffect, useRef, useState } from "react"; import {
ReactNode,
forwardRef,
useContext,
useEffect,
useRef,
useState,
} from "react";
import CodeAreaComponent from "../../components/codeAreaComponent"; import CodeAreaComponent from "../../components/codeAreaComponent";
import DictComponent from "../../components/dictComponent"; import DictComponent from "../../components/dictComponent";
import Dropdown from "../../components/dropdownComponent"; import Dropdown from "../../components/dropdownComponent";
@ -59,7 +66,6 @@ const EditNodeModal = forwardRef(
const myData = useRef(data); const myData = useRef(data);
const { setTabsState, tabId } = useContext(TabsContext); const { setTabsState, tabId } = useContext(TabsContext);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
let disabled = let disabled =
@ -68,7 +74,8 @@ const EditNodeModal = forwardRef(
.some((edge) => edge.targetHandle === data.id) ?? false; .some((edge) => edge.targetHandle === data.id) ?? false;
function changeAdvanced(n) { function changeAdvanced(n) {
myData.current.node!.template[n].advanced = !myData.current.node!.template[n].advanced; myData.current.node!.template[n].advanced =
!myData.current.node!.template[n].advanced;
} }
const handleOnNewValue = (newValue: any, name) => { const handleOnNewValue = (newValue: any, name) => {
@ -76,7 +83,7 @@ const EditNodeModal = forwardRef(
}; };
useEffect(() => { useEffect(() => {
myData.current = data // reset data to what it is on node when opening modal myData.current = data; // reset data to what it is on node when opening modal
onClose!(modalOpen); onClose!(modalOpen);
}, [modalOpen]); }, [modalOpen]);
@ -132,63 +139,71 @@ const EditNodeModal = forwardRef(
(templateParam) => (templateParam) =>
templateParam.charAt(0) !== "_" && templateParam.charAt(0) !== "_" &&
myData.current.node?.template[templateParam].show && myData.current.node?.template[templateParam].show &&
(myData.current.node.template[templateParam].type === (myData.current.node.template[templateParam]
"str" || .type === "str" ||
myData.current.node.template[templateParam].type === myData.current.node.template[templateParam]
"bool" || .type === "bool" ||
myData.current.node.template[templateParam].type === myData.current.node.template[templateParam]
"float" || .type === "float" ||
myData.current.node.template[templateParam].type === myData.current.node.template[templateParam]
"code" || .type === "code" ||
myData.current.node.template[templateParam].type === myData.current.node.template[templateParam]
"prompt" || .type === "prompt" ||
myData.current.node.template[templateParam].type === myData.current.node.template[templateParam]
"file" || .type === "file" ||
myData.current.node.template[templateParam].type === myData.current.node.template[templateParam]
"int" || .type === "int" ||
myData.current.node.template[templateParam].type === myData.current.node.template[templateParam]
"dict" || .type === "dict" ||
myData.current.node.template[templateParam].type === myData.current.node.template[templateParam]
"NestedDict") .type === "NestedDict")
) )
.map((templateParam, index) => ( .map((templateParam, index) => (
<TableRow key={index} className="h-10"> <TableRow key={index} className="h-10">
<TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3"> <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
{myData.current.node?.template[templateParam].name {myData.current.node?.template[templateParam].name
? myData.current.node.template[templateParam].name ? myData.current.node.template[templateParam]
.name
: myData.current.node?.template[templateParam] : myData.current.node?.template[templateParam]
.display_name} .display_name}
</TableCell> </TableCell>
<TableCell className="w-[300px] p-0 text-center text-xs text-foreground "> <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
{myData.current.node?.template[templateParam].type === {myData.current.node?.template[templateParam]
"str" && .type === "str" &&
!myData.current.node.template[templateParam].options ? ( !myData.current.node.template[templateParam]
.options ? (
<div className="mx-auto"> <div className="mx-auto">
{myData.current.node.template[templateParam].list ? ( {myData.current.node.template[templateParam]
.list ? (
<InputListComponent <InputListComponent
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={ value={
!myData.current.node.template[templateParam] !myData.current.node.template[
.value || templateParam
myData.current.node.template[templateParam] ].value ||
.value === "" myData.current.node.template[
templateParam
].value === ""
? [""] ? [""]
: myData.current.node.template[templateParam] : myData.current.node.template[
.value templateParam
].value
} }
onChange={(value: string[]) => { onChange={(value: string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
) : myData.current.node.template[templateParam] ) : myData.current.node.template[
.multiline ? ( templateParam
].multiline ? (
<TextAreaComponent <TextAreaComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.current.node.template[templateParam] myData.current.node.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
@ -199,12 +214,14 @@ const EditNodeModal = forwardRef(
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
password={ password={
myData.current.node.template[templateParam] myData.current.node.template[
.password ?? false templateParam
].password ?? false
} }
value={ value={
myData.current.node.template[templateParam] myData.current.node.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
@ -212,17 +229,22 @@ const EditNodeModal = forwardRef(
/> />
)} )}
</div> </div>
) : myData.current.node?.template[templateParam].type === ) : myData.current.node?.template[templateParam]
"NestedDict" ? ( .type === "NestedDict" ? (
<div className="mt-2 w-full"> <div className=" w-full">
<DictComponent <DictComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.current.node!.template[templateParam] myData.current.node!.template[
.value ?? { templateParam
yourkey: "value", ].value.toString() === "{}"
} ? {
yourkey: "value",
}
: myData.current.node!.template[
templateParam
].value
} }
onChange={(newValue) => { onChange={(newValue) => {
myData.current.node!.template[ myData.current.node!.template[
@ -232,21 +254,24 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.current.node?.template[templateParam].type === ) : myData.current.node?.template[templateParam]
"dict" ? ( .type === "dict" ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<KeypairListComponent <KeypairListComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.current.node!.template[templateParam].value myData.current.node!.template[
?.length === 0 || templateParam
!myData.current.node!.template[templateParam] ].value?.length === 0 ||
.value !myData.current.node!.template[
templateParam
].value
? [{ "": "" }] ? [{ "": "" }]
: convertObjToArray( : convertObjToArray(
myData.current.node!.template[templateParam] myData.current.node!.template[
.value templateParam
].value
) )
} }
duplicateKey={errorDuplicateKey} duplicateKey={errorDuplicateKey}
@ -266,14 +291,16 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.current.node?.template[templateParam].type === ) : myData.current.node?.template[templateParam]
"bool" ? ( .type === "bool" ? (
<div className="ml-auto"> <div className="ml-auto">
{" "} {" "}
<ToggleShadComponent <ToggleShadComponent
disabled={disabled} disabled={disabled}
enabled={ enabled={
myData.current.node.template[templateParam].value myData.current.node.template[
templateParam
].value
} }
setEnabled={(isEnabled) => { setEnabled={(isEnabled) => {
handleOnNewValue( handleOnNewValue(
@ -284,76 +311,84 @@ const EditNodeModal = forwardRef(
size="small" size="small"
/> />
</div> </div>
) : myData.current.node?.template[templateParam].type === ) : myData.current.node?.template[templateParam]
"float" ? ( .type === "float" ? (
<div className="mx-auto"> <div className="mx-auto">
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.current.node.template[templateParam] myData.current.node.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.current.node?.template[templateParam].type === ) : myData.current.node?.template[templateParam]
"str" && .type === "str" &&
myData.current.node.template[templateParam].options ? ( myData.current.node.template[templateParam]
.options ? (
<div className="mx-auto"> <div className="mx-auto">
<Dropdown <Dropdown
numberOfOptions={nodeLength} numberOfOptions={nodeLength}
editNode={true} editNode={true}
options={ options={
myData.current.node.template[templateParam] myData.current.node.template[
.options templateParam
].options
} }
onSelect={(value) => onSelect={(value) =>
handleOnNewValue(value, templateParam) handleOnNewValue(value, templateParam)
} }
value={ value={
myData.current.node.template[templateParam] myData.current.node.template[
.value ?? "Choose an option" templateParam
].value ?? "Choose an option"
} }
></Dropdown> ></Dropdown>
</div> </div>
) : myData.current.node?.template[templateParam].type === ) : myData.current.node?.template[templateParam]
"int" ? ( .type === "int" ? (
<div className="mx-auto"> <div className="mx-auto">
<IntComponent <IntComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.current.node.template[templateParam] myData.current.node.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.current.node?.template[templateParam].type === ) : myData.current.node?.template[templateParam]
"file" ? ( .type === "file" ? (
<div className="mx-auto"> <div className="mx-auto">
<InputFileComponent <InputFileComponent
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={ value={
myData.current.node.template[templateParam] myData.current.node.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
fileTypes={ fileTypes={
myData.current.node.template[templateParam] myData.current.node.template[
.fileTypes templateParam
].fileTypes
} }
suffixes={ suffixes={
myData.current.node.template[templateParam] myData.current.node.template[
.suffixes templateParam
].suffixes
} }
onFileChange={(filePath: string) => { onFileChange={(filePath: string) => {
data.node!.template[ data.node!.template[
@ -362,8 +397,8 @@ const EditNodeModal = forwardRef(
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
) : myData.current.node?.template[templateParam].type === ) : myData.current.node?.template[templateParam]
"prompt" ? ( .type === "prompt" ? (
<div className="mx-auto"> <div className="mx-auto">
<PromptAreaComponent <PromptAreaComponent
field_name={templateParam} field_name={templateParam}
@ -374,16 +409,17 @@ const EditNodeModal = forwardRef(
myData.current.node = nodeClass; myData.current.node = nodeClass;
}} }}
value={ value={
myData.current.node.template[templateParam] myData.current.node.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.current.node?.template[templateParam].type === ) : myData.current.node?.template[templateParam]
"code" ? ( .type === "code" ? (
<div className="mx-auto"> <div className="mx-auto">
<CodeAreaComponent <CodeAreaComponent
dynamic={ dynamic={
@ -397,16 +433,17 @@ const EditNodeModal = forwardRef(
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.current.node.template[templateParam] myData.current.node.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.current.node?.template[templateParam].type === ) : myData.current.node?.template[templateParam]
"Any" ? ( .type === "Any" ? (
"-" "-"
) : ( ) : (
<div className="hidden"></div> <div className="hidden"></div>
@ -416,13 +453,13 @@ const EditNodeModal = forwardRef(
<div className="items-center text-center"> <div className="items-center text-center">
<ToggleShadComponent <ToggleShadComponent
enabled={ enabled={
!myData.current.node?.template[templateParam] !myData.current.node?.template[
.advanced templateParam
} ].advanced
setEnabled={(e) =>{
changeAdvanced(templateParam)
}
} }
setEnabled={(e) => {
changeAdvanced(templateParam);
}}
disabled={disabled} disabled={disabled}
size="small" size="small"
/> />