# putra10/transitlabs architecture

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

- Interactive diagram: https://gitdiagram.com/putra10/transitlabs
- Repository: https://github.com/putra10/transitlabs

## Overview

TransitLab is a browser-based route-optimisation lab for journeys from Universitas Indonesia to Blok M. Visitors adjust the fare/time weighting, transport modes, station closures, and must-pass stops; the lab recomputes and ranks routes, then shows fares, times, criticality, and animated route playback on a schematic or optional map. The engine handles graph search and route scoring; line definitions supply transit topology and display geometry. The README documents additional method and data pages. Some UI wiring is only partially sampled, so uncertain connections are omitted.

Main entry points: [`public/app.js`](https://github.com/putra10/transitlabs/blob/main/public/app.js) (Route controls), [`public/index.html`](https://github.com/putra10/transitlabs/blob/main/public/index.html) (Route lab), [`public/engine.mjs`](https://github.com/putra10/transitlabs/blob/main/public/engine.mjs) (Route engine), [`public/lines.mjs`](https://github.com/putra10/transitlabs/blob/main/public/lines.mjs) (Lines and stations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Visitor experience"]
  node_lab["Route lab<br/>[index.html]"]
  node_controls["Route controls<br/>[app.js]"]
  node_schematic["Schematic view<br/>[app.js]"]
  node_mapview["Map view<br/>[app.js]"]
  node_language["Language toggle<br/>[site.mjs]"]
end

subgraph group_routing["Route engine"]
  node_engine["Route engine<br/>[engine.mjs]"]
  node_optg["Transit graph data<br/>[optg.json]"]
end

subgraph group_network["Transit network"]
  node_lineinfo["Lines and stations<br/>[lines.mjs]"]
  node_geometry["Map geometry<br/>[geometry.json]"]
end

subgraph group_reference["Reference pages"]
  node_method["Method page<br/>[method.html]"]
  node_data["Data page<br/>[data.html]"]
end

node_visitor(("Visitor"))
node_leaflet["Leaflet"]
node_osm["OSM tiles"]
node_storage[("Browser storage")]

node_visitor -->|"opens"| node_lab
node_lab -->|"hosts"| node_controls
node_controls -->|"requests routes"| node_engine
node_optg -->|"provides graph"| node_engine
node_engine -->|"returns rankings"| node_controls
node_controls -->|"updates display"| node_schematic
node_controls -->|"updates display"| node_mapview
node_lineinfo -->|"defines lines"| node_schematic
node_lineinfo -->|"defines stations"| node_mapview
node_geometry -->|"provides paths"| node_mapview
node_mapview -.->|"renders map"| node_leaflet
node_leaflet -.->|"loads tiles"| node_osm
node_lab -->|"initializes language"| node_language
node_language -->|"persists choice"| node_storage
node_visitor -->|"reads"| node_method
node_visitor -->|"reads"| node_data

click node_lab "https://github.com/putra10/transitlabs/blob/main/public/index.html"
click node_controls "https://github.com/putra10/transitlabs/blob/main/public/app.js"
click node_schematic "https://github.com/putra10/transitlabs/blob/main/public/app.js"
click node_mapview "https://github.com/putra10/transitlabs/blob/main/public/app.js"
click node_language "https://github.com/putra10/transitlabs/blob/main/public/site.mjs"
click node_engine "https://github.com/putra10/transitlabs/blob/main/public/engine.mjs"
click node_optg "https://github.com/putra10/transitlabs/blob/main/public/data/optg.json"
click node_lineinfo "https://github.com/putra10/transitlabs/blob/main/public/lines.mjs"
click node_geometry "https://github.com/putra10/transitlabs/blob/main/public/data/geometry.json"
click node_method "https://github.com/putra10/transitlabs/blob/main/public/method.html"
click node_data "https://github.com/putra10/transitlabs/blob/main/public/data.html"

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_lab,node_controls,node_schematic,node_mapview,node_language toneBlue
class node_engine,node_optg,node_storage toneAmber
class node_lineinfo,node_geometry toneMint
class node_method,node_data toneRose
class node_visitor,node_leaflet,node_osm toneIndigo
```

## Components

### Visitor experience

- [Route lab](https://github.com/putra10/transitlabs/blob/main/public/index.html): `public/index.html`
- [Route controls](https://github.com/putra10/transitlabs/blob/main/public/app.js): `public/app.js`
- [Schematic view](https://github.com/putra10/transitlabs/blob/main/public/app.js): `public/app.js`
- [Map view](https://github.com/putra10/transitlabs/blob/main/public/app.js): `public/app.js`
- [Language toggle](https://github.com/putra10/transitlabs/blob/main/public/site.mjs): `public/site.mjs`

### Route engine

- [Route engine](https://github.com/putra10/transitlabs/blob/main/public/engine.mjs): `public/engine.mjs`
- [Transit graph data](https://github.com/putra10/transitlabs/blob/main/public/data/optg.json): `public/data/optg.json`

### Transit network

- [Lines and stations](https://github.com/putra10/transitlabs/blob/main/public/lines.mjs): `public/lines.mjs`
- [Map geometry](https://github.com/putra10/transitlabs/blob/main/public/data/geometry.json): `public/data/geometry.json`

### Reference pages

- [Method page](https://github.com/putra10/transitlabs/blob/main/public/method.html): `public/method.html`
- [Data page](https://github.com/putra10/transitlabs/blob/main/public/data.html): `public/data.html`

### Other components

- **Visitor**
- **Leaflet**
- **OSM tiles**
- **Browser storage**

## Connections

- Visitor → Route lab: opens
- Route lab → Route controls: hosts
- Route controls → Route engine: requests routes
- Transit graph data → Route engine: provides graph
- Route engine → Route controls: returns rankings
- Route controls → Schematic view: updates display
- Route controls → Map view: updates display
- Lines and stations → Schematic view: defines lines
- Lines and stations → Map view: defines stations
- Map geometry → Map view: provides paths
- Map view → Leaflet: renders map
- Leaflet → OSM tiles: loads tiles
- Route lab → Language toggle: initializes language
- Language toggle → Browser storage: persists choice
- Visitor → Method page: reads
- Visitor → Data page: reads