Merge pull request #61 from concord-consortium/187397640-add-cancel-b…

…utton feat: Added cancel button [PT-187397640]
concord-consortium · Apr 10, 2024 · db1266a · db1266a
2 parents 6102b2b + 5f0c584
commit db1266a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/components/app.scss b/src/components/app.scss
@@ -223,6 +223,9 @@
         }
 
         .buttons {
+          display: flex;
+          gap: 5px;
+
           button {
             padding: 8px;
           }

diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -236,17 +236,19 @@ export const App = () => {
 
   }, [setSequenceGroups, graph]);
 
-  const finishAnimating = useCallback(async () => {
+  const finishAnimating = useCallback(async (cancel?: boolean) => {
     setHighlightNode(undefined);
     setHighlightEdge(undefined);
     setHighlightLoopOnNode(undefined);
     stopAnimationInterval();
 
-    await outputToDataset(currentSequence.current);
+    if (!cancel) {
+      await outputToDataset(currentSequence.current);
 
-    if (currentAnimatedSequenceGroup.current) {
-      currentAnimatedSequenceGroup.current.sequences = [...prevSequences.current, currentSequence.current];
-      setSequenceGroups([...prevAnimatedSequenceGroups.current, currentAnimatedSequenceGroup.current]);
+      if (currentAnimatedSequenceGroup.current) {
+        currentAnimatedSequenceGroup.current.sequences = [...prevSequences.current, currentSequence.current];
+        setSequenceGroups([...prevAnimatedSequenceGroups.current, currentAnimatedSequenceGroup.current]);
+      }
     }
 
     setGenerationMode("ready");
@@ -344,6 +346,10 @@ export const App = () => {
     fastSimulationRef.current = value;
   }, [setFastSimulation]);
 
+  const handleCancel = () => {
+    finishAnimating(true);
+  };
+
   const uiForGenerate = () => {
     const playLabel = generationMode === "playing" ? "Pause" : (generationMode === "paused" ? "Resume" : "Play");
     const PlayOrPauseIcon = generationMode === "playing" ? PauseIcon : PlayIcon;
@@ -439,6 +445,12 @@ export const App = () => {
             disabled={disabled || lengthLimit === undefined || generationMode !== "ready"}>
             Clear Output
           </button>
+          <button
+            type="button"
+            onClick={handleCancel}
+            disabled={graphEmpty || (generationMode === "ready")}>
+            Cancel
+          </button>
         </div>
       </div>
     );