Skip to content

feat: Add Interactive Pathfinding Visualizer to Utilities Lab#1280

Open
KunwarSidhu47 wants to merge 4 commits into
steam-bell-92:mainfrom
KunwarSidhu47:main
Open

feat: Add Interactive Pathfinding Visualizer to Utilities Lab#1280
KunwarSidhu47 wants to merge 4 commits into
steam-bell-92:mainfrom
KunwarSidhu47:main

Conversation

@KunwarSidhu47

@KunwarSidhu47 KunwarSidhu47 commented Jun 19, 2026

Copy link
Copy Markdown

Description

This PR introduces the Pathfinding Algorithm Visualizer to the Utilities Lab. It allows users to visually understand how Dijkstra's Algorithm and A* Search find the shortest path between a start and target node on a 2D grid. The implementation includes interactive mechanics such as drawing walls and real-time visualization controls.

Key Features & Additions:

  • Interactive Grid (Web): Users can click and drag to draw impassable walls, and select between algorithms (Dijkstra/A*).
  • Real-time Metrics: Added UI components to display "Nodes Visited" and "Path Length" dynamically as the algorithm explores.
  • Algorithm Implementations: Modularized implementations of Dijkstra and A-Star Search with full animation and path-reconstruction capabilities.
  • Python CLI Counterpart: Added an equivalent Python terminal script (utilities/Pathfinding-Visualizer.py) that animates the grid and algorithms directly in the CLI, matching the repository's convention.
  • Custom Assets: Auto-generated a vibrant custom banner for the project card via generate_banners.py using Pillow.

Fixes included

  • Grid Rendering Fix: Implemented responsive CSS rules (explicit min-width, min-height, box-sizing: border-box, and flex-shrink: 0) and explicit <tbody> generation to ensure the HTML table properly fills out even when cells are empty.
  • Project Registration Fix: Resolved a bug in projects.js where the initializeProject function was accidentally defined twice, leading to the visualizer logic being silently overridden and the modal failing to initialize.

Steps to Test

  1. Pull the branch and start a local HTTP server inside the web-app directory (e.g., python3 -m http.server 8080).
  2. Navigate to the local server, open the Utilities tab, and launch the Pathfinding Visualizer.
  3. Draw walls, select an algorithm/speed, and click "Visualize" to ensure the grid animates the node discovery and shortest-path trace.
  4. Execute python utilities/Pathfinding-Visualizer/Pathfinding-Visualizer.py to confirm the terminal CLI version runs flawlessly.

Live Demo Video and Screenshots

pathfinding.algorithm.visualizer.mov
Screenshot 2026-06-20 at 1 21 09 AM Screenshot 2026-06-20 at 1 20 02 AM

Closes #1271

- Created web-app/js/projects/pathfinding-visualizer.js with Dijkstra and A* logic
- Created Python CLI equivalent Pathfinding-Visualizer.py
- Generated and added custom banner graphic for Pathfinding Visualizer
- Registered project in web-app/projects_registry.json and projects_registry.json
- Updated web-app/js/projects.js and web-app/index.html
- Resolved CSS table collapsing issues
- Fixed JS duplicate initialization function bugs
@vercel

vercel Bot commented Jun 19, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the Anuj's projects Team on Vercel.

A member of the Team first needs to authorize it.

@KunwarSidhu47

Copy link
Copy Markdown
Author

Hi @steam-bell-92 ,

I've added the Pathfinding Algorithm Visualizer to the Utilities Lab with interactive visualization and node controls. The feature has been tested and is working as expected. Live Demo Video and Screenshots have been attached for your ease.

Kindly review the PR. If everything looks good, please consider adding the GSSoC labels as well. Thank you!

Kunwartejpal Sidhu added 3 commits June 20, 2026 01:37
- Ensures accessibility and resolves Playwright E2E test failure.
- Caches the activeElement when opening projectModal and returns focus upon closure via Escape key or click.
- Fixes issue where  was null when the 50ms timeout fired, preventing focus restoration.
- Removed invalid copy-pasted  code from  that could crash the handler before restoring focus.
…ocus restoration

- Removed an inline MODAL FIX script in index.html that was prematurely clearing the modal body on Escape, destroying the focused element and breaking the focus restoration flow in js/main.js.
- Removed a duplicate, broken openProject event listener from the bottom of js/main.js that was causing ReferenceErrors.
- Updated Playwright test locator to specifically target a button inside #projectsSection so that it isn't confused by dynamically injected 'Recently Viewed' cards.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🎮 [Proposal]: Interactive Pathfinding Algorithm Visualizer (Dijkstra & A*)

1 participant