feat: Add OutputModal component for displaying output preview

This commit adds the OutputModal component to the ParameterComponent. The OutputModal component is responsible for displaying the output preview when the user clicks on the "Inspect Output" button. It improves the user experience by allowing them to easily view the output without leaving the current page.

src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx

@@ -45,6 +45,7 @@ import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
 import useHandleNodeClass from "../../../hooks/use-handle-node-class";
 import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons";
 import TooltipRenderComponent from "../tooltipRenderComponent";
+import OutputModal from "../outputModal";
 
 export default function ParameterComponent({
   left,
@@ -77,6 +78,10 @@ export default function ParameterComponent({
   const flow = currentFlow?.data?.nodes ?? null;
   const groupedEdge = useRef(null);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
+  const [openOutputModal, setOpenOutputModal] = useState(false);
+  const flowPool = useFlowStore((state) => state.flowPool);
+
+  const displayOutputPreview = !!flowPool[data.id];
 
   const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue(
     data,
@@ -249,9 +254,33 @@ export default function ParameterComponent({
               </span>
             </ShadTooltip>
           ) : (
-            <span className={!left && data.node?.frozen ? " text-ice" : ""}>
-              {title}
-            </span>
+            <div className="flex gap-2">
+              <span className={!left && data.node?.frozen ? " text-ice" : ""}>
+                {title}
+              </span>
+              <ShadTooltip
+                content={
+                  displayOutputPreview
+                    ? "Inspect Output"
+                    : "Please build the component first"
+                }
+              >
+                <button
+                  disabled={!displayOutputPreview}
+                  onClick={() => setOpenOutputModal(true)}
+                >
+                  <IconComponent
+                    className={classNames(
+                      "h-5 w-5",
+                      displayOutputPreview
+                        ? ""
+                        : " cursor-not-allowed text-muted-foreground",
+                    )}
+                    name={"Eye"}
+                  />
+                </button>
+              </ShadTooltip>
+            </div>
           )}
           <span className={(required ? "ml-2 " : "") + "text-status-red"}>
             {required ? "*" : ""}
@@ -582,6 +611,13 @@ export default function ParameterComponent({
             />
           </div>
         </Case>
+        {openOutputModal && (
+          <OutputModal
+            open={openOutputModal}
+            nodeId={data.id}
+            setOpen={setOpenOutputModal}
+          />
+        )}
       </>
     </div>
   );

src/frontend/src/customNodes/genericNode/index.tsx

@@ -68,7 +68,6 @@ export default function GenericNode({
   const [nodeDescription, setNodeDescription] = useState(
     data.node?.description!,
   );
-  const [openOutputModal, setOpenOutputModal] = useState(false);
   const [isOutdated, setIsOutdated] = useState(false);
   const [validationStatus, setValidationStatus] =
     useState<VertexBuildTypeAPI | null>(null);
@@ -449,13 +448,6 @@ export default function GenericNode({
             </div>
             {showNode && (
               <>
-                <Button
-                  onClick={() => {
-                    setOpenOutputModal(true);
-                  }}
-                >
-                  STATUS##
-                </Button>
                 <ShadTooltip
                   content={
                     buildStatus === BuildStatus.BUILDING ? (
@@ -706,14 +698,6 @@ export default function GenericNode({
           </div>
         )}
       </div>
-
-      {openOutputModal && (
-        <OutputModal
-          open={openOutputModal}
-          nodeId={data.id}
-          setOpen={setOpenOutputModal}
-        />
-      )}
     </>
   );
 }