From 86eb9af7945b2b7cbec709c2c31878fa66d4a4f3 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 14 Jun 2023 21:22:45 -0300 Subject: [PATCH] Formatting project --- .../components/parameterComponent/index.tsx | 348 +++++++++--------- .../src/CustomNodes/GenericNode/index.tsx | 3 +- .../components/ShadTooltipComponent/index.tsx | 15 +- .../src/components/cardComponent/index.tsx | 45 ++- .../components/dropdownComponent/index.tsx | 5 +- .../src/components/floatComponent/index.tsx | 2 +- .../components/menuBar/index.tsx | 14 +- .../src/components/headerComponent/index.tsx | 5 +- .../src/components/promptComponent/index.tsx | 2 +- src/frontend/src/components/ui/button.tsx | 3 +- src/frontend/src/constants.tsx | 1 - src/frontend/src/contexts/index.tsx | 20 +- src/frontend/src/contexts/tabsContext.tsx | 2 +- src/frontend/src/contexts/undoRedoContext.tsx | 300 ++++++++------- .../src/modals/EditNodeModal/index.tsx | 10 +- .../NodeModal/components/ModalField/index.tsx | 9 - src/frontend/src/modals/exportModal/index.tsx | 3 +- .../src/pages/CommunityPage/index.tsx | 37 +- .../components/PageComponent/index.tsx | 94 ++--- src/frontend/src/pages/FlowPage/index.tsx | 18 +- src/frontend/src/routes.tsx | 26 +- 21 files changed, 470 insertions(+), 492 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index cbb6cc874..a5be9338c 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -59,8 +59,7 @@ export default function ParameterComponent({ data.node.template[name]?.value ?? false ); - useEffect(() => { - }, [closePopUp, data.node.template]); + useEffect(() => {}, [closePopUp, data.node.template]); const { reactFlowInstance } = useContext(typesContext); let disabled = @@ -69,216 +68,209 @@ export default function ParameterComponent({ const [myData, setMyData] = useState(useContext(typesContext).data); useEffect(() => { - const groupedObj = groupByFamily(myData, tooltipTitle); - refHtml.current = groupedObj.map((item, i) => ( - 0 ? "items-center flex mt-3" : "items-center flex" - )} + const groupedObj = groupByFamily(myData, tooltipTitle); + refHtml.current = groupedObj.map((item, i) => ( + 0 ? "items-center flex mt-3" : "items-center flex" + )} + > +
-
- {React.createElement(nodeIcons[item.family])} -
- - {nodeNames[item.family] ?? ""}{" "} - - {" "} - -  - {item.type.split(", ").length > 2 - ? item.type.split(", ").map((el, i) => ( - <> - - {i == item.type.split(", ").length - 1 - ? el - : (el += `, `)} - - {i % 2 == 0 && i > 0 &&

} - - )) - : item.type} - + {React.createElement(nodeIcons[item.family])} +
+ + {nodeNames[item.family] ?? ""}{" "} + + {" "} + -  + {item.type.split(", ").length > 2 + ? item.type.split(", ").map((el, i) => ( + <> + + {i == item.type.split(", ").length - 1 + ? el + : (el += `, `)} + + {i % 2 == 0 && i > 0 &&

} + + )) + : item.type} - )); + + )); }, [tooltipTitle]); return ( <> -
- <> -
- {title} - {required ? " *" : ""} -
- {left && - (type === "str" || - type === "bool" || - type === "float" || - type === "code" || - type === "prompt" || - type === "file" || - type === "int") ? ( - <> - ) : ( - 0} +
+ <> +
- - isValidConnection(connection, reactFlowInstance) - } - className={classNames( - left ? "-ml-0.5 " : "-mr-0.5 ", - "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800" - )} - style={{ - borderColor: color, - top: position, - }} - > - - )} - - {left === true && - type === "str" && - !data.node.template[name].options ? ( -
- {data.node.template[name].list ? ( - {required ? " *" : ""} +
+ {left && + (type === "str" || + type === "bool" || + type === "float" || + type === "code" || + type === "prompt" || + type === "file" || + type === "int") ? ( + <> + ) : ( + 0} + > + + isValidConnection(connection, reactFlowInstance) } - onChange={(t: string[]) => { - data.node.template[name].value = t; - + className={classNames( + left ? "-ml-0.5 " : "-mr-0.5 ", + "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800" + )} + style={{ + borderColor: color, + top: position, }} - /> - ) : data.node.template[name].multiline ? ( - + + )} + + {left === true && + type === "str" && + !data.node.template[name].options ? ( +
+ {data.node.template[name].list ? ( + { + data.node.template[name].value = t; + }} + /> + ) : data.node.template[name].multiline ? ( + { + data.node.template[name].value = t; + }} + /> + ) : ( + { + data.node.template[name].value = t; + }} + /> + )} +
+ ) : left === true && type === "bool" ? ( +
+ { + enabled={enabled} + setEnabled={(t) => { data.node.template[name].value = t; - + setEnabled(t); }} /> - ) : ( - + ) : left === true && type === "float" ? ( +
+ { data.node.template[name].value = t; - }} /> - )} -
- ) : left === true && type === "bool" ? ( -
- + ) : left === true && + type === "str" && + data.node.template[name].options ? ( +
+ + (data.node.template[name].value = newValue) + } + value={data.node.template[name].value ?? "Choose an option"} + > +
+ ) : left === true && type === "code" ? ( + { + value={data.node.template[name].value ?? ""} + onChange={(t: string) => { data.node.template[name].value = t; - setEnabled(t); - }} /> -
- ) : left === true && type === "float" ? ( -
- { + onChange={(t: string) => { data.node.template[name].value = t; + }} + fileTypes={data.node.template[name].fileTypes} + suffixes={data.node.template[name].suffixes} + onFileChange={(t: string) => { + data.node.template[name].content = t; + }} + > + ) : left === true && type === "int" ? ( +
+ { + data.node.template[name].value = t; }} - /> -
- ) : left === true && - type === "str" && - data.node.template[name].options ? ( -
- - (data.node.template[name].value = newValue) - } - value={data.node.template[name].value ?? "Choose an option"} - > -
- ) : left === true && type === "code" ? ( - { - data.node.template[name].value = t; - - }} - /> - ) : left === true && type === "file" ? ( - { - data.node.template[name].value = t; - }} - fileTypes={data.node.template[name].fileTypes} - suffixes={data.node.template[name].suffixes} - onFileChange={(t: string) => { - data.node.template[name].content = t; - - }} - > - ) : left === true && type === "int" ? ( -
- +
+ ) : left === true && type === "prompt" ? ( + { + onChange={(t: string) => { data.node.template[name].value = t; - }} /> -
- ) : left === true && type === "prompt" ? ( - { - data.node.template[name].value = t; - - }} - /> - ) : ( - <> - )} - -
+ ) : ( + <> + )} + +
- ); } diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index a94c2a3a5..fcebc9f8a 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -101,8 +101,7 @@ export default function GenericNode({ return; } - useEffect(() => { - }, [closePopUp, data.node.template]); + useEffect(() => {}, [closePopUp, data.node.template]); return ( <> diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/ShadTooltipComponent/index.tsx index fa0b73ba1..44ffac075 100644 --- a/src/frontend/src/components/ShadTooltipComponent/index.tsx +++ b/src/frontend/src/components/ShadTooltipComponent/index.tsx @@ -11,14 +11,13 @@ const ShadTooltip = (props) => { {props.children} - - {props.content} - - + + {props.content} + ); diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 5688eefaa..84b7d52c0 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/src/frontend/src/components/cardComponent/index.tsx @@ -4,10 +4,25 @@ import { Link } from "react-router-dom"; import { TabsContext } from "../../contexts/tabsContext"; import { FlowType } from "../../types/flow"; import { gradients } from "../../utils"; -import { CardTitle, CardDescription, CardFooter, Card, CardHeader } from "../ui/card"; +import { + CardTitle, + CardDescription, + CardFooter, + Card, + CardHeader, +} from "../ui/card"; - -export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType; id: string, onDelete?: () => void, button?: JSX.Element }) => { +export const CardComponent = ({ + flow, + id, + onDelete, + button, +}: { + flow: FlowType; + id: string; + onDelete?: () => void; + button?: JSX.Element; +}) => { const { removeFlow } = useContext(TabsContext); return ( @@ -20,19 +35,14 @@ export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType; "rounded-full w-8 h-8 flex items-center justify-center text-2xl " + gradients[parseInt(flow.id.slice(0, 6), 16) % gradients.length] } - > - - - {flow.name} - + > + {flow.name}
- {onDelete && - - } + {onDelete && ( + + )}
@@ -53,10 +63,7 @@ export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType;  OpenAI+ */}
- {button && - button - } - + {button && button}
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx index d132da14a..24021336d 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -29,7 +29,6 @@ export default function Dropdown({ <>
- {internalValue} { setMyValue(value); }, [value]); - + return (
{
- - - + + Edit diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index f80f9c460..4d20ea5fb 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -28,10 +28,7 @@ export default function Header() { ⛓️ {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( - + )}
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx index 86ea8f301..7713da8e6 100644 --- a/src/frontend/src/components/promptComponent/index.tsx +++ b/src/frontend/src/components/promptComponent/index.tsx @@ -24,7 +24,7 @@ export default function PromptAreaComponent({ useEffect(() => { setMyValue(value); }, [value]); - + return (
- - - - - + + + + + {children} - - - - - + + + + + diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 779a72b50..5d2a53958 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -549,7 +549,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { uploadFlows, uploadFlow, getNodeId, - paste + paste, }} > {children} diff --git a/src/frontend/src/contexts/undoRedoContext.tsx b/src/frontend/src/contexts/undoRedoContext.tsx index 573a260e0..eed8eb870 100644 --- a/src/frontend/src/contexts/undoRedoContext.tsx +++ b/src/frontend/src/contexts/undoRedoContext.tsx @@ -1,4 +1,10 @@ -import { createContext, useCallback, useContext, useEffect, useState } from "react"; +import { + createContext, + useCallback, + useContext, + useEffect, + useState, +} from "react"; import { Edge, Node, useReactFlow } from "reactflow"; import { cloneDeep } from "lodash"; import { TabsContext } from "./tabsContext"; @@ -10,22 +16,22 @@ type undoRedoContextType = { }; type UseUndoRedoOptions = { - maxHistorySize: number; - enableShortcuts: boolean; - }; - - type UseUndoRedo = (options?: UseUndoRedoOptions) => { - undo: () => void; - redo: () => void; - takeSnapshot: () => void; - canUndo: boolean; - canRedo: boolean; - }; - - type HistoryItem = { - nodes: Node[]; - edges: Edge[]; - }; + maxHistorySize: number; + enableShortcuts: boolean; +}; + +type UseUndoRedo = (options?: UseUndoRedoOptions) => { + undo: () => void; + redo: () => void; + takeSnapshot: () => void; + canUndo: boolean; + canRedo: boolean; +}; + +type HistoryItem = { + nodes: Node[]; + edges: Edge[]; +}; const initialValue = { undo: () => {}, @@ -34,152 +40,144 @@ const initialValue = { }; const defaultOptions: UseUndoRedoOptions = { - maxHistorySize: 100, - enableShortcuts: true, - }; + maxHistorySize: 100, + enableShortcuts: true, +}; export const undoRedoContext = createContext(initialValue); export function UndoRedoProvider({ children }) { - const { tabId, flows } = useContext(TabsContext); + const { tabId, flows } = useContext(TabsContext); - const [past, setPast] = useState(flows.map(() => [])); - const [future, setFuture] = useState(flows.map(() => [])); - const [tabIndex, setTabIndex] = useState(flows.findIndex((f) => f.id === tabId)); - - useEffect(() => { - // whenever the flows variable changes, we need to add one array to the past and future states - setPast((old) => flows.map((f, i) => (old[i] ? old[i] : []))); - setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : []))); - setTabIndex(flows.findIndex((f) => f.id === tabId)); + const [past, setPast] = useState(flows.map(() => [])); + const [future, setFuture] = useState(flows.map(() => [])); + const [tabIndex, setTabIndex] = useState( + flows.findIndex((f) => f.id === tabId) + ); - }, [flows, tabId]); - - const { setNodes, setEdges, getNodes, getEdges } = useReactFlow(); - - const takeSnapshot = useCallback(() => { - // push the current graph to the past state - console.log(past); - console.log(tabIndex); + useEffect(() => { + // whenever the flows variable changes, we need to add one array to the past and future states + setPast((old) => flows.map((f, i) => (old[i] ? old[i] : []))); + setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : []))); + setTabIndex(flows.findIndex((f) => f.id === tabId)); + }, [flows, tabId]); + + const { setNodes, setEdges, getNodes, getEdges } = useReactFlow(); + + const takeSnapshot = useCallback(() => { + // push the current graph to the past state + console.log(past); + console.log(tabIndex); + setPast((old) => { + let newPast = cloneDeep(old); + newPast[tabIndex] = old[tabIndex].slice( + old[tabIndex].length - defaultOptions.maxHistorySize + 1, + old[tabIndex].length + ); + newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() }); + return newPast; + }); + + // whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches + setFuture((old) => { + let newFuture = cloneDeep(old); + newFuture[tabIndex] = []; + return newFuture; + }); + }, [getNodes, getEdges, past, future, flows, tabId, setPast, setFuture]); + + const undo = useCallback(() => { + // get the last state that we want to go back to + const pastState = past[tabIndex][past[tabIndex].length - 1]; + + if (pastState) { + // first we remove the state from the history setPast((old) => { let newPast = cloneDeep(old); - newPast[tabIndex] = old[tabIndex].slice( - old[tabIndex].length - defaultOptions.maxHistorySize + 1, - old[tabIndex].length - ); + newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1); + return newPast; + }); + // we store the current graph for the redo operation + setFuture((old) => { + let newFuture = cloneDeep(old); + newFuture[tabIndex] = old[tabIndex]; + newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() }); + return newFuture; + }); + // now we can set the graph to the past state + setNodes(pastState.nodes); + setEdges(pastState.edges); + } + }, [ + setNodes, + setEdges, + getNodes, + getEdges, + future, + past, + setFuture, + setPast, + tabIndex, + ]); + + const redo = useCallback(() => { + const futureState = future[tabIndex][future[tabIndex].length - 1]; + + if (futureState) { + setFuture((old) => { + let newFuture = cloneDeep(old); + newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1); + return newFuture; + }); + setPast((old) => { + let newPast = cloneDeep(old); + newPast[tabIndex] = old[tabIndex]; newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() }); return newPast; }); - - // whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches - setFuture((old) => { - let newFuture = cloneDeep(old); - newFuture[tabIndex] = []; - return newFuture; - }); - }, [ - getNodes, - getEdges, - past, - future, - flows, - tabId, - setPast, - setFuture, - ]); - - const undo = useCallback(() => { - // get the last state that we want to go back to - const pastState = past[tabIndex][past[tabIndex].length - 1]; - - if (pastState) { - // first we remove the state from the history - setPast((old) => { - let newPast = cloneDeep(old); - newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1); - return newPast; - }); - // we store the current graph for the redo operation - setFuture((old) => { - let newFuture = cloneDeep(old); - newFuture[tabIndex] = old[tabIndex]; - newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() }); - return newFuture; - }); - // now we can set the graph to the past state - setNodes(pastState.nodes); - setEdges(pastState.edges); + setNodes(futureState.nodes); + setEdges(futureState.edges); + } + }, [ + future, + past, + setFuture, + setPast, + setNodes, + setEdges, + getNodes, + getEdges, + future, + tabIndex, + ]); + + useEffect(() => { + // this effect is used to attach the global event handlers + if (!defaultOptions.enableShortcuts) { + return; + } + + const keyDownHandler = (event: KeyboardEvent) => { + if ( + event.key === "z" && + (event.ctrlKey || event.metaKey) && + event.shiftKey + ) { + redo(); + } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) { + event.preventDefault(); // prevent the default action + redo(); + } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) { + undo(); } - }, [ - setNodes, - setEdges, - getNodes, - getEdges, - future, - past, - setFuture, - setPast, - tabIndex, - ]); - - const redo = useCallback(() => { - const futureState = future[tabIndex][future[tabIndex].length - 1]; - - if (futureState) { - setFuture((old) => { - let newFuture = cloneDeep(old); - newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1); - return newFuture; - }); - setPast((old) => { - let newPast = cloneDeep(old); - newPast[tabIndex] = old[tabIndex]; - newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() }); - return newPast; - }); - setNodes(futureState.nodes); - setEdges(futureState.edges); - } - }, [ - future, - past, - setFuture, - setPast, - setNodes, - setEdges, - getNodes, - getEdges, - future, - tabIndex, - ]); - - useEffect(() => { - // this effect is used to attach the global event handlers - if (!defaultOptions.enableShortcuts) { - return; - } - - const keyDownHandler = (event: KeyboardEvent) => { - if ( - event.key === "z" && - (event.ctrlKey || event.metaKey) && - event.shiftKey - ) { - redo(); - } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) { - event.preventDefault(); // prevent the default action - redo(); - } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) { - undo(); - } - }; - - document.addEventListener("keydown", keyDownHandler); - - return () => { - document.removeEventListener("keydown", keyDownHandler); - }; - }, [undo, redo]); + }; + + document.addEventListener("keydown", keyDownHandler); + + return () => { + document.removeEventListener("keydown", keyDownHandler); + }; + }, [undo, redo]); return ( Edit Node -
@@ -249,7 +244,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { value={data.node.template[n].value ?? ""} onChange={(t) => { data.node.template[n].value = t; - }} />
@@ -266,7 +260,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { suffixes={data.node.template[n].suffixes} onFileChange={(t: string) => { data.node.template[n].content = t; - }} >
@@ -278,7 +271,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { value={data.node.template[n].value ?? ""} onChange={(t: string) => { data.node.template[n].value = t; - }} />
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx index e8ae74aec..f5f0fb668 100644 --- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx +++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx @@ -70,7 +70,6 @@ export default function ModalField({ } onChange={(t: string[]) => { data.node.template[name].value = t; - }} /> ) : data.node.template[name].multiline ? ( @@ -79,7 +78,6 @@ export default function ModalField({ value={data.node.template[name].value ?? ""} onChange={(t: string) => { data.node.template[name].value = t; - }} /> ) : ( @@ -89,7 +87,6 @@ export default function ModalField({ value={data.node.template[name].value ?? ""} onChange={(t) => { data.node.template[name].value = t; - }} /> )} @@ -103,7 +100,6 @@ export default function ModalField({ setEnabled={(t) => { data.node.template[name].value = t; setEnabled(t); - }} /> @@ -114,7 +110,6 @@ export default function ModalField({ value={data.node.template[name].value ?? ""} onChange={(t) => { data.node.template[name].value = t; - }} /> @@ -133,7 +128,6 @@ export default function ModalField({ value={data.node.template[name].value ?? ""} onChange={(t) => { data.node.template[name].value = t; - }} /> @@ -149,7 +143,6 @@ export default function ModalField({ suffixes={data.node.template[name].suffixes} onFileChange={(t: string) => { data.node.template[name].content = t; - }} > @@ -160,7 +153,6 @@ export default function ModalField({ value={data.node.template[name].value ?? ""} onChange={(t: string) => { data.node.template[name].value = t; - }} /> @@ -171,7 +163,6 @@ export default function ModalField({ value={data.node.template[name].value ?? ""} onChange={(t: string) => { data.node.template[name].value = t; - }} /> diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx index a5771dd92..d60bebb72 100644 --- a/src/frontend/src/modals/exportModal/index.tsx +++ b/src/frontend/src/modals/exportModal/index.tsx @@ -20,6 +20,7 @@ import EditFlowSettings from "../../components/nameInputComponent"; import { Label } from "../../components/ui/label"; import { Input } from "../../components/ui/input"; import { Textarea } from "../../components/ui/textarea"; +import { Download } from "lucide-react"; export default function ExportModal() { const [open, setOpen] = useState(true); @@ -48,7 +49,7 @@ export default function ExportModal() { Export -