formatting

src/frontend/src/components/inputFileComponent/index.tsx

@@ -91,7 +91,6 @@ export default function InputFileComponent({
     input.click();
   };
 
-
   return (
     <div className={disabled ? "input-component-div" : "w-full"}>
       <div className="input-file-component">

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

@@ -261,7 +261,9 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                             ) : data.node.template[n].type === "code" ? (
                               <div className="mx-auto">
                                 <CodeAreaComponent
-                                  dynamic={data.node.template[n].dynamic ?? false}
+                                  dynamic={
+                                    data.node.template[n].dynamic ?? false
+                                  }
                                   setNodeClass={(nodeClass) => {
                                     data.node = nodeClass;
                                   }}

src/frontend/src/modals/baseModal/index.tsx

@@ -1,6 +1,6 @@
-import { ReactNode, useContext, useEffect, useRef } from "react";
+import { ReactNode, useContext } from "react";
 
-import _ from "lodash";
+import React from "react";
 import {
   Dialog,
   DialogContent,
@@ -9,41 +9,33 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import React from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 
 type ContentProps = { children: ReactNode };
-type HeaderProps = {children:ReactNode,description:string};
+type HeaderProps = { children: ReactNode; description: string };
-
 
 const Content: React.FC<ContentProps> = ({ children }) => {
-    return (
+  return <div className="h-full w-full">{children}</div>;
-        <div className="w-full h-full">
+};
-            {children}
-        </div>)
-}
 
-const Header: React.FC<{ children: ReactNode, description:string }> = ({ children,description }) => {
+const Header: React.FC<{ children: ReactNode; description: string }> = ({
+  children,
+  description,
+}) => {
   return (
     <DialogHeader>
-            <DialogTitle className="flex items-center">
+      <DialogTitle className="flex items-center">{children}</DialogTitle>
-                {children}
-            </DialogTitle>
       <DialogDescription>{description}</DialogDescription>
     </DialogHeader>
-    )
+  );
-}
+};
 interface BaseModalProps {
   children: [React.ReactElement<ContentProps>, React.ReactElement<HeaderProps>];
   open: boolean;
   setOpen: (open: boolean) => void;
 }
-function BaseModal({
+function BaseModal({ open, setOpen, children }: BaseModalProps) {
-    open,
+  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
-    setOpen,
-    children,
-}: BaseModalProps) {
-   const {closePopUp, setCloseEdit} = useContext(PopUpContext)
 
   function setModalOpen(x: boolean) {
     setOpen(x);
@@ -54,7 +46,9 @@ function BaseModal({
       }, 300);
     }
   }
-    const headerChild = React.Children.toArray(children).find((child) => (child as React.ReactElement).type === Header);
+  const headerChild = React.Children.toArray(children).find(
+    (child) => (child as React.ReactElement).type === Header
+  );
   const ContentChild = React.Children.toArray(children).find(
     (child) => (child as React.ReactElement).type === Content
   );
@@ -64,13 +58,10 @@ function BaseModal({
       <DialogTrigger className="hidden"></DialogTrigger>
       <DialogContent className="min-w-[80vw]">
         {headerChild}
-                <div className="flex h-[80vh] w-full mt-2 ">
+        <div className="mt-2 flex h-[80vh] w-full ">{ContentChild}</div>
-                    {ContentChild}
-                </div>
       </DialogContent>
     </Dialog>
   );
-
 }
 
 BaseModal.Content = Content;

src/frontend/src/modals/codeAreaModal/v2.tsx

@@ -1,13 +1,13 @@
+// organize-imports-ignore
 import { useContext, useEffect, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
-import 'ace-builds/src-noconflict/ace';
+import "ace-builds/src-noconflict/ace";
 import { darkContext } from "../../contexts/darkContext";
 import { postCustomComponent, postValidateCode } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
 import { APIClassType } from "../../types/api";
-import TwoColumnsModal from "../baseModal";
 import { DialogTitle } from "@radix-ui/react-dialog";
 import { TerminalSquare } from "lucide-react";
 import AceEditor from "react-ace";
@@ -15,8 +15,7 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 import "ace-builds/src-noconflict/ext-language_tools";
-import 'ace-builds/src-noconflict/ace';
+import "ace-builds/src-noconflict/ace";
-import { XCircle } from 'lucide-react';
 import BaseModal from "../baseModal";
 
 export default function CodeAreaModal({
@@ -24,7 +23,7 @@ export default function CodeAreaModal({
   setValue,
   nodeClass,
   setNodeClass,
-    dynamic
+  dynamic,
 }: {
   setValue: (value: string) => void;
   value: string;
@@ -38,7 +37,9 @@ export default function CodeAreaModal({
   const { dark } = useContext(darkContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [activeTab, setActiveTab] = useState("0");
-    const [error, setError] = useState<{ detail: { error: string, traceback: string } }>(null)
+  const [error, setError] = useState<{
+    detail: { error: string; traceback: string };
+  }>(null);
   const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const ref = useRef();
   function setModalOpen(x: boolean) {
@@ -52,7 +53,7 @@ export default function CodeAreaModal({
   }
   useEffect(() => {
     setValue(code);
-    }, [code, setValue])
+  }, [code, setValue]);
 
   function handleClick() {
     setLoading(true);
@@ -94,21 +95,21 @@ export default function CodeAreaModal({
             title: "There is something wrong with this code, please review it",
           });
         });
-        }
+    } else {
-        else {
+      postCustomComponent(code, nodeClass)
-            postCustomComponent(code, nodeClass).then((apiReturn) => {
+        .then((apiReturn) => {
           const { data } = apiReturn;
           if (data) {
             setNodeClass(data);
             setModalOpen(false);
           }
-            }).catch((err) => {
+        })
+        .catch((err) => {
           setError(err.response.data);
         });
     }
-
   }
-    const tabs = [{ name: "code" }, { name: "errors" }]
+  const tabs = [{ name: "code" }, { name: "errors" }];
 
   return (
     <BaseModal open={true} setOpen={setOpen}>
@@ -117,12 +118,13 @@ export default function CodeAreaModal({
           <span className="pr-2">Edit Code</span>
           <TerminalSquare
             strokeWidth={1.5}
-                        className="h-6 w-6 text-primary pl-1 "
+            className="h-6 w-6 pl-1 text-primary "
             aria-hidden="true"
           />
-                </DialogTitle></BaseModal.Header>
+        </DialogTitle>
+      </BaseModal.Header>
       <BaseModal.Content>
-                <div className="w-full h-full flex flex-col transition-all">
+        <div className="flex h-full w-full flex-col transition-all">
           <div className="h-full w-full">
             <AceEditor
               value={code}
@@ -137,19 +139,31 @@ export default function CodeAreaModal({
               onChange={(value) => {
                 setCode(value);
               }}
-                            className="w-full rounded-lg h-full custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
+              className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
             />
           </div>
-                    <div className={"w-full transition-all delay-500 " + (error?.detail.error !== undefined ? "h-2/6" : "h-0")}>
+          <div
-                        <div className="w-full h-full overflow-y-scroll overflow-x-clip custom-scroll text-left mt-1">
+            className={
-                            <h1 className="text-destructive text-lg">{error?.detail?.error}</h1>
+              "w-full transition-all delay-500 " +
-                            <div className="text-status-red text-sm ml-2 w-full break-all"><pre className="w-full break-all whitespace-pre-wrap">{error?.detail?.traceback}</pre></div>
+              (error?.detail.error !== undefined ? "h-2/6" : "h-0")
+            }
+          >
+            <div className="mt-1 h-full w-full overflow-x-clip overflow-y-scroll text-left custom-scroll">
+              <h1 className="text-lg text-destructive">
+                {error?.detail?.error}
+              </h1>
+              <div className="ml-2 w-full break-all text-sm text-status-red">
+                <pre className="w-full whitespace-pre-wrap break-all">
+                  {error?.detail?.traceback}
+                </pre>
               </div>
             </div>
-                    <div className="h-fit w-full flex justify-end">
+          </div>
+          <div className="flex h-fit w-full justify-end">
             <Button className="mt-3" onClick={handleClick} type="submit">
               Check & Save
-                        </Button></div>
+            </Button>
+          </div>
         </div>
       </BaseModal.Content>
     </BaseModal>

src/frontend/src/utils.ts

@@ -17,10 +17,10 @@ import {
   Paperclip,
   Rocket,
   Scissors,
+  Sparkles,
   TerminalSquare,
   Wand2,
   Wrench,
-  Sparkles,
 } from "lucide-react";
 import { ComponentType, SVGProps } from "react";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";