# wookjong/pbl1 architecture

> Architecture diagram of the GitHub repository wookjong/pbl1, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/wookjong/pbl1
- Repository: https://github.com/wookjong/pbl1

## Overview

This is a browser-based Dijkstra/A* teaching visualizer. Users choose a graph or editable grid, select an algorithm and queue options, then step through operations or compare runs; the app renders paths, queue activity, source lines, and performance measurements. The map preserves the documented comparison, grid, and analysis branches. Some demo internals were not sampled, so their links to algorithms and views are omitted unless documented; the graph focuses on evidenced orchestration and data flow.

Main entry points: [`src/main.ts`](https://github.com/wookjong/pbl1/blob/main/src/main.ts) (App Shell), [`src/algo/search.ts`](https://github.com/wookjong/pbl1/blob/main/src/algo/search.ts) (Best-first Search), [`src/algo/run.ts`](https://github.com/wookjong/pbl1/blob/main/src/algo/run.ts) (Search Run State), [`src/algo/graph.ts`](https://github.com/wookjong/pbl1/blob/main/src/algo/graph.ts) (Graph and Events)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_main["App Shell<br/>[main.ts]"]
  node_i18n["Localization<br/>[i18n.ts]"]
  node_inside["Step-through Demo<br/>[insideDemo.ts]"]
  node_compare["Graph Comparison<br/>[graphDemo.ts]"]
  node_grid_demo["Interactive Grid<br/>[gridDemo.ts]"]
  node_analysis["Performance Analysis<br/>[analysisDemo.ts]"]
end

subgraph group_domains["Graph Inputs"]
  node_geo["Graph Generator<br/>[generate.ts]"]
  node_grid_data["Grid Utilities<br/>[grids.ts]"]
end

subgraph group_engine["Search Engine"]
  node_graph_types["Graph and Events<br/>[graph.ts]"]
  node_search["Best-first Search<br/>[search.ts]"]
  node_dijkstra["Dijkstra Adapter<br/>[dijkstra.ts]"]
  node_astar["A* Adapter<br/>[astar.ts]"]
  node_heap["Priority Queues<br/>[heap.ts]"]
  node_run["Search Run State<br/>[run.ts]"]
end

subgraph group_presentation["Visualization"]
  node_player["Playback Controls<br/>[player.ts]"]
  node_graph_view["Graph Renderer<br/>[graphView.ts]"]
  node_heap_view["Heap Renderer<br/>[heapView.ts]"]
  node_code_view["Source Highlighting<br/>[codeView.ts]"]
end

node_user(("Learner"))

node_user -->|"selects views"| node_main
node_main -->|"mounts"| node_inside
node_main -->|"mounts"| node_compare
node_main -->|"mounts"| node_grid_demo
node_main -->|"mounts"| node_analysis
node_main -->|"generates graphs"| node_geo
node_main -->|"reads labels"| node_i18n
node_main -->|"opens analysis cases"| node_grid_demo
node_geo -->|"builds graph data"| node_graph_types
node_grid_data -->|"uses seeded random"| node_geo
node_grid_data -->|"converts grid"| node_graph_types
node_dijkstra -->|"configures h zero"| node_search
node_astar -->|"supplies heuristic"| node_search
node_search -->|"operates queue"| node_heap
node_search -->|"reads graph; emits events"| node_graph_types
node_run -->|"accumulates queue stats"| node_heap
node_run -->|"consumes search events"| node_graph_types
node_graph_view -->|"renders run state"| node_run
node_heap_view -->|"renders queue entries"| node_heap
node_heap_view -->|"uses number formatter"| node_graph_view
node_inside -->|"shows source lines"| node_code_view
node_inside -.->|"offers playback controls"| node_player
node_compare -.->|"compares settled steps"| node_run
node_analysis -->|"opens scenarios in"| node_grid_demo

click node_main "https://github.com/wookjong/pbl1/blob/main/src/main.ts"
click node_i18n "https://github.com/wookjong/pbl1/blob/main/src/i18n.ts"
click node_inside "https://github.com/wookjong/pbl1/blob/main/src/demos/insideDemo.ts"
click node_compare "https://github.com/wookjong/pbl1/blob/main/src/demos/graphDemo.ts"
click node_grid_demo "https://github.com/wookjong/pbl1/blob/main/src/demos/gridDemo.ts"
click node_analysis "https://github.com/wookjong/pbl1/blob/main/src/demos/analysisDemo.ts"
click node_geo "https://github.com/wookjong/pbl1/blob/main/src/graphs/generate.ts"
click node_grid_data "https://github.com/wookjong/pbl1/blob/main/src/graphs/grids.ts"
click node_graph_types "https://github.com/wookjong/pbl1/blob/main/src/algo/graph.ts"
click node_search "https://github.com/wookjong/pbl1/blob/main/src/algo/search.ts"
click node_dijkstra "https://github.com/wookjong/pbl1/blob/main/src/algo/dijkstra.ts"
click node_astar "https://github.com/wookjong/pbl1/blob/main/src/algo/astar.ts"
click node_heap "https://github.com/wookjong/pbl1/blob/main/src/algo/heap.ts"
click node_run "https://github.com/wookjong/pbl1/blob/main/src/algo/run.ts"
click node_player "https://github.com/wookjong/pbl1/blob/main/src/ui/player.ts"
click node_graph_view "https://github.com/wookjong/pbl1/blob/main/src/ui/graphView.ts"
click node_heap_view "https://github.com/wookjong/pbl1/blob/main/src/ui/heapView.ts"
click node_code_view "https://github.com/wookjong/pbl1/blob/main/src/ui/codeView.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_i18n,node_inside,node_compare,node_grid_demo,node_analysis toneBlue
class node_geo,node_grid_data toneAmber
class node_graph_types,node_search,node_dijkstra,node_astar,node_heap,node_run toneMint
class node_player,node_graph_view,node_heap_view,node_code_view toneRose
class node_user toneIndigo
```

## Components

### Application

- [App Shell](https://github.com/wookjong/pbl1/blob/main/src/main.ts): `src/main.ts`
- [Localization](https://github.com/wookjong/pbl1/blob/main/src/i18n.ts): `src/i18n.ts`
- [Step-through Demo](https://github.com/wookjong/pbl1/blob/main/src/demos/insideDemo.ts): `src/demos/insideDemo.ts`
- [Graph Comparison](https://github.com/wookjong/pbl1/blob/main/src/demos/graphDemo.ts): `src/demos/graphDemo.ts`
- [Interactive Grid](https://github.com/wookjong/pbl1/blob/main/src/demos/gridDemo.ts): `src/demos/gridDemo.ts`
- [Performance Analysis](https://github.com/wookjong/pbl1/blob/main/src/demos/analysisDemo.ts): `src/demos/analysisDemo.ts`

### Graph Inputs

- [Graph Generator](https://github.com/wookjong/pbl1/blob/main/src/graphs/generate.ts): `src/graphs/generate.ts`
- [Grid Utilities](https://github.com/wookjong/pbl1/blob/main/src/graphs/grids.ts): `src/graphs/grids.ts`

### Search Engine

- [Graph and Events](https://github.com/wookjong/pbl1/blob/main/src/algo/graph.ts): `src/algo/graph.ts`
- [Best-first Search](https://github.com/wookjong/pbl1/blob/main/src/algo/search.ts): `src/algo/search.ts`
- [Dijkstra Adapter](https://github.com/wookjong/pbl1/blob/main/src/algo/dijkstra.ts): `src/algo/dijkstra.ts`
- [A* Adapter](https://github.com/wookjong/pbl1/blob/main/src/algo/astar.ts): `src/algo/astar.ts`
- [Priority Queues](https://github.com/wookjong/pbl1/blob/main/src/algo/heap.ts): `src/algo/heap.ts`
- [Search Run State](https://github.com/wookjong/pbl1/blob/main/src/algo/run.ts): `src/algo/run.ts`

### Visualization

- [Playback Controls](https://github.com/wookjong/pbl1/blob/main/src/ui/player.ts): `src/ui/player.ts`
- [Graph Renderer](https://github.com/wookjong/pbl1/blob/main/src/ui/graphView.ts): `src/ui/graphView.ts`
- [Heap Renderer](https://github.com/wookjong/pbl1/blob/main/src/ui/heapView.ts): `src/ui/heapView.ts`
- [Source Highlighting](https://github.com/wookjong/pbl1/blob/main/src/ui/codeView.ts): `src/ui/codeView.ts`

### Other components

- **Learner**

## Connections

- Learner → App Shell: selects views (evidence: `README.md`)
- App Shell → Step-through Demo: mounts (evidence: `src/main.ts`)
- App Shell → Graph Comparison: mounts (evidence: `src/main.ts`)
- App Shell → Interactive Grid: mounts (evidence: `src/main.ts`)
- App Shell → Performance Analysis: mounts (evidence: `src/main.ts`)
- App Shell → Graph Generator: generates graphs (evidence: `src/main.ts`)
- App Shell → Localization: reads labels (evidence: `src/main.ts`)
- App Shell → Interactive Grid: opens analysis cases (evidence: `src/main.ts`)
- Graph Generator → Graph and Events: builds graph data (evidence: `src/graphs/generate.ts`)
- Grid Utilities → Graph Generator: uses seeded random (evidence: `src/graphs/grids.ts`)
- Grid Utilities → Graph and Events: converts grid (evidence: `src/graphs/grids.ts`)
- Dijkstra Adapter → Best-first Search: configures h zero (evidence: `src/algo/dijkstra.ts`)
- A* Adapter → Best-first Search: supplies heuristic (evidence: `src/algo/astar.ts`)
- Best-first Search → Priority Queues: operates queue (evidence: `src/algo/search.ts`)
- Best-first Search → Graph and Events: reads graph; emits events (evidence: `src/algo/search.ts`)
- Search Run State → Priority Queues: accumulates queue stats (evidence: `src/algo/run.ts`)
- Search Run State → Graph and Events: consumes search events (evidence: `src/algo/run.ts`)
- Graph Renderer → Search Run State: renders run state (evidence: `src/ui/graphView.ts`)
- Heap Renderer → Priority Queues: renders queue entries (evidence: `src/ui/heapView.ts`)
- Heap Renderer → Graph Renderer: uses number formatter (evidence: `src/ui/heapView.ts`)
- Step-through Demo → Source Highlighting: shows source lines (evidence: `README.md`)
- Step-through Demo → Playback Controls: offers playback controls
- Graph Comparison → Search Run State: compares settled steps
- Performance Analysis → Interactive Grid: opens scenarios in (evidence: `src/main.ts`)