Dijkstra Visualizer

Interactive implementation of shortest path search algorithms using React Flow for dynamic graph manipulation.

Tech Stack

• Next.js 14
• TypeScript
• React Flow
• Tailwind CSS
• Shadcn UI

1. Core Concepts

Dijkstra's algorithm is a greedy algorithm used to solve single-source shortest path problems on graphs with non-negative edge weights.

In this visualizer, the main challenge wasn't just running the algorithm, but visualizing every step (state snapshotting) so users can see how the algorithm "thinks" node by node.

2. Technical Implementation

A. Graph Management with React Flow

I use the reactflow library to handle node and edge rendering. State is managed using useNodesState and useEdgesState hooks.

const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

// Dynamically adding a new node
const addNode = useCallback(() => {
  const newNode = {
    id: Date.now().toString(),
    position: { x: Math.random() * 500, y: Math.random() * 400 },
    data: { label: `Node ${nodes.length + 1}` },
  };
  setNodes((nds) => [...nds, newNode]);
}, [nodes]);

B. Dijkstra Algorithm with Snapshotting

Instead of just returning the final result, the dijkstra function is modified to record a history of steps. Every time the algorithm visits a node or updates a distance, that state is stored in a steps array.

• Initialization: Set initial distances to Infinity, source distance to 0.
• Priority Queue: Select the unvisited node with the shortest distance.
• Relaxation: If a shorter path to a neighbor is found, update the distance and store the "parent" node for path reconstruction.
• Snapshot: Save the state (current node, visited set, distances) to the steps array.

C. Playback Control

The "Step-by-step" feature is implemented with a currentStepIndex state. A useEffect listens for changes to this index and updates node colors in React Flow according to the state at that step (e.g., orange for the node being processed, blue for visited).

3. Challenges & Solutions

Challenge: Synchronization between the algorithm's logical state and React Flow's visual state.

Solution: Separating graph data (logical) from visual data (UI). When the algorithm runs, it doesn't mutate the UI state directly but generates "recipes" of changes which are then applied by the React component via setInterval for animation.