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

merging modal refactor

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-24 16:18:45 -03:00
commit 2c32b13632
27 changed files with 1647 additions and 2641 deletions
Download patch file Download diff file Expand all files Collapse all files

3443
src/frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
src/frontend/src/components/EditFlowSettingsComponent/index.tsx
View file

@ -40,10 +40,10 @@ export const EditFlowSettings: React.FC<InputProps> = ({
const [desc, setDesc] = useState(
flows.find((f) => f.id === tabId).description
);
const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
flows.find((f) => f.id === tabId).description = event.target.value;
setDesc(flows.find((f) => f.id === tabId).description)
setDesc(flows.find((f) => f.id === tabId).description);
setDescription(event.target.value);
};

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

@ -254,8 +254,7 @@ export default function CodeTabsComponent({
n
].value
}
onChange={(k) => {}}
onAddInput={(k) => {
onChange={(k) => {
tweaks.buildTweakObject(
t["data"]["id"],
k,

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

@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { FloatComponentType } from "../../types/components";
import { Input } from "../ui/input";
@ -12,6 +12,12 @@ export default function FloatComponent({
const min = 0;
const max = 1;
const [myValue, setMyValue] = useState(value);
useEffect(() => {
setMyValue(value);
}, [value]);
// Clear component state
useEffect(() => {
if (disabled) {
@ -42,6 +48,7 @@ export default function FloatComponent({
}
onChange={(e) => {
onChange(e.target.value);
setMyValue(e.target.value);
}}
/>
</div>

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

@ -11,6 +11,11 @@ export default function InputComponent({
editNode = false,
}: InputComponentType) {
const [pwdVisible, setPwdVisible] = useState(false);
const [myValue, setMyValue] = useState(value);
useEffect(() => {
setMyValue(value);
}, [value]);
// Clear component state
useEffect(() => {
@ -33,6 +38,7 @@ export default function InputComponent({
placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => {
onChange(e.target.value);
setMyValue(e.target.value);
}}
/>
{password && (

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

@ -1,18 +1,17 @@
import { useEffect, useState, useContext } from "react";
import { useContext, useEffect, useState } from "react";
import { InputListComponentType } from "../../types/components";
import _, { set } from "lodash";
import IconComponent from "../genericIconComponent";
import { Input } from "../ui/input";
import { classNames } from "../../utils/utils";
import _ from "lodash";
import { PopUpContext } from "../../contexts/popUpContext";
import IconComponent from "../genericIconComponent";
export default function InputListComponent({
value,
onChange,
disabled,
editNode = false,
onAddInput,
}: InputListComponentType) {
const [inputList, setInputList] = useState(value ?? [""]);
const { closeEdit } = useContext(PopUpContext);

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

@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { FloatComponentType } from "../../types/components";
import { Input } from "../ui/input";
@ -10,6 +10,12 @@ export default function IntComponent({
}: FloatComponentType) {
const min = 0;
const [myValue, setMyValue] = useState(value);
useEffect(() => {
setMyValue(value);
}, [value]);
// Clear component state
useEffect(() => {
if (disabled) {
@ -52,6 +58,7 @@ export default function IntComponent({
placeholder={editNode ? "Integer number" : "Type an integer number"}
onChange={(e) => {
onChange(e.target.value);
setMyValue(e.target.value);
}}
/>
</div>

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

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

2
src/frontend/src/controllers/API/index.ts
View file

@ -76,7 +76,7 @@ export async function postValidatePrompt(
*/
export async function getExamples(): Promise<FlowType[]> {
const url =
"https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples?ref=fix_examples";
"https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples?ref=main";
const response = await axios.get(url);
const jsonFiles = response.data.filter((file: any) => {

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

@ -22,12 +22,12 @@ import {
TableRow,
} from "../../components/ui/table";
import { limitScrollFieldsModal } from "../../constants/constants";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow";
import { classNames, getRandomKeyByssmm } from "../../utils/utils";
import BaseModal from "../baseModal";
import { PopUpContext } from "../../contexts/popUpContext";
const EditNodeModal = forwardRef(
(
@ -75,7 +75,6 @@ const EditNodeModal = forwardRef(
setCloseEdit(getRandomKeyByssmm().toString());
}, [modalOpen]);
return (
<BaseModal size="large-h-full" open={modalOpen} setOpen={setModalOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger>

6
src/frontend/src/modals/genericModal/index.tsx
View file

@ -97,10 +97,8 @@ export default function GenericModal({
}, [inputValue, type]);
useEffect(() => {
setInputValue(value)
}, [value])
setInputValue(value);
}, [value]);
const coloredContent = (inputValue || "")
.replace(/</g, "&lt;")

31
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -94,24 +94,23 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }) {
<ShadTooltip content="Edit" side="top">
<div>
<EditNodeModal
data={data}
setData={setData}
nodeLength={nodeLength}
>
<div
className={classNames(
"relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(nodeLength == 0
? " text-muted-foreground"
: " text-foreground")
)}
<EditNodeModal
data={data}
setData={setData}
nodeLength={nodeLength}
>
<IconComponent name="Settings2" className="h-4 w-4 " />
</div>
</EditNodeModal>
<div
className={classNames(
"relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(nodeLength == 0
? " text-muted-foreground"
: " text-foreground")
)}
>
<IconComponent name="Settings2" className="h-4 w-4 " />
</div>
</EditNodeModal>
</div>
</ShadTooltip>
</span>
</div>

1
src/frontend/src/types/components/index.ts
View file

@ -45,7 +45,6 @@ export type InputListComponentType = {
onChange: (value: string[]) => void;
disabled: boolean;
editNode?: boolean;
onAddInput?: (value?: string[]) => void;
};
export type TextAreaComponentType = {

2
src/frontend/src/utils/utils.ts
View file

@ -275,7 +275,7 @@ export function buildTweakObject(tweak) {
});
});
const tweakString = JSON.stringify(tweak, null, 2);
const tweakString = JSON.stringify(tweak.at(-1), null, 2);
return tweakString;
}