Formatting project

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -59,8 +59,7 @@ export default function ParameterComponent({
     data.node.template[name]?.value ?? false
   );
 
-  useEffect(() => {  
+  useEffect(() => {}, [closePopUp, data.node.template]);
-  }, [closePopUp, data.node.template]);
 
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
@@ -115,7 +114,9 @@ export default function ParameterComponent({
         className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
       >
         <>
-        <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
+          <div
+            className={"text-sm truncate w-full " + (left ? "" : "text-end")}
+          >
             {title}
             <span className="text-red-600">{required ? " *" : ""}</span>
           </div>
@@ -169,7 +170,6 @@ export default function ParameterComponent({
                   }
                   onChange={(t: string[]) => {
                     data.node.template[name].value = t;
-  
                   }}
                 />
               ) : data.node.template[name].multiline ? (
@@ -178,7 +178,6 @@ export default function ParameterComponent({
                   value={data.node.template[name].value ?? ""}
                   onChange={(t: string) => {
                     data.node.template[name].value = t;
-  
                   }}
                 />
               ) : (
@@ -189,7 +188,6 @@ export default function ParameterComponent({
                   value={data.node.template[name].value ?? ""}
                   onChange={(t) => {
                     data.node.template[name].value = t;
-  
                   }}
                 />
               )}
@@ -202,7 +200,6 @@ export default function ParameterComponent({
                 setEnabled={(t) => {
                   data.node.template[name].value = t;
                   setEnabled(t);
-
                 }}
               />
             </div>
@@ -235,7 +232,6 @@ export default function ParameterComponent({
               value={data.node.template[name].value ?? ""}
               onChange={(t: string) => {
                 data.node.template[name].value = t;
-              
               }}
             />
           ) : left === true && type === "file" ? (
@@ -249,7 +245,6 @@ export default function ParameterComponent({
               suffixes={data.node.template[name].suffixes}
               onFileChange={(t: string) => {
                 data.node.template[name].content = t;
-              
               }}
             ></InputFileComponent>
           ) : left === true && type === "int" ? (
@@ -260,7 +255,6 @@ export default function ParameterComponent({
                 value={data.node.template[name].value ?? ""}
                 onChange={(t) => {
                   data.node.template[name].value = t;
-                
                 }}
               />
             </div>
@@ -270,7 +264,6 @@ export default function ParameterComponent({
               value={data.node.template[name].value ?? ""}
               onChange={(t: string) => {
                 data.node.template[name].value = t;
-              
               }}
             />
           ) : (
@@ -279,6 +272,5 @@ export default function ParameterComponent({
         </>
       </div>
     </>
-
   );
 }

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -101,8 +101,7 @@ export default function GenericNode({
     return;
   }
 
-  useEffect(() => {  
+  useEffect(() => {}, [closePopUp, data.node.template]);
-  }, [closePopUp, data.node.template]);
 
   return (
     <>

src/frontend/src/components/ShadTooltipComponent/index.tsx

@@ -18,7 +18,6 @@ const ShadTooltip = (props) => {
         >
           {props.content}
         </TooltipContent>
-        
       </Tooltip>
     </TooltipProvider>
   );

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 = ({
-export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType; id: string, onDelete?: () => void, button?: JSX.Element }) => {
+  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]
               }
-            >
+            ></span>
-            </span>
+            <span className="flex-1 truncate-doubleline">{flow.name}</span>
-            <span className="flex-1 truncate-doubleline">
-              {flow.name}
-            </span>
           </div>
-          {onDelete &&
+          {onDelete && (
-          <button
+            <button onClick={onDelete}>
-            onClick={onDelete}
-          >
               <Trash2 className="w-5 text-primary opacity-0 group-hover:opacity-100 transition-all" />
             </button>
-          }
+          )}
         </CardTitle>
         <CardDescription className="pt-2 pb-2">
           <div className="truncate-doubleline">
@@ -53,10 +63,7 @@ export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType;
               <span className="text-base">&nbsp;</span>OpenAI+
             </Badge> */}
           </div>
-          {button &&
+          {button && button}
-            button
-          }
-          
         </div>
       </CardFooter>
     </Card>

src/frontend/src/components/dropdownComponent/index.tsx

@@ -29,7 +29,6 @@ export default function Dropdown({
           <>
             <div className={editNode ? "mt-1" : "relative mt-1"}>
               <Listbox.Button
-              
                 className={
                   editNode
                     ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
@@ -38,11 +37,9 @@ export default function Dropdown({
                       INPUT_STYLE
                 }
               >
-                
                 <span className="block truncate w-full">{internalValue}</span>
                 <span
                   className={
-
                     "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
                   }
                 >

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -49,15 +49,11 @@ export const MenuBar = ({ flows, tabId }) => {
       </Link>
       <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
         <DropdownMenu>
-          <DropdownMenuTrigger >
+          <DropdownMenuTrigger>
-          <Button
+            <Button className="gap-2 flex items-center" variant="primary">
-          className="gap-2 flex items-center"
-            variant="primary"
-          >
               {current_flow.name}
               <ChevronDown className="w-4 h-4" />
             </Button>
-
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-44">
             <DropdownMenuLabel>Edit</DropdownMenuLabel>

src/frontend/src/components/headerComponent/index.tsx

@@ -28,10 +28,7 @@ export default function Header() {
           <span className="text-2xl ml-4">⛓️</span>
         </Link>
         {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
-          <MenuBar
+          <MenuBar flows={flows} tabId={tabId} />
-            flows={flows}
-            tabId={tabId}
-          />
         )}
       </div>
       <div className="flex gap-2 items-center">

src/frontend/src/components/ui/button.tsx

@@ -15,8 +15,7 @@ const buttonVariants = cva(
           "border border-input hover:bg-accent hover:text-accent-foreground",
         primary:
           "border bg-background text-secondary-foreground hover:bg-background/80 hover:shadow-sm",
-        secondary:
+        secondary: "bg-muted text-secondary-foreground hover:bg-secondary/80",
-          "bg-muted text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "underline-offset-4 hover:underline text-primary",
       },

src/frontend/src/constants.tsx

@@ -129,4 +129,3 @@ export const EXPORT_CODE_DIALOG =
  */
 export const INPUT_STYLE =
   " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
-

src/frontend/src/contexts/tabsContext.tsx

@@ -549,7 +549,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         uploadFlows,
         uploadFlow,
         getNodeId,
-        paste
+        paste,
       }}
     >
       {children}

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";
@@ -12,20 +18,20 @@ type undoRedoContextType = {
 type UseUndoRedoOptions = {
   maxHistorySize: number;
   enableShortcuts: boolean;
-  };
+};
 
-  type UseUndoRedo = (options?: UseUndoRedoOptions) => {
+type UseUndoRedo = (options?: UseUndoRedoOptions) => {
   undo: () => void;
   redo: () => void;
   takeSnapshot: () => void;
   canUndo: boolean;
   canRedo: boolean;
-  };
+};
 
-  type HistoryItem = {
+type HistoryItem = {
   nodes: Node[];
   edges: Edge[];
-  };
+};
 
 const initialValue = {
   undo: () => {},
@@ -36,7 +42,7 @@ const initialValue = {
 const defaultOptions: UseUndoRedoOptions = {
   maxHistorySize: 100,
   enableShortcuts: true,
-  };
+};
 
 export const undoRedoContext = createContext<undoRedoContextType>(initialValue);
 
@@ -45,14 +51,15 @@ export function UndoRedoProvider({ children }) {
 
   const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
   const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
-    const [tabIndex, setTabIndex] = useState(flows.findIndex((f) => f.id === tabId));
+  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));
-
   }, [flows, tabId]);
 
   const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
@@ -77,16 +84,7 @@ export function UndoRedoProvider({ children }) {
       newFuture[tabIndex] = [];
       return newFuture;
     });
-    }, [
+  }, [getNodes, getEdges, past, future, flows, tabId, setPast, setFuture]);
-      getNodes,
-      getEdges,
-      past,
-      future,
-      flows,
-      tabId,
-      setPast,
-      setFuture,
-    ]);
 
   const undo = useCallback(() => {
     // get the last state that we want to go back to

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -172,7 +172,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     }
                                     onChange={(t: string[]) => {
                                       data.node.template[n].value = t;
-                                      
                                     }}
                                   />
                                 ) : data.node.template[n].multiline ? (
@@ -182,7 +181,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     value={data.node.template[n].value ?? ""}
                                     onChange={(t: string) => {
                                       data.node.template[n].value = t;
-                                      
                                     }}
                                   />
                                 ) : (
@@ -195,7 +193,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     value={data.node.template[n].value ?? ""}
                                     onChange={(t) => {
                                       data.node.template[n].value = t;
-                                      
                                     }}
                                   />
                                 )}
@@ -208,7 +205,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   setEnabled={(e) => {
                                     data.node.template[n].value = e;
                                     setEnabled(e);
-                                    
                                   }}
                                   disabled={false}
                                 />
@@ -221,7 +217,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   value={data.node.template[n].value ?? ""}
                                   onChange={(t) => {
                                     data.node.template[n].value = t;
-                                    
                                   }}
                                 />
                               </div>
@@ -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;
-                                    
                                   }}
                                 />
                               </div>
@@ -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;
-                                    
                                   }}
                                 ></InputFileComponent>
                               </div>
@@ -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;
-                                    
                                   }}
                                 />
                               </div>

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);
-              
             }}
           />
         </div>
@@ -114,7 +110,6 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t) => {
               data.node.template[name].value = t;
-              
             }}
           />
         </div>
@@ -133,7 +128,6 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t) => {
               data.node.template[name].value = t;
-              
             }}
           />
         </div>
@@ -149,7 +143,6 @@ export default function ModalField({
             suffixes={data.node.template[name].suffixes}
             onFileChange={(t: string) => {
               data.node.template[name].content = t;
-              
             }}
           ></InputFileComponent>
         </div>
@@ -160,7 +153,6 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t: string) => {
               data.node.template[name].value = t;
-              
             }}
           />
         </div>
@@ -171,7 +163,6 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t: string) => {
               data.node.template[name].value = t;
-              
             }}
           />
         </div>

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() {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
-            <ArrowDownTrayIcon
+            <Download
               className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
               aria-hidden="true"
             />

src/frontend/src/pages/CommunityPage/index.tsx

@@ -85,12 +85,19 @@ export default function CommunityPage() {
         </div>
       </div>
       <span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
-      Discover and learn from shared examples by the LangFlow community. We welcome new example contributions that can help our community explore new and powerful features.
+        Discover and learn from shared examples by the LangFlow community. We
+        welcome new example contributions that can help our community explore
+        new and powerful features.
       </span>
       <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {!loadingExamples &&
           examples.map((flow, idx) => (
-            <CardComponent key={idx} flow={flow} id={flow.id} button={<Button
+            <CardComponent
+              key={idx}
+              flow={flow}
+              id={flow.id}
+              button={
+                <Button
                   variant="outline"
                   size="sm"
                   className="whitespace-nowrap "
@@ -102,7 +109,9 @@ export default function CommunityPage() {
                 >
                   <GitFork className="w-4 mr-2" />
                   Fork Example
-            </Button>}/>
+                </Button>
+              }
+            />
           ))}
       </div>
     </div>

src/frontend/src/pages/FlowPage/index.tsx

@@ -3,17 +3,19 @@ import Page from "./components/PageComponent";
 import { TabsContext } from "../../contexts/tabsContext";
 import { useParams } from "react-router-dom";
 
-export default function FlowPage(){
+export default function FlowPage() {
   const { flows, tabId, setTabId } = useContext(TabsContext);
-  const {id} = useParams();
+  const { id } = useParams();
   useEffect(() => {
     setTabId(id);
-  }, [id])
+  }, [id]);
   return (
     <div className="h-full w-full overflow-hidden">
-    {flows.length > 0 && tabId !== "" && flows.findIndex(flow => flow.id === tabId) !== -1 &&
+      {flows.length > 0 &&
-    <Page flow={flows.find(flow => flow.id === tabId)} />
+        tabId !== "" &&
-    }
+        flows.findIndex((flow) => flow.id === tabId) !== -1 && (
+          <Page flow={flows.find((flow) => flow.id === tabId)} />
+        )}
     </div>
-  )
+  );
 }

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(
+  return (
     <Routes>
-             <Route path="/" element={<HomePage/>}/>
+      <Route path="/" element={<HomePage />} />
-             <Route path="/community" element={<CommunityPage/>}/>
+      <Route path="/community" element={<CommunityPage />} />
       <Route path="/flow/:id/">
-                <Route path="" element={<FlowPage/>}/>
+        <Route path="" element={<FlowPage />} />
       </Route>
     </Routes>
-    )
+  );
- }
+};
 
- export default Router;
+export default Router;