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>

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

@@ -1,12 +1,10 @@
 import { cloneDeep } from "lodash";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
 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;
 

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<string>("");
-  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,
+                    )}
                 </>
               )}
             </div>
-            <NodeStatus
+            {showNode && (
-              frozen={data.node?.frozen}
+              <NodeStatus
-              showNode={showNode}
+                frozen={data.node?.frozen}
-              display_name={data.node?.display_name!}
+                showNode={showNode}
-              nodeId={data.id}
+                display_name={data.node?.display_name!}
-              selected={selected}
+                nodeId={data.id}
-              setBorderColor={setBorderColor}
+                selected={selected}
-            />
+                setBorderColor={setBorderColor}
+              />
+            )}
           </div>
         </div>
 

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;
     }

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<boolean>) => void;
   updateNode: () => void;
 };