diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/index.tsx index 8a7791341..7159a710b 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/index.tsx +++ b/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 ( ); }; diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx index bb47ed848..c5cf40050 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx +++ b/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(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({ handleUpdateOutputHide()} - hidden={!!data.node?.outputs![index].hidden} + hidden={!!hidden} isToolMode={isToolMode} title={title} /> diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index b32a578c4..f04477fa4 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/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({ - {showHiddenOutputs && ( - - {renderOutputs(data.node!.outputs, "hidden")} - - )} + + {renderOutputs(data.node!.outputs, "hidden")} + {hiddenOutputs && hiddenOutputs.length > 0 && ( 0 + ) + return true; switch (template[templateCamp]?.type) { case "str": case "bool": diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 4bd977af0..30009576e 100644 --- a/src/frontend/src/types/components/index.ts +++ b/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 = {