From 2e0c87023ea9d424954b47f2b59d95f01a3f2160 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Tue, 10 Jun 2025 13:33:22 -0600
Subject: [PATCH] feat: enhance OutputComponent dropdown functionality and
 styling (#8458)

* refactor: update OutputComponent styles and enhance dropdown functionality

* Adjusted text size in OutputComponent for better readability.
* Improved dropdown button styling and added hover effects.
* Enhanced dropdown content layout to display output types alongside names.
* Added console log for outputs to assist in debugging.

* refactor: remove console log from OutputComponent for cleaner code

* refactor: streamline GenericNode component and enhance NodeOutputs functionality

* Removed conditional rendering for hidden outputs in GenericNode for cleaner code.
* Introduced hasExistingHiddenOutputs prop to NodeOutputs for better state management.
* Updated OutputComponent styles for improved visual consistency and output type display.

* style: update OutputComponent padding for improved layout

* Added padding to the OutputComponent for better spacing and visual consistency.
---
 .../NodeOutputParameter/NodeOutputs.tsx       |  4 +-
 .../components/NodeOutputfield/index.tsx      | 47 ----------------
 .../components/OutputComponent/index.tsx      | 23 ++++----
 .../src/CustomNodes/GenericNode/index.tsx     | 53 ++++++-------------
 4 files changed, 32 insertions(+), 95 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/NodeOutputs.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/NodeOutputs.tsx
index 3edd38500..2a0c24bf4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/NodeOutputs.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/NodeOutputs.tsx
@@ -12,6 +12,7 @@ export default function NodeOutputs({
   showHiddenOutputs,
   selectedOutput,
   handleSelectOutput,
+  hasExistingHiddenOutputs = false,
 }: {
   outputs: any;
   keyPrefix: string;
@@ -23,6 +24,7 @@ export default function NodeOutputs({
   showHiddenOutputs: boolean;
   selectedOutput: any;
   handleSelectOutput: any;
+  hasExistingHiddenOutputs?: boolean;
 }) {
   const hasLoopOutput = outputs.some((output) => output.allows_loop);
   const hasGroupOutputs = outputs.some((output) => output.group_outputs);
@@ -105,7 +107,7 @@ export default function NodeOutputs({
           (out) => out.name === displayOutput.name,
         ) ?? 0
       }
-      lastOutput={true}
+      lastOutput={!hasExistingHiddenOutputs}
       data={data}
       types={types}
       selected={selected}
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
index a83d347ea..a0c6d5d5d 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@@ -52,53 +52,6 @@ const SnowflakeIcon = memo(() => (
   <IconComponent className="h-5 w-5 text-ice" name="Snowflake" />
 ));
 
-const HideShowButton = memo(
-  ({
-    disabled,
-    onClick,
-    hidden,
-    isToolMode,
-    title,
-  }: {
-    disabled: boolean;
-    onClick: () => void;
-    hidden: boolean;
-    isToolMode: boolean;
-    title: string;
-  }) => (
-    <Button
-      disabled={disabled}
-      unstyled
-      onClick={onClick}
-      data-testid={`input-inspection-${title.toLowerCase()}`}
-    >
-      <ShadTooltip
-        content={
-          disabled
-            ? "Connected outputs can't be hidden."
-            : hidden
-              ? "Show output"
-              : "Hide output"
-        }
-      >
-        <div>
-          <EyeIcon
-            hidden={hidden}
-            className={cn(
-              "icon-size",
-              disabled
-                ? "text-placeholder-foreground opacity-60"
-                : isToolMode
-                  ? "text-background hover:text-secondary-hover"
-                  : "text-placeholder-foreground hover:text-primary-hover",
-            )}
-          />
-        </div>
-      </ShadTooltip>
-    </Button>
-  ),
-);
-
 const InspectButton = memo(
   forwardRef(
     (
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx
index c12669d2f..3b9fbdbd7 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx
@@ -43,7 +43,7 @@ export default function OutputComponent({
   const singleOutput = displayProxy(
     <span
       className={cn(
-        "text-xs font-medium",
+        "px-2 py-1 text-[13px] font-medium",
         isToolMode && "text-secondary",
         frozen ? "text-ice" : "",
       )}
@@ -67,22 +67,24 @@ export default function OutputComponent({
           <DropdownMenuTrigger asChild>
             <Button
               unstyled
-              className="flex items-center gap-2"
+              className="group flex items-center gap-2"
               data-testid={`dropdown-output-${outputName?.toLowerCase()}`}
             >
-              {name}
-              <ForwardedIconComponent
-                name="ChevronDown"
-                className="h-4 w-4 text-muted-foreground"
-              />
+              <div className="flex items-center gap-1 truncate rounded-md px-2 py-1 text-[13px] font-medium group-hover:bg-primary/10">
+                {name}
+                <ForwardedIconComponent
+                  name="ChevronDown"
+                  className="h-4 w-4 text-muted-foreground"
+                />
+              </div>
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent>
+          <DropdownMenuContent className="min-w-[200px] max-w-[250px]">
             {outputs.map((output) => (
               <DropdownMenuItem
                 key={output.name}
                 data-testid={`dropdown-item-output-${outputName?.toLowerCase()}-${output.display_name?.toLowerCase()}`}
-                className="cursor-pointer px-3 py-2"
+                className="cursor-pointer justify-between px-3 py-2"
                 onClick={() => {
                   handleSelectOutput && handleSelectOutput(output);
                 }}
@@ -90,6 +92,9 @@ export default function OutputComponent({
                 <span className="truncate text-[13px]">
                   {output.display_name ?? output.name}
                 </span>
+                <span className="ml-4 text-[13px] text-muted-foreground">
+                  {output.types.join(", ")}
+                </span>
               </DropdownMenuItem>
             ))}
           </DropdownMenuContent>
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index d7432d52d..6e5cb7b36 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -587,45 +587,22 @@ function GenericNode({
                 showHiddenOutputs={showHiddenOutputs}
                 selectedOutput={selectedOutput}
                 handleSelectOutput={handleSelectOutput}
+                hasExistingHiddenOutputs={
+                  !!hiddenOutputs && hiddenOutputs.length > 0
+                }
+              />
+              <MemoizedNodeOutputs
+                outputs={hiddenOutputs}
+                keyPrefix="hidden"
+                data={data}
+                types={types}
+                selected={selected ?? false}
+                showNode={showNode}
+                isToolMode={isToolMode}
+                showHiddenOutputs={true}
+                selectedOutput={selectedOutput}
+                handleSelectOutput={handleSelectOutput}
               />
-              {showHiddenOutputs && (
-                <MemoizedNodeOutputs
-                  outputs={hiddenOutputs}
-                  keyPrefix="hidden"
-                  data={data}
-                  types={types}
-                  selected={selected ?? false}
-                  showNode={showNode}
-                  isToolMode={isToolMode}
-                  showHiddenOutputs={true}
-                  selectedOutput={selectedOutput}
-                  handleSelectOutput={handleSelectOutput}
-                />
-              )}
-              {hiddenOutputs && hiddenOutputs.length > 0 && (
-                <ShadTooltip
-                  content={
-                    showHiddenOutputs
-                      ? `${TOOLTIP_HIDDEN_OUTPUTS} (${hiddenOutputs?.length})`
-                      : `${TOOLTIP_OPEN_HIDDEN_OUTPUTS} (${hiddenOutputs?.length})`
-                  }
-                >
-                  <div
-                    className={cn(
-                      "absolute left-1/2 flex -translate-x-1/2 justify-center",
-                      (shownOutputs && shownOutputs.length > 0) ||
-                        showHiddenOutputs
-                        ? "bottom-[-0.8rem]"
-                        : "bottom-[-0.8rem]",
-                    )}
-                  >
-                    <HiddenOutputsButton
-                      showHiddenOutputs={showHiddenOutputs}
-                      onClick={() => setShowHiddenOutputs(!showHiddenOutputs)}
-                    />
-                  </div>
-                </ShadTooltip>
-              )}
             </>
           </div>
         )}