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

Fix formatting issues and add missing semicolons

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-11-28 23:08:26 -03:00
commit 44b0ca9a15
12 changed files with 116 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -135,7 +135,9 @@ export default function GenericNode({
position={{ x: xPos, y: yPos }} position={{ x: xPos, y: yPos }}
data={data} data={data}
deleteNode={deleteNode} deleteNode={deleteNode}
setShowNode={(showNode: boolean) => {data.showNode = showNode}} setShowNode={(showNode: boolean) => {
data.showNode = showNode;
}}
numberOfHandles={handles} numberOfHandles={handles}
showNode={showNode} showNode={showNode}
></NodeToolbarComponent> ></NodeToolbarComponent>
@ -513,7 +515,7 @@ export default function GenericNode({
dataType: data.type, dataType: data.type,
})} })}
data={data} data={data}
color={nodeColors[types[data.type]] ?? nodeColors.unknown} color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={ title={
data.node?.output_types && data.node.output_types.length > 0 data.node?.output_types && data.node.output_types.length > 0
? data.node.output_types.join("|") ? data.node.output_types.join("|")

5
src/frontend/src/contexts/flowsContext.tsx
View file

@ -418,7 +418,10 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
const insidePosition = position.paneX const insidePosition = position.paneX
? { x: position.paneX + position.x, y: position.paneY! + position.y } ? { x: position.paneX + position.x, y: position.paneY! + position.y }
: reactFlowInstance!.screenToFlowPosition({ x: position.x, y: position.y }); : reactFlowInstance!.screenToFlowPosition({
x: position.x,
y: position.y,
});
selectionInstance.nodes.forEach((node: NodeType) => { selectionInstance.nodes.forEach((node: NodeType) => {
// Generate a unique node ID // Generate a unique node ID

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

@ -357,10 +357,10 @@ export async function postCustomComponent(
code: string, code: string,
apiClass: APIClassType apiClass: APIClassType
): Promise<AxiosResponse<APIClassType>> { ): Promise<AxiosResponse<APIClassType>> {
let template = apiClass.template let template = apiClass.template;
return await api.post(`${BASE_URL_API}custom_component`, { return await api.post(`${BASE_URL_API}custom_component`, {
code, code,
template template,
}); });
} }

11
src/frontend/src/icons/GradientSparkles/index.tsx
View file

@ -1,4 +1,4 @@
import { InfinityIcon, Terminal, Code } from "lucide-react"; import { Code } from "lucide-react";
import { forwardRef } from "react"; import { forwardRef } from "react";
import ForwardedIconComponent from "../../components/genericIconComponent"; import ForwardedIconComponent from "../../components/genericIconComponent";
@ -21,7 +21,6 @@ export const GradientInfinity = forwardRef<
); );
}); });
export const GradientSave = forwardRef< export const GradientSave = forwardRef<
SVGSVGElement, SVGSVGElement,
React.PropsWithChildren<{}> React.PropsWithChildren<{}>
@ -38,7 +37,7 @@ export const GradientSave = forwardRef<
</svg> </svg>
<ForwardedIconComponent <ForwardedIconComponent
name="Save" name="Save"
stroke="url(#grad2)" stroke="url(#grad2)"
ref={ref} ref={ref}
{...props} {...props}
/> />
@ -57,11 +56,7 @@ export const GradientGroup = (props) => {
</linearGradient> </linearGradient>
</defs> </defs>
</svg> </svg>
<ForwardedIconComponent <ForwardedIconComponent name="Combine" stroke="url(#grad3)" {...props} />
name="Combine"
stroke="url(#grad3)"
{...props}
/>
</> </>
); );
}; };

4
src/frontend/src/modals/DeleteConfirmationModal/index.tsx
View file

@ -41,7 +41,9 @@ export default function DeleteConfirmationModal({
</span> </span>
<DialogFooter> <DialogFooter>
<DialogClose> <DialogClose>
<Button className="mr-3" variant="outline">Cancel</Button> <Button className="mr-3" variant="outline">
Cancel
</Button>
<Button <Button
type="submit" type="submit"

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

@ -1,5 +1,5 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { forwardRef, useContext, useEffect, useRef, useState } from "react"; import { forwardRef, useContext, useEffect, useState } from "react";
import { useUpdateNodeInternals } from "reactflow"; import { useUpdateNodeInternals } from "reactflow";
import ShadTooltip from "../../components/ShadTooltipComponent"; import ShadTooltip from "../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../components/codeAreaComponent"; import CodeAreaComponent from "../../components/codeAreaComponent";
@ -85,7 +85,6 @@ const EditNodeModal = forwardRef(
updateNodeInternals(data.id); updateNodeInternals(data.id);
}; };
useEffect(() => { useEffect(() => {
if (open) { if (open) {
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
@ -156,64 +155,52 @@ const EditNodeModal = forwardRef(
<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">
<ShadTooltip <ShadTooltip
content={ content={
myData.node?.template[templateParam] myData.node?.template[templateParam].proxy
.proxy ? myData.node?.template[templateParam].proxy
? myData.node?.template[ ?.id
templateParam
].proxy?.id
: null : null
} }
> >
<span> <span>
{myData.node?.template[templateParam] {myData.node?.template[templateParam]
.display_name .display_name
? myData.node.template[ ? myData.node.template[templateParam]
templateParam .display_name
].display_name : myData.node?.template[templateParam].name}
: myData.node?.template[
templateParam
].name}
</span> </span>
</ShadTooltip> </ShadTooltip>
</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 .multiline ? (
].multiline ? (
<TextAreaComponent <TextAreaComponent
id={"textarea-edit-" + index} id={"textarea-edit-" + index}
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);
@ -225,14 +212,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);
@ -240,8 +225,8 @@ const EditNodeModal = forwardRef(
/> />
)} )}
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "NestedDict" ? ( "NestedDict" ? (
<div className=" w-full"> <div className=" w-full">
<DictComponent <DictComponent
disabled={disabled} disabled={disabled}
@ -253,9 +238,8 @@ const EditNodeModal = forwardRef(
? { ? {
yourkey: "value", yourkey: "value",
} }
: myData.node!.template[ : myData.node!.template[templateParam]
templateParam .value
].value
} }
onChange={(newValue) => { onChange={(newValue) => {
myData.node!.template[ myData.node!.template[
@ -266,13 +250,13 @@ const EditNodeModal = forwardRef(
id="editnode-div-dict-input" id="editnode-div-dict-input"
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "dict" ? ( "dict" ? (
<div <div
className={classNames( className={classNames(
"max-h-48 w-full overflow-auto custom-scroll", "max-h-48 w-full overflow-auto custom-scroll",
myData.node!.template[templateParam] myData.node!.template[templateParam].value
.value?.length > 1 ?.length > 1
? "my-3" ? "my-3"
: "" : ""
)} )}
@ -281,17 +265,14 @@ const EditNodeModal = forwardRef(
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node!.template[ myData.node!.template[templateParam].value
templateParam ?.length === 0 ||
].value?.length === 0 || !myData.node!.template[templateParam]
!myData.node!.template[ .value
templateParam
].value
? [{ "": "" }] ? [{ "": "" }]
: convertObjToArray( : convertObjToArray(
myData.node!.template[ myData.node!.template[templateParam]
templateParam .value
].value
) )
} }
duplicateKey={errorDuplicateKey} duplicateKey={errorDuplicateKey}
@ -311,17 +292,15 @@ 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
id={"toggle-edit-" + index} id={"toggle-edit-" + index}
disabled={disabled} disabled={disabled}
enabled={ enabled={
myData.node.template[ myData.node.template[templateParam].value
templateParam
].value
} }
setEnabled={(isEnabled) => { setEnabled={(isEnabled) => {
handleOnNewValue( handleOnNewValue(
@ -332,86 +311,78 @@ 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"
} }
id={"dropdown-edit-" + index} id={"dropdown-edit-" + index}
></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
id={"int-input-" + index} id={"int-input-" + index}
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[
@ -420,13 +391,11 @@ 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
readonly={ readonly={myData.node?.flow ? true : false}
myData.node?.flow ? true : false
}
field_name={templateParam} field_name={templateParam}
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
@ -435,9 +404,8 @@ 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);
@ -445,15 +413,14 @@ const EditNodeModal = forwardRef(
id={"prompt-area-edit" + index} id={"prompt-area-edit" + index}
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "code" ? ( "code" ? (
<div className="mx-auto"> <div className="mx-auto">
<CodeAreaComponent <CodeAreaComponent
readonly={ readonly={
myData.node?.flow && myData.node?.flow &&
myData.node.template[ myData.node.template[templateParam]
templateParam .dynamic
].dynamic
? true ? true
: false : false
} }
@ -468,9 +435,8 @@ 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);
@ -478,8 +444,8 @@ const EditNodeModal = forwardRef(
id={"code-area-edit" + index} id={"code-area-edit" + index}
/> />
</div> </div>
) : myData.node?.template[templateParam] ) : myData.node?.template[templateParam].type ===
.type === "Any" ? ( "Any" ? (
"-" "-"
) : ( ) : (
<div className="hidden"></div> <div className="hidden"></div>
@ -490,13 +456,11 @@ const EditNodeModal = forwardRef(
<ToggleShadComponent <ToggleShadComponent
id={ id={
"show" + "show" +
myData.node?.template[templateParam] myData.node?.template[templateParam].name
.name
} }
enabled={ enabled={
!myData.node?.template[ !myData.node?.template[templateParam]
templateParam .advanced
].advanced
} }
setEnabled={(e) => { setEnabled={(e) => {
changeAdvanced(templateParam); changeAdvanced(templateParam);
@ -521,7 +485,7 @@ const EditNodeModal = forwardRef(
id={"saveChangesBtn"} id={"saveChangesBtn"}
className="mt-3" className="mt-3"
onClick={() => { onClick={() => {
data.node = myData.node data.node = myData.node;
//@ts-ignore //@ts-ignore
setTabsState((prev: FlowsState) => { setTabsState((prev: FlowsState) => {
return { return {

4
src/frontend/src/modals/baseModal/index.tsx
View file

@ -150,9 +150,7 @@ function BaseModal({
<div className="truncate-doubleline word-break-break-word"> <div className="truncate-doubleline word-break-break-word">
{headerChild} {headerChild}
</div> </div>
<div className={`flex flex-col ${height!} w-full `}> <div className={`flex flex-col ${height!} w-full `}>{ContentChild}</div>
{ContentChild}
</div>
{ContentFooter && ( {ContentFooter && (
<div className="flex flex-row-reverse">{ContentFooter}</div> <div className="flex flex-row-reverse">{ContentFooter}</div>
)} )}

9
src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
View file

@ -1,6 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { NodeToolbar } from "reactflow"; import { NodeToolbar } from "reactflow";
import IconComponent from "../../../../components/genericIconComponent";
import { GradientGroup } from "../../../../icons/GradientSparkles"; import { GradientGroup } from "../../../../icons/GradientSparkles";
export default function SelectionMenu({ onClick, nodes, isVisible }) { export default function SelectionMenu({ onClick, nodes, isVisible }) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -38,7 +37,7 @@ export default function SelectionMenu({ onClick, nodes, isVisible }) {
<div className="h-10 w-28 overflow-hidden"> <div className="h-10 w-28 overflow-hidden">
<div <div
className={ className={
"h-10 w-24 rounded-md border border-indigo-300 bg-white px-2.5 text-gray-700 shadow-inner transition-all duration-400 ease-in-out dark:bg-gray-800 dark:text-gray-300" + "duration-400 h-10 w-24 rounded-md border border-indigo-300 bg-white px-2.5 text-gray-700 shadow-inner transition-all ease-in-out dark:bg-gray-800 dark:text-gray-300" +
(isTransitioning ? " opacity-100" : " opacity-0 ") (isTransitioning ? " opacity-100" : " opacity-0 ")
} }
> >
@ -46,7 +45,11 @@ export default function SelectionMenu({ onClick, nodes, isVisible }) {
className="flex h-full w-full items-center justify-between text-sm hover:text-indigo-500" className="flex h-full w-full items-center justify-between text-sm hover:text-indigo-500"
onClick={onClick} onClick={onClick}
> >
<GradientGroup strokeWidth={1.5} size={22} className="text-primary" /> <GradientGroup
strokeWidth={1.5}
size={22}
className="text-primary"
/>
Group Group
</button> </button>
</div> </div>

6
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -344,10 +344,10 @@ export default function ExtraSidebar(): JSX.Element {
} else if (b.toLowerCase() === "saved_components") { } else if (b.toLowerCase() === "saved_components") {
return 1; return 1;
} else if (a.toLowerCase() === "custom_components") { } else if (a.toLowerCase() === "custom_components") {
return -2 return -2;
} else if (b.toLowerCase() === "custom_components") { } else if (b.toLowerCase() === "custom_components") {
return 2 return 2;
}else { } else {
return a.localeCompare(b); return a.localeCompare(b);
} }
}) })

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

@ -11,6 +11,7 @@ import {
} from "../../../../components/ui/select-custom"; } from "../../../../components/ui/select-custom";
import { FlowsContext } from "../../../../contexts/flowsContext"; import { FlowsContext } from "../../../../contexts/flowsContext";
import { StoreContext } from "../../../../contexts/storeContext"; import { StoreContext } from "../../../../contexts/storeContext";
import { undoRedoContext } from "../../../../contexts/undoRedoContext";
import ConfirmationModal from "../../../../modals/ConfirmationModal"; import ConfirmationModal from "../../../../modals/ConfirmationModal";
import EditNodeModal from "../../../../modals/EditNodeModal"; import EditNodeModal from "../../../../modals/EditNodeModal";
import ShareModal from "../../../../modals/shareModal"; import ShareModal from "../../../../modals/shareModal";
@ -23,7 +24,6 @@ import {
updateFlowPosition, updateFlowPosition,
} from "../../../../utils/reactflowUtils"; } from "../../../../utils/reactflowUtils";
import { classNames } from "../../../../utils/utils"; import { classNames } from "../../../../utils/utils";
import { undoRedoContext } from "../../../../contexts/undoRedoContext";
export default function NodeToolbarComponent({ export default function NodeToolbarComponent({
data, data,
@ -295,7 +295,8 @@ export default function NodeToolbarComponent({
> >
<ConfirmationModal.Content> <ConfirmationModal.Content>
<span> <span>
It seems {data.node?.display_name} already exists. Do you want to replace it with the current or create a new one? It seems {data.node?.display_name} already exists. Do you want
to replace it with the current or create a new one?
</span> </span>
</ConfirmationModal.Content> </ConfirmationModal.Content>
<ConfirmationModal.Trigger> <ConfirmationModal.Trigger>

4
src/frontend/src/pages/MainPage/components/components/index.tsx
View file

@ -96,7 +96,9 @@ export default function ComponentsComponent({
<div className="flex h-full w-full flex-col justify-between"> <div className="flex h-full w-full flex-col justify-between">
<div className="flex w-full flex-col gap-4"> <div className="flex w-full flex-col gap-4">
{!isLoading && data.length === 0 ? ( {!isLoading && data.length === 0 ? (
<div className="w-full text-center">You haven't created any {name}s yet.</div> <div className="w-full text-center">
You haven't created any {name}s yet.
</div>
) : ( ) : (
<div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2"> <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
{!isLoading || data?.length > 0 ? ( {!isLoading || data?.length > 0 ? (

4
src/frontend/src/utils/styleUtils.ts
View file

@ -16,6 +16,7 @@ import {
Circle, Circle,
Clipboard, Clipboard,
Code2, Code2,
Combine,
Compass, Compass,
Copy, Copy,
Cpu, Cpu,
@ -80,6 +81,7 @@ import {
Square, Square,
Store, Store,
SunIcon, SunIcon,
TerminalIcon,
TerminalSquare, TerminalSquare,
ToyBrick, ToyBrick,
Trash2, Trash2,
@ -99,8 +101,6 @@ import {
X, X,
XCircle, XCircle,
Zap, Zap,
Combine,
TerminalIcon
} from "lucide-react"; } from "lucide-react";
import { FaApple, FaGithub } from "react-icons/fa"; import { FaApple, FaGithub } from "react-icons/fa";
import { AWSIcon } from "../icons/AWS"; import { AWSIcon } from "../icons/AWS";