From f47c28d412ef0d6308f9ed29bc7b53196b5097d9 Mon Sep 17 00:00:00 2001
From: Hebi Li <lihebi.com@gmail.com>
Date: Mon, 8 May 2023 05:34:11 -0700
Subject: [PATCH] add clear result button (#290)

---
 ui/src/components/nodes/Code.tsx  | 32 +++++++++++++++++++++++--------
 ui/src/lib/store/runtimeSlice.tsx |  2 ++
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
index 546f57df..5f8ba468 100644
--- a/ui/src/components/nodes/Code.tsx
+++ b/ui/src/components/nodes/Code.tsx
@@ -62,6 +62,7 @@ import { NodeResizeControl, NodeResizer } from "reactflow";
 import "@reactflow/node-resizer/dist/style.css";
 import { NewPodButtons, ResizeIcon } from "./utils";
 import { timeDifference } from "../../lib/utils";
+import { ButtonGroup } from "@mui/material";
 
 function Timer({ lastExecutedAt }) {
   const [counter, setCounter] = useState(0);
@@ -85,6 +86,7 @@ export const ResultBlock = memo<any>(function ResultBlock({ id }) {
     (state) => state.pods[id].lastExecutedAt
   );
   const [showOutput, setShowOutput] = useState(true);
+  const clearResults = useStore(store, (state) => state.clearResults);
   return (
     <Box
       sx={{
@@ -150,11 +152,7 @@ export const ResultBlock = memo<any>(function ResultBlock({ id }) {
           maxHeight="1000px"
           border="1px"
         >
-          {/* <Box bgcolor="lightgray">Error</Box> */}
-          <Button
-            onClick={() => {
-              setShowOutput(!showOutput);
-            }}
+          <ButtonGroup
             sx={[
               {
                 fontSize: "0.8em",
@@ -168,10 +166,28 @@ export const ResultBlock = memo<any>(function ResultBlock({ id }) {
               },
             ]}
             variant="text"
-            size="small"
+            aria-label="outlined primary button group"
           >
-            Hide output
-          </Button>
+            <Button
+              onClick={() => {
+                setShowOutput(!showOutput);
+              }}
+              variant="text"
+              size="small"
+            >
+              Hide
+            </Button>
+            <Button
+              onClick={() => {
+                clearResults(id);
+              }}
+              variant="text"
+              size="small"
+            >
+              Clear
+            </Button>
+          </ButtonGroup>
+
           {stdout && (
             <Box
               whiteSpace="pre-wrap"
diff --git a/ui/src/lib/store/runtimeSlice.tsx b/ui/src/lib/store/runtimeSlice.tsx
index 310a551e..3096cd06 100644
--- a/ui/src/lib/store/runtimeSlice.tsx
+++ b/ui/src/lib/store/runtimeSlice.tsx
@@ -495,6 +495,7 @@ export const createRuntimeSlice: StateCreator<MyState, [], [], RuntimeSlice> = (
         state.pods[id].result = null;
         state.pods[id].stdout = "";
         state.pods[id].error = null;
+        state.pods[id].dirty = true;
       })
     );
   },
@@ -505,6 +506,7 @@ export const createRuntimeSlice: StateCreator<MyState, [], [], RuntimeSlice> = (
           state.pods[id].result = null;
           state.pods[id].stdout = "";
           state.pods[id].error = null;
+          state.pods[id].dirty = true;
         });
       })
     );