From 885712ac06057ab5d6eacec157cd8bba58a924ec Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 4 Jun 2024 15:14:32 -0300
Subject: [PATCH] refactor: improve displayOutputPreview logic in
 ParameterComponent

---
 .../components/parameterComponent/index.tsx   | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
index 5cba42293..023a12c1a 100644
--- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
@@ -82,10 +82,11 @@ export default function ParameterComponent({
   const [openOutputModal, setOpenOutputModal] = useState(false);
   const flowPool = useFlowStore((state) => state.flowPool);
 
-  const displayOutputPreview = !!(
-    flowPool[data.id] &&
-    flowPool[data.id][flowPool[data.id].length - 1]?.data?.logs[0]?.type !==
-      "unknown"
+  const displayOutputPreview = !!flowPool[data.id];
+
+  const unknownOutput = !!(
+    flowPool[data.id][flowPool[data.id].length - 1]?.data?.logs[0]?.type ===
+    "unknown"
   );
 
   const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue(
@@ -96,7 +97,7 @@ export default function ParameterComponent({
     debouncedHandleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading
+    setIsLoading,
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -105,7 +106,7 @@ export default function ParameterComponent({
     takeSnapshot,
     setNode,
     updateNodeInternals,
-    renderTooltips
+    renderTooltips,
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -114,7 +115,7 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
     ) ?? false;
 
   const handleRefreshButtonPress = async (name, data) => {
@@ -127,12 +128,12 @@ export default function ParameterComponent({
     handleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading
+    setIsLoading,
   );
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
-    skipSnapshot: boolean | undefined = false
+    skipSnapshot: boolean | undefined = false,
   ): Promise<void> => {
     handleOnNewValueHook(newValue, skipSnapshot);
   };
@@ -214,7 +215,7 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : ""
+                !showNode ? "mt-0" : "",
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
@@ -266,19 +267,21 @@ export default function ParameterComponent({
                 <ShadTooltip
                   content={
                     displayOutputPreview
-                      ? "Inspect Output"
+                      ? unknownOutput
+                        ? "Output can't be displayed"
+                        : "Inspect Output"
                       : "Please build the component first"
                   }
                 >
                   <button
-                    disabled={!displayOutputPreview}
+                    disabled={!displayOutputPreview || unknownOutput}
                     onClick={() => setOpenOutputModal(true)}
                     data-testid={`output-inspection-${title.toLowerCase()}`}
                   >
                     <IconComponent
                       className={classNames(
                         "h-5 w-5 rounded-md",
-                        displayOutputPreview
+                        displayOutputPreview && !unknownOutput
                           ? " hover:bg-secondary-foreground/5 hover:text-medium-indigo"
                           : " cursor-not-allowed text-muted-foreground",
                       )}
@@ -330,7 +333,7 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5" : "-mr-0.5",
-                    "h-3 w-3 rounded-full border-2 bg-background"
+                    "h-3 w-3 rounded-full border-2 bg-background",
                   )}
                   style={{ borderColor: color ?? nodeColors.unknown }}
                   onClick={() => setFilterEdge(groupedEdge.current)}