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

Refactored state management from tweaks

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-24 10:58:48 -03:00
commit ada32b6a48
7 changed files with 186 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

217
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -1,3 +1,4 @@
import { cloneDeep } from "lodash";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
@ -54,6 +55,7 @@ export default function CodeTabsComponent({
}; };
}) { }) {
const [isCopied, setIsCopied] = useState<Boolean>(false); const [isCopied, setIsCopied] = useState<Boolean>(false);
const [data, setData] = useState(flow["data"]["nodes"]);
const [openAccordion, setOpenAccordion] = useState([]); const [openAccordion, setOpenAccordion] = useState([]);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
@ -185,7 +187,7 @@ export default function CodeTabsComponent({
: "overflow-hidden" : "overflow-hidden"
)} )}
> >
{flow["data"]["nodes"].map((t: any, index) => ( {data.map((t: any, index) => (
<div className="px-3" key={index}> <div className="px-3" key={index}>
{tweaks.tweaksList.current.includes(t["data"]["id"]) && ( {tweaks.tweaksList.current.includes(t["data"]["id"]) && (
<AccordionComponent <AccordionComponent
@ -255,6 +257,16 @@ export default function CodeTabsComponent({
].value ].value
} }
onChange={(k) => { onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
@ -274,16 +286,29 @@ export default function CodeTabsComponent({
<TextAreaComponent <TextAreaComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={tweaks.getValue( value={
!t.data.node.template[
n
].value ||
t.data.node.template[ t.data.node.template[
n n
].value, ].value === ""
t.data, ? ""
t.data.node.template[ : t.data.node
n .template[n]
] .value
)} }
onChange={(k) => { onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
@ -302,13 +327,27 @@ export default function CodeTabsComponent({
t.data.node.template[n] t.data.node.template[n]
.password ?? false .password ?? false
} }
value={tweaks.getValue( value={
!t.data.node.template[n]
.value ||
t.data.node.template[n] t.data.node.template[n]
.value, .value === ""
t.data, ? ""
t.data.node.template[n] : t.data.node.template[
)} n
].value
}
onChange={(k) => { onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
@ -328,9 +367,16 @@ export default function CodeTabsComponent({
.value .value
} }
setEnabled={(e) => { setEnabled={(e) => {
t.data.node.template[ setData((old) => {
n let newInputList =
].value = e; cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = e;
return newInputList;
});
tweaks.buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
e, e,
@ -345,12 +391,13 @@ export default function CodeTabsComponent({
"file" ? ( "file" ? (
<ShadTooltip <ShadTooltip
content={tweaks.buildContent( content={tweaks.buildContent(
tweaks.getValue( !t.data.node.template[n]
.value ||
t.data.node.template[n] t.data.node.template[n]
.value, .value === ""
t.data, ? ""
t.data.node.template[n] : t.data.node.template[n]
) .value
)} )}
> >
<div className="mx-auto"> <div className="mx-auto">
@ -382,13 +429,26 @@ export default function CodeTabsComponent({
<FloatComponent <FloatComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={tweaks.getValue( value={
!t.data.node.template[n]
.value ||
t.data.node.template[n] t.data.node.template[n]
.value, .value === ""
t.data, ? ""
t.data.node.template[n] : t.data.node.template[n]
)} .value
}
onChange={(k) => { onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
@ -410,18 +470,31 @@ export default function CodeTabsComponent({
.options .options
} }
onSelect={(k) => { onSelect={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node.template[n] t.data.node.template[n]
); );
}} }}
value={tweaks.getValue( value={
!t.data.node.template[n]
.value ||
t.data.node.template[n] t.data.node.template[n]
.value, .value === ""
t.data, ? ""
t.data.node.template[n] : t.data.node.template[n]
)} .value
}
></Dropdown> ></Dropdown>
</div> </div>
) : t.data.node.template[n].type === ) : t.data.node.template[n].type ===
@ -430,13 +503,26 @@ export default function CodeTabsComponent({
<IntComponent <IntComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={tweaks.getValue( value={
!t.data.node.template[n]
.value ||
t.data.node.template[n] t.data.node.template[n]
.value, .value === ""
t.data, ? ""
t.data.node.template[n] : t.data.node.template[n]
)} .value
}
onChange={(k) => { onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
@ -449,25 +535,40 @@ export default function CodeTabsComponent({
"prompt" ? ( "prompt" ? (
<ShadTooltip <ShadTooltip
content={tweaks.buildContent( content={tweaks.buildContent(
tweaks.getValue( !t.data.node.template[n]
.value ||
t.data.node.template[n] t.data.node.template[n]
.value, .value === ""
t.data, ? ""
t.data.node.template[n] : t.data.node.template[n]
) .value
)} )}
> >
<div className="mx-auto"> <div className="mx-auto">
<PromptAreaComponent <PromptAreaComponent
editNode={true} editNode={true}
disabled={false} disabled={false}
value={tweaks.getValue( value={
!t.data.node.template[n]
.value ||
t.data.node.template[n] t.data.node.template[n]
.value, .value === ""
t.data, ? ""
t.data.node.template[n] : t.data.node.template[
)} n
].value
}
onChange={(k) => { onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
@ -493,13 +594,27 @@ export default function CodeTabsComponent({
<CodeAreaComponent <CodeAreaComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={tweaks.getValue( value={
!t.data.node.template[n]
.value ||
t.data.node.template[n] t.data.node.template[n]
.value, .value === ""
t.data, ? ""
t.data.node.template[n] : t.data.node.template[
)} n
].value
}
onChange={(k) => { onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,

11
src/frontend/src/components/floatComponent/index.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { FloatComponentType } from "../../types/components"; import { FloatComponentType } from "../../types/components";
export default function FloatComponent({ export default function FloatComponent({
@ -11,12 +11,6 @@ export default function FloatComponent({
const min = 0; const min = 0;
const max = 1; const max = 1;
const [myValue, setMyValue] = useState(value);
useEffect(() => {
setMyValue(value);
}, [value]);
// Clear component state // Clear component state
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
@ -39,7 +33,7 @@ export default function FloatComponent({
} }
}} }}
max={max} max={max}
value={myValue ?? ""} value={value ?? ""}
className={ className={
"nopan nodrag noundo nocopy " + "nopan nodrag noundo nocopy " +
(editNode (editNode
@ -51,7 +45,6 @@ export default function FloatComponent({
} }
onChange={(e) => { onChange={(e) => {
onChange(e.target.value); onChange(e.target.value);
setMyValue(e.target.value);
}} }}
/> />
</div> </div>

8
src/frontend/src/components/inputComponent/index.tsx
View file

@ -10,11 +10,6 @@ export default function InputComponent({
editNode = false, editNode = false,
}: InputComponentType) { }: InputComponentType) {
const [pwdVisible, setPwdVisible] = useState(false); const [pwdVisible, setPwdVisible] = useState(false);
const [myValue, setMyValue] = useState(value);
useEffect(() => {
setMyValue(value);
}, [value]);
// Clear component state // Clear component state
useEffect(() => { useEffect(() => {
@ -26,7 +21,7 @@ export default function InputComponent({
return ( return (
<div className={disabled ? "input-component-div" : "relative"}> <div className={disabled ? "input-component-div" : "relative"}>
<input <input
value={myValue} value={value}
className={classNames( className={classNames(
disabled ? " input-disable " : "", disabled ? " input-disable " : "",
password && !pwdVisible && value !== "" ? " text-clip password " : "", password && !pwdVisible && value !== "" ? " text-clip password " : "",
@ -38,7 +33,6 @@ export default function InputComponent({
placeholder={password && editNode ? "Key" : "Type something..."} placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => { onChange={(e) => {
onChange(e.target.value); onChange(e.target.value);
setMyValue(e.target.value);
}} }}
/> />
{password && ( {password && (

46
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -1,8 +1,7 @@
import { useContext, useEffect, useState } from "react"; import { useEffect } from "react";
import { InputListComponentType } from "../../types/components"; import { InputListComponentType } from "../../types/components";
import _ from "lodash"; import _ from "lodash";
import { PopUpContext } from "../../contexts/popUpContext";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
export default function InputListComponent({ export default function InputListComponent({
@ -11,21 +10,11 @@ export default function InputListComponent({
disabled, disabled,
editNode = false, editNode = false,
}: InputListComponentType) { }: InputListComponentType) {
const [inputList, setInputList] = useState(value ?? [""]);
const { closeEdit } = useContext(PopUpContext);
useEffect(() => {
if (value) {
setInputList(value);
}
}, [closeEdit]);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setInputList([""]);
onChange([""]); onChange([""]);
} }
}, [disabled, onChange]); }, [disabled]);
return ( return (
<div <div
@ -34,7 +23,7 @@ export default function InputListComponent({
"flex flex-col gap-3" "flex flex-col gap-3"
} }
> >
{inputList.map((i, idx) => { {value.map((i, idx) => {
return ( return (
<div key={idx} className="flex w-full gap-3"> <div key={idx} className="flex w-full gap-3">
<input <input
@ -48,23 +37,17 @@ export default function InputListComponent({
} }
placeholder="Type something..." placeholder="Type something..."
onChange={(e) => { onChange={(e) => {
setInputList((old) => { let newInputList = _.cloneDeep(value);
let newInputList = _.cloneDeep(inputList); newInputList[idx] = e.target.value;
newInputList[idx] = e.target.value; onChange(newInputList);
return newInputList;
});
onChange(inputList);
}} }}
/> />
{idx === inputList.length - 1 ? ( {idx === value.length - 1 ? (
<button <button
onClick={() => { onClick={() => {
setInputList((old) => { let newInputList = _.cloneDeep(value);
let newInputList = _.cloneDeep(old); newInputList.push("");
newInputList.push(""); onChange(newInputList);
return newInputList;
});
onChange(inputList);
}} }}
> >
<IconComponent <IconComponent
@ -75,12 +58,9 @@ export default function InputListComponent({
) : ( ) : (
<button <button
onClick={() => { onClick={() => {
setInputList((old) => { let newInputList = _.cloneDeep(value);
let newInputList = _.cloneDeep(old); newInputList.splice(idx, 1);
newInputList.splice(idx, 1); onChange(newInputList);
return newInputList;
});
onChange(inputList);
}} }}
> >
<IconComponent <IconComponent

11
src/frontend/src/components/intComponent/index.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { FloatComponentType } from "../../types/components"; import { FloatComponentType } from "../../types/components";
export default function IntComponent({ export default function IntComponent({
@ -9,12 +9,6 @@ export default function IntComponent({
}: FloatComponentType) { }: FloatComponentType) {
const min = 0; const min = 0;
const [myValue, setMyValue] = useState(value);
useEffect(() => {
setMyValue(value);
}, [value]);
// Clear component state // Clear component state
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
@ -56,7 +50,7 @@ export default function IntComponent({
e.target.value = min.toString(); e.target.value = min.toString();
} }
}} }}
value={myValue ?? ""} value={value ?? ""}
className={ className={
"nopan nodrag noundo nocopy " + "nopan nodrag noundo nocopy " +
(editNode (editNode
@ -66,7 +60,6 @@ export default function IntComponent({
placeholder={editNode ? "Integer number" : "Type an integer number"} placeholder={editNode ? "Integer number" : "Type an integer number"}
onChange={(e) => { onChange={(e) => {
onChange(e.target.value); onChange(e.target.value);
setMyValue(e.target.value);
}} }}
/> />
</div> </div>

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

@ -1,4 +1,3 @@
import { useEffect, useState } from "react";
import { ToggleComponentType } from "../../types/components"; import { ToggleComponentType } from "../../types/components";
import { Switch } from "../ui/switch"; import { Switch } from "../ui/switch";
@ -27,12 +26,6 @@ export default function ToggleShadComponent({
scaleY = 1; scaleY = 1;
} }
const [myValue, setMyValue] = useState(enabled);
useEffect(() => {
setMyValue(enabled);
}, [enabled]);
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
<Switch <Switch
@ -41,10 +34,9 @@ export default function ToggleShadComponent({
}} }}
disabled={disabled} disabled={disabled}
className="" className=""
checked={myValue} checked={enabled}
onCheckedChange={(x: boolean) => { onCheckedChange={(x: boolean) => {
setEnabled(x); setEnabled(x);
setMyValue(x);
}} }}
></Switch> ></Switch>
</div> </div>

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

@ -22,11 +22,10 @@ import {
TableRow, TableRow,
} from "../../components/ui/table"; } from "../../components/ui/table";
import { limitScrollFieldsModal } from "../../constants/constants"; import { limitScrollFieldsModal } from "../../constants/constants";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { classNames, getRandomKeyByssmm } from "../../utils/utils"; import { classNames } from "../../utils/utils";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
const EditNodeModal = forwardRef( const EditNodeModal = forwardRef(
@ -48,7 +47,6 @@ const EditNodeModal = forwardRef(
const [myData, setMyData] = useState(data); const [myData, setMyData] = useState(data);
const { setTabsState, tabId } = useContext(TabsContext); const { setTabsState, tabId } = useContext(TabsContext);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
const { setCloseEdit } = useContext(PopUpContext);
let disabled = let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ??
@ -72,7 +70,6 @@ const EditNodeModal = forwardRef(
useEffect(() => { useEffect(() => {
setMyData(data); // reset data to what it is on node when opening modal setMyData(data); // reset data to what it is on node when opening modal
setCloseEdit(getRandomKeyByssmm().toString());
}, [modalOpen]); }, [modalOpen]);
return ( return (