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

Fixed disabled variable at EditNodeModal

Browse source
This commit is contained in:
Lucas Oliveira 2023-12-04 18:37:33 -03:00
commit 7de1ee12c8
1 changed files with 342 additions and 299 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -37,6 +37,7 @@ import {
convertObjToArray, convertObjToArray,
convertValuesToNumbers, convertValuesToNumbers,
hasDuplicateKeys, hasDuplicateKeys,
scapedJSONStringfy,
} from "../../utils/reactflowUtils"; } from "../../utils/reactflowUtils";
import { classNames } from "../../utils/utils"; import { classNames } from "../../utils/utils";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
@ -62,10 +63,6 @@ const EditNodeModal = forwardRef(
const { setTabsState, tabId } = useContext(FlowsContext); const { setTabsState, tabId } = useContext(FlowsContext);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
let disabled =
reactFlowInstance
?.getEdges()
.some((edge) => edge.targetHandle === data.id) ?? false;
function changeAdvanced(n) { function changeAdvanced(n) {
setMyData((old) => { setMyData((old) => {
@ -150,14 +147,37 @@ const EditNodeModal = forwardRef(
myData.node.template[templateParam].type myData.node.template[templateParam].type
) )
) )
.map((templateParam, index) => ( .map((templateParam, index) => {
let id = {
inputTypes:
data.node!.template[templateParam].input_types,
type: data.node!.template[templateParam].type,
id: data.id,
fieldName: templateParam,
};
let disabled =
reactFlowInstance?.getEdges().some(
(edge) =>
edge.targetHandle ===
scapedJSONStringfy(
data.node!.template[templateParam].proxy
? {
...id,
proxy:
data.node?.template[templateParam]
.proxy,
}
: id
)
) ?? false;
return (
<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">
<ShadTooltip <ShadTooltip
content={ content={
myData.node?.template[templateParam].proxy myData.node?.template[templateParam].proxy
? myData.node?.template[templateParam].proxy ? myData.node?.template[templateParam]
?.id .proxy?.id
: null : null
} }
> >
@ -166,7 +186,8 @@ const EditNodeModal = forwardRef(
.display_name .display_name
? myData.node.template[templateParam] ? myData.node.template[templateParam]
.display_name .display_name
: myData.node?.template[templateParam].name} : myData.node?.template[templateParam]
.name}
</span> </span>
</ShadTooltip> </ShadTooltip>
</TableCell> </TableCell>
@ -175,7 +196,8 @@ const EditNodeModal = forwardRef(
"str" && "str" &&
!myData.node.template[templateParam].options ? ( !myData.node.template[templateParam].options ? (
<div className="mx-auto"> <div className="mx-auto">
{myData.node.template[templateParam].list ? ( {myData.node.template[templateParam]
.list ? (
<InputListComponent <InputListComponent
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
@ -185,11 +207,15 @@ const EditNodeModal = forwardRef(
myData.node.template[templateParam] myData.node.template[templateParam]
.value === "" .value === ""
? [""] ? [""]
: myData.node.template[templateParam] : myData.node.template[
.value templateParam
].value
} }
onChange={(value: string[]) => { onChange={(value: string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(
value,
templateParam
);
}} }}
/> />
) : myData.node.template[templateParam] ) : myData.node.template[templateParam]
@ -202,8 +228,13 @@ const EditNodeModal = forwardRef(
myData.node.template[templateParam] myData.node.template[templateParam]
.value ?? "" .value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(
handleOnNewValue(value, templateParam); value: string | string[]
) => {
handleOnNewValue(
value,
templateParam
);
}} }}
/> />
) : ( ) : (
@ -220,13 +251,16 @@ const EditNodeModal = forwardRef(
.value ?? "" .value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(
value,
templateParam
);
}} }}
/> />
)} )}
</div> </div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam]
"NestedDict" ? ( .type === "NestedDict" ? (
<div className=" w-full"> <div className=" w-full">
<DictComponent <DictComponent
disabled={disabled} disabled={disabled}
@ -245,13 +279,16 @@ const EditNodeModal = forwardRef(
myData.node!.template[ myData.node!.template[
templateParam templateParam
].value = newValue; ].value = newValue;
handleOnNewValue(newValue, templateParam); handleOnNewValue(
newValue,
templateParam
);
}} }}
id="editnode-div-dict-input" id="editnode-div-dict-input"
/> />
</div> </div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam]
"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",
@ -265,14 +302,15 @@ const EditNodeModal = forwardRef(
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node!.template[templateParam].value myData.node!.template[templateParam]
?.length === 0 || .value?.length === 0 ||
!myData.node!.template[templateParam] !myData.node!.template[templateParam]
.value .value
? [{ "": "" }] ? [{ "": "" }]
: convertObjToArray( : convertObjToArray(
myData.node!.template[templateParam] myData.node!.template[
.value templateParam
].value
) )
} }
duplicateKey={errorDuplicateKey} duplicateKey={errorDuplicateKey}
@ -292,15 +330,16 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam]
"bool" ? ( .type === "bool" ? (
<div className="ml-auto"> <div className="ml-auto">
{" "} {" "}
<ToggleShadComponent <ToggleShadComponent
id={"toggle-edit-" + index} id={"toggle-edit-" + index}
disabled={disabled} disabled={disabled}
enabled={ enabled={
myData.node.template[templateParam].value myData.node.template[templateParam]
.value
} }
setEnabled={(isEnabled) => { setEnabled={(isEnabled) => {
handleOnNewValue( handleOnNewValue(
@ -311,8 +350,8 @@ const EditNodeModal = forwardRef(
size="small" size="small"
/> />
</div> </div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam]
"float" ? ( .type === "float" ? (
<div className="mx-auto"> <div className="mx-auto">
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
@ -326,9 +365,10 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam]
"str" && .type === "str" &&
myData.node.template[templateParam].options ? ( myData.node.template[templateParam]
.options ? (
<div className="mx-auto"> <div className="mx-auto">
<Dropdown <Dropdown
numberOfOptions={nodeLength} numberOfOptions={nodeLength}
@ -347,8 +387,8 @@ const EditNodeModal = forwardRef(
id={"dropdown-edit-" + index} id={"dropdown-edit-" + index}
></Dropdown> ></Dropdown>
</div> </div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam]
"int" ? ( .type === "int" ? (
<div className="mx-auto"> <div className="mx-auto">
<IntComponent <IntComponent
id={"int-input-" + index} id={"int-input-" + index}
@ -363,8 +403,8 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam]
"file" ? ( .type === "file" ? (
<div className="mx-auto"> <div className="mx-auto">
<InputFileComponent <InputFileComponent
editNode={true} editNode={true}
@ -387,11 +427,13 @@ const EditNodeModal = forwardRef(
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam]
"prompt" ? ( .type === "prompt" ? (
<div className="mx-auto"> <div className="mx-auto">
<PromptAreaComponent <PromptAreaComponent
readonly={myData.node?.flow ? true : false} readonly={
myData.node?.flow ? true : false
}
field_name={templateParam} field_name={templateParam}
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
@ -409,8 +451,8 @@ const EditNodeModal = forwardRef(
id={"prompt-area-edit" + index} id={"prompt-area-edit" + index}
/> />
</div> </div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam]
"code" ? ( .type === "code" ? (
<div className="mx-auto"> <div className="mx-auto">
<CodeAreaComponent <CodeAreaComponent
readonly={ readonly={
@ -440,8 +482,8 @@ const EditNodeModal = forwardRef(
id={"code-area-edit" + index} id={"code-area-edit" + index}
/> />
</div> </div>
) : myData.node?.template[templateParam].type === ) : myData.node?.template[templateParam]
"Any" ? ( .type === "Any" ? (
"-" "-"
) : ( ) : (
<div className="hidden"></div> <div className="hidden"></div>
@ -467,7 +509,8 @@ const EditNodeModal = forwardRef(
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} );
})}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>