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

Fixed positioning of tableNodeCellRender elements

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-05 13:52:22 -03:00
commit cf3477b04b
3 changed files with 171 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/frontend/src/components/tableNodeCellRender/index.tsx
View file

@ -1,4 +1,4 @@
import { CustomCellRendererProps } from "ag-grid-react"; import { CustomCellEditorProps, CustomCellRendererProps } from "ag-grid-react";
import { classNames, cn, isTimeStampString } from "../../utils/utils"; import { classNames, cn, isTimeStampString } from "../../utils/utils";
import ArrayReader from "../arrayReaderComponent"; import ArrayReader from "../arrayReaderComponent";
import DateReader from "../dateReaderComponent"; import DateReader from "../dateReaderComponent";
@ -30,21 +30,27 @@ import { useState } from "react";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
export default function TableNodeCellRender({ export default function TableNodeCellRender({
node: { data: templateData }, node: { data },
value: { value: {
value: templateValue, value,
nodeClass, nodeClass,
handleOnNewValue, handleOnNewValue: handleOnNewValueNode,
handleOnChangeDb, handleOnChangeDb,
}, },
}: CustomCellRendererProps) { }: CustomCellRendererProps) {
console.log( const handleOnNewValue = (newValue: any, name: string) => {
templateData, handleOnNewValueNode(newValue, name);
templateValue, setTemplateData((old) => {
nodeClass, let newData = cloneDeep(old);
handleOnNewValue, newData.value = newValue;
handleOnChangeDb, return newData;
); });
setTemplateValue(newValue);
};
const [templateValue, setTemplateValue] = useState(value);
const [templateData, setTemplateData] = useState(data);
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false); const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
const edges = useFlowStore((state) => state.edges); const edges = useFlowStore((state) => state.edges);
@ -71,17 +77,13 @@ export default function TableNodeCellRender({
switch (templateData.type) { switch (templateData.type) {
case "str": case "str":
if (!templateData.options) { if (!templateData.options) {
return ( return templateData?.list ? (
<div className="w-[300px]">
{templateData?.list ? (
<InputListComponent <InputListComponent
componentName={templateData.key ?? undefined} componentName={templateData.key ?? undefined}
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={ value={
!templateValue || templateValue === "" !templateValue || templateValue === "" ? [""] : templateValue
? [""]
: templateValue
} }
onChange={(value: string[]) => { onChange={(value: string[]) => {
handleOnNewValue(value, templateData.key); handleOnNewValue(value, templateData.key);
@ -93,7 +95,7 @@ export default function TableNodeCellRender({
data-testid={"textarea-edit-" + templateData.name} data-testid={"textarea-edit-" + templateData.name}
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={templateData.value ?? ""} value={templateValue ?? ""}
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateData.key); handleOnNewValue(value, templateData.key);
}} }}
@ -102,48 +104,38 @@ export default function TableNodeCellRender({
<InputGlobalComponent <InputGlobalComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
onChange={(value) => onChange={(value) => handleOnNewValue(value, templateData.key)}
handleOnNewValue(value, templateData.key)
}
setDb={(value) => { setDb={(value) => {
handleOnChangeDb(value, templateData.key); handleOnChangeDb(value, templateData.key);
}} }}
name={templateData.key} name={templateData.key}
data={templateData} data={templateData}
/> />
)}
</div>
); );
} else { } else {
return ( return (
<div className="w-[300px]">
<Dropdown <Dropdown
editNode={true} editNode={true}
options={templateData.options} options={templateData.options}
onSelect={(value) => handleOnNewValue(value, templateData.key)} onSelect={(value) => handleOnNewValue(value, templateData.key)}
value={templateData.value ?? "Choose an option"} value={templateValue ?? "Choose an option"}
id={"dropdown-edit-" + templateData.name} id={"dropdown-edit-" + templateData.name}
></Dropdown> ></Dropdown>
</div>
); );
} }
case "NestedDict": case "NestedDict":
return ( return (
<div className=" w-full">
<DictComponent <DictComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={templateValue.toString() === "{}" ? {} : templateValue} value={templateValue.toString() === "{}" ? {} : templateValue}
onChange={(newValue) => { onChange={(newValue) => {
templateValue = newValue;
handleOnNewValue(newValue, templateData.key); handleOnNewValue(newValue, templateData.key);
}} }}
id="editnode-div-dict-input" id="editnode-div-dict-input"
/> />
</div>
); );
break;
case "dict": case "dict":
return ( return (
@ -157,14 +149,13 @@ export default function TableNodeCellRender({
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
templateData.value?.length === 0 || !templateData.value templateValue?.length === 0 || !templateValue
? [{ "": "" }] ? [{ "": "" }]
: convertObjToArray(templateValue, templateData.type) : convertObjToArray(templateValue, templateData.type)
} }
duplicateKey={errorDuplicateKey} duplicateKey={errorDuplicateKey}
onChange={(newValue) => { onChange={(newValue) => {
const valueToNumbers = convertValuesToNumbers(newValue); const valueToNumbers = convertValuesToNumbers(newValue);
templateValue = valueToNumbers;
setErrorDuplicateKey(hasDuplicateKeys(valueToNumbers)); setErrorDuplicateKey(hasDuplicateKeys(valueToNumbers));
handleOnNewValue(valueToNumbers, templateData.key); handleOnNewValue(valueToNumbers, templateData.key);
}} }}
@ -172,63 +163,53 @@ export default function TableNodeCellRender({
/> />
</div> </div>
); );
break;
case "bool": case "bool":
return ( return (
<div className="ml-auto">
{" "}
<ToggleShadComponent <ToggleShadComponent
id={"toggle-edit-" + templateData.name} id={"toggle-edit-" + templateData.name}
disabled={disabled} disabled={disabled}
enabled={templateData.value} enabled={templateValue}
setEnabled={(isEnabled) => { setEnabled={(isEnabled) => {
handleOnNewValue(isEnabled, templateData.key); handleOnNewValue(isEnabled, templateData.key);
}} }}
size="small" size="small"
editNode={true} editNode={true}
/> />
</div>
); );
case "float": case "float":
return ( return (
<div className="w-[300px]">
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
rangeSpec={templateData.rangeSpec} rangeSpec={templateData.rangeSpec}
value={templateData.value ?? ""} value={templateValue ?? ""}
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateData.key); handleOnNewValue(value, templateData.key);
}} }}
/> />
</div>
); );
case "int": case "int":
return ( return (
<div className="w-[300px]">
<IntComponent <IntComponent
rangeSpec={templateData.rangeSpec} rangeSpec={templateData.rangeSpec}
id={"edit-int-input-" + templateData.name} id={"edit-int-input-" + templateData.name}
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={templateData.value ?? ""} value={templateValue ?? ""}
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateData.key); handleOnNewValue(value, templateData.key);
}} }}
/> />
</div>
); );
break;
case "file": case "file":
return ( return (
<div className="w-[300px]">
<InputFileComponent <InputFileComponent
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={templateData.value ?? ""} value={templateValue ?? ""}
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateData.key); handleOnNewValue(value, templateData.key);
}} }}
@ -236,13 +217,11 @@ export default function TableNodeCellRender({
onFileChange={(filePath: string) => { onFileChange={(filePath: string) => {
templateData.file_path = filePath; templateData.file_path = filePath;
}} }}
></InputFileComponent> />
</div>
); );
case "prompt": case "prompt":
return ( return (
<div className="w-[300px]">
<PromptAreaComponent <PromptAreaComponent
readonly={nodeClass.flow ? true : false} readonly={nodeClass.flow ? true : false}
field_name={templateData.key} field_name={templateData.key}
@ -259,13 +238,10 @@ export default function TableNodeCellRender({
id={"prompt-area-edit-" + templateData.name} id={"prompt-area-edit-" + templateData.name}
data-testid={"modal-prompt-input-" + templateData.name} data-testid={"modal-prompt-input-" + templateData.name}
/> />
</div>
); );
break;
case "code": case "code":
return ( return (
<div className="w-[300px]">
<CodeAreaComponent <CodeAreaComponent
readonly={nodeClass.flow && templateData.dynamic ? true : false} readonly={nodeClass.flow && templateData.dynamic ? true : false}
dynamic={templateData.dynamic ?? false} dynamic={templateData.dynamic ?? false}
@ -275,25 +251,22 @@ export default function TableNodeCellRender({
nodeClass={nodeClass} nodeClass={nodeClass}
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={templateData.value ?? ""} value={templateValue ?? ""}
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateData.key); handleOnNewValue(value, templateData.key);
}} }}
id={"code-area-edit" + templateData.name} id={"code-area-edit" + templateData.name}
/> />
</div>
); );
break;
case "Any": case "Any":
return <>-</>; return <>-</>;
break;
default: default:
return String(templateValue); return String(templateValue);
} }
} }
return ( return (
<div className="group flex h-full w-full items-center align-middle"> <div className="group flex h-full w-[300px] items-center justify-center">
{getCellType()} {getCellType()}
</div> </div>
); );

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

@ -29,7 +29,6 @@ export default function ToggleShadComponent({
} }
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
<Switch <Switch
id={id} id={id}
data-testid={id} data-testid={id}
@ -43,6 +42,5 @@ export default function ToggleShadComponent({
setEnabled(isEnabled); setEnabled(isEnabled);
}} }}
></Switch> ></Switch>
</div>
); );
} }

47
src/frontend/src/modals/editNodeModal/index.tsx
View file

@ -1,5 +1,5 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { forwardRef, useEffect, useState } from "react"; import { forwardRef, useEffect, useRef, useState } from "react";
import IconComponent from "../../components/genericIconComponent"; import IconComponent from "../../components/genericIconComponent";
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
import { import {
@ -35,36 +35,28 @@ const EditNodeModal = forwardRef(
const dataFromStore = nodes.find((node) => node.id === node.id)?.data; const dataFromStore = nodes.find((node) => node.id === node.id)?.data;
const [myData, setMyData] = useState(dataFromStore ?? data); const myData = useRef(dataFromStore ?? data);
const setNode = useFlowStore((state) => state.setNode); const setNode = useFlowStore((state) => state.setNode);
function changeAdvanced(n) { function changeAdvanced(n) {
setMyData((old) => { myData.current.node!.template[n].advanced =
let newData = cloneDeep(old); !myData.current.node!.template[n].advanced;
newData.node!.template[n].advanced =
!newData.node!.template[n].advanced;
return newData;
});
} }
const handleOnNewValue = (newValue: any, name) => { const handleOnNewValue = (newValue: any, name) => {
setMyData((old) => { myData.current.node!.template[name].value = newValue;
let newData = cloneDeep(old);
newData.node!.template[name].value = newValue;
return newData;
});
}; };
useEffect(() => { useEffect(() => {
if (open) { if (open) {
setMyData(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
} }
}, [open]); }, [open]);
const rowData = Object.keys(myData.node!.template) const rowData = Object.keys(myData.current.node!.template)
.filter((key: string) => { .filter((key: string) => {
const templateParam = myData.node!.template[ const templateParam = myData.current.node!.template[
key key
] as TemplateVariableType; ] as TemplateVariableType;
return ( return (
@ -78,7 +70,7 @@ const EditNodeModal = forwardRef(
); );
}) })
.map((key: string) => { .map((key: string) => {
const templateParam = myData.node!.template[ const templateParam = myData.current.node!.template[
key key
] as TemplateVariableType; ] as TemplateVariableType;
return { return {
@ -115,21 +107,16 @@ const EditNodeModal = forwardRef(
field: "value", field: "value",
cellRenderer: TableNodeCellRender, cellRenderer: TableNodeCellRender,
valueGetter: (params: ValueGetterParams) => { valueGetter: (params: ValueGetterParams) => {
console.log("params", params);
return { return {
value: params.data.value, value: params.data.value,
nodeClass: myData.node, nodeClass: myData.current.node,
handleOnNewValue: handleOnNewValue, handleOnNewValue: handleOnNewValue,
handleOnChangeDb: (value, key) => { handleOnChangeDb: (value, key) => {
setMyData((oldData) => { myData.current.node!.template[key].load_from_db = value;
let newData = cloneDeep(oldData);
newData.node!.template[key].load_from_db = value;
return newData;
});
}, },
}; };
}, },
minWidth: 300, minWidth: 330,
flex: 1, flex: 1,
resizable: false, resizable: false,
}, },
@ -159,14 +146,14 @@ const EditNodeModal = forwardRef(
open={open} open={open}
setOpen={setOpen} setOpen={setOpen}
onChangeOpenModal={(open) => { onChangeOpenModal={(open) => {
setMyData(data); myData.current = data;
}} }}
onSubmit={() => { onSubmit={() => {
setNode(data.id, (old) => ({ setNode(data.id, (old) => ({
...old, ...old,
data: { data: {
...old.data, ...old.data,
node: myData.node, node: myData.current.node,
}, },
})); }));
setOpen(false); setOpen(false);
@ -175,9 +162,9 @@ const EditNodeModal = forwardRef(
<BaseModal.Trigger> <BaseModal.Trigger>
<></> <></>
</BaseModal.Trigger> </BaseModal.Trigger>
<BaseModal.Header description={myData.node?.description!}> <BaseModal.Header description={myData.current.node?.description!}>
<span className="pr-2">{myData.type}</span> <span className="pr-2">{myData.current.type}</span>
<Badge variant="secondary">ID: {myData.id}</Badge> <Badge variant="secondary">ID: {myData.current.id}</Badge>
</BaseModal.Header> </BaseModal.Header>
<BaseModal.Content> <BaseModal.Content>
<div className="flex pb-2"> <div className="flex pb-2">