Skip to content

Commit

Permalink
Merge pull request #493 from mehul-m-prajapati/predefine_graphs
Browse files Browse the repository at this point in the history 
Added Predefined graph selection for bfs/dfs
  • Loading branch information
@sakeel-103
sakeel-103 authored Oct 31, 2024
2 parents 52bacf6 + 0779eb7 commit b2ffb7d
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 50 deletions.
10 changes: 10 additions & 0 deletions src/app/components/bfs-page/bfs-page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
23 changes: 23 additions & 0 deletions src/app/components/bfs-page/bfs-page.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
111 changes: 61 additions & 50 deletions src/app/components/dfs-page/dfs-page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,70 +5,81 @@
<div id="sidebar" class="sidebar">
<h2>DFS Steps</h2>
<div id="algorithm-explanation">
<p [innerHTML]="dfs_explaination"></p>
<p [innerHTML]="dfs_explaination"></p>
</div>
</div>

<!-- Main Content -->
<div style="flex: 1; padding: 20px;">
<!-- Custom Graph Input -->
<div style="display: flex; justify-content: center;">
<div class="custom-input">
<label for="nodes">Nodes (comma-separated):</label>
<input [(ngModel)]="customNodeInput" id="nodes" type="text" placeholder="A,B,C,D,E,F,G" />
<br>

<label for="edges">Edges (format: 0-1;1-2):</label>
<input [(ngModel)]="customEdgeInput" id="edges" type="text" placeholder="0-1;0-2;1-3" />
<br>

<button (click)="handleCustomGraphInput()">Create Custom Graph</button>
<button class="clear-button" (click)="clearForm()">Clear Form</button>
<!-- 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>
</div>

<h2>Depth First Search</h2>
<!-- Custom Graph Input -->
<div style="display: flex; justify-content: center;">
<div class="custom-input">
<label for="nodes">Nodes (comma-separated):</label>
<input [(ngModel)]="customNodeInput" id="nodes" type="text" placeholder="A,B,C,D,E,F,G" />
<br>

<div class="scrollable-container" style="height: 200px;">
<canvas #dfsCanvas id="dfs-canvas" width="600" height="200"></canvas>
</div>
<button style="margin: 10px;" (click)="downloadCanvas()">Download</button>
<label for="edges">Edges (format: 0-1;1-2):</label>
<input [(ngModel)]="customEdgeInput" id="edges" type="text" placeholder="0-1;0-2;1-3" />
<br>

<div>
<button style="margin: 10px;" (click)="startDFSTraversal()">Start DFS</button>
<button style="margin: 10px;" (click)="resetDFS()">Reset DFS</button>
<button style="margin: 10px;" (click)="toggleDFSCard()">Algorithm Description</button>
</div>
<button (click)="handleCustomGraphInput()">Create Custom Graph</button>
<button class="clear-button" (click)="clearForm()">Clear Form</button>
</div>
</div>

<!-- DFS Description Card (Initially Hidden) -->
<div id="dfs-card" class="dfs-card hidden">
<h3>DFS Algorithm</h3>
<p>
Depth First Search (DFS) is an algorithm for traversing or searching tree or graph data structures. The algorithm
starts at the root node (selecting some arbitrary node as the root in the case of a graph) and explores as far as
possible along each branch before backtracking.
</p>
</div>
<h2>Depth First Search</h2>

<div style="display: flex;">
<div id="dfs-stack" class="box">
<div id="stack-label">Stack:</div>
<div id="stack-content"></div>
<div class="scrollable-container" style="height: 200px;">
<canvas #dfsCanvas id="dfs-canvas" width="600" height="200"></canvas>
</div>
<div id="dfs-processing" class="box" style="margin-left: 10px;">
<div id="processing-label">Processing:</div>
<div id="processing-content"></div>
<button style="margin: 10px;" (click)="downloadCanvas()">Download</button>

<div>
<button style="margin: 10px;" (click)="startDFSTraversal()">Start DFS</button>
<button style="margin: 10px;" (click)="resetDFS()">Reset DFS</button>
<button style="margin: 10px;" (click)="toggleDFSCard()">Algorithm Description</button>
</div>
<div id="dfs-processed" class="box" style="margin-left: 10px;">
<div id="processed-label">Processed:</div>
<div id="processed-content"></div>

<!-- DFS Description Card (Initially Hidden) -->
<div id="dfs-card" class="dfs-card hidden">
<h3>DFS Algorithm</h3>
<p>
Depth First Search (DFS) is an algorithm for traversing or searching tree or graph data structures. The algorithm
starts at the root node (selecting some arbitrary node as the root in the case of a graph) and explores as far as
possible along each branch before backtracking.
</p>
</div>
</div>

<!-- Path Visualization -->
<div id="dfs-path" class="box" style="margin-top: 10px;">
<div id="path-label">Path Taken:</div>
<div id="path-content"></div>
<div style="display: flex;">
<div id="dfs-stack" class="box">
<div id="stack-label">Stack:</div>
<div id="stack-content"></div>
</div>
<div id="dfs-processing" class="box" style="margin-left: 10px;">
<div id="processing-label">Processing:</div>
<div id="processing-content"></div>
</div>
<div id="dfs-processed" class="box" style="margin-left: 10px;">
<div id="processed-label">Processed:</div>
<div id="processed-content"></div>
</div>
</div>

<!-- Path Visualization -->
<div id="dfs-path" class="box" style="margin-top: 10px;">
<div id="path-label">Path Taken:</div>
<div id="path-content"></div>
</div>
</div>
</div>
</div>
23 changes: 23 additions & 0 deletions src/app/components/dfs-page/dfs-page.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,29 @@ export class DfsPageComponent implements AfterViewInit, OnInit {
this.drawGraph(dfsCtx); // Then draw
}

public predefinedGraphs: any = {
graph1: {
nodes: 'A,B,C,D',
edges: '0-1;0-2;1-3',
},
graph2: {
nodes: 'E,F,G,H',
edges: '0-1;1-2;2-3',
},
graph3: {
nodes: 'I,J,K,L,M',
edges: '0-1;1-2;2-3;3-4;0-2;0-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;
}
Expand Down

0 comments on commit b2ffb7d

Please sign in to comment.