From f70655445603991ca339e9c2f237401b55a8b483 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com> Date: Mon, 9 Sep 2024 17:06:32 -0300 Subject: [PATCH] fix: node status display when node minimized (#3737) * Removed output from node output field * Removed setShowState that is unused * Render nodestatus only if !showNode * Fix node status showing when minimized * Fix node not expanding after minimized if an output was hidden * Lint * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- .../components/NodeOutputfield/index.tsx | 16 +-------- .../src/CustomNodes/GenericNode/index.tsx | 33 ++++++++++--------- .../components/nodeToolbarComponent/index.tsx | 2 -- src/frontend/src/types/components/index.ts | 3 +- 4 files changed, 19 insertions(+), 35 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx index d27fdb7e2..064803a07 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx @@ -1,12 +1,10 @@ import { cloneDeep } from "lodash"; -import { useEffect, useRef, useState } from "react"; -import { useHotkeys } from "react-hotkeys-hook"; +import { useEffect, useRef } from "react"; import { useUpdateNodeInternals } from "reactflow"; import { default as IconComponent } from "../../../../components/genericIconComponent"; import ShadTooltip from "../../../../components/shadTooltipComponent"; import { Button } from "../../../../components/ui/button"; import useFlowStore from "../../../../stores/flowStore"; -import { useShortcutsStore } from "../../../../stores/shortcuts"; import { useTypesStore } from "../../../../stores/typesStore"; import { NodeOutputFieldComponentType } from "../../../../types/components"; import { @@ -44,7 +42,6 @@ export default function NodeOutputField({ const myData = useTypesStore((state) => state.data); const updateNodeInternals = useUpdateNodeInternals(); const setFilterEdge = useFlowStore((state) => state.setFilterEdge); - const [openOutputModal, setOpenOutputModal] = useState(false); const flowPool = useFlowStore((state) => state.flowPool); let flowPoolId = data.id; @@ -76,17 +73,6 @@ export default function NodeOutputField({ ); const errorOutput = logTypeIsError(flowPoolNode?.data, internalOutputName); - const preventDefault = true; - - function handleOutputWShortcut() { - if (!displayOutputPreview || unknownOutput) return; - if (selected) { - setOpenOutputModal((state) => !state); - } - } - const output = useShortcutsStore((state) => state.output); - useHotkeys(output, handleOutputWShortcut, { preventDefault }); - let disabledOutput = edges.some((edge) => edge.sourceHandle === scapedJSONStringfy(id)) ?? false; diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index b3e6da09e..fc79ebd55 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -51,7 +51,7 @@ export default function GenericNode({ const [isOutdated, setIsOutdated] = useState(false); const [isUserEdited, setIsUserEdited] = useState(false); const [borderColor, setBorderColor] = useState(""); - const [showNode, setShowNode] = useState(data.showNode ?? true); + const showNode = data.showNode ?? true; const updateNodeCode = useUpdateNodeCode( data?.id, @@ -78,10 +78,6 @@ export default function GenericNode({ useCheckCodeValidity(data, templates, setIsOutdated, setIsUserEdited, types); - useEffect(() => { - setShowNode(data.showNode ?? true); - }, [data.showNode]); - const [loadingUpdate, setLoadingUpdate] = useState(false); const [showHiddenOutputs, setShowHiddenOutputs] = useState(false); @@ -193,7 +189,6 @@ export default function GenericNode({ data: { ...old.data, showNode: show }, })); }} - setShowState={setShowNode} numberOfOutputHandles={shownOutputs.length ?? 0} showNode={showNode} openAdvancedModal={false} @@ -208,7 +203,6 @@ export default function GenericNode({ deleteNode, takeSnapshot, setNode, - setShowNode, showNode, updateNodeCode, isOutdated, @@ -329,18 +323,25 @@ export default function GenericNode({ {renderInputParameter} {shownOutputs && shownOutputs.length > 0 && - renderOutputParameter(shownOutputs[0], 0)} + renderOutputParameter( + shownOutputs[0], + data.node!.outputs?.findIndex( + (out) => out.name === shownOutputs[0].name, + ) ?? 0, + )} )} - + {showNode && ( + + )} diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 79bbde614..d0dae0047 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -50,7 +50,6 @@ export default function NodeToolbarComponent({ numberOfOutputHandles, showNode, name = "code", - setShowState, onCloseAdvancedModal, updateNode, isOutdated, @@ -79,7 +78,6 @@ export default function NodeToolbarComponent({ function minimize() { if (isMinimal) { - setShowState((show) => !show); setShowNode((data.showNode ?? true) ? false : true); return; } diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 48af8f093..8fa20217a 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -1,5 +1,5 @@ import { handleOnNewValueType } from "@/CustomNodes/hooks/use-handle-new-value"; -import { ReactElement, ReactNode, SetStateAction } from "react"; +import { ReactElement, ReactNode } from "react"; import { ReactFlowJsonObject } from "reactflow"; import { InputOutput } from "../../constants/enums"; import { @@ -633,7 +633,6 @@ export type nodeToolbarPropsType = { openAdvancedModal?: boolean; onCloseAdvancedModal?: (close: boolean) => void; isOutdated: boolean; - setShowState: (show: boolean | SetStateAction) => void; updateNode: () => void; };