fix: update hide outputs behavior to show current state, update disabled button UI (#7917)

* Fixed hidden to be output.hidden

* Fixed disabled Hide button to look disabled

* Fixed lastInput being true to all fields

* Changed text

* fixed multiple renders

* fixed show hidden

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

@@ -73,10 +73,15 @@ const HideShowButton = memo(
       unstyled
       onClick={onClick}
       data-testid={`input-inspection-${title.toLowerCase()}`}
-      className="cursor-pointer"
     >
       <ShadTooltip
-        content={disabled ? null : hidden ? "Show output" : "Hide output"}
+        content={
+          disabled
+            ? "Connected outputs can't be hidden."
+            : hidden
+              ? "Show output"
+              : "Hide output"
+        }
       >
         <div>
           <EyeIcon
@@ -84,9 +89,7 @@ const HideShowButton = memo(
             className={cn(
               "icon-size",
               disabled
-                ? isToolMode
-                  ? "text-placeholder-foreground opacity-60"
-                  : "text-placeholder-foreground hover:text-foreground"
+                ? "text-placeholder-foreground opacity-60"
                 : isToolMode
                   ? "text-background hover:text-secondary-hover"
                   : "text-placeholder-foreground hover:text-primary-hover",

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

@@ -28,6 +28,17 @@ const RenderInputParameters = ({
       );
   }, [data.node?.template, data.node?.field_order, isToolMode]);
 
+  const shownTemplateFields = useMemo(() => {
+    return templateFields.filter((templateField) => {
+      const template = data.node?.template[templateField];
+      return (
+        template?.show &&
+        !template?.advanced &&
+        !(template?.tool_mode && isToolMode)
+      );
+    });
+  }, [templateFields, data.node?.template, isToolMode]);
+
   const memoizedColors = useMemo(() => {
     const colorMap = new Map();
 
@@ -74,24 +85,19 @@ const RenderInputParameters = ({
     return keyMap;
   }, [templateFields, data.id, data.node?.template]);
 
-  const renderInputParameter = templateFields.map(
-    (templateField: string, idx) => {
+  const renderInputParameter = shownTemplateFields.map(
+    (templateField: string, idx: number) => {
       const template = data.node?.template[templateField];
 
-      if (
-        !template?.show ||
-        template?.advanced ||
-        (template?.tool_mode && isToolMode)
-      ) {
-        return null;
-      }
-
       const memoizedColor = memoizedColors.get(templateField);
       const memoizedKey = memoizedKeys.get(templateField);
 
       return (
         <NodeInputField
-          lastInput={!(shownOutputs.length > 0 || showHiddenOutputs)}
+          lastInput={
+            !(shownOutputs.length > 0 || showHiddenOutputs) &&
+            idx === shownTemplateFields.length - 1
+          }
           key={memoizedKey}
           data={data}
           colors={memoizedColor.colors}

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

@@ -233,7 +233,13 @@ function GenericNode({
           showNode={showNode}
           isToolMode={isToolMode}
           showHiddenOutputs={showHiddenOutputs}
-          hidden={key === "hidden"}
+          hidden={
+            key === "hidden"
+              ? showHiddenOutputs
+                ? output.hidden
+                : true
+              : false
+          }
         />
       ));
     },