# rayarka26/shortest_finder architecture

> Architecture diagram of the GitHub repository rayarka26/shortest_finder, 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/rayarka26/shortest_finder
- Repository: https://github.com/rayarka26/shortest_finder

## Overview

This is a browser-based travel-planning demo: the user generates a weighted city graph, then asks for the least-time route, which is displayed in a second graph. The main workflow and its algorithmic stages are implemented together in script.js. The README also describes graph-algorithm capabilities; djikstra.js and graph.js contain standalone console examples, but the sampled code does not show them connected to the website. index.html and styling are represented by their tree paths; their wiring was not sampled.

Main entry points: [`script.js`](https://github.com/rayarka26/shortest_finder/blob/main/script.js) (Page controller), [`djikstra.js`](https://github.com/rayarka26/shortest_finder/blob/main/djikstra.js) (Dijkstra example), [`graph.js`](https://github.com/rayarka26/shortest_finder/blob/main/graph.js) (Graph example)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Browser interface"]
  node_page["Page structure<br/>[index.html]"]
  node_styles["Page styling<br/>[style.css]"]
  node_controller["Page controller<br/>[script.js]"]
  node_question_view["Question graph<br/>[script.js]"]
  node_result_view["Result graph<br/>[script.js]"]
end

subgraph group_planning["Route planning"]
  node_graph_generation["Graph generation<br/>[script.js]"]
  node_graph_conversion["Bus graph conversion<br/>[script.js]"]
  node_shortest_paths["Dijkstra distances<br/>[script.js]"]
  node_plane_choice["Plane comparison<br/>[script.js]"]
  node_route_building["Route reconstruction<br/>[script.js]"]
end

subgraph group_examples["Algorithm examples"]
  node_standalone_dijkstra["Dijkstra example<br/>[djikstra.js]"]
  node_standalone_graph["Graph example<br/>[graph.js]"]
end

node_user(("Traveler"))
node_vis["vis Network"]

node_user -->|"requests graph or solution"| node_controller
node_controller -->|"generates graph"| node_graph_generation
node_controller -->|"sets graph data"| node_question_view
node_question_view -->|"renders network"| node_vis
node_controller -->|"builds bus graph"| node_graph_conversion
node_controller -->|"computes from endpoints"| node_shortest_paths
node_graph_conversion -->|"supplies adjacency list"| node_shortest_paths
node_controller -->|"compares plane routes"| node_plane_choice
node_shortest_paths -->|"supplies distances"| node_plane_choice
node_controller -->|"reconstructs route"| node_route_building
node_shortest_paths -->|"supplies predecessors"| node_route_building
node_plane_choice -->|"supplies selected plane"| node_route_building
node_controller -->|"sets solution data"| node_result_view
node_result_view -->|"renders network"| node_vis
node_standalone_dijkstra -->|"logs distances"| node_standalone_dijkstra
node_standalone_graph -->|"logs adjacency list"| node_standalone_graph

click node_page "https://github.com/rayarka26/shortest_finder/blob/main/index.html"
click node_styles "https://github.com/rayarka26/shortest_finder/blob/main/style.css"
click node_controller "https://github.com/rayarka26/shortest_finder/blob/main/script.js"
click node_question_view "https://github.com/rayarka26/shortest_finder/blob/main/script.js"
click node_result_view "https://github.com/rayarka26/shortest_finder/blob/main/script.js"
click node_graph_generation "https://github.com/rayarka26/shortest_finder/blob/main/script.js"
click node_graph_conversion "https://github.com/rayarka26/shortest_finder/blob/main/script.js"
click node_shortest_paths "https://github.com/rayarka26/shortest_finder/blob/main/script.js"
click node_plane_choice "https://github.com/rayarka26/shortest_finder/blob/main/script.js"
click node_route_building "https://github.com/rayarka26/shortest_finder/blob/main/script.js"
click node_standalone_dijkstra "https://github.com/rayarka26/shortest_finder/blob/main/djikstra.js"
click node_standalone_graph "https://github.com/rayarka26/shortest_finder/blob/main/graph.js"

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_page,node_styles,node_controller,node_question_view,node_result_view toneBlue
class node_graph_generation,node_graph_conversion,node_shortest_paths,node_plane_choice,node_route_building toneAmber
class node_standalone_dijkstra,node_standalone_graph toneMint
class node_user,node_vis toneIndigo
```

## Components

### Browser interface

- [Page structure](https://github.com/rayarka26/shortest_finder/blob/main/index.html): `index.html`
- [Page styling](https://github.com/rayarka26/shortest_finder/blob/main/style.css): `style.css`
- [Page controller](https://github.com/rayarka26/shortest_finder/blob/main/script.js): `script.js`
- [Question graph](https://github.com/rayarka26/shortest_finder/blob/main/script.js): `script.js`
- [Result graph](https://github.com/rayarka26/shortest_finder/blob/main/script.js): `script.js`

### Route planning

- [Graph generation](https://github.com/rayarka26/shortest_finder/blob/main/script.js): `script.js`
- [Bus graph conversion](https://github.com/rayarka26/shortest_finder/blob/main/script.js): `script.js`
- [Dijkstra distances](https://github.com/rayarka26/shortest_finder/blob/main/script.js): `script.js`
- [Plane comparison](https://github.com/rayarka26/shortest_finder/blob/main/script.js): `script.js`
- [Route reconstruction](https://github.com/rayarka26/shortest_finder/blob/main/script.js): `script.js`

### Algorithm examples

- [Dijkstra example](https://github.com/rayarka26/shortest_finder/blob/main/djikstra.js): `djikstra.js`
- [Graph example](https://github.com/rayarka26/shortest_finder/blob/main/graph.js): `graph.js`

### Other components

- **Traveler**
- **vis Network**

## Connections

- Traveler → Page controller: requests graph or solution
- Page controller → Graph generation: generates graph
- Page controller → Question graph: sets graph data
- Question graph → vis Network: renders network
- Page controller → Bus graph conversion: builds bus graph
- Page controller → Dijkstra distances: computes from endpoints
- Bus graph conversion → Dijkstra distances: supplies adjacency list
- Page controller → Plane comparison: compares plane routes
- Dijkstra distances → Plane comparison: supplies distances
- Page controller → Route reconstruction: reconstructs route
- Dijkstra distances → Route reconstruction: supplies predecessors
- Plane comparison → Route reconstruction: supplies selected plane
- Page controller → Result graph: sets solution data
- Result graph → vis Network: renders network
- Dijkstra example → Dijkstra example: logs distances
- Graph example → Graph example: logs adjacency list