Added description column to advanced tab

src/frontend/src/components/shadTooltipComponent/index.tsx

@@ -1,6 +1,11 @@
 import { ShadToolTipType } from "../../types/components";
 import { cn } from "../../utils/utils";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipContentWithoutPortal,
+  TooltipTrigger,
+} from "../ui/tooltip";
 
 export default function ShadTooltip({
   content,
@@ -8,20 +13,23 @@ export default function ShadTooltip({
   asChild = true,
   children,
   styleClasses,
+  portal = true,
   delayDuration = 500,
 }: ShadToolTipType): JSX.Element {
+  const TooltipContentComponent = portal
+    ? TooltipContent
+    : TooltipContentWithoutPortal;
   return (
     <Tooltip delayDuration={delayDuration}>
       <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
-
-      <TooltipContent
+      <TooltipContentComponent
         className={cn(styleClasses, "max-w-96")}
         side={side}
         avoidCollisions={false}
         sticky="always"
       >
         {content}
-      </TooltipContent>
+      </TooltipContentComponent>
     </Tooltip>
   );
 }

src/frontend/src/components/ui/tooltip.tsx

@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-        className
+        className,
       )}
       {...props}
     />
@@ -28,4 +28,26 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+const TooltipContentWithoutPortal = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContentWithoutPortal.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipContentWithoutPortal,
+  TooltipProvider,
+  TooltipTrigger,
+};

src/frontend/src/modals/editNodeModal/index.tsx

@@ -143,6 +143,7 @@ const EditNodeModal = forwardRef(
                     <TableHeader className="edit-node-modal-table-header">
                       <TableRow className="">
                         <TableHead className="h-7 text-center">PARAM</TableHead>
+                        <TableHead className="h-7 text-center">DESC</TableHead>
                         <TableHead className="h-7 p-0 text-center">
                           VALUE
                         </TableHead>
@@ -197,11 +198,17 @@ const EditNodeModal = forwardRef(
                             >
                               <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
                                 <ShadTooltip
+                                  portal={false}
                                   content={
                                     myData.node?.template[templateParam].proxy
                                       ? myData.node?.template[templateParam]
                                           .proxy?.id
-                                      : null
+                                      : myData.node?.template[templateParam]
+                                            .display_name
+                                        ? myData.node!.template[templateParam]
+                                            .display_name
+                                        : myData.node?.template[templateParam]
+                                            .name
                                   }
                                 >
                                   <span>
@@ -214,6 +221,20 @@ const EditNodeModal = forwardRef(
                                   </span>
                                 </ShadTooltip>
                               </TableCell>
+                              <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
+                                <ShadTooltip
+                                  portal={false}
+                                  content={
+                                    data.node?.template[templateParam]?.info ??
+                                    null
+                                  }
+                                >
+                                  <span>
+                                    {data.node?.template[templateParam]?.info ??
+                                      ""}
+                                  </span>
+                                </ShadTooltip>
+                              </TableCell>
                               <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
                                 <Case
                                   condition={

src/frontend/src/types/components/index.ts

@@ -241,6 +241,7 @@ export type ShadToolTipType = {
   asChild?: boolean;
   children?: ReactElement;
   delayDuration?: number;
+  portal?: boolean;
   styleClasses?: string;
 };