Feat: Add minimize icon and conditional render

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<validationStatusType | null>(null);
+  const [showNode, setShowNode] = useState<boolean>(true);
   // State for outline color
   const { sseData, isBuilding } = useSSE();
   useEffect(() => {
@@ -84,6 +86,13 @@ export default function GenericNode({
             <div className="beta-badge-content">BETA</div>
           </div>
         )}
+        <div>
+          <div className="grid justify-items-end bg-muted pt-2 pr-2 border-b rounded-t-lg">
+              <IconComponent
+                name="Minus"
+                className="hover:text-accent-foreground text-muted-foreground"
+              />
+          </div>
           <div className="generic-node-div-title">
             <div className="generic-node-title-arrangement">
               <IconComponent
@@ -157,6 +166,7 @@ export default function GenericNode({
               </div>
             </div>
           </div>
+        </div>
 
         <div className="generic-node-desc">
           <div className="generic-node-desc-text">{data.node?.description}</div>
@@ -167,7 +177,8 @@ export default function GenericNode({
               .map((templateField: string, idx) => (
                 <div key={idx}>
                   {data.node!.template[templateField].show &&
-                  !data.node!.template[templateField].advanced ? (
+                  !data.node!.template[templateField].advanced &&
+                  showNode ? (
                     <ParameterComponent
                       key={
                         (data.node!.template[templateField].input_types?.join(

src/frontend/src/style/applies.css

@@ -267,7 +267,7 @@
     @apply relative flex w-96 flex-col justify-center rounded-lg bg-background;
   }
   .generic-node-div-title {
-    @apply flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4;
+    @apply flex w-full items-center justify-between gap-8  border-b bg-muted p-4;
   }
   .generic-node-title-arrangement {
     @apply flex-max-width items-center truncate;

src/frontend/src/utils/styleUtils.ts

@@ -78,6 +78,7 @@ import {
   X,
   XCircle,
   Zap,
+  Minus
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AirbyteIcon } from "../icons/Airbyte";
@@ -308,4 +309,5 @@ export const nodeIconsLucide: iconsType = {
   Key,
   Unplug,
   ChevronUp,
+  Minus,
 };