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

🐛 fix(dictComponent): fix useEffect dependency to onChange instead of value to prevent unnecessary re-rendering

Browse source 
🐛 fix(keypairListComponent): add rows prop to Textarea components to fix rendering issue

🐛 fix(EditNodeModal): remove unused state variables and fix rendering issue with dict and NestedDict types

🐛 fix(dictAreaModal): fix useEffect dependency to dictObj instead of value to prevent unnecessary re-rendering
This commit is contained in:
Cristhian Zanforlin Lousa 2023-09-26 11:21:30 -03:00
commit 6803cd1d8c
4 changed files with 69 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/components/dictComponent/index.tsx
View file

@ -19,7 +19,7 @@ export default function DictComponent({
useEffect(() => { useEffect(() => {
if (value) onChange(value); if (value) onChange(value);
}, [value]); }, [onChange]);
return ( return (
<div <div

2
src/frontend/src/components/keypairListComponent/index.tsx
View file

@ -50,6 +50,7 @@ export default function KeypairListComponent({
return ( return (
<div key={idx} className="flex w-full gap-3"> <div key={idx} className="flex w-full gap-3">
<Textarea <Textarea
rows={1}
value={key.trim()} value={key.trim()}
className={classNames( className={classNames(
editNode ? "input-edit-node" : "", editNode ? "input-edit-node" : "",
@ -66,6 +67,7 @@ export default function KeypairListComponent({
/> />
<Textarea <Textarea
rows={1}
value={obj[key]} value={obj[key]}
className={editNode ? "input-edit-node" : ""} className={editNode ? "input-edit-node" : ""}
placeholder="Type a value..." placeholder="Type a value..."

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

@ -30,6 +30,7 @@ import { NodeDataType } from "../../types/flow";
import { TabsState } from "../../types/tabs"; import { TabsState } from "../../types/tabs";
import { import {
convertObjToArray, convertObjToArray,
convertValuesToNumbers,
hasDuplicateKeys, hasDuplicateKeys,
} from "../../utils/reactflowUtils"; } from "../../utils/reactflowUtils";
import { classNames } from "../../utils/utils"; import { classNames } from "../../utils/utils";
@ -80,24 +81,7 @@ const EditNodeModal = forwardRef(
onClose!(modalOpen); onClose!(modalOpen);
}, [modalOpen]); }, [modalOpen]);
const [obj, setObj] = useState({
arr: ["test", 123456, false, null],
boolean: false,
longString:
"long string long string long string long string long string long string",
number: 123456,
try: {
k1: 123,
k2: "123",
k3: false,
},
string: "string",
});
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false); const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
const [dictArr, setDictArr] = useState([
{ yourKey: "yourValue" },
] as Object[]);
return ( return (
<BaseModal <BaseModal
@ -163,7 +147,11 @@ const EditNodeModal = forwardRef(
myData.node.template[templateParam].type === myData.node.template[templateParam].type ===
"file" || "file" ||
myData.node.template[templateParam].type === myData.node.template[templateParam].type ===
"int") "int" ||
myData.node.template[templateParam].type ===
"dict" ||
myData.node.template[templateParam].type ===
"NestedDict")
) )
.map((templateParam, index) => ( .map((templateParam, index) => (
<TableRow key={index} className="h-10"> <TableRow key={index} className="h-10">
@ -195,52 +183,6 @@ const EditNodeModal = forwardRef(
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
) : myData.node?.template[templateParam]
.type === "NestedDict" ? (
<div className="mt-2 w-full">
<DictComponent
disabled={disabled}
editNode={true}
value={obj}
onChange={(newValue) => {
setObj(newValue);
}}
/>
</div>
) : myData.node?.template[templateParam]
.type === "dict" ? (
<div className="mt-2 w-full">
<KeypairListComponent
disabled={disabled}
editNode={false}
value={
myData.node.template[templateParam]
.value?.length === 0 ||
!myData.node.template[templateParam]
.value
? dictArr
: convertObjToArray(
myData.node.template[
templateParam
].value
)
}
duplicateKey={errorDuplicateKey}
onChange={(newValue) => {
setErrorDuplicateKey(
hasDuplicateKeys(newValue)
);
if (hasDuplicateKeys(newValue)) {
setDictArr(newValue);
} else {
setDictArr(newValue);
myData.node!.template[
templateParam
].value = newValue;
}
}}
/>
</div>
) : myData.node.template[templateParam] ) : myData.node.template[templateParam]
.multiline ? ( .multiline ? (
<TextAreaComponent <TextAreaComponent
@ -272,6 +214,60 @@ const EditNodeModal = forwardRef(
/> />
)} )}
</div> </div>
) : myData.node?.template[templateParam].type ===
"NestedDict" ? (
<div className="mt-2 w-full">
<DictComponent
disabled={disabled}
editNode={true}
value={
myData.node!.template[templateParam]
.value ?? {
yourkey: "value",
}
}
onChange={(newValue) => {
myData.node!.template[
templateParam
].value = newValue;
handleOnNewValue(newValue, templateParam);
}}
/>
</div>
) : myData.node?.template[templateParam].type ===
"dict" ? (
<div className="mt-2 w-full">
<KeypairListComponent
disabled={disabled}
editNode={true}
value={
myData.node!.template[templateParam].value
?.length === 0 ||
!myData.node!.template[templateParam]
.value
? [{ "": "" }]
: convertObjToArray(
myData.node!.template[templateParam]
.value
)
}
duplicateKey={errorDuplicateKey}
onChange={(newValue) => {
const valueToNumbers =
convertValuesToNumbers(newValue);
myData.node!.template[
templateParam
].value = valueToNumbers;
setErrorDuplicateKey(
hasDuplicateKeys(valueToNumbers)
);
handleOnNewValue(
valueToNumbers,
templateParam
);
}}
/>
</div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam].type ===
"bool" ? ( "bool" ? (
<div className="ml-auto"> <div className="ml-auto">

7
src/frontend/src/modals/dictAreaModal/index.tsx
View file

@ -22,8 +22,10 @@ export default function DictAreaModal({
const [dictObj, setDictObj] = useState(value); const [dictObj, setDictObj] = useState(value);
useEffect(() => { useEffect(() => {
console.log(value);
if (value) setDictObj(value); if (value) setDictObj(value);
}, [value]); }, [dictObj]);
return ( return (
<BaseModal size="medium-h-full" open={open} setOpen={setOpen}> <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
@ -46,6 +48,9 @@ export default function DictAreaModal({
onEdit={(edit) => { onEdit={(edit) => {
setDictObj(edit["src"]); setDictObj(edit["src"]);
}} }}
onChange={(edit) => {
setDictObj(edit["src"]);
}}
src={dictObj} src={dictObj}
/> />
<div className="flex h-fit w-full justify-end"> <div className="flex h-fit w-full justify-end">