From f02d5fb64b208c061dc2bf21e810f15f8f8602da Mon Sep 17 00:00:00 2001
From: nibilin33 <nibilin33@gmail.com>
Date: Fri, 25 Nov 2022 18:02:32 +0800
Subject: [PATCH 1/2] feat: refactor output box

1. move toggle button to outputbox
2. fix dashboard loading
---
 ui/src/components/Canvas.tsx      | 74 ++++++++++++++++++++++++-------
 ui/src/components/Toolbox.tsx     | 14 ------
 ui/src/components/canvas.style.js | 13 ++++++
 ui/src/pages/repos/index.tsx      | 43 ++++++++++++++++--
 4 files changed, 111 insertions(+), 33 deletions(-)

diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx
index dbc33e9d..4e72ec2a 100644
--- a/ui/src/components/Canvas.tsx
+++ b/ui/src/components/Canvas.tsx
@@ -193,15 +193,18 @@ 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, showOutput = true }) {
+function ResultBlock({ pod, id}) {
   const store = useContext(RepoContext);
+  const [showOutput, setShowOutput] = useState(true);
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
   return (
-    <Box>
+    <Box
+    sx={{
+      minHeight: pod.height,
+    }}>
       {pod.result && (
         <Box
           sx={{ display: "flex", flexDirection: "column" }}
-          overflow="scroll"
         >
           {pod.result.html ? (
             <div dangerouslySetInnerHTML={{ __html: pod.result.html }}></div>
@@ -235,11 +238,33 @@ function ResultBlock({ pod, id, showOutput = true }) {
       )}
 
       {pod.running && <CircularProgress />}
-      {showOutput && (
-        <Box overflow="scroll" maxHeight="145px" border="1px">
+      {showOutput ? (
+        <Box 
+        sx={{ paddingBottom: "2px" }}
+        overflow="scroll"
+        maxHeight="145px"
+        border="1px">
           {/* <Box bgcolor="lightgray">Error</Box> */}
+          <Button
+            onClick={() => {
+              setShowOutput(!showOutput);
+            }}
+            sx={[
+              styles["hidden-btn"],
+              {
+                position: "absolute",
+                top: 0,
+                right: 0,
+                zIndex: 201,
+              },
+            ]}
+            variant="text"
+            size="small"
+          >
+            Hide output
+          </Button>
           {pod.stdout && (
-            <Box whiteSpace="pre-wrap" sx={{ fontSize: 10 }}>
+            <Box whiteSpace="pre-wrap" sx={{ fontSize: 10, paddingBottom: 1 }}>
               <Ansi>{pod.stdout}</Ansi>
             </Box>
           )}
@@ -250,9 +275,9 @@ function ResultBlock({ pod, id, showOutput = true }) {
                 fontSize: 10,
                 flexDirection: "row",
                 alignItems: "center",
+                borderTop: "1px solid rgb(214, 222, 230)",
               }}
             >
-              <Box>Result[{pod.result.count}]:</Box>
               <Box component="pre" whiteSpace="pre-wrap">
                 {pod.result.text}
               </Box>
@@ -268,6 +293,27 @@ function ResultBlock({ pod, id, showOutput = true }) {
             </Box>
           )}
         </Box>
+      ):(
+        <Box
+          sx={{
+            paddingBottom: "5px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Box sx={styles["hidden-hint"]}>This output has been hidden. </Box>
+          <Button
+            onClick={() => {
+              setShowOutput(!showOutput);
+            }}
+            sx={styles["hidden-btn"]}
+            size="small"
+            variant="text"
+          >
+            Show it
+          </Button>
+        </Box>
       )}
     </Box>
   );
@@ -286,7 +332,6 @@ 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";
@@ -352,8 +397,6 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
       case ToolTypes.layout:
         setLayout(layout === "bottom" ? "right" : "bottom");
         break;
-      case ToolTypes.fold:
-        setShowOutput(!showOutput);
     }
   };
 
@@ -372,7 +415,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
       <Box
         sx={{
           border: "solid 1px #d6dee6",
-          borderWidth: pod.ispublic ? "4px" : "1px",
+          borderWidth: pod.ispublic ? "4px" : "2px",
           borderRadius: "4px",
           width: "100%",
           height: "100%",
@@ -413,7 +456,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
         <Box className="custom-drag-handle">
           <Box sx={styles["pod-index"]}>[{pod.index}]</Box>
           <ToolBox
-            data={{ id, showOutput }}
+            data={{ id }}
             onRunTask={runToolBoxTask}
           ></ToolBox>
         </Box>
@@ -460,14 +503,15 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
                 top: isRightLayout ? 0 : "100%",
                 left: isRightLayout ? "100%" : 0,
                 maxHeight: "158px",
-                minWidth: isRightLayout ? "200px" : "100%",
+                maxWidth: isRightLayout ? "300px" : "100%",
+                minWidth: isRightLayout ? "150px" : "100%",
                 boxSizing: "border-box",
                 backgroundColor: "white",
                 zIndex: 100,
                 padding: "0 10px",
               }}
             >
-              <ResultBlock pod={pod} id={id} showOutput={showOutput} />
+              <ResultBlock pod={pod} id={id} />
             </Box>
           )}
         </Box>
@@ -706,7 +750,7 @@ export function Canvas() {
           // selected: false,
           style: {
             ...currentNode.style,
-            boxShadow: `${userColor} 0px 15px 25px`,
+            // boxShadow: `${userColor} 0px 15px 25px`,
           },
         });
       }
diff --git a/ui/src/components/Toolbox.tsx b/ui/src/components/Toolbox.tsx
index 3ad1e17c..1801e34d 100644
--- a/ui/src/components/Toolbox.tsx
+++ b/ui/src/components/Toolbox.tsx
@@ -65,20 +65,6 @@ 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>
   );
 }
diff --git a/ui/src/components/canvas.style.js b/ui/src/components/canvas.style.js
index 2377c25e..8ce02f28 100644
--- a/ui/src/components/canvas.style.js
+++ b/ui/src/components/canvas.style.js
@@ -22,4 +22,17 @@ export default {
     paddingLeft: "5px",
     fontSize: "12px",
   },
+  'hidden-btn': {
+    fontSize: 10,
+    paddingTop: '3px',
+    paddingBottom: '2px',
+    lineHeight: '10px',
+    zIndex: 201
+  },
+  'hidden-hint': {
+    fontSize: 10,
+    color: 'rgb(151, 151, 151)',
+    whiteSpace: 'pre',
+    paddingTop: '2px'
+  }
 };
diff --git a/ui/src/pages/repos/index.tsx b/ui/src/pages/repos/index.tsx
index e0abb280..21a57831 100644
--- a/ui/src/pages/repos/index.tsx
+++ b/ui/src/pages/repos/index.tsx
@@ -186,10 +186,23 @@ function RepoLine({ repo, deletable, sharable }) {
   );
 }
 
-function Repos({ url = FETCH_REPOS, type = RepoTypes.repo }) {
+function Repos({
+  url = FETCH_REPOS,
+  type = RepoTypes.repo,
+  callback = (...arg) => {},
+  onLoading = (load) => {},
+}) {
   const { loading, error, data } = useQuery(url);
-  if (loading) return <p>Loading...</p>;
-  if (error) return <Alert severity="error">{error.message}</Alert>;
+  if (loading) {
+    onLoading(loading);
+    return null;
+  } else {
+    onLoading(loading);
+  }
+  if (error) {
+    callback(error.message);
+    return null;
+  }
   const repos = data[type].slice().reverse();
   return (
     <Box>
@@ -254,6 +267,8 @@ function Repos({ url = FETCH_REPOS, type = RepoTypes.repo }) {
 }
 export default function Page() {
   const { me } = useMe();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
   return (
     <Box sx={{ maxWidth: "sm", alignItems: "center", m: "auto" }}>
       {/* TODO some meta information about the user */}
@@ -270,7 +285,27 @@ export default function Page() {
         👋 Welcome, {me?.firstname}! Please open or create a repository to get
         started.
       </Box>
-      <Repos />
+      {error && <Alert severity="error">{error}</Alert>}
+      {!error && loading && (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <CircularProgress />
+        </Box>
+      )}
+      <Repos
+        callback={(arg) => {
+          if (arg) {
+            setError(arg);
+          }
+        }}
+        onLoading={(value) => {
+          setLoading(value);
+        }}
+      />
       <Repos url={FETCH_COLLAB_REPOS} type={RepoTypes.collab} />
     </Box>
   );

From 7610e022500a0c058d51f829867ef5ebb77c2f74 Mon Sep 17 00:00:00 2001
From: nibilin33 <nibilin33@gmail.com>
Date: Sat, 26 Nov 2022 00:03:33 +0800
Subject: [PATCH 2/2] refactor: remove error hint

---
 ui/src/pages/repos/index.tsx | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/ui/src/pages/repos/index.tsx b/ui/src/pages/repos/index.tsx
index 21a57831..0c31d780 100644
--- a/ui/src/pages/repos/index.tsx
+++ b/ui/src/pages/repos/index.tsx
@@ -189,7 +189,6 @@ function RepoLine({ repo, deletable, sharable }) {
 function Repos({
   url = FETCH_REPOS,
   type = RepoTypes.repo,
-  callback = (...arg) => {},
   onLoading = (load) => {},
 }) {
   const { loading, error, data } = useQuery(url);
@@ -200,7 +199,6 @@ function Repos({
     onLoading(loading);
   }
   if (error) {
-    callback(error.message);
     return null;
   }
   const repos = data[type].slice().reverse();
@@ -268,7 +266,6 @@ function Repos({
 export default function Page() {
   const { me } = useMe();
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
   return (
     <Box sx={{ maxWidth: "sm", alignItems: "center", m: "auto" }}>
       {/* TODO some meta information about the user */}
@@ -285,8 +282,7 @@ export default function Page() {
         👋 Welcome, {me?.firstname}! Please open or create a repository to get
         started.
       </Box>
-      {error && <Alert severity="error">{error}</Alert>}
-      {!error && loading && (
+      {loading && (
         <Box
           sx={{
             display: "flex",
@@ -297,15 +293,9 @@ export default function Page() {
         </Box>
       )}
       <Repos
-        callback={(arg) => {
-          if (arg) {
-            setError(arg);
-          }
-        }}
-        onLoading={(value) => {
-          setLoading(value);
-        }}
-      />
+        onLoading={(value)=>{
+          setLoading(value)
+        }}/>
       <Repos url={FETCH_COLLAB_REPOS} type={RepoTypes.collab} />
     </Box>
   );