Implemented a stop button for BFS/ DFS/ Dijksra visualization

sakeel-103 · Oct 31, 2024 · b0c64b2 · b0c64b2
1 parent a6c0116
commit b0c64b2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -372,7 +372,10 @@ <h2 data-i18n="interactive-graph-visualizer">
     <div class="container" id="container">
 
         <!-- BFS Button -->
-        <button (click)="startBFS()">Start BFS</button>
+        <button (click)="startBFS()">
+          {{ isBFSRunning ? 'Stop BFS' : 'Start BFS' }}
+        </button>
+
         <div *ngIf="showBFSGif" class="gif-container">
           <img
             src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Breadth-First-Search-Algorithm.gif"
@@ -381,7 +384,9 @@ <h2 data-i18n="interactive-graph-visualizer">
         </div>
 
         <!-- DFS Button -->
-        <button (click)="startDFS()">Start DFS</button>
+        <button (click)="startDFS()">
+          {{ isDFSRunning ? 'Stop DFS' : 'Start DFS' }}
+        </button>
         <div *ngIf="showDFSGif" class="gif-container">
           <img
             src="https://upload.wikimedia.org/wikipedia/commons/7/7f/Depth-First-Search.gif"
@@ -390,7 +395,9 @@ <h2 data-i18n="interactive-graph-visualizer">
         </div>
 
         <!-- Dijkstra Button -->
-        <button (click)="startDijkstra()">Start Dijkstra</button>
+        <button (click)="startDijkstra()">
+          {{ isDijkstraRunning ? 'Stop Dijkstra' : 'Start Dijkstra' }}
+        </button>
         <div *ngIf="showDijkstraGif" class="gif-container">
           <img
             src="https://upload.wikimedia.org/wikipedia/commons/5/57/Dijkstra_Animation.gif"

diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
@@ -13,8 +13,11 @@ export class HeaderComponent implements AfterViewInit, OnDestroy {
   private resizeListener: (() => void) | null = null; // Initialize as null
   activeTab: string = 'dfs'; // Default tab is 'dfs'
   showBFSGif: boolean = false; // Default for BFS visualization
+  isBFSRunning: boolean = false;
   showDFSGif: boolean = false; // Default for DFS visualization
+  isDFSRunning: boolean =false; 
   showDijkstraGif: boolean = false; // Default for Dijkstra visualization
+  isDijkstraRunning: boolean = false; 
 
   setActiveTab(tab: string) {
     this.activeTab = tab;
@@ -52,17 +55,20 @@ export class HeaderComponent implements AfterViewInit, OnDestroy {
   }
 
   startBFS() {
-    this.showBFSGif = !this.showBFSGif; // Toggle the visibility
+    this.isBFSRunning = !this.isBFSRunning; // Toggle the BFS state on/off
+    this.showBFSGif = this.isBFSRunning; // Toggle the visibility
     console.log('BFS Started: ', this.showBFSGif); // Debugging
   }
 
   startDFS() {
-    this.showDFSGif = !this.showDFSGif; // Toggle the visibility
+    this.isDFSRunning = !this.isDFSRunning; // Toggle the DFS state on/off
+    this.showDFSGif = this.isDFSRunning; // Toggle the visibility
     console.log('DFS Started: ', this.showDFSGif); // Debugging
   }
 
   startDijkstra() {
-    this.showDijkstraGif = !this.showDijkstraGif; // Toggle the visibility
+    this.isDijkstraRunning = !this.isDijkstraRunning; // Toggle the Dijkstra state on/off
+    this.showDijkstraGif = this.isDijkstraRunning; // Toggle the visibility
     console.log('Dijkstra Started: ', this.showDijkstraGif); // Debugging
   }
 }