feat(router/speedy): CH router visualization tool — CHQueryExporter + D3.js split-screen HTML

[Copilot]

• Fix SpeedyALT phase info-box messages (were describing Dijkstra-like radial expansion; now describe ALT directed search with landmarks)
• Add routeCost and routeLinks to Java exporter JSON output (CHQueryResult now stores bestCost)
• Handle edge case: output null when no path found (POSITIVE_INFINITY guard)
• Add route result info (path links count, travel cost) to final overlay HTML
• Update showFinalOverlay() to display route results from JSON with backwards-compat fallback
• Enlarge drawFinalOverlayToCanvas card (400×220 → 440×280) and add route info with separator line
• Validate JS and CSS syntax

Original prompt

Visualisierungskonzept umsetzen

The user has attached the following files from their workspace:

• matsim/tools/ch-viz/plan-chRouterVisualization.prompt.md

TITLE: CH-Router Visualization for Berlin Network (D3.js + Video Export)

USER INTENT: The user wants to save a detailed implementation plan as a prompt file for building an interactive visualization of the Contraction Hierarchies (CH) router algorithm, intended for a LinkedIn promotional post for iteratively.io.

TASK DESCRIPTION:
Build a two-component visualization system:

1. Java Data Exporter (CHQueryExporter.java) that runs an instrumented CH query AND Dijkstra query on the Berlin network and exports step-by-step search state as JSON
2. Standalone HTML/D3.js Visualization (ch-visualization.html) with:
   • Split-screen Dijkstra vs CH comparison (synchronized animation)
   • Shortcut unpacking animation showing how CH shortcuts decompose into real edges
   • Live statistics overlay showing search space savings
   • Dark theme with iteratively.io branding
   • Native WebM video export via MediaRecorder + canvas.captureStream(60fps)
   • 2.5D toggle showing hierarchy levels
   • Cinema mode for screen recording

EXISTING:

• Plan file saved at: matsim/tools/ch-viz/plan-chRouterVisualization.prompt.md
• Berlin network exists at: examples/scenarios/berlin/network.xml.gz (GK4 coordinate system, ~10k nodes)
• Berlin config at: examples/scenarios/berlin/config.xml
• All CH routing source code is already implemented in matsim/src/main/java/org/matsim/core/router/speedy/:
  • CHRouter.java — static bidirectional CH query (L152-321 for main loop, L368-394 for edge unpacking)
  • CHRouterTimeDep.java — time-dependent CATCHUp CH query (L178-380 for main loop, L429-448 for edge unpacking)
  • CHGraph.java — CH overlay graph with CSR layout, nodeLevel[], edgeOrigLink[], edgeLower1[], edgeLower2[]
  • CHBuilder.java — contraction hierarchy builder (~2848 lines, parallel ND-based contraction)
  • CHRouterFactory.java — factory with caching, ND ordering, TTF customization pipeline
  • CHTTFCustomizer.java — time-dependent TTF customization
  • CHCustomizer.java — static weight customization
  • SpeedyDijkstra.java — reference Dijkstra implementation (L110-178 for main loop)
  • SpeedyGraph.java — optimized graph data structure with spatial node ordering
  • SpeedyGraphBuilder.java — graph builder with Z-order Morton curve reordering

PENDING:

• CHQueryExporter.java — New file at matsim/src/main/java/org/matsim/core/router/speedy/CHQueryExporter.java. Must:

  • Load Berlin network via NetworkUtils.readNetwork()
  • Build SpeedyGraph via SpeedyGraphBuilder.buildWithSpatialOrdering()
  • Build CHGraph via CHBuilder.build() + CHTTFCustomizer.customize()
  • Run instrumented CH query (copy loop from CHRouter.calcLeastCostPathImpl()) recording per-PQ-poll events: {step, dir, nodeIdx, cost, parentIdx, stalled, isMeeting}
  • Run instrumented Dijkstra query (copy loop from SpeedyDijkstra.calcLeastCostPathImpl()) recording per-PQ-poll events: {step, nodeIdx, cost}
  • Export shortcut unpack tree as nested JSON from edgeLower1/edgeLower2 arrays
  • Export all nodes with WGS84 coords (transform via TransformationFactory.getCoordinateTransformation("GK4", "WGS84")), nodeLevel[], and edges
  • Export final unpacked path with coordinates
  • Optional BBox filter to reduce to ~2000-4000 visible nodes
  • Output: ch-query-data.json

• ch-visualization.html — New file at matsim/tools/ch-viz/ch-visualization.html. Must implement:

  • Split-screen layout (16:9): left=Dijkstra canvas, right=CH canvas, synchronized
  • Berlin network edges as thin dark gray lines via d3.geoMercator() projection
  • Animation loop via requestAnimationFrame with speed control
  • Dijkstra side: growing red/orange "cloud" of all settled nodes
  • CH side: slim bidirectional diamond (forward=blue #58a6ff, backward=orange #f78166)
  • Stall-on-demand visualization as gray flash
  • Meeting point golden glow pulse (#d29922)
  • Phase 2: shortcut unpacking animation (shortcuts split into children edges with morph transitions)
  • Final path as green animated-dash line (#3fb950)
  • Live counters: "Settled: X" + percentage on both sides
  • Final comparison overlay: "Dijkstra: N nodes — CH: M nodes → X% less search space"
  • Info boxes with phase explanations (fade in/out)
  • Dark theme (#0d1117 background, #1e2937 network edges)
  • iteratively.io watermark bottom-right
  • Controls: Play/Pause, Step, Speed slider (1x-20x), progress bar, Reset, 2.5D toggle
  • Cinema Mode button (hides controls, auto-plays with pauses between phases)
  • Record button: canvas.captureStream(60) + MediaRecorder (VP9/WebM) → auto-download ch-router-berlin.webm
  • Off-screen composite canvas for recording both panels
  • Off-screen base map canvas for performance (blit per frame)
  • OD pair dropdown with 3-...