Added sample bfs graphs

sakeel-103 · Oct 30, 2024 · 0779eb7 · 0779eb7
1 parent a408325
commit 0779eb7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/src/app/components/bfs-page/bfs-page.component.html b/src/app/components/bfs-page/bfs-page.component.html
@@ -11,6 +11,16 @@ <h2>BFS Steps</h2>
 
   <!-- Main Content -->
   <div style="flex: 1; padding: 20px;">
+    <!-- Predefined Graph Dropdown -->
+    <div style="display: flex; justify-content: center; margin-bottom: 20px;">
+        <label for="predefined-graphs">Select From Sample Graph:</label>
+        <select id="predefined-graphs" style="margin-left: 5px;" (change)="loadPredefinedGraph($event)">
+          <option value="">-- Options --</option>
+          <option value="graph1">Graph 1</option>
+          <option value="graph2">Graph 2</option>
+          <option value="graph3">Graph 3</option>
+        </select>
+    </div>
     <!-- Custom Graph Input -->
     <div style="display: flex; justify-content: center;">
       <div class="custom-input">

diff --git a/src/app/components/bfs-page/bfs-page.component.ts b/src/app/components/bfs-page/bfs-page.component.ts
@@ -38,6 +38,29 @@ export class BfsPageComponent implements AfterViewInit, OnInit {
     this.drawGraph(bfsCtx);
   }
 
+  public predefinedGraphs: any = {
+    graph1: {
+      nodes: 'A,B,C,D',
+      edges: '0-1;0-2;1-3;0-3;1-2',
+    },
+    graph2: {
+      nodes: 'E,F,G,H',
+      edges: '0-1;1-2;2-3;0-2',
+    },
+    graph3: {
+      nodes: 'I,J,K,L,M',
+      edges: '0-1;1-2;2-3;3-4;1-2;1-4',
+    },
+  };
+
+  loadPredefinedGraph(event: Event) {
+    const selectedGraph = (event.target as HTMLSelectElement).value;
+    if (selectedGraph && this.predefinedGraphs[selectedGraph]) {
+      this.customNodeInput = this.predefinedGraphs[selectedGraph].nodes;
+      this.customEdgeInput = this.predefinedGraphs[selectedGraph].edges;
+    }
+  }
+
   toggleDropdown(): void {
     this.isDropdownOpen = !this.isDropdownOpen;
   }