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

formated code

Browse source
This commit is contained in:
igorrCarvalho 2023-09-21 15:20:36 -03:00
commit b7b7a93cdd
5 changed files with 121 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/frontend/src/components/ui/select-custom.tsx
View file

@ -1,16 +1,14 @@
"use client" "use client";
import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select";
import * as SelectPrimitive from "@radix-ui/react-select" import * as React from "react";
import { Check, ChevronDown } from "lucide-react" import { cn } from "../../utils/utils";
import { cn } from "../../utils/utils"
const Select = SelectPrimitive.Root;
const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group;
const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value;
const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef< const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>, React.ElementRef<typeof SelectPrimitive.Trigger>,
@ -18,18 +16,14 @@ const SelectTrigger = React.forwardRef<
>(({ className, children, ...props }, ref) => ( >(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
ref={ref} ref={ref}
className={cn( className={cn("flex w-full items-center justify-between", className)}
"flex w-full items-center justify-between",
className
)}
{...props} {...props}
> >
{children} {children}
<SelectPrimitive.Icon asChild> <SelectPrimitive.Icon asChild></SelectPrimitive.Icon>
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
)) ));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectContent = React.forwardRef< const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>, React.ElementRef<typeof SelectPrimitive.Content>,
@ -58,8 +52,8 @@ const SelectContent = React.forwardRef<
</SelectPrimitive.Viewport> </SelectPrimitive.Viewport>
</SelectPrimitive.Content> </SelectPrimitive.Content>
</SelectPrimitive.Portal> </SelectPrimitive.Portal>
)) ));
SelectContent.displayName = SelectPrimitive.Content.displayName SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = React.forwardRef< const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>, React.ElementRef<typeof SelectPrimitive.Label>,
@ -70,8 +64,8 @@ const SelectLabel = React.forwardRef<
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props} {...props}
/> />
)) ));
SelectLabel.displayName = SelectPrimitive.Label.displayName SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = React.forwardRef< const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>, React.ElementRef<typeof SelectPrimitive.Item>,
@ -80,17 +74,15 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item <SelectPrimitive.Item
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex w-full cursor-pointer select-none items-center pl-3 rounded-sm py-1.5 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-3 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className className
)} )}
{...props} {...props}
> >
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item> </SelectPrimitive.Item>
)) ));
SelectItem.displayName = SelectPrimitive.Item.displayName SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = React.forwardRef< const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>, React.ElementRef<typeof SelectPrimitive.Separator>,
@ -101,16 +93,16 @@ const SelectSeparator = React.forwardRef<
className={cn("-mx-1 my-1 h-px bg-muted", className)} className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props} {...props}
/> />
)) ));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
export { export {
Select, Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent, SelectContent,
SelectLabel, SelectGroup,
SelectItem, SelectItem,
SelectLabel,
SelectSeparator, SelectSeparator,
} SelectTrigger,
SelectValue,
};

25
src/frontend/src/components/ui/select.tsx
View file

@ -1,16 +1,15 @@
"use client" "use client";
import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select";
import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown } from "lucide-react";
import { Check, ChevronDown } from "lucide-react" import * as React from "react";
import { cn } from "../../utils/utils" import { cn } from "../../utils/utils";
const Select = SelectPrimitive.Root;
const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group;
const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value;
const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef< const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>, React.ElementRef<typeof SelectPrimitive.Trigger>,
@ -59,8 +58,8 @@ const SelectContent = React.forwardRef<
</SelectPrimitive.Viewport> </SelectPrimitive.Viewport>
</SelectPrimitive.Content> </SelectPrimitive.Content>
</SelectPrimitive.Portal> </SelectPrimitive.Portal>
)) ));
SelectContent.displayName = SelectPrimitive.Content.displayName SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = React.forwardRef< const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>, React.ElementRef<typeof SelectPrimitive.Label>,
@ -71,8 +70,8 @@ const SelectLabel = React.forwardRef<
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props} {...props}
/> />
)) ));
SelectLabel.displayName = SelectPrimitive.Label.displayName SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = React.forwardRef< const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>, React.ElementRef<typeof SelectPrimitive.Item>,

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

@ -1,12 +1,5 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { import { ReactNode, forwardRef, useContext, useEffect, useState } from "react";
ReactNode,
forwardRef,
useContext,
useEffect,
useRef,
useState,
} from "react";
import CodeAreaComponent from "../../components/codeAreaComponent"; import CodeAreaComponent from "../../components/codeAreaComponent";
import DictComponent from "../../components/dictComponent"; import DictComponent from "../../components/dictComponent";
import Dropdown from "../../components/dropdownComponent"; import Dropdown from "../../components/dropdownComponent";
@ -50,7 +43,7 @@ const EditNodeModal = forwardRef(
nodeLength, nodeLength,
children, children,
open, open,
onClose onClose,
}: { }: {
data: NodeDataType; data: NodeDataType;
setData: (data: NodeDataType) => void; setData: (data: NodeDataType) => void;
@ -61,7 +54,6 @@ const EditNodeModal = forwardRef(
}, },
ref ref
) => { ) => {
const [modalOpen, setModalOpen] = useState(open ?? false); const [modalOpen, setModalOpen] = useState(open ?? false);
const [myData, setMyData] = useState(data); const [myData, setMyData] = useState(data);
const { setTabsState, tabId } = useContext(TabsContext); const { setTabsState, tabId } = useContext(TabsContext);
@ -158,60 +150,53 @@ const EditNodeModal = forwardRef(
(templateParam) => (templateParam) =>
templateParam.charAt(0) !== "_" && templateParam.charAt(0) !== "_" &&
myData.node?.template[templateParam].show && myData.node?.template[templateParam].show &&
(myData.node.template[templateParam] (myData.node.template[templateParam].type ===
.type === "str" || "str" ||
myData.node.template[templateParam] myData.node.template[templateParam].type ===
.type === "bool" || "bool" ||
myData.node.template[templateParam] myData.node.template[templateParam].type ===
.type === "float" || "float" ||
myData.node.template[templateParam] myData.node.template[templateParam].type ===
.type === "code" || "code" ||
myData.node.template[templateParam] myData.node.template[templateParam].type ===
.type === "prompt" || "prompt" ||
myData.node.template[templateParam] myData.node.template[templateParam].type ===
.type === "file" || "file" ||
myData.node.template[templateParam] myData.node.template[templateParam].type ===
.type === "int") "int")
) )
.map((templateParam, index) => ( .map((templateParam, index) => (
<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">
{myData.node?.template[templateParam].name {myData.node?.template[templateParam].name
? myData.node.template[templateParam] ? myData.node.template[templateParam].name
.name
: myData.node?.template[templateParam] : myData.node?.template[templateParam]
.display_name} .display_name}
</TableCell> </TableCell>
<TableCell className="w-[300px] p-0 text-center text-xs text-foreground "> <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
{myData.node?.template[templateParam] {myData.node?.template[templateParam].type ===
.type === "str" && "str" &&
!myData.node.template[templateParam] !myData.node.template[templateParam].options ? (
.options ? (
<div className="mx-auto"> <div className="mx-auto">
{myData.node.template[templateParam] {myData.node.template[templateParam].list ? (
.list ? (
<InputListComponent <InputListComponent
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={ value={
!myData.node.template[ !myData.node.template[templateParam]
templateParam .value ||
].value || myData.node.template[templateParam]
myData.node.template[ .value === ""
templateParam
].value === ""
? [""] ? [""]
: myData.node.template[ : myData.node.template[templateParam]
templateParam .value
].value
} }
onChange={(value: string[]) => { onChange={(value: string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
) : myData.node?.template[ ) : myData.node?.template[templateParam]
templateParam .type === "NestedDict" ? (
].type === "NestedDict" ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<DictComponent <DictComponent
disabled={disabled} disabled={disabled}
@ -222,20 +207,17 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.node?.template[ ) : myData.node?.template[templateParam]
templateParam .type === "dict" ? (
].type === "dict" ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<KeypairListComponent <KeypairListComponent
disabled={disabled} disabled={disabled}
editNode={false} editNode={false}
value={ value={
myData.node.template[ myData.node.template[templateParam]
templateParam .value?.length === 0 ||
].value?.length === 0 || !myData.node.template[templateParam]
!myData.node.template[ .value
templateParam
].value
? dictArr ? dictArr
: convertObjToArray( : convertObjToArray(
myData.node.template[ myData.node.template[
@ -259,16 +241,14 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.node.template[ ) : myData.node.template[templateParam]
templateParam .multiline ? (
].multiline ? (
<TextAreaComponent <TextAreaComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node.template[ myData.node.template[templateParam]
templateParam .value ?? ""
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
@ -279,14 +259,12 @@ const EditNodeModal = forwardRef(
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
password={ password={
myData.node.template[ myData.node.template[templateParam]
templateParam .password ?? false
].password ?? false
} }
value={ value={
myData.node.template[ myData.node.template[templateParam]
templateParam .value ?? ""
].value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
@ -294,16 +272,14 @@ const EditNodeModal = forwardRef(
/> />
)} )}
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "bool" ? ( "bool" ? (
<div className="ml-auto"> <div className="ml-auto">
{" "} {" "}
<ToggleShadComponent <ToggleShadComponent
disabled={disabled} disabled={disabled}
enabled={ enabled={
myData.node.template[ myData.node.template[templateParam].value
templateParam
].value
} }
setEnabled={(isEnabled) => { setEnabled={(isEnabled) => {
handleOnNewValue( handleOnNewValue(
@ -314,84 +290,76 @@ const EditNodeModal = forwardRef(
size="small" size="small"
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "float" ? ( "float" ? (
<div className="mx-auto"> <div className="mx-auto">
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node.template[ myData.node.template[templateParam]
templateParam .value ?? ""
].value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "str" && "str" &&
myData.node.template[templateParam] myData.node.template[templateParam].options ? (
.options ? (
<div className="mx-auto"> <div className="mx-auto">
<Dropdown <Dropdown
numberOfOptions={nodeLength} numberOfOptions={nodeLength}
editNode={true} editNode={true}
options={ options={
myData.node.template[ myData.node.template[templateParam]
templateParam .options
].options
} }
onSelect={(value) => onSelect={(value) =>
handleOnNewValue(value, templateParam) handleOnNewValue(value, templateParam)
} }
value={ value={
myData.node.template[ myData.node.template[templateParam]
templateParam .value ?? "Choose an option"
].value ?? "Choose an option"
} }
></Dropdown> ></Dropdown>
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "int" ? ( "int" ? (
<div className="mx-auto"> <div className="mx-auto">
<IntComponent <IntComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node.template[ myData.node.template[templateParam]
templateParam .value ?? ""
].value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "file" ? ( "file" ? (
<div className="mx-auto"> <div className="mx-auto">
<InputFileComponent <InputFileComponent
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={ value={
myData.node.template[ myData.node.template[templateParam]
templateParam .value ?? ""
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
fileTypes={ fileTypes={
myData.node.template[ myData.node.template[templateParam]
templateParam .fileTypes
].fileTypes
} }
suffixes={ suffixes={
myData.node.template[ myData.node.template[templateParam]
templateParam .suffixes
].suffixes
} }
onFileChange={(filePath: string) => { onFileChange={(filePath: string) => {
data.node!.template[ data.node!.template[
@ -400,8 +368,8 @@ const EditNodeModal = forwardRef(
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "prompt" ? ( "prompt" ? (
<div className="mx-auto"> <div className="mx-auto">
<PromptAreaComponent <PromptAreaComponent
field_name={templateParam} field_name={templateParam}
@ -412,17 +380,16 @@ const EditNodeModal = forwardRef(
myData.node = nodeClass; myData.node = nodeClass;
}} }}
value={ value={
myData.node.template[ myData.node.template[templateParam]
templateParam .value ?? ""
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "code" ? ( "code" ? (
<div className="mx-auto"> <div className="mx-auto">
<CodeAreaComponent <CodeAreaComponent
dynamic={ dynamic={
@ -436,17 +403,16 @@ const EditNodeModal = forwardRef(
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node.template[ myData.node.template[templateParam]
templateParam .value ?? ""
].value ?? ""
} }
onChange={(value: string | string[]) => { onChange={(value: string | string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "Any" ? ( "Any" ? (
"-" "-"
) : ( ) : (
<div className="hidden"></div> <div className="hidden"></div>
@ -456,9 +422,8 @@ const EditNodeModal = forwardRef(
<div className="items-center text-center"> <div className="items-center text-center">
<ToggleShadComponent <ToggleShadComponent
enabled={ enabled={
!myData.node?.template[ !myData.node?.template[templateParam]
templateParam .advanced
].advanced
} }
setEnabled={(e) => setEnabled={(e) =>
changeAdvanced(templateParam) changeAdvanced(templateParam)

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

@ -10,8 +10,8 @@ import {
} from "../../../../components/ui/select-custom"; } from "../../../../components/ui/select-custom";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import EditNodeModal from "../../../../modals/EditNodeModal"; import EditNodeModal from "../../../../modals/EditNodeModal";
import { classNames, getRandomKeyByssmm } from "../../../../utils/utils";
import { nodeToolbarPropsType } from "../../../../types/components"; import { nodeToolbarPropsType } from "../../../../types/components";
import { classNames, getRandomKeyByssmm } from "../../../../utils/utils";
export default function NodeToolbarComponent({ export default function NodeToolbarComponent({
data, data,
@ -145,7 +145,7 @@ export default function NodeToolbarComponent({
)} )}
<Select onValueChange={handleSelectChange} value={selectedValue}> <Select onValueChange={handleSelectChange} value={selectedValue}>
<ShadTooltip content="More" side="top" > <ShadTooltip content="More" side="top">
<SelectTrigger> <SelectTrigger>
<div> <div>
<div <div

2
src/frontend/src/pages/signUpPage/index.tsx
View file

@ -20,7 +20,7 @@ export default function SignUp(): JSX.Element {
const [inputState, setInputState] = const [inputState, setInputState] =
useState<signUpInputStateType>(CONTROL_INPUT_STATE); useState<signUpInputStateType>(CONTROL_INPUT_STATE);
const [isDisabled, setDisableBtn] = useState<boolean>(true) const [isDisabled, setDisableBtn] = useState<boolean>(true);
const { password, cnfPassword, username } = inputState; const { password, cnfPassword, username } = inputState;
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData } = useContext(alertContext);