From 5cae58dead51a793c34d67756d54da8b11edd701 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Wed, 6 Sep 2023 14:44:13 -0300 Subject: [PATCH 01/17] Refactor: Remove blank space when node has no description --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 30dda4034..ded319457 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -159,7 +159,9 @@ export default function GenericNode({
-
{data.node?.description}
+ {data.node?.description !== "" && ( +
{data.node?.description}
+ )} <> {Object.keys(data.node!.template) From c21583e13b9f48b5edb05b1c518b4da7412a172a Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 8 Sep 2023 17:42:57 -0300 Subject: [PATCH 02/17] Refactor: Remove description space whem node does not have a space --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 2 +- src/frontend/src/style/applies.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index ded319457..388020f22 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -158,7 +158,7 @@ export default function GenericNode({
-
+
{data.node?.description !== "" && (
{data.node?.description}
)} diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index 685d81b05..714a3bdcb 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -303,7 +303,7 @@ @apply hover:text-accent-foreground hover:transition-all; } .generic-node-desc { - @apply h-full w-full py-5 text-foreground; + @apply h-full w-full text-foreground; } .generic-node-desc-text { @apply w-full px-5 pb-3 text-sm text-muted-foreground; From c18536d1ff6ed899f4e3014587fee796fbbb14a1 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 11 Sep 2023 15:50:18 -0300 Subject: [PATCH 03/17] Refactor: Add header to node tooltips --- .../components/parameterComponent/index.tsx | 75 +++++++++++-------- 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 94cc939ff..3140c3b62 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -118,45 +118,54 @@ export default function ParameterComponent({ nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"]; return ( - 0 ? "mt-2 flex items-center" : "flex items-center" - )} - > -
- + {index === 0 && ( + + {left ? "Components to connect into:" : "Components to connect to:"} + + ) + } + 0 ? "mt-2 flex items-center" : "mt-3 flex items-center" + )} + > +
-
- - {nodeNames[item.family] ?? "Other"} - + > + +
+ + {nodeNames[item.family] ?? "Other"} {" "} - {item.type === "" ? "" : " - "} - {item.type.split(", ").length > 2 - ? item.type.split(", ").map((el, index) => ( - - - {index === item.type.split(", ").length - 1 - ? el - : (el += `, `)} - - - )) - : item.type} + + {" "} + {item.type === "" ? "" : " - "} + {item.type.split(", ").length > 2 + ? item.type.split(", ").map((el, index) => ( + + + {index === item.type.split(", ").length - 1 + ? el + : (el += `, `)} + + + )) + : item.type} + - + ); }); } else { From b06cb9507f0511d682d184916dead4110ad9f0ba Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Tue, 12 Sep 2023 14:25:04 -0300 Subject: [PATCH 04/17] Feat: Add minimize icon and conditional render --- .../src/CustomNodes/GenericNode/index.tsx | 151 ++++++++++-------- src/frontend/src/style/applies.css | 2 +- src/frontend/src/utils/styleUtils.ts | 2 + 3 files changed, 84 insertions(+), 71 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 30dda4034..8d8d4aefd 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -14,6 +14,7 @@ import { cleanEdges } from "../../utils/reactflowUtils"; import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils"; import { classNames, toTitleCase } from "../../utils/utils"; import ParameterComponent from "./components/parameterComponent"; +import { Button } from "@mui/material"; export default function GenericNode({ data: olddata, @@ -29,6 +30,7 @@ export default function GenericNode({ const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const [validationStatus, setValidationStatus] = useState(null); + const [showNode, setShowNode] = useState(true); // State for outline color const { sseData, isBuilding } = useSSE(); useEffect(() => { @@ -84,76 +86,84 @@ export default function GenericNode({
BETA
)} -
-
- -
- -
- {data.node?.display_name} -
- -
+
+
+
-
-
- Building... - ) : !validationStatus ? ( - - Build{" "} - {" "} - flow to validate status. - - ) : ( -
- {typeof validationStatus.params === "string" - ? validationStatus.params - .split("\n") - .map((line: string, index: number) => ( -
{line}
- )) - : ""} -
- ) - } - > -
-
-
-
-
- +
+
+ +
+ +
+ {data.node?.display_name} +
+ +
+
+
+
+ Building... + ) : !validationStatus ? ( + + Build{" "} + {" "} + flow to validate status. + + ) : ( +
+ {typeof validationStatus.params === "string" + ? validationStatus.params + .split("\n") + .map((line: string, index: number) => ( +
{line}
+ )) + : ""} +
+ ) + } + > +
+
+
+
+
+ +
@@ -167,7 +177,8 @@ export default function GenericNode({ .map((templateField: string, idx) => (
{data.node!.template[templateField].show && - !data.node!.template[templateField].advanced ? ( + !data.node!.template[templateField].advanced && + showNode ? ( Date: Tue, 12 Sep 2023 14:55:02 -0300 Subject: [PATCH 05/17] Feat: Add function to handle minimize --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 8 ++++++-- src/frontend/src/types/components/index.ts | 1 + 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index d94041750..6b08faead 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -88,10 +88,14 @@ export default function GenericNode({ )}
+
@@ -168,8 +172,8 @@ export default function GenericNode({
-
- {data.node?.description !== "" && ( +
+ {data.node?.description !== "" && showNode && (
{data.node?.description}
)} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 9b1db2ad2..7c9df202f 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -173,6 +173,7 @@ export type IconComponentProps = { name: string; className?: string; iconColor?: string; + onClick?: () => void }; export type InputProps = { From 602c12282d9b531124a45a41c48c18379c1c2227 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Tue, 12 Sep 2023 20:19:05 -0300 Subject: [PATCH 06/17] Refactor: Change how minimize displays on screen --- .../components/parameterComponent/index.tsx | 385 +++++++++------- .../src/CustomNodes/GenericNode/index.tsx | 417 +++++++++++------- .../components/nodeToolbarComponent/index.tsx | 14 +- src/frontend/src/style/applies.css | 4 +- src/frontend/src/types/components/index.ts | 2 + 5 files changed, 482 insertions(+), 340 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 3140c3b62..6aeae577d 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -1,4 +1,4 @@ -import { cloneDeep } from "lodash"; +import { cloneDeep, divide } from "lodash"; import React, { ReactNode, useContext, @@ -45,6 +45,7 @@ export default function ParameterComponent({ required = false, optionalHandle = null, info = "", + showNode, }: ParameterComponentType): JSX.Element { const ref = useRef(null); const refHtml = useRef(null); @@ -179,181 +180,225 @@ export default function ParameterComponent({ }, [tooltipTitle, flow]); return ( -
- <> -
- {title} - {required ? " *" : ""} -
- {info !== "" && ( - - {/* put div to avoid bug that does not display tooltip */} -
- -
- - )} -
-
- {left && - (type === "str" || - type === "bool" || - type === "float" || - type === "code" || - type === "prompt" || - type === "file" || - type === "int") && - !optionalHandle ? ( - <> - ) : ( - - - isValidConnection(connection, reactFlowInstance!) - } - className={classNames( - left ? "-ml-0.5 " : "-mr-0.5 ", - "h-3 w-3 rounded-full border-2 bg-background" - )} - style={{ - borderColor: color, - top: position, - }} - > - - )} - - {left === true && - type === "str" && - !data.node?.template[name].options ? ( -
- {data.node?.template[name].list ? ( - + { + left && + (type === "str" || + type === "bool" || + type === "float" || + type === "code" || + type === "prompt" || + type === "file" || + type === "int") && + !optionalHandle ? ( + <> + ) : ( + + + isValidConnection(connection, reactFlowInstance!) } - onChange={handleOnNewValue} - /> - ) : data.node?.template[name].multiline ? ( - + + )} + + ) : ( +
+ <> +
+ {title} + {required ? " *" : ""} +
+ {info !== "" && ( + + {/* put div to avoid bug that does not display tooltip */} +
+ +
+ + )} +
+
+ {left && + (type === "str" || + type === "bool" || + type === "float" || + type === "code" || + type === "prompt" || + type === "file" || + type === "int") && + !optionalHandle ? ( + <> + ) : ( + + + isValidConnection(connection, reactFlowInstance!) + } + className={classNames( + left ? "-ml-0.5 " : "-mr-0.5 ", + "h-3 w-3 rounded-full border-2 bg-background" + )} + style={{ + borderColor: color, + top: position, + }} + > + + )} + + {left === true && + type === "str" && + !data.node?.template[name].options ? ( +
+ {data.node?.template[name].list ? ( + + ) : data.node?.template[name].multiline ? ( + + ) : ( + + )} +
+ ) : left === true && type === "bool" ? ( +
+ { + handleOnNewValue(isEnabled); + }} + size="large" /> - ) : ( - + ) : left === true && type === "float" ? ( +
+ - )} -
- ) : left === true && type === "bool" ? ( -
- { - handleOnNewValue(isEnabled); - }} - size="large" - /> -
- ) : left === true && type === "float" ? ( -
- -
- ) : left === true && - type === "str" && - data.node?.template[name].options ? ( -
- -
- ) : left === true && type === "code" ? ( -
- { - data.node = nodeClass; - }} - nodeClass={data.node} - disabled={disabled} - value={data.node?.template[name].value ?? ""} - onChange={handleOnNewValue} - /> -
- ) : left === true && type === "file" ? ( -
- { - data.node!.template[name].file_path = filePath; - save(); - }} - > -
- ) : left === true && type === "int" ? ( -
- -
- ) : left === true && type === "prompt" ? ( -
- { - data.node = nodeClass; - }} - nodeClass={data.node} - disabled={disabled} - value={data.node?.template[name].value ?? ""} - onChange={handleOnNewValue} - /> -
- ) : ( - <> - )} - -
+
+ ) : left === true && + type === "str" && + data.node?.template[name].options ? ( +
+ +
+ ) : left === true && type === "code" ? ( +
+ { + data.node = nodeClass; + }} + nodeClass={data.node} + disabled={disabled} + value={data.node?.template[name].value ?? ""} + onChange={handleOnNewValue} + /> +
+ ) : left === true && type === "file" ? ( +
+ { + data.node!.template[name].file_path = filePath; + save(); + }} + > +
+ ) : left === true && type === "int" ? ( +
+ +
+ ) : left === true && type === "prompt" ? ( +
+ { + data.node = nodeClass; + }} + nodeClass={data.node} + disabled={disabled} + value={data.node?.template[name].value ?? ""} + onChange={handleOnNewValue} + /> +
+ ) : ( + <> + )} + +
+ ) ); } diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 6b08faead..b60467110 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -72,13 +72,15 @@ export default function GenericNode({ data={data} setData={setData} deleteNode={deleteNode} + setShowNode={setShowNode} >
{data.node?.beta && ( @@ -87,183 +89,264 @@ export default function GenericNode({
)}
-
- -
-
-
+
+
-
- -
- {data.node?.display_name} -
- -
+ {showNode && ( +
+ +
+ {data.node?.display_name} +
+ +
+ )}
-
-
- Building... - ) : !validationStatus ? ( - - Build{" "} - {" "} - flow to validate status. - - ) : ( -
- {typeof validationStatus.params === "string" - ? validationStatus.params - .split("\n") - .map((line: string, index: number) => ( -
{line}
- )) - : ""} -
- ) - } - > -
-
+ {!showNode && ( + <> + {Object.keys(data.node!.template) + .filter((templateField) => templateField.charAt(0) !== "_") + .map((templateField: string, idx) => ( +
+ {data.node!.template[templateField].show && + !data.node!.template[templateField].advanced && ( + )} - >
-
-
-
- -
+
))} + 0 + ? data.node.output_types.join("|") + : data.type + } + tooltipTitle={data.node?.base_classes.join("\n")} + id={[data.type, data.id, ...data.node!.base_classes].join("|")} + type={data.node?.base_classes.join("|")} + left={false} + showNode={showNode} + /> + + )} +
+ + + + {showNode && ( +
+
+ Building... + ) : !validationStatus ? ( + + Build{" "} + {" "} + flow to validate status. + + ) : ( +
+ {typeof validationStatus.params === "string" + ? validationStatus.params + .split("\n") + .map((line: string, index: number) => ( +
{line}
+ )) + : ""} +
+ ) + } + > +
+
+
+
+
+ +
+
+ )}
-
- {data.node?.description !== "" && showNode && ( -
{data.node?.description}
- )} + {showNode && ( +
+ {data.node?.description !== "" && showNode && ( +
{data.node?.description}
+ )} - <> - {Object.keys(data.node!.template) - .filter((templateField) => templateField.charAt(0) !== "_") - .map((templateField: string, idx) => ( -
- {data.node!.template[templateField].show && - !data.node!.template[templateField].advanced && - showNode ? ( - - ) : ( - <> - )} -
- ))} -
- {" "} -
- 0 - ? data.node.output_types.join("|") - : data.type - } - tooltipTitle={data.node?.base_classes.join("\n")} - id={[data.type, data.id, ...data.node!.base_classes].join("|")} - type={data.node?.base_classes.join("|")} - left={false} - /> - -
+ <> + {Object.keys(data.node!.template) + .filter((templateField) => templateField.charAt(0) !== "_") + .map((templateField: string, idx) => ( +
+ {data.node!.template[templateField].show && + !data.node!.template[templateField].advanced ? ( + + ) : ( + <> + )} +
+ ))} +
+ {" "} +
+ 0 + ? data.node.output_types.join("|") + : data.type + } + tooltipTitle={data.node?.base_classes.join("\n")} + id={[data.type, data.id, ...data.node!.base_classes].join("|")} + type={data.node?.base_classes.join("|")} + left={false} + showNode={showNode} + /> + +
+ )}
); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index c628e4003..3f14f944c 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -11,6 +11,7 @@ export default function NodeToolbarComponent({ data, setData, deleteNode, + setShowNode, }: nodeToolbarPropsType): JSX.Element { const [nodeLength, setNodeLength] = useState( Object.keys(data.node!.template).filter( @@ -106,7 +107,7 @@ export default function NodeToolbarComponent({ >
+ + + +
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index ff899663b..44d91b033 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -264,10 +264,10 @@ @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4; } .generic-node-div { - @apply relative flex w-96 flex-col justify-center rounded-lg bg-background; + @apply relative flex flex-col justify-center rounded-lg bg-background; } .generic-node-div-title { - @apply flex w-full items-center justify-between gap-8 border-b bg-muted p-4; + @apply flex w-full items-center gap-8 border-b bg-muted p-4; } .generic-node-title-arrangement { @apply flex-max-width items-center truncate; diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 7c9df202f..28dfe69f3 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -46,6 +46,7 @@ export type ParameterComponentType = { dataContext?: typesContextType; optionalHandle?: Array | null; info?: string; + showNode?: boolean; }; export type InputListComponentType = { value: string[]; @@ -398,6 +399,7 @@ export type nodeToolbarPropsType = { data: NodeDataType; deleteNode: (idx: string) => void; setData: (newState: NodeDataType) => void; + setShowNode: (boolean: any) => void; }; export type parsedDataType = { From c70de1e8810570cb2326e48d63825da47d538cd9 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Wed, 13 Sep 2023 17:23:35 -0300 Subject: [PATCH 07/17] Refactor: Minimize only works with 1 handle node and change minimized node UI --- .../components/parameterComponent/index.tsx | 12 ++--- .../src/CustomNodes/GenericNode/index.tsx | 52 +++++++++++++++---- .../components/nodeToolbarComponent/index.tsx | 17 ++++-- src/frontend/src/types/components/index.ts | 1 + 4 files changed, 61 insertions(+), 21 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 6aeae577d..f4608a8a5 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -32,7 +32,7 @@ import { } from "../../../../utils/styleUtils"; import { classNames, groupByFamily } from "../../../../utils/utils"; -export default function ParameterComponent({ +export default function ParameterComponent({ left, id, data, @@ -181,11 +181,6 @@ export default function ParameterComponent({ return ( !showNode ? ( -
- { left && (type === "str" || type === "bool" || @@ -211,7 +206,7 @@ export default function ParameterComponent({ isValidConnection(connection, reactFlowInstance!) } className={classNames( - left ? "-ml-0.5 " : "-mr-0.5 ", + left ? "-ml-0.5 my-12 " : " -mr-0.4 my-12 ", "h-3 w-3 rounded-full border-2 bg-background" )} style={{ @@ -220,8 +215,7 @@ export default function ParameterComponent({ }} > - )} - + ) ) : (
(null); const [showNode, setShowNode] = useState(true); + const [handles, setHandles] = useState([]); + let numberOfInputs: boolean[] = []; + + function countHandles(): void { + numberOfInputs = Object.keys(data.node!.template) + .filter((templateField) => templateField.charAt(0) !== "_").map((templateCamp) => { + if (!data.node?.template[templateCamp].show) return false + switch (data.node?.template[templateCamp].type) { + case "str": + return false; + case "bool": + return false; + case "float": + return false; + case "code": + return false; + case "prompt": + return false; + case "file": + return false; + case "int": + return false; + default: + return true + } + }) + setHandles(numberOfInputs) + }; + + useEffect(() => { + countHandles(); + }, []) + // State for outline color const { sseData, isBuilding } = useSSE(); useEffect(() => { @@ -51,7 +84,9 @@ export default function GenericNode({ }, }); updateFlow(flow); + console.log(myFlow) } + countHandles(); }, [data]); // New useEffect to watch for changes in sseData and update validation status @@ -73,27 +108,28 @@ export default function GenericNode({ setData={setData} deleteNode={deleteNode} setShowNode={setShowNode} + numberOfHandles={handles} >
- {data.node?.beta && ( + {data.node?.beta && showNode && (
BETA
)}
-
-
+
+
{showNode && ( @@ -112,8 +148,7 @@ export default function GenericNode({ {Object.keys(data.node!.template) .filter((templateField) => templateField.charAt(0) !== "_") .map((templateField: string, idx) => ( -
- {data.node!.template[templateField].show && + data.node!.template[templateField].show && !data.node!.template[templateField].advanced && ( - )} -
))} + )))} { + if (bool) countHandles += 1; + }); + if (countHandles > 1) return false; + return true; + } + const { paste } = useContext(TabsContext); const reactFlowInstance = useReactFlow(); return ( @@ -119,11 +129,12 @@ export default function NodeToolbarComponent({
- + - + {canMinimize() && ( + + + + )}
From 21009761f06747260ff35cb2f4756a152d5559b4 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Wed, 13 Sep 2023 18:23:52 -0300 Subject: [PATCH 09/17] Refactor: adjust icon size when node are minimized --- .../GenericNode/components/parameterComponent/index.tsx | 2 +- src/frontend/src/CustomNodes/GenericNode/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index f4608a8a5..12c9c2a74 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -206,7 +206,7 @@ export default function ParameterComponent({ isValidConnection(connection, reactFlowInstance!) } className={classNames( - left ? "-ml-0.5 my-12 " : " -mr-0.4 my-12 ", + left ? "-ml-0.5 my-12 " : " -mr-0.5 my-12 ", "h-3 w-3 rounded-full border-2 bg-background" )} style={{ diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 0b0ad1f96..d2a63d7b0 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -129,7 +129,7 @@ export default function GenericNode({
{showNode && ( From d44365578d842987a8fcdc2c9e583b1238067dc8 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 18 Sep 2023 14:25:13 -0300 Subject: [PATCH 10/17] feat: add node minimizing animation (refactoring it later) --- src/backend/langflow/services/settings/auth.py | 2 +- src/frontend/src/App.css | 7 +++++++ src/frontend/src/CustomNodes/GenericNode/index.tsx | 3 ++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/backend/langflow/services/settings/auth.py b/src/backend/langflow/services/settings/auth.py index d1f8197f0..87a156df7 100644 --- a/src/backend/langflow/services/settings/auth.py +++ b/src/backend/langflow/services/settings/auth.py @@ -30,7 +30,7 @@ class AuthSettings(BaseSettings): # If AUTO_LOGIN = True # > The application does not request login and logs in automatically as a super user. - AUTO_LOGIN: bool = False + AUTO_LOGIN: bool = True FIRST_SUPERUSER: str = "langflow" FIRST_SUPERUSER_PASSWORD: str = "langflow" diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css index be7173d7f..7135e0864 100644 --- a/src/frontend/src/App.css +++ b/src/frontend/src/App.css @@ -6,6 +6,13 @@ text-align: center; } +.react-flow__node { + width: auto; + height: auto; + border-radius: auto; + min-width: inherit; +} + .App-logo { height: 40vmin; pointer-events: none; diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index d2a63d7b0..879b68ca3 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -115,7 +115,8 @@ export default function GenericNode({
From f612f47455072488b0336a229e420e0ffa97f21b Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 18 Sep 2023 15:12:31 -0300 Subject: [PATCH 11/17] Refactor: Change expand icon when node are minimized --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 3 ++- .../pages/FlowPage/components/nodeToolbarComponent/index.tsx | 5 +++-- src/frontend/src/types/components/index.ts | 1 + src/frontend/src/utils/styleUtils.ts | 4 +++- 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 879b68ca3..3d5c696e3 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -109,6 +109,7 @@ export default function GenericNode({ deleteNode={deleteNode} setShowNode={setShowNode} numberOfHandles={handles} + showNode={showNode} > @@ -116,7 +117,7 @@ export default function GenericNode({ className={classNames( selected ? "border border-ring" : "border", " transition-all ", - showNode ? " w-96 duration-500 ease-in-out scale-100" : "transform-width w-26 h-26 rounded-full scale-50", + showNode ? " w-96 duration-500 ease-in-out scale-100" : "transform-width w-26 h-26 rounded-full scale-75", "generic-node-div", )} > diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 5b078c8ca..74abbc3e1 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -13,6 +13,7 @@ export default function NodeToolbarComponent({ deleteNode, setShowNode, numberOfHandles, + showNode, }: nodeToolbarPropsType): JSX.Element { const [nodeLength, setNodeLength] = useState( Object.keys(data.node!.template).filter( @@ -130,14 +131,14 @@ export default function NodeToolbarComponent({ {canMinimize() && ( - + )} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index fa03b163c..d88960488 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -401,6 +401,7 @@ export type nodeToolbarPropsType = { setData: (newState: NodeDataType) => void; setShowNode: (boolean: any) => void; numberOfHandles: boolean[] | []; + showNode: boolean; }; export type parsedDataType = { diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 7f0461410..cb7086c5d 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -78,7 +78,8 @@ import { X, XCircle, Zap, - Minus + Minus, + Square, } from "lucide-react"; import { FaApple, FaGithub } from "react-icons/fa"; import { AirbyteIcon } from "../icons/Airbyte"; @@ -310,4 +311,5 @@ export const nodeIconsLucide: iconsType = { Unplug, ChevronUp, Minus, + Square, }; From a08cfbe351e590f9a2d4623f352add8fc0be619c Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 18 Sep 2023 15:37:05 -0300 Subject: [PATCH 12/17] refactor: solve edges not following animation --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 9 ++++++++- .../FlowPage/components/nodeToolbarComponent/index.tsx | 4 +++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 3d5c696e3..cc24a7175 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -89,6 +89,13 @@ export default function GenericNode({ countHandles(); }, [data]); + useEffect(() => { + setTimeout(() => { + updateNodeInternals(data.id) + }, 400) + + }, [showNode]) + // New useEffect to watch for changes in sseData and update validation status useEffect(() => { const relevantData = sseData[data.id]; @@ -117,7 +124,7 @@ export default function GenericNode({ className={classNames( selected ? "border border-ring" : "border", " transition-all ", - showNode ? " w-96 duration-500 ease-in-out scale-100" : "transform-width w-26 h-26 rounded-full scale-75", + showNode ? " w-96 duration-500 ease-in-out scale-100" : " transform-width duration-500 w-26 h-26 rounded-full scale-95", "generic-node-div", )} > diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 74abbc3e1..24fb79a02 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -1,5 +1,5 @@ import { useContext, useState } from "react"; -import { useReactFlow } from "reactflow"; +import { useReactFlow, useUpdateNodeInternals } from "reactflow"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; import IconComponent from "../../../../components/genericIconComponent"; import { TabsContext } from "../../../../contexts/tabsContext"; @@ -30,6 +30,7 @@ export default function NodeToolbarComponent({ data.node.template[templateField].type === "int") ).length ); + const updateNodeInternals = useUpdateNodeInternals(); function canMinimize() { let countHandles: number = 0; @@ -136,6 +137,7 @@ export default function NodeToolbarComponent({ className="relative 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" onClick={(event) => { setShowNode(prev => !prev); + updateNodeInternals(data.id) }} > From f41c2824e97a6f7b30020a10b609dcff60ec611d Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 18 Sep 2023 19:43:06 -0300 Subject: [PATCH 13/17] Refactor: Fix node minimizing animation --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 6 +++--- src/frontend/src/style/applies.css | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index cc24a7175..179429cc9 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -123,8 +123,8 @@ export default function GenericNode({
@@ -134,7 +134,7 @@ export default function GenericNode({
)}
-
+
Date: Mon, 18 Sep 2023 19:52:27 -0300 Subject: [PATCH 14/17] Formated code --- .../components/parameterComponent/index.tsx | 440 +++++++++--------- .../src/CustomNodes/GenericNode/index.tsx | 233 ++++++---- .../src/icons/GradientSparkles/index.tsx | 65 +-- src/frontend/src/pages/AdminPage/index.tsx | 2 +- .../components/nodeToolbarComponent/index.tsx | 12 +- src/frontend/src/types/components/index.ts | 2 +- src/frontend/src/utils/styleUtils.ts | 6 +- 7 files changed, 403 insertions(+), 357 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 12c9c2a74..e1d677379 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -1,4 +1,4 @@ -import { cloneDeep, divide } from "lodash"; +import { cloneDeep } from "lodash"; import React, { ReactNode, useContext, @@ -32,7 +32,7 @@ import { } from "../../../../utils/styleUtils"; import { classNames, groupByFamily } from "../../../../utils/utils"; -export default function ParameterComponent({ +export default function ParameterComponent({ left, id, data, @@ -121,17 +121,18 @@ export default function ParameterComponent({ return ( <> {index === 0 && ( - - {left ? "Components to connect into:" : "Components to connect to:"} - - ) - } + + {left + ? "Components to connect into:" + : "Components to connect to:"} + + )} 0 ? "mt-2 flex items-center" : "mt-3 flex items-center" )} - > + >
- {nodeNames[item.family] ?? "Other"} - {" "} + {nodeNames[item.family] ?? "Other"}{" "} {" "} {item.type === "" ? "" : " - "} @@ -179,220 +179,218 @@ export default function ParameterComponent({ renderTooltips(); }, [tooltipTitle, flow]); - return ( - !showNode ? ( - left && - (type === "str" || - type === "bool" || - type === "float" || - type === "code" || - type === "prompt" || - type === "file" || - type === "int") && - !optionalHandle ? ( - <> - ) : ( - - - isValidConnection(connection, reactFlowInstance!) - } - className={classNames( - left ? "-ml-0.5 my-12 " : " -mr-0.5 my-12 ", - "h-3 w-3 rounded-full border-2 bg-background" - )} - style={{ - borderColor: color, - top: position, - }} - > - - ) + return !showNode ? ( + left && + (type === "str" || + type === "bool" || + type === "float" || + type === "code" || + type === "prompt" || + type === "file" || + type === "int") && + !optionalHandle ? ( + <> ) : ( -
- <> -
- {title} - {required ? " *" : ""} -
- {info !== "" && ( - - {/* put div to avoid bug that does not display tooltip */} -
- -
- - )} -
-
- {left && - (type === "str" || - type === "bool" || - type === "float" || - type === "code" || - type === "prompt" || - type === "file" || - type === "int") && - !optionalHandle ? ( - <> - ) : ( - - - isValidConnection(connection, reactFlowInstance!) - } - className={classNames( - left ? "-ml-0.5 " : "-mr-0.5 ", - "h-3 w-3 rounded-full border-2 bg-background" - )} - style={{ - borderColor: color, - top: position, - }} - > - + + isValidConnection(connection, reactFlowInstance!) + } + className={classNames( + left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ", + "h-3 w-3 rounded-full border-2 bg-background" )} - - {left === true && - type === "str" && - !data.node?.template[name].options ? ( -
- {data.node?.template[name].list ? ( - - ) : data.node?.template[name].multiline ? ( - - ) : ( - - )} -
- ) : left === true && type === "bool" ? ( -
- { - handleOnNewValue(isEnabled); - }} - size="large" - /> -
- ) : left === true && type === "float" ? ( -
- -
- ) : left === true && - type === "str" && - data.node?.template[name].options ? ( -
- -
- ) : left === true && type === "code" ? ( -
- { - data.node = nodeClass; - }} - nodeClass={data.node} - disabled={disabled} - value={data.node?.template[name].value ?? ""} - onChange={handleOnNewValue} - /> -
- ) : left === true && type === "file" ? ( -
- { - data.node!.template[name].file_path = filePath; - save(); - }} - > -
- ) : left === true && type === "int" ? ( -
- -
- ) : left === true && type === "prompt" ? ( -
- { - data.node = nodeClass; - }} - nodeClass={data.node} - disabled={disabled} - value={data.node?.template[name].value ?? ""} - onChange={handleOnNewValue} - /> -
- ) : ( - <> - )} - -
+ style={{ + borderColor: color, + top: position, + }} + > + ) + ) : ( +
+ <> +
+ {title} + {required ? " *" : ""} +
+ {info !== "" && ( + + {/* put div to avoid bug that does not display tooltip */} +
+ +
+ + )} +
+
+ {left && + (type === "str" || + type === "bool" || + type === "float" || + type === "code" || + type === "prompt" || + type === "file" || + type === "int") && + !optionalHandle ? ( + <> + ) : ( + + + isValidConnection(connection, reactFlowInstance!) + } + className={classNames( + left ? "-ml-0.5 " : "-mr-0.5 ", + "h-3 w-3 rounded-full border-2 bg-background" + )} + style={{ + borderColor: color, + top: position, + }} + > + + )} + + {left === true && + type === "str" && + !data.node?.template[name].options ? ( +
+ {data.node?.template[name].list ? ( + + ) : data.node?.template[name].multiline ? ( + + ) : ( + + )} +
+ ) : left === true && type === "bool" ? ( +
+ { + handleOnNewValue(isEnabled); + }} + size="large" + /> +
+ ) : left === true && type === "float" ? ( +
+ +
+ ) : left === true && + type === "str" && + data.node?.template[name].options ? ( +
+ +
+ ) : left === true && type === "code" ? ( +
+ { + data.node = nodeClass; + }} + nodeClass={data.node} + disabled={disabled} + value={data.node?.template[name].value ?? ""} + onChange={handleOnNewValue} + /> +
+ ) : left === true && type === "file" ? ( +
+ { + data.node!.template[name].file_path = filePath; + save(); + }} + > +
+ ) : left === true && type === "int" ? ( +
+ +
+ ) : left === true && type === "prompt" ? ( +
+ { + data.node = nodeClass; + }} + nodeClass={data.node} + disabled={disabled} + value={data.node?.template[name].value ?? ""} + onChange={handleOnNewValue} + /> +
+ ) : ( + <> + )} + +
); } diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 179429cc9..74547dfa8 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -35,10 +35,11 @@ export default function GenericNode({ function countHandles(): void { numberOfInputs = Object.keys(data.node!.template) - .filter((templateField) => templateField.charAt(0) !== "_").map((templateCamp) => { + .filter((templateField) => templateField.charAt(0) !== "_") + .map((templateCamp) => { const { template } = data.node!; - if (template[templateCamp].input_types) return true - if (!template[templateCamp].show) return false + if (template[templateCamp].input_types) return true; + if (!template[templateCamp].show) return false; switch (template[templateCamp].type) { case "str": return false; @@ -55,15 +56,15 @@ export default function GenericNode({ case "int": return false; default: - return true + return true; } - }) - setHandles(numberOfInputs) - }; + }); + setHandles(numberOfInputs); + } useEffect(() => { countHandles(); - }, []) + }, []); // State for outline color const { sseData, isBuilding } = useSSE(); @@ -91,10 +92,9 @@ export default function GenericNode({ useEffect(() => { setTimeout(() => { - updateNodeInternals(data.id) - }, 400) - - }, [showNode]) + updateNodeInternals(data.id); + }, 300); + }, [showNode]); // New useEffect to watch for changes in sseData and update validation status useEffect(() => { @@ -124,8 +124,10 @@ export default function GenericNode({ className={classNames( selected ? "border border-ring" : "border", " transition-transform ", - showNode ? " rounded-lg transform w-96 duration-500 ease-in-out scale-100 " : " rounded-full transform transform-width duration-500 w-26 h-26 scale-90 ", - "generic-node-div", + showNode + ? " w-96 scale-100 transform rounded-lg duration-500 ease-in-out " + : " transform-width w-26 h-26 scale-90 transform rounded-full duration-500 ", + "generic-node-div" )} > {data.node?.beta && showNode && ( @@ -134,11 +136,26 @@ export default function GenericNode({
)}
-
-
+
+
{showNode && ( @@ -155,84 +172,97 @@ export default function GenericNode({ {!showNode && ( <> {Object.keys(data.node!.template) - .filter((templateField) => templateField.charAt(0) !== "_") - .map((templateField: string, idx) => ( - data.node!.template[templateField].show && - !data.node!.template[templateField].advanced && ( - - )))} - 0 - ? data.node.output_types.join("|") - : data.type - } - tooltipTitle={data.node?.base_classes.join("\n")} - id={[data.type, data.id, ...data.node!.base_classes].join("|")} - type={data.node?.base_classes.join("|")} - left={false} - showNode={showNode} - /> + .filter((templateField) => templateField.charAt(0) !== "_") + .map( + (templateField: string, idx) => + data.node!.template[templateField].show && + !data.node!.template[templateField].advanced && ( + + ) + )} + 0 + ? data.node.output_types.join("|") + : data.type + } + tooltipTitle={data.node?.base_classes.join("\n")} + id={[data.type, data.id, ...data.node!.base_classes].join( + "|" + )} + type={data.node?.base_classes.join("|")} + left={false} + showNode={showNode} + /> )} -
- - {showNode && (
@@ -296,9 +326,18 @@ export default function GenericNode({
{showNode && ( -
+
{data.node?.description !== "" && showNode && ( -
{data.node?.description}
+
+ {data.node?.description} +
)} <> @@ -324,14 +363,18 @@ export default function GenericNode({ nodeColors[ types[data.node?.template[templateField].type!] ] ?? - nodeColors[data.node?.template[templateField].type!] ?? + nodeColors[ + data.node?.template[templateField].type! + ] ?? nodeColors.unknown } title={ data.node?.template[templateField].display_name ? data.node.template[templateField].display_name : data.node?.template[templateField].name - ? toTitleCase(data.node.template[templateField].name) + ? toTitleCase( + data.node.template[templateField].name + ) : toTitleCase(templateField) } info={data.node?.template[templateField].info} diff --git a/src/frontend/src/icons/GradientSparkles/index.tsx b/src/frontend/src/icons/GradientSparkles/index.tsx index 49502c6ba..55e8d3977 100644 --- a/src/frontend/src/icons/GradientSparkles/index.tsx +++ b/src/frontend/src/icons/GradientSparkles/index.tsx @@ -1,38 +1,39 @@ import { forwardRef } from "react"; -export const GradientSparkles = forwardRef>( - (props, ref) => { - return ( - <> - - - - - - - - - {/* this svg comes from the source code of lucide, +export const GradientSparkles = forwardRef< + SVGSVGElement, + React.PropsWithChildren<{}> +>((props, ref) => { + return ( + <> + + + + + + + + + {/* this svg comes from the source code of lucide, we do not use the import because it crashes the ui (why? no one knows...). source code from the used svg: https://github.com/lucide-icons/lucide/blob/a4076db69b52ff0debc383f76d4d671c3bad5345/icons/infinity.svg?short_path=f79de91 */} - - - - - ); - } -); - + + + + + ); +}); diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx index bcdc78b5f..24baefb5b 100644 --- a/src/frontend/src/pages/AdminPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/index.tsx @@ -190,7 +190,7 @@ export default function AdminPage() { setSuccessData({ title: "Success! New user added!", }); - }) + }); }) .catch((error) => { setErrorData({ diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 24fb79a02..718ac7f3d 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -119,7 +119,8 @@ export default function NodeToolbarComponent({ >
{ - setShowNode(prev => !prev); - updateNodeInternals(data.id) + setShowNode((prev) => !prev); + updateNodeInternals(data.id); }} > - + )} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index d88960488..576104f40 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -174,7 +174,7 @@ export type IconComponentProps = { name: string; className?: string; iconColor?: string; - onClick?: () => void + onClick?: () => void; }; export type InputProps = { diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index cb7086c5d..ee3bf10c5 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -48,6 +48,7 @@ import { MessageCircle, MessageSquare, MessagesSquare, + Minus, MoonIcon, MoreHorizontal, Paperclip, @@ -61,6 +62,7 @@ import { Settings2, Shield, Sparkles, + Square, SunIcon, TerminalSquare, Trash2, @@ -78,8 +80,6 @@ import { X, XCircle, Zap, - Minus, - Square, } from "lucide-react"; import { FaApple, FaGithub } from "react-icons/fa"; import { AirbyteIcon } from "../icons/Airbyte"; @@ -91,7 +91,7 @@ import { EvernoteIcon } from "../icons/Evernote"; import { FBIcon } from "../icons/FacebookMessenger"; import { GitBookIcon } from "../icons/GitBook"; import { GoogleIcon } from "../icons/Google"; -import {GradientSparkles} from "../icons/GradientSparkles"; +import { GradientSparkles } from "../icons/GradientSparkles"; import { HuggingFaceIcon } from "../icons/HuggingFace"; import { IFixIcon } from "../icons/IFixIt"; import { MetaIcon } from "../icons/Meta"; From 9163aee3eff59a0d637a68565991147bd0708d00 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Tue, 19 Sep 2023 15:24:39 -0300 Subject: [PATCH 15/17] Refactor: Change minimize icons --- .../pages/FlowPage/components/nodeToolbarComponent/index.tsx | 2 +- src/frontend/src/utils/styleUtils.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 718ac7f3d..7b782a656 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -142,7 +142,7 @@ export default function NodeToolbarComponent({ }} > diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index ee3bf10c5..511d894b3 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -80,6 +80,8 @@ import { X, XCircle, Zap, + Minimize2, + Maximize2, } from "lucide-react"; import { FaApple, FaGithub } from "react-icons/fa"; import { AirbyteIcon } from "../icons/Airbyte"; @@ -312,4 +314,6 @@ export const nodeIconsLucide: iconsType = { ChevronUp, Minus, Square, + Minimize2, + Maximize2, }; From 82a6ad8d87239f453ccc9ad7fb2444a6038840cb Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 20 Sep 2023 18:20:22 -0300 Subject: [PATCH 16/17] set auto_login to false to keep develop with login --- src/backend/langflow/services/settings/auth.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/backend/langflow/services/settings/auth.py b/src/backend/langflow/services/settings/auth.py index 87a156df7..d1f8197f0 100644 --- a/src/backend/langflow/services/settings/auth.py +++ b/src/backend/langflow/services/settings/auth.py @@ -30,7 +30,7 @@ class AuthSettings(BaseSettings): # If AUTO_LOGIN = True # > The application does not request login and logs in automatically as a super user. - AUTO_LOGIN: bool = True + AUTO_LOGIN: bool = False FIRST_SUPERUSER: str = "langflow" FIRST_SUPERUSER_PASSWORD: str = "langflow" From 238dbf1b5fc95d774379b6f386e9656b13255891 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 20 Sep 2023 18:20:43 -0300 Subject: [PATCH 17/17] format code --- src/frontend/src/utils/styleUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 511d894b3..7d4560448 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -44,10 +44,12 @@ import { Link, Lock, LucideSend, + Maximize2, Menu, MessageCircle, MessageSquare, MessagesSquare, + Minimize2, Minus, MoonIcon, MoreHorizontal, @@ -80,8 +82,6 @@ import { X, XCircle, Zap, - Minimize2, - Maximize2, } from "lucide-react"; import { FaApple, FaGithub } from "react-icons/fa"; import { AirbyteIcon } from "../icons/Airbyte";