fix: show connected outputs being hidden by code (#7510)

* remove-tag-manager

* update-gtag-tracking-id

* add-head-tag

* remove Google Analytics gtag configuration from docusaurus.config.js

* fix-hydration-error

* revert-to-easy-way

* standard-gtag

* broken-link

* refactor: streamline Google Tag Manager script configuration in docusaurus.config.js

* Apply suggestions from code review

Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>

* Added ShowHiddenOutputs to node output field and made handle not be shown if hidden

* Added ShowHiddenOutputs in OutputParameter

* Added showHiddenOutputs to nodeOutputFieldComponentType

* Passed showHiddenOutputs to outputs

* Check if input types is not empty before counting handle

* Updated missing callback dep

* Added hidden parameter to not have duplicated handles

* [autofix.ci] apply automated fixes

---------

Co-authored-by: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Co-authored-by: Carlos Coelho <80289056+carlosrcoelho@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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

@@ -12,7 +12,9 @@ export const OutputParameter = ({
   types,
   selected,
   showNode,
+  showHiddenOutputs,
   isToolMode,
+  hidden,
 }) => {
   const id = useMemo(
     () => ({
@@ -36,6 +38,7 @@ export const OutputParameter = ({
 
   return (
     <NodeOutputField
+      hidden={hidden}
       index={idx}
       lastOutput={lastOutput}
       selected={selected}
@@ -51,6 +54,7 @@ export const OutputParameter = ({
       outputName={output.name}
       colorName={colorNames}
       isToolMode={isToolMode}
+      showHiddenOutputs={showHiddenOutputs}
     />
   );
 };

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

@@ -167,6 +167,8 @@ function NodeOutputField({
   lastOutput,
   colorName,
   isToolMode = false,
+  showHiddenOutputs,
+  hidden,
 }: NodeOutputFieldComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const updateNodeInternals = useUpdateNodeInternals();
@@ -261,10 +263,10 @@ function NodeOutputField({
   );
 
   useEffect(() => {
-    if (disabledOutput && data.node?.outputs![index].hidden) {
+    if (disabledOutput && hidden) {
       handleUpdateOutputHide(false);
     }
-  }, [disabledOutput, data.node?.outputs, handleUpdateOutputHide, index]);
+  }, [disabledOutput, handleUpdateOutputHide, hidden]);
 
   const [openOutputModal, setOpenOutputModal] = useState(false);
 
@@ -378,6 +380,7 @@ function NodeOutputField({
   const disabledInspectButton =
     !displayOutputPreview || unknownOutput || emptyOutput;
 
+  if (!showHiddenOutputs && hidden) return <></>;
   if (!showNode) return <>{Handle}</>;
 
   return (
@@ -400,7 +403,7 @@ function NodeOutputField({
           <HideShowButton
             disabled={disabledOutput}
             onClick={() => handleUpdateOutputHide()}
-            hidden={!!data.node?.outputs![index].hidden}
+            hidden={!!hidden}
             isToolMode={isToolMode}
             title={title}
           />

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

@@ -1,6 +1,8 @@
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
+import { useAlternate } from "@/shared/hooks/use-alternate";
+import { useUtilityStore } from "@/stores/utilityStore";
 import { useUpdateNodeInternals } from "@xyflow/react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -11,6 +13,7 @@ import {
   TOOLTIP_OPEN_HIDDEN_OUTPUTS,
 } from "../../constants/constants";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
+import { useChangeOnUnfocus } from "../../shared/hooks/use-change-on-unfocus";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
@@ -20,10 +23,6 @@ import { VertexBuildTypeAPI } from "../../types/api";
 import { NodeDataType } from "../../types/flow";
 import { checkHasToolMode } from "../../utils/reactflowUtils";
 import { classNames, cn } from "../../utils/utils";
-
-import { useAlternate } from "@/shared/hooks/use-alternate";
-import { useUtilityStore } from "@/stores/utilityStore";
-import { useChangeOnUnfocus } from "../../shared/hooks/use-change-on-unfocus";
 import { processNodeAdvancedFields } from "../helpers/process-node-advanced-fields";
 import useCheckCodeValidity from "../hooks/use-check-code-validity";
 import useUpdateNodeCode from "../hooks/use-update-node-code";
@@ -233,10 +232,12 @@ function GenericNode({
           selected={selected}
           showNode={showNode}
           isToolMode={isToolMode}
+          showHiddenOutputs={showHiddenOutputs}
+          hidden={key === "hidden"}
         />
       ));
     },
-    [data, types, selected, showNode, isToolMode],
+    [data, types, selected, showNode, isToolMode, showHiddenOutputs],
   );
 
   const { shownOutputs, hiddenOutputs } = useMemo(
@@ -249,6 +250,8 @@ function GenericNode({
     [data.node?.outputs],
   );
 
+  console.log(shownOutputs, hiddenOutputs);
+
   const [hasChangedNodeDescription, setHasChangedNodeDescription] =
     useState(false);
 
@@ -347,7 +350,6 @@ function GenericNode({
     toggleEditNameDescription,
     selectedNodesCount,
   ]);
-
   useEffect(() => {
     if (hiddenOutputs && hiddenOutputs.length === 0) {
       setShowHiddenOutputs(false);
@@ -553,11 +555,9 @@ function GenericNode({
               <div
                 className={cn(showHiddenOutputs ? "" : "h-0 overflow-hidden")}
               >
-                {showHiddenOutputs && (
+                <div className="block">
-                  <div className="block">
+                  {renderOutputs(data.node!.outputs, "hidden")}
-                    {renderOutputs(data.node!.outputs, "hidden")}
+                </div>
-                  </div>
-                )}
               </div>
               {hiddenOutputs && hiddenOutputs.length > 0 && (
                 <ShadTooltip

src/frontend/src/CustomNodes/helpers/count-handles.ts

@@ -12,7 +12,11 @@ export function countHandlesFn(data: NodeDataType): number {
       if (template[templateCamp]?.tool_mode && data.node?.tool_mode)
         return false;
       if (!template[templateCamp]?.show) return false;
-      if (template[templateCamp]?.input_types) return true;
+      if (
+        template[templateCamp]?.input_types &&
+        template[templateCamp]?.input_types.length > 0
+      )
+        return true;
       switch (template[templateCamp]?.type) {
         case "str":
         case "bool":

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

@@ -106,6 +106,8 @@ export type NodeOutputFieldComponentType = {
   lastOutput?: boolean;
   colorName?: string[];
   isToolMode?: boolean;
+  showHiddenOutputs?: boolean;
+  hidden?: boolean;
 };
 
 export type NodeInputFieldComponentType = {