Merge pull request #584 from Shariq2003/compare

FEATURE: Addition of Algo Compare Page #554

src/app/app.routes.ts

@@ -29,6 +29,7 @@ import { MazeRunnerVisualizerComponent } from './components/maze-runner-visualiz
 import { TreasureHuntVisualizerComponent } from './components/treasure-hunt-visualizer/treasure-hunt-visualizer.component';
 import { SortingComponent } from './components/sorting-v/sorting.component';
 import { ForestExplorerComponent } from './components/forest-explorer/forest-explorer.component';
+import { ComparisonComponent } from './components/compare/compare.component';
 
 export const routes: Routes = [
   {
@@ -135,10 +136,15 @@ export const routes: Routes = [
   //   path: 'algo-compare',
   //   component: AlgorithmComparisonComponent,
   // },
+   {
+    path: 'compare',
+    component: ComparisonComponent,
+  },
   {
     path: '**',
     redirectTo: '',
   },
+
 ];
 
 @NgModule({

src/app/components/compare/compare.component.css

@@ -0,0 +1,140 @@
+/* General Background */
+body {
+  background: linear-gradient(135deg, #e0eafc, #cfdef3);
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+/* App Container */
+.app-container {
+  display: flex;
+  justify-content: center;
+  /* Center the main content horizontally */
+  margin-left: 240px;
+  /* Offset for sidebar width */
+}
+
+/* Sidebar Styling */
+.sidebar {
+  width: 220px;
+  background-color: #333;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  height: 100vh;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.sidebar h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: #ffffff;
+}
+
+.sidebar-button {
+  width: 100%;
+  padding: 12px;
+  margin: 10px 0;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s;
+  text-align: center;
+}
+
+.sidebar-button.dfs {
+  background: linear-gradient(135deg, #34d058, #28a745);
+}
+
+.sidebar-button.bfs {
+  background: linear-gradient(135deg, #5b9bff, #007bff);
+}
+
+.sidebar-button:hover {
+  transform: translateY(-3px);
+  opacity: 0.9;
+}
+
+.sidebar-button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+/* Main Content Styling */
+.algorithm-comparison-container {
+  margin-top: 100px;
+  width: 80%;
+  /* Ensure the content doesn't take full width */
+  max-width: 800px;
+  /* Set a max width for center alignment */
+  padding: 20px;
+  border-radius: 15px;
+}
+
+.title {
+  color: #333;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 25px;
+}
+
+/* Card Styling */
+.card {
+  background: #fff;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+/* Traversal Steps Styling */
+.traversal-steps h2 {
+  color: #555;
+  font-size: 1.5rem;
+  margin-bottom: 15px;
+}
+
+.traversal-steps ul {
+  list-style: none;
+  padding: 0;
+}
+
+.traversal-steps li {
+  background: #f7f7f7;
+  margin-bottom: 8px;
+  padding: 10px;
+  border-radius: 5px;
+  font-size: 1rem;
+  color: #333;
+  transition: background 0.3s ease;
+}
+
+.traversal-steps li:hover {
+  background: #e0eafc;
+}
+
+/* Chart Container Styling */
+.chart-container {
+  text-align: center;
+}
+
+canvas {
+  width: 100%;
+  max-width: 700px;
+  margin: 0 auto;
+}

src/app/components/compare/compare.component.html

@@ -0,0 +1,26 @@
+<app-navbar></app-navbar>
+
+<div class="app-container">
+    <!-- Sidebar -->
+    <div class="sidebar">
+        <h2>Algorithms</h2>
+        <button class="sidebar-button dfs" (click)="runDFS()" [disabled]="isRunningDFS">Run DFS</button>
+        <button class="sidebar-button bfs" (click)="runBFS()" [disabled]="isRunningBFS">Run BFS</button>
+    </div>
+
+    <!-- Main Content -->
+    <div class="algorithm-comparison-container">
+        <h1 class="title">Graph Traversal Algorithm Comparison: DFS vs BFS</h1>
+
+        <div class="card traversal-steps">
+            <h2>Traversal Steps:</h2>
+            <ul>
+                <li *ngFor="let step of traversalSteps">{{ step }}</li>
+            </ul>
+        </div>
+
+        <div class="card chart-container">
+            <canvas id="efficiencyChart"></canvas>
+        </div>
+    </div>
+</div>

src/app/components/compare/compare.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlgocompareComponent } from './compare.component';
+
+describe('AlgocompareComponent', () => {
+  let component: AlgocompareComponent;
+  let fixture: ComponentFixture<AlgocompareComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AlgocompareComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AlgocompareComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/compare/compare.component.ts

@@ -0,0 +1,123 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavbarComponent } from '../navbar/navbar.component';
+import { Chart } from 'chart.js/auto';
+
+@Component({
+  selector: 'app-compare',
+  standalone: true,
+  imports: [CommonModule, NavbarComponent],
+  templateUrl: './compare.component.html',
+  styleUrls: ['./compare.component.css'],
+})
+export class ComparisonComponent implements OnInit {
+  efficiencyChart: any;
+  animateGraph = false;
+  inputGraphData: any = [];
+  traversalSteps: string[] = [];
+  isRunningDFS = false;
+  isRunningBFS = false;
+  visualizationInterval: any;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.renderEfficiencyChart();
+  }
+
+  toggleAnimation(): void {
+    this.animateGraph = !this.animateGraph;
+  }
+
+  renderEfficiencyChart(): void {
+    const efficiencyData = {
+      labels: ['Time Complexity', 'Space Complexity', 'Memory Usage'],
+      datasets: [
+        {
+          label: 'DFS',
+          data: [100, 80, 70],
+          backgroundColor: '#ff6b6b',
+        },
+        {
+          label: 'BFS',
+          data: [100, 120, 130],
+          backgroundColor: '#4ecdc4',
+        },
+      ],
+    };
+
+    this.efficiencyChart = new Chart('efficiencyChart', {
+      type: 'bar',
+      data: efficiencyData,
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            display: true,
+          },
+          tooltip: {
+            enabled: true,
+          },
+        },
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: 'Metrics',
+            },
+          },
+          y: {
+            title: {
+              display: true,
+              text: 'Values',
+            },
+          },
+        },
+      },
+    });
+  }
+
+  runDFS(): void {
+    this.traversalSteps = [];
+    this.isRunningDFS = true;
+    const steps = [
+      'Starting DFS traversal...',
+      'Visited Node A',
+      'Visited Node B',
+      'Visited Node C',
+      'DFS Traversal Complete',
+    ];
+    this.visualizeTraversal(steps, 'DFS');
+  }
+
+  runBFS(): void {
+    this.traversalSteps = [];
+    this.isRunningBFS = true;
+    const steps = [
+      'Starting BFS traversal...',
+      'Visited Node A',
+      'Visited Node D',
+      'Visited Node E',
+      'BFS Traversal Complete',
+    ];
+    this.visualizeTraversal(steps, 'BFS');
+  }
+
+  visualizeTraversal(steps: string[], algorithm: string): void {
+    let stepIndex = 0;
+    this.traversalSteps.push(steps[stepIndex]);
+    this.visualizationInterval = setInterval(() => {
+      stepIndex++;
+      if (stepIndex < steps.length) {
+        this.traversalSteps.push(steps[stepIndex]);
+      } else {
+        clearInterval(this.visualizationInterval);
+        if (algorithm === 'DFS') {
+          this.isRunningDFS = false;
+        } else if (algorithm === 'BFS') {
+          this.isRunningBFS = false;
+        }
+      }
+    }, 1000);
+  }
+}

src/app/components/navbar/navbar.component.html

@@ -29,9 +29,9 @@
                 <a href="/resources" class="dropdown-item btn btn-dark me-3">Resources</a>
                 <a href="/contactUs" class="dropdown-item btn btn-dark me-3">ContactUs</a>
                 <a href="/contributors" class="dropdown-item btn btn-dark me-3">Contributors</a>
-                <a href="/editor" class="dropdown-item btn btn-dark me-3">Text Editor</a>
+                <a href="/editor" class="dropdown-item btn btn-dark me-3">Text Editor</a>  <a href="/compare" class="dropdown-item btn btn-dark me-3">Compare</a>
                 <a href="/review" class="dropdown-item btn btn-dark me-3">Reviews</a>
-                <a href="/algo-compare" class="dropdown-item btn btn-dark me-3">Algo Compare</a>
+                <a href="/compare" class="dropdown-item btn btn-dark me-3">Algo Compare</a>
                 <a href="/" (click)="onLogout()" class="dropdown-item">Logout</a>
             </div>
         </div>