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

chore(package.json): add "@preact/signals-react" dependency to package.json

Browse source 
feat(EditNodeModal): use signals-react library for state management and add support for dynamic updates of myData value
This commit is contained in:
cristhianzl 2024-01-09 10:09:35 -03:00
commit 3a7d07916a
3 changed files with 174 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

34
package-lock.json generated
View file

@ -5,6 +5,7 @@
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"@preact/signals-react": "^2.0.0",
"@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-popover": "^1.0.7",
"cmdk": "^0.2.0" "cmdk": "^0.2.0"
} }
@ -54,6 +55,31 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
}, },
"node_modules/@preact/signals-core": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.5.1.tgz",
"integrity": "sha512-dE6f+WCX5ZUDwXzUIWNMhhglmuLpqJhuy3X3xHrhZYI0Hm2LyQwOu0l9mdPiWrVNsE+Q7txOnJPgtIqHCYoBVA==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
}
},
"node_modules/@preact/signals-react": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.0.0.tgz",
"integrity": "sha512-tMVi2SXFXlojaiPNWa8dlYaidR/XvEgMSp+iymKJgMssBM/QVtUQrodKZek1BJju+dkVHiyeuQHmkuLOI9oyNw==",
"dependencies": {
"@preact/signals-core": "^1.5.1",
"use-sync-external-store": "^1.2.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
},
"peerDependencies": {
"react": "^16.14.0 || 17.x || 18.x"
}
},
"node_modules/@radix-ui/primitive": { "node_modules/@radix-ui/primitive": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
@ -927,6 +953,14 @@
"optional": true "optional": true
} }
} }
},
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
} }
} }
} }

1
package.json
View file

@ -1,5 +1,6 @@
{ {
"dependencies": { "dependencies": {
"@preact/signals-react": "^2.0.0",
"@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-popover": "^1.0.7",
"cmdk": "^0.2.0" "cmdk": "^0.2.0"
} }

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

@ -1,3 +1,4 @@
import { useSignal, useSignalEffect } from "@preact/signals-react";
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { forwardRef, useEffect, useState } from "react"; import { forwardRef, useEffect, useState } from "react";
import ShadTooltip from "../../components/ShadTooltipComponent"; import ShadTooltip from "../../components/ShadTooltipComponent";
@ -54,32 +55,33 @@ const EditNodeModal = forwardRef(
}, },
ref ref
) => { ) => {
const [myData, setMyData] = useState(data);
const setPending = useFlowStore((state) => state.setPending);
const edges = useFlowStore((state) => state.edges); const edges = useFlowStore((state) => state.edges);
const setNode = useFlowStore((state) => state.setNode); const setNode = useFlowStore((state) => state.setNode);
function changeAdvanced(n) { const myData = useSignal(data);
setMyData((old) => { const [render, setRender] = useState(false);
let newData = cloneDeep(old); useSignalEffect(() => {
newData.node!.template[n].advanced = console.log(myData.value);
!newData.node!.template[n].advanced;
return newData; setRender(!render);
}); });
function changeAdvanced(n) {
const newValue = cloneDeep(myData.value);
newValue.node!.template[n].advanced =
!newValue.node!.template[n].advanced;
myData.value = newValue;
} }
const handleOnNewValue = (newValue: any, name) => { const handleOnNewValue = (newValue: any, name) => {
setMyData((old) => { const newSignalValue = cloneDeep(myData.value);
let newData = cloneDeep(old); newSignalValue.node!.template[name].value = newValue;
newData.node!.template[name].value = newValue; myData.value = newSignalValue;
return newData;
});
}; };
useEffect(() => { useEffect(() => {
if (open) { if (open) {
setMyData(data); // reset data to what it is on node when opening modal myData.value = cloneDeep(data); // clone data to avoid changing data on node when opening modal
} }
}, [open]); }, [open]);
@ -92,15 +94,15 @@ const EditNodeModal = forwardRef(
open={open} open={open}
setOpen={setOpen} setOpen={setOpen}
onChangeOpenModal={(open) => { onChangeOpenModal={(open) => {
setMyData(data); myData.value = cloneDeep(data);
}} }}
> >
<BaseModal.Trigger> <BaseModal.Trigger>
<></> <></>
</BaseModal.Trigger> </BaseModal.Trigger>
<BaseModal.Header description={myData.node?.description!}> <BaseModal.Header description={myData.value.node?.description!}>
<span className="pr-2">{myData.type}</span> <span className="pr-2">{myData.value.type}</span>
<Badge variant="secondary">ID: {myData.id}</Badge> <Badge variant="secondary">ID: {myData.value.id}</Badge>
</BaseModal.Header> </BaseModal.Header>
<BaseModal.Content> <BaseModal.Content>
<div className="flex pb-2"> <div className="flex pb-2">
@ -133,21 +135,23 @@ const EditNodeModal = forwardRef(
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody className="p-0"> <TableBody className="p-0">
{Object.keys(myData.node!.template) {Object.keys(myData.value.node!.template)
.filter( .filter(
(templateParam) => (templateParam) =>
templateParam.charAt(0) !== "_" && templateParam.charAt(0) !== "_" &&
myData.node?.template[templateParam].show && myData.value.node?.template[templateParam].show &&
LANGFLOW_SUPPORTED_TYPES.has( LANGFLOW_SUPPORTED_TYPES.has(
myData.node.template[templateParam].type myData.value?.node?.template[templateParam].type
) )
) )
.map((templateParam, index) => { .map((templateParam, index) => {
let id = { let id = {
inputTypes: inputTypes:
myData.node!.template[templateParam].input_types, myData.value.node!.template[templateParam]
type: myData.node!.template[templateParam].type, .input_types,
id: myData.id, type: myData.value.node!.template[templateParam]
.type,
id: myData.value.id,
fieldName: templateParam, fieldName: templateParam,
}; };
let disabled = let disabled =
@ -155,12 +159,14 @@ const EditNodeModal = forwardRef(
(edge) => (edge) =>
edge.targetHandle === edge.targetHandle ===
scapedJSONStringfy( scapedJSONStringfy(
myData.node!.template[templateParam].proxy myData.value.node!.template[templateParam]
.proxy
? { ? {
...id, ...id,
proxy: proxy:
myData.node?.template[templateParam] myData.value.node?.template[
.proxy, templateParam
].proxy,
} }
: id : id
) )
@ -170,39 +176,46 @@ const EditNodeModal = forwardRef(
<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">
<ShadTooltip <ShadTooltip
content={ content={
myData.node?.template[templateParam].proxy myData.value.node?.template[templateParam]
? myData.node?.template[templateParam] .proxy
.proxy?.id ? myData.value.node?.template[
templateParam
].proxy?.id
: null : null
} }
> >
<span> <span>
{myData.node?.template[templateParam] {myData.value.node?.template[templateParam]
.display_name .display_name
? myData.node.template[templateParam] ? myData.value?.node?.template[
.display_name templateParam
: myData.node?.template[templateParam] ].display_name
.name} : myData.value.node?.template[
templateParam
].name}
</span> </span>
</ShadTooltip> </ShadTooltip>
</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.node?.template[templateParam].type === {myData.value.node?.template[templateParam]
"str" && .type === "str" &&
!myData.node.template[templateParam].options ? ( !myData.value?.node?.template[templateParam]
.options ? (
<div className="mx-auto"> <div className="mx-auto">
{myData.node.template[templateParam] {myData.value?.node?.template[templateParam]
.list ? ( .list ? (
<InputListComponent <InputListComponent
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={ value={
!myData.node.template[templateParam] !myData.value?.node?.template[
.value || templateParam
myData.node.template[templateParam] ].value ||
.value === "" myData.value?.node?.template[
templateParam
].value === ""
? [""] ? [""]
: myData.node.template[ : myData.value?.node?.template[
templateParam templateParam
].value ].value
} }
@ -213,16 +226,18 @@ const EditNodeModal = forwardRef(
); );
}} }}
/> />
) : myData.node.template[templateParam] ) : myData.value?.node?.template[
.multiline ? ( templateParam
].multiline ? (
<TextAreaComponent <TextAreaComponent
id={"textarea-edit-" + index} id={"textarea-edit-" + index}
data-testid={"textarea-edit-" + index} data-testid={"textarea-edit-" + index}
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node.template[templateParam] myData.value?.node?.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={( onChange={(
value: string | string[] value: string | string[]
@ -239,12 +254,14 @@ const EditNodeModal = forwardRef(
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
password={ password={
myData.node.template[templateParam] myData.value?.node?.template[
.password ?? false templateParam
].password ?? false
} }
value={ value={
myData.node.template[templateParam] myData.value?.node?.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue( handleOnNewValue(
@ -255,24 +272,25 @@ const EditNodeModal = forwardRef(
/> />
)} )}
</div> </div>
) : myData.node?.template[templateParam] ) : myData.value.node?.template[templateParam]
.type === "NestedDict" ? ( .type === "NestedDict" ? (
<div className=" w-full"> <div className=" w-full">
<DictComponent <DictComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node!.template[ myData.value.node!.template[
templateParam templateParam
]?.value?.toString() === "{}" ]?.value?.toString() === "{}"
? { ? {
yourkey: "value", yourkey: "value",
} }
: myData.node!.template[templateParam] : myData.value.node!.template[
.value templateParam
].value
} }
onChange={(newValue) => { onChange={(newValue) => {
myData.node!.template[ myData.value.node!.template[
templateParam templateParam
].value = newValue; ].value = newValue;
handleOnNewValue( handleOnNewValue(
@ -283,13 +301,13 @@ const EditNodeModal = forwardRef(
id="editnode-div-dict-input" id="editnode-div-dict-input"
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.value.node?.template[templateParam]
.type === "dict" ? ( .type === "dict" ? (
<div <div
className={classNames( className={classNames(
"max-h-48 w-full overflow-auto custom-scroll", "max-h-48 w-full overflow-auto custom-scroll",
myData.node!.template[templateParam].value myData.value.node!.template[templateParam]
?.length > 1 .value?.length > 1
? "my-3" ? "my-3"
: "" : ""
)} )}
@ -298,13 +316,15 @@ const EditNodeModal = forwardRef(
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node!.template[templateParam] myData.value.node!.template[
.value?.length === 0 || templateParam
!myData.node!.template[templateParam] ].value?.length === 0 ||
.value !myData.value.node!.template[
templateParam
].value
? [{ "": "" }] ? [{ "": "" }]
: convertObjToArray( : convertObjToArray(
myData.node!.template[ myData.value.node!.template[
templateParam templateParam
].value ].value
) )
@ -313,7 +333,7 @@ const EditNodeModal = forwardRef(
onChange={(newValue) => { onChange={(newValue) => {
const valueToNumbers = const valueToNumbers =
convertValuesToNumbers(newValue); convertValuesToNumbers(newValue);
myData.node!.template[ myData.value.node!.template[
templateParam templateParam
].value = valueToNumbers; ].value = valueToNumbers;
setErrorDuplicateKey( setErrorDuplicateKey(
@ -326,7 +346,7 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.value.node?.template[templateParam]
.type === "bool" ? ( .type === "bool" ? (
<div className="ml-auto"> <div className="ml-auto">
{" "} {" "}
@ -334,8 +354,9 @@ const EditNodeModal = forwardRef(
id={"toggle-edit-" + index} id={"toggle-edit-" + index}
disabled={disabled} disabled={disabled}
enabled={ enabled={
myData.node.template[templateParam] myData.value?.node?.template[
.value templateParam
].value
} }
setEnabled={(isEnabled) => { setEnabled={(isEnabled) => {
handleOnNewValue( handleOnNewValue(
@ -346,48 +367,52 @@ const EditNodeModal = forwardRef(
size="small" size="small"
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.value.node?.template[templateParam]
.type === "float" ? ( .type === "float" ? (
<div className="mx-auto"> <div className="mx-auto">
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
rangeSpec={ rangeSpec={
myData.node!.template[templateParam] myData.value.node!.template[
.rangeSpec templateParam
].rangeSpec
} }
value={ value={
myData.node.template[templateParam] myData.value?.node?.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.value.node?.template[templateParam]
.type === "str" && .type === "str" &&
myData.node.template[templateParam] myData.value?.node?.template[templateParam]
.options ? ( .options ? (
<div className="mx-auto"> <div className="mx-auto">
<Dropdown <Dropdown
numberOfOptions={nodeLength} numberOfOptions={nodeLength}
editNode={true} editNode={true}
options={ options={
myData.node.template[templateParam] myData.value?.node?.template[
.options templateParam
].options
} }
onSelect={(value) => onSelect={(value) =>
handleOnNewValue(value, templateParam) handleOnNewValue(value, templateParam)
} }
value={ value={
myData.node.template[templateParam] myData.value?.node?.template[
.value ?? "Choose an option" templateParam
].value ?? "Choose an option"
} }
id={"dropdown-edit-" + index} id={"dropdown-edit-" + index}
></Dropdown> ></Dropdown>
</div> </div>
) : myData.node?.template[templateParam] ) : myData.value.node?.template[templateParam]
.type === "int" ? ( .type === "int" ? (
<div className="mx-auto"> <div className="mx-auto">
<IntComponent <IntComponent
@ -395,30 +420,33 @@ const EditNodeModal = forwardRef(
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node.template[templateParam] myData.value?.node?.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.value.node?.template[templateParam]
.type === "file" ? ( .type === "file" ? (
<div className="mx-auto"> <div className="mx-auto">
<InputFileComponent <InputFileComponent
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={ value={
myData.node.template[templateParam] myData.value?.node?.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
fileTypes={ fileTypes={
myData.node.template[templateParam] myData.value?.node?.template[
.fileTypes templateParam
].fileTypes
} }
onFileChange={(filePath: string) => { onFileChange={(filePath: string) => {
data.node!.template[ data.node!.template[
@ -427,23 +455,24 @@ const EditNodeModal = forwardRef(
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
) : myData.node?.template[templateParam] ) : myData.value.node?.template[templateParam]
.type === "prompt" ? ( .type === "prompt" ? (
<div className="mx-auto"> <div className="mx-auto">
<PromptAreaComponent <PromptAreaComponent
readonly={ readonly={
myData.node?.flow ? true : false myData.value.node?.flow ? true : false
} }
field_name={templateParam} field_name={templateParam}
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
nodeClass={myData.node} nodeClass={myData.value.node}
setNodeClass={(nodeClass) => { setNodeClass={(nodeClass) => {
myData.node = nodeClass; myData.value.node = nodeClass;
}} }}
value={ value={
myData.node.template[templateParam] myData.value?.node?.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
@ -454,14 +483,15 @@ const EditNodeModal = forwardRef(
} }
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.value.node?.template[templateParam]
.type === "code" ? ( .type === "code" ? (
<div className="mx-auto"> <div className="mx-auto">
<CodeAreaComponent <CodeAreaComponent
readonly={ readonly={
myData.node?.flow && myData.value.node?.flow &&
myData.node.template[templateParam] myData.value?.node?.template[
.dynamic templateParam
].dynamic
? true ? true
: false : false
} }
@ -476,8 +506,9 @@ const EditNodeModal = forwardRef(
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node.template[templateParam] myData.value?.node?.template[
.value ?? "" templateParam
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
@ -485,7 +516,7 @@ const EditNodeModal = forwardRef(
id={"code-area-edit" + index} id={"code-area-edit" + index}
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.value.node?.template[templateParam]
.type === "Any" ? ( .type === "Any" ? (
"-" "-"
) : ( ) : (
@ -497,11 +528,13 @@ const EditNodeModal = forwardRef(
<ToggleShadComponent <ToggleShadComponent
id={ id={
"show" + "show" +
myData.node?.template[templateParam].name myData.value.node?.template[templateParam]
.name
} }
enabled={ enabled={
!myData.node?.template[templateParam] !myData.value.node?.template[
.advanced templateParam
].advanced
} }
setEnabled={(e) => { setEnabled={(e) => {
changeAdvanced(templateParam); changeAdvanced(templateParam);
@ -531,10 +564,9 @@ const EditNodeModal = forwardRef(
...old, ...old,
data: { data: {
...old.data, ...old.data,
node: myData.node, node: myData.value.node,
}, },
})); }));
setPending(true);
setOpen(false); setOpen(false);
}} }}
type="submit" type="submit"