Shortest path in graph algorithm plan

Here's the plan, broken into independent steps for subagents:

Plan: "Prompt Training: Shortest Path" Blog Post

Structure mirrors the Bubble Sort post exactly: frontmatter → intro → How It Works → Interactive Visualization → Implementation → Time Complexity → Why It Matters.

Step 1: Create the Visualization Component

File: src/components/ShortestPathVisualization.astro
Dependencies: None

Create an Astro component following the exact conventions of BubbleSortVisualization.astro:

• Use sp- prefix for all IDs/classes (like bs- in bubble sort)
• Canvas rendering a random graph: ~12–15 nodes as circles, edges as lines with weight labels
• Dijkstra's algorithm animated step-by-step: highlight current node (yellow), visited nodes (green), unvisited (cyan), current shortest-path edges, and final path (bright green with glow)
• Controls panel matching bubble sort's style:
  • Speed slider (1–20, default 5)
  • Node Count slider (8–20, default 12)
  • Play/Pause + Reset buttons
  • Hint text
• Same dark theme: background #0a0a0f/#12121a, accent #00f0ff, sorted/found #00ff88, active #ffcc00, swap/relaxation #ff6060
• Same styling patterns: radial gradient background, glow effects via shadowBlur, rounded containers, responsive range inputs with cyan thumbs
• Generate a connected random graph on reset; pick random source/target nodes; animate Dijkstra exploring then highlight final shortest path with celebration effect
• Scoped <style> block matching the same CSS structure/variables

Step 2: Create the MDX Blog Post

File: src/content/blog/shortest-path.mdx
Dependencies: Step 1 (imports the component)

Create the MDX file with:

• Frontmatter: title: "Prompt Training: Shortest Path", description about visualizing Dijkstra's algorithm, pubDate: "2026-02-22", aiGenerated: true, aiConversationUrl set to the current thread URL (https://ampcode.com/threads/T-019c8635-7f4f-705f-a8f8-25ad2b4c3834)
• Import ShortestPathVisualization from ../../components/ShortestPathVisualization.astro
• Intro paragraph: Dijkstra's algorithm as the classic shortest-path algorithm, analogy (GPS navigation, network routing)
• "How It Works": Numbered steps (initialize distances to ∞, set source to 0, pick unvisited node with smallest distance, relax neighbors, repeat until target reached)
• "Interactive Visualization": <ShortestPathVisualization />
• "Implementation": Clean Python implementation using a priority queue (heapq)
• "Time Complexity": Best/worst/average with min-heap: O((V + E) log V), space O(V + E), comparison to Bellman-Ford and A*
• "Why It Matters": Teaches greedy algorithms, priority queues, graph representation; real-world ubiquity (maps, networking, game AI)

Step 3: Build and Deploy

Dependencies: Steps 1 & 2

Run bun run build to verify no errors, then sudo ./deploy.sh to deploy.

Steps 1 and 2 can be run as parallel subagents (Step 2 just needs to know the component name). Step 3 runs after both complete. Want me to execute this plan?

Great question. The bubble sort visualization is essentially a 1D bar chart with color changes. A graph algorithm is inherently richer and lets us do more. Here are concrete improvements:

1. Click-to-interact: Source & Target selection

Bubble sort has zero graph interactivity — just sliders and play/pause. For shortest path, users should be able to click nodes to set source and target. This transforms it from a passive animation into an exploration tool.

2. Live distance table alongside the canvas

Bubble sort only shows the visual. For Dijkstra, we can add a side panel or below-canvas table showing the priority queue state: each node's current distance, predecessor, and visited status — updated in real time. This makes the abstract data structure visible, not just the graph.

3. Edge weight labels on the graph

The graph edges should display their weights directly on the canvas. As relaxation happens, we can flash the weight being compared. Bubble sort doesn't have this kind of annotation — it's just bars.

4. Node distance labels

Each node should display its current shortest-known distance (starting at ∞), updating live as the algorithm relaxes edges. This is the "aha moment" for understanding Dijkstra.

5. Algorithm selector (Dijkstra vs BFS)

Add a dropdown/toggle to switch between Dijkstra (weighted) and BFS (unweighted) on the same graph. Bubble sort only shows one algorithm — this lets users compare approaches and see why weights matter.

6. Graph topology selector

Instead of just a "size" slider, offer graph types: Random, Grid, Circular. Different topologies make the algorithm's behavior more intuitive (grid = GPS-like, random = network routing).

7. Final path trace animation

After Dijkstra completes, animate the shortest path as a glowing trace from source to target, rather than just coloring everything green. More dramatic and educational than bubble sort's celebration flash.

Updated Plan

Steps 1 and 2 can run in parallel. Want me to execute?

Done! The shortest path post is live at https://robertsoare.xyz/blog/shortest-path/. It includes:

• Interactive visualization with click-to-select source/target nodes, live distance labels, edge weights, and path highlighting
• Graph type selector (Random / Grid / Circular) and algorithm toggle (Dijkstra / BFS)
• Live distance table below the canvas showing node distances, predecessors, and visited status
• Full blog post with How It Works, Python implementation with heapq, Time Complexity, and Why It Matters sections

At speed=1, this steps every 15 frames (~4 steps/sec at 60fps). I'll increase the base divisor so speed=1 is much slower:

Deployed. At 1x speed it now steps once per second (every 60 frames) instead of ~4 times/sec. At 20x it's back to every 3 frames, so the full range still feels good.