feat: add button to control output (#71)

Author: nibilin33

ui/src/components/Canvas.tsx

@@ -189,7 +189,7 @@ const ScopeNode = memo<Props>(({ data, id, isConnectable }) => {
 
 // FIXME: the resultblock is rendered every time the parent codeNode changes (e.g., dragging), we may set the result number as a state of a pod to memoize the resultblock.
 
-function ResultBlock({ pod, id }) {
+function ResultBlock({ pod, id, showOutput = true }) {
   const store = useContext(RepoContext);
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
   const wsRun = useStore(store, (state) => state.wsRun);
@@ -232,7 +232,7 @@ function ResultBlock({ pod, id }) {
       )}
 
       {pod.running && <CircularProgress />}
-      <Box overflow="scroll" maxHeight="145px" border="1px">
+     { showOutput && <Box overflow="scroll" maxHeight="145px" border="1px">
         {/* <Box bgcolor="lightgray">Error</Box> */}
         {pod.stdout && (
           <Box whiteSpace="pre-wrap" sx={{fontSize: 10}}>
@@ -256,7 +256,7 @@ function ResultBlock({ pod, id }) {
             </Box>
           </Box>
         )}
-      </Box>
+      </Box>}
     </Box>
   );
 }
@@ -271,6 +271,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
   const [frame] = React.useState({
     translate: [0, 0],
   });
+  const [showOutput,setShowOutput] = useState(true);
   // right, bottom
   const [layout, setLayout] = useState("bottom");
   const isRightLayout = layout === "right";
@@ -325,6 +326,8 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
       case ToolTypes.layout:
         setLayout(layout === "bottom" ? "right" : "bottom");
         break;
+      case ToolTypes.fold:
+        setShowOutput(!showOutput);
     }
   };
 
@@ -378,7 +381,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
       {/* The header of code pods. */}
       <Box className="custom-drag-handle">
         <Box sx={styles["pod-index"]}>[{pod.index}]</Box>
-        <ToolBox data={{ id }} onRunTask={runToolBoxTask}></ToolBox>
+        <ToolBox data={{ id, showOutput }} onRunTask={runToolBoxTask}></ToolBox>
       </Box>
       <Box
         sx={{
@@ -430,7 +433,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
               padding: "0 10px",
             }}
           >
-            <ResultBlock pod={pod} id={id} />
+            <ResultBlock pod={pod} id={id} showOutput={showOutput}/>
           </Box>
         )}
       </Box>

ui/src/components/Toolbox.tsx

@@ -2,11 +2,14 @@ import { Tooltip, Box, IconButton } from "@mui/material";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ViewComfyIcon from "@mui/icons-material/ViewComfy";
+import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 
 export enum ToolTypes {
   delete,
   play,
   layout,
+  fold,
 }
 export default function ToolBox({
   visible = true,
@@ -43,14 +46,14 @@ export default function ToolBox({
         </IconButton>
       </Tooltip>
       <Tooltip title="Delete">
-      <IconButton
-        size="small"
-        onClick={() => {
-          onRunTask && onRunTask(ToolTypes.delete, data);
-        }}
-      >
-        <DeleteIcon fontSize="inherit" />
-      </IconButton>
+        <IconButton
+          size="small"
+          onClick={() => {
+            onRunTask && onRunTask(ToolTypes.delete, data);
+          }}
+        >
+          <DeleteIcon fontSize="inherit" />
+        </IconButton>
       </Tooltip>
       <Tooltip title="Change layout">
         <IconButton
@@ -62,6 +65,20 @@ export default function ToolBox({
           <ViewComfyIcon fontSize="inherit" />
         </IconButton>
       </Tooltip>
+      <Tooltip title={data.showOutput ? "Fold output" : "Unfold output"}>
+        <IconButton
+          size="small"
+          onClick={() => {
+            onRunTask && onRunTask(ToolTypes.fold, data);
+          }}
+        >
+          {data.showOutput ? (
+            <UnfoldLessIcon fontSize="inherit" />
+          ) : (
+            <UnfoldMoreIcon fontSize="inherit" />
+          )}
+        </IconButton>
+      </Tooltip>
     </Box>
   );
 }