From bba2942d37d7843d6c2011c385015714d91ea15b Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 14 Jun 2023 19:33:21 -0300 Subject: [PATCH] format code --- src/backend/langflow/api/v1/endpoints.py | 1 - src/backend/langflow/graph/graph/base.py | 1 - .../components/parameterComponent/index.tsx | 10 +- .../src/CustomNodes/GenericNode/index.tsx | 13 - .../src/components/cardComponent/index.tsx | 45 +-- .../src/components/headerComponent/index.tsx | 5 +- .../components/toggleShadComponent/index.tsx | 4 +- src/frontend/src/constants.tsx | 1 - src/frontend/src/contexts/index.tsx | 20 +- src/frontend/src/contexts/undoRedoContext.tsx | 300 +++++++++--------- src/frontend/src/controllers/API/index.ts | 9 +- .../src/modals/flowSettingsModal/index.tsx | 1 - src/frontend/src/routes.tsx | 26 +- 13 files changed, 210 insertions(+), 226 deletions(-) diff --git a/src/backend/langflow/api/v1/endpoints.py b/src/backend/langflow/api/v1/endpoints.py index ad1058b9e..f03c4990a 100644 --- a/src/backend/langflow/api/v1/endpoints.py +++ b/src/backend/langflow/api/v1/endpoints.py @@ -1,7 +1,6 @@ from langflow.database.models.flow import Flow from langflow.processing.process import process_graph_cached, process_tweaks from langflow.utils.logger import logger -from importlib.metadata import version from fastapi import APIRouter, Depends, HTTPException from fastapi.security import HTTPBearer diff --git a/src/backend/langflow/graph/graph/base.py b/src/backend/langflow/graph/graph/base.py index 0d326d259..425825039 100644 --- a/src/backend/langflow/graph/graph/base.py +++ b/src/backend/langflow/graph/graph/base.py @@ -10,7 +10,6 @@ from langflow.graph.vertex.types import ( ) from langflow.interface.tools.constants import FILE_TOOLS from langflow.utils import payload -from langflow.utils.logger import logger class Graph: diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index b3ecd04f6..f9db94cfa 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -167,7 +167,6 @@ export default function ParameterComponent({ } onChange={(t: string[]) => { data.node.template[name].value = t; - }} /> ) : data.node.template[name].multiline ? ( @@ -176,7 +175,6 @@ export default function ParameterComponent({ value={data.node.template[name].value ?? ""} onChange={(t: string) => { data.node.template[name].value = t; - }} /> ) : ( @@ -187,7 +185,6 @@ export default function ParameterComponent({ value={data.node.template[name].value ?? ""} onChange={(t) => { data.node.template[name].value = t; - }} /> )} @@ -200,7 +197,6 @@ export default function ParameterComponent({ setEnabled={(t) => { data.node.template[name].value = t; setEnabled(t); - }} size="large" /> @@ -213,7 +209,7 @@ export default function ParameterComponent({ value={data.node.template[name].value ?? ""} onChange={(t) => { data.node.template[name].value = t; - }} + }} /> ) : left === true && @@ -234,7 +230,6 @@ export default function ParameterComponent({ value={data.node.template[name].value ?? ""} onChange={(t: string) => { data.node.template[name].value = t; - }} /> ) : left === true && type === "file" ? ( @@ -248,7 +243,6 @@ export default function ParameterComponent({ suffixes={data.node.template[name].suffixes} onFileChange={(t: string) => { data.node.template[name].content = t; - }} > ) : left === true && type === "int" ? ( @@ -259,7 +253,6 @@ export default function ParameterComponent({ value={data.node.template[name].value ?? ""} onChange={(t) => { data.node.template[name].value = t; - }} /> @@ -269,7 +262,6 @@ export default function ParameterComponent({ value={data.node.template[name].value ?? ""} onChange={(t: string) => { 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 c72de3ed4..17131ea7a 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -1,16 +1,3 @@ -import { - BugAntIcon, - Cog6ToothIcon, - InformationCircleIcon, - TrashIcon, -} from "@heroicons/react/24/outline"; - -import { - CheckCircleIcon, - EllipsisHorizontalCircleIcon, - ExclamationCircleIcon, -} from "@heroicons/react/24/solid"; - import { classNames, nodeColors, diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 36f5b73d0..89f3eea13 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/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index c3d3aed07..d59078836 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/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx index 94d3b0f59..290a46cb4 100644 --- a/src/frontend/src/components/toggleShadComponent/index.tsx +++ b/src/frontend/src/components/toggleShadComponent/index.tsx @@ -6,7 +6,7 @@ export default function ToggleShadComponent({ enabled, setEnabled, disabled, - size + size, }: ToggleComponentType) { useEffect(() => { if (disabled) { @@ -14,7 +14,7 @@ export default function ToggleShadComponent({ } }, [disabled, setEnabled]); let scaleX, scaleY; - switch(size){ + switch (size) { case "small": scaleX = 0.6; scaleY = 0.6; diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index 285da5277..838df3f15 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -126,4 +126,3 @@ export const EXPORT_CODE_DIALOG = */ export const INPUT_STYLE = " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none "; - diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx index 5e874c702..61d769aa1 100644 --- a/src/frontend/src/contexts/index.tsx +++ b/src/frontend/src/contexts/index.tsx @@ -14,17 +14,17 @@ export default function ContextWrapper({ children }: { children: ReactNode }) { <> - - - - - + + + + + {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 ( { * @returns {Promise} The saved flow data. * @throws Will throw an error if saving fails. */ -export async function saveFlowToDatabase(newFlow: FlowType): Promise { +export async function saveFlowToDatabase(newFlow: { + name: string; + id: string; + data: ReactFlowJsonObject; + description: string; + style?: FlowStyleType; +}): Promise { try { const response = await axios.post("/api/v1/flows/", { name: newFlow.name, diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx index cfb9d06f8..6d4cee220 100644 --- a/src/frontend/src/modals/flowSettingsModal/index.tsx +++ b/src/frontend/src/modals/flowSettingsModal/index.tsx @@ -52,7 +52,6 @@ export default function FlowSettingsModal() { Settings - {SETTINGS_DIALOG_SUBTITLE} diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index d1fe7a76a..c9c50bb27 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -1,18 +1,18 @@ -import { Route, Routes } from "react-router-dom" +import { Route, Routes } from "react-router-dom"; import HomePage from "./pages/MainPage"; import FlowPage from "./pages/FlowPage"; import CommunityPage from "./pages/CommunityPage"; const Router = () => { - return( - - }/> - }/> - - }/> - - - ) - } - - export default Router; \ No newline at end of file + return ( + + } /> + } /> + + } /> + + + ); +}; + +export default Router;