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

🐛 fix(parameterComponent): remove extra whitespace in parameterComponent

Browse source 
✨ feat(EditNodeModal): add support for handling tab state and saving changes in EditNodeModal
🐛 fix(EditNodeModal): fix disabled condition in EditNodeModal
🐛 fix(EditNodeModal): remove unused useEffect in EditNodeModal
✨ feat(EditNodeModal): add handleOnNewValue function to handle changes in EditNodeModal
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-07 19:12:18 -03:00
commit 24d1157988
2 changed files with 36 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -245,6 +245,7 @@ export default function ParameterComponent({
handleOnNewValue(t); handleOnNewValue(t);
setEnabled(t); setEnabled(t);
}} }}
size="large" size="large"
/> />
</div> </div>

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

@ -33,6 +33,7 @@ import {
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
import { Variable } from "lucide-react"; import { Variable } from "lucide-react";
import { TabsContext } from "../../contexts/tabsContext";
export default function EditNodeModal({ data }: { data: NodeDataType }) { export default function EditNodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -55,6 +56,11 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
const { types } = useContext(typesContext); const { types } = useContext(typesContext);
const ref = useRef(); const ref = useRef();
const [enabled, setEnabled] = useState(null); const [enabled, setEnabled] = useState(null);
const { setTabsState, tabId, save } = useContext(TabsContext);
const { reactFlowInstance } = useContext(typesContext);
let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? false;
if (nodeLength == 0) { if (nodeLength == 0) {
closePopUp(); closePopUp();
} }
@ -66,8 +72,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
} }
} }
useEffect(() => {}, [closePopUp, data.node.template]);
function changeAdvanced(node): void { function changeAdvanced(node): void {
Object.keys(data.node.template).filter((n, i) => { Object.keys(data.node.template).filter((n, i) => {
if (n === node.name) { if (n === node.name) {
@ -78,6 +82,20 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
setNodeValue(!nodeValue); setNodeValue(!nodeValue);
} }
const handleOnNewValue = (newValue: any, name) => {
data.node.template[name].value = newValue;
// Set state to pending
setTabsState((prev) => {
return {
...prev,
[tabId]: {
...prev[tabId],
isPending: true,
},
};
});
};
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger> <DialogTrigger asChild></DialogTrigger>
@ -153,7 +171,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
: data.node.template[n].value : data.node.template[n].value
} }
onChange={(t: string[]) => { onChange={(t: string[]) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
) : data.node.template[n].multiline ? ( ) : data.node.template[n].multiline ? (
@ -162,7 +180,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
editNode={true} editNode={true}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
) : ( ) : (
@ -174,7 +192,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
} }
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t) => { onChange={(t) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
)} )}
@ -183,13 +201,13 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<div className="ml-auto"> <div className="ml-auto">
{" "} {" "}
<ToggleShadComponent <ToggleShadComponent
enabled={data.node.template[n].value} disabled={disabled}
setEnabled={(e) => { enabled={enabled}
data.node.template[n].value = e; setEnabled={(t) => {
setEnabled(e); handleOnNewValue(t, n);
setEnabled(t);
}} }}
size="small" size="small"
disabled={false}
/> />
</div> </div>
) : data.node.template[n].type === "float" ? ( ) : data.node.template[n].type === "float" ? (
@ -210,8 +228,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
numberOfOptions={nodeLength} numberOfOptions={nodeLength}
editNode={true} editNode={true}
options={data.node.template[n].options} options={data.node.template[n].options}
onSelect={(newValue) => onSelect={(t) =>
(data.node.template[n].value = newValue) (handleOnNewValue(t, n))
} }
value={ value={
data.node.template[n].value ?? data.node.template[n].value ??
@ -226,7 +244,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
editNode={true} editNode={true}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t) => { onChange={(t) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
</div> </div>
@ -237,12 +255,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
disabled={false} disabled={false}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
fileTypes={data.node.template[n].fileTypes} fileTypes={data.node.template[n].fileTypes}
suffixes={data.node.template[n].suffixes} suffixes={data.node.template[n].suffixes}
onFileChange={(t: string) => { onFileChange={(t: string) => {
data.node.template[n].content = t; handleOnNewValue(t, n);
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
@ -254,7 +272,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
disabled={false} disabled={false}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
</div> </div>
@ -265,7 +283,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
editNode={true} editNode={true}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
</div> </div>