# eleu/swissgeol-viewer-app architecture

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

- Interactive diagram: https://gitdiagram.com/eleu/swissgeol-viewer-app
- Repository: https://github.com/eleu/swissgeol-viewer-app

## Overview

Swissgeol is Swisstopo’s browser-based geology 3D viewer, with a Rust API supporting authenticated project data. The main user workflow is to open the Cesium map, explore and configure geological layers, query map features, and use drawing and analysis tools; users can also manage project geometries through the dashboard. The UI includes additional documented URL-driven viewing options and domain tools. Edges are limited to relationships shown in excerpts or SOURCE INDEX references; unsampled capabilities are included where the tree identifies them, without asserting their internal wiring.

Main entry points: [`ui/src/viewer.ts`](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/viewer.ts) (Cesium Viewer), [`ui/src/ngm-app.ts`](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/ngm-app.ts) (Viewer Application), [`ui/src/toolbox/GeometryController.ts`](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/toolbox/GeometryController.ts) (Geometry Editing), [`ui/src/elements/dashboard/ngm-dashboard.ts`](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/elements/dashboard/ngm-dashboard.ts) (Project Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_viewer["3D Viewer"]
  node_application["Viewer Application<br/>[ngm-app.ts]"]
  node_map["Cesium Viewer<br/>[viewer.ts]"]
  node_layers["Layer Catalog<br/>[layertree.ts]"]
  node_layer_controls["Layer Controls<br/>[ngm-layers.ts]"]
  node_map_config["Map Configuration"]
  node_url_state["Permalink State<br/>[permalink.ts]"]
  node_ion["Cesium ION Assets<br/>[api-ion.ts]"]
end

subgraph group_tools["Map Tools"]
  node_query["Feature Queries<br/>[QueryManager.ts]"]
  node_identify["Swisstopo Identify"]
  node_measure["Measurement<br/>[MeasureTool.ts]"]
  node_slicing["3D Slicing<br/>[SlicingBox.ts]"]
  node_earthquakes["Earthquake View"]
  node_toolbox["Toolbox UI<br/>[ngm-toolbox.ts]"]
  node_swissforages["Swissforages Service"]
end

subgraph group_projects["Projects and Geometry"]
  node_geometry["Geometry Editing"]
  node_drawing["Geometry Drawing<br/>[CesiumDraw.ts]"]
  node_dashboard["Project Dashboard<br/>[ngm-dashboard.ts]"]
  node_api_client["Project API Client<br/>[api-client.ts]"]
  node_auth_ui["User Authentication<br/>[auth.ts]"]
end

subgraph group_backend["API and Storage"]
  node_api_server["API Service<br/>[handlers.rs]"]
  node_api_auth["API Authorization<br/>[auth.rs]"]
  node_database[("Project Database<br/>[database.rs]")]
  node_s3["S3 Assets<br/>[s3.rs]"]
end

subgraph group_shared["Shared UI Services"]
  node_i18n["Localization<br/>[i18n.js]"]
  node_notifications["Notifications<br/>[notifications.ts]"]
  node_main_store["Viewer State<br/>[main.ts]"]
  node_draw_store["Drawing State<br/>[draw.ts]"]
  node_auth_store["Authentication State<br/>[auth.ts]"]
  node_geometry_types["Geometry Types<br/>[interfaces.ts]"]
end

node_user(("Viewer User"))
node_external_swissforages["Swissforages API"]
node_external_ion["Cesium ION"]

node_user -->|"opens"| node_application
node_application -.->|"presents"| node_map
node_application -.->|"presents"| node_dashboard
node_map -.->|"uses"| node_layers
node_layers -.->|"configures"| node_layer_controls
node_map -.->|"configures"| node_map_config
node_map -.->|"restores state"| node_url_state
node_main_store -->|"reads token"| node_url_state
node_main_store -->|"dispatches assets"| node_ion
node_ion -.->|"requests assets"| node_external_ion
node_map -.->|"supports queries"| node_query
node_query -->|"calls identify"| node_identify
node_map -.->|"supports measuring"| node_measure
node_toolbox -.->|"offers slicing"| node_slicing
node_toolbox -.->|"offers visualization"| node_earthquakes
node_dashboard -->|"calls API"| node_api_client
node_api_client -->|"gets token"| node_auth_ui
node_auth_ui -->|"updates user"| node_auth_store
node_api_client -.->|"requests projects"| node_api_server
node_api_server -->|"uses authorization"| node_api_auth
node_api_server -->|"uses database"| node_database
node_api_server -->|"uses asset storage"| node_s3
node_toolbox -.->|"offers editing"| node_geometry
node_geometry -->|"invokes drawing"| node_drawing
node_geometry -->|"uses state"| node_draw_store
node_geometry -->|"uses types"| node_geometry_types
node_swissforages -->|"sends requests"| node_external_swissforages
node_swissforages -->|"reports errors"| node_notifications
node_query -.->|"uses types"| node_geometry_types
node_application -.->|"initializes language"| node_i18n
node_dashboard -->|"uses state"| node_main_store
node_dashboard -->|"uses user"| node_auth_store

click node_application "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/ngm-app.ts"
click node_map "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/viewer.ts"
click node_layers "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/layertree.ts"
click node_layer_controls "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/layers/ngm-layers.ts"
click node_map_config "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/elements/ngm-cam-configuration.ts"
click node_url_state "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/permalink.ts"
click node_ion "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/api-ion.ts"
click node_query "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/query/QueryManager.ts"
click node_identify "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/query/SwisstopoIdentify.ts"
click node_measure "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/measure/MeasureTool.ts"
click node_slicing "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/slicer/SlicingBox.ts"
click node_earthquakes "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/earthquakeVisualization/earthquakeVisualizer.js"
click node_toolbox "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/toolbox/ngm-toolbox.ts"
click node_geometry "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/toolbox/GeometryController.ts"
click node_drawing "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/draw/CesiumDraw.ts"
click node_dashboard "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/elements/dashboard/ngm-dashboard.ts"
click node_api_client "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/api-client.ts"
click node_auth_ui "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/auth.ts"
click node_api_server "https://github.com/eleu/swissgeol-viewer-app/blob/master/api/src/handlers.rs"
click node_api_auth "https://github.com/eleu/swissgeol-viewer-app/blob/master/api/src/auth.rs"
click node_database "https://github.com/eleu/swissgeol-viewer-app/blob/master/api/src/database.rs"
click node_s3 "https://github.com/eleu/swissgeol-viewer-app/blob/master/api/src/s3.rs"
click node_swissforages "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/toolbox/SwissforagesService.ts"
click node_i18n "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/i18n.js"
click node_notifications "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/notifications.ts"
click node_main_store "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/store/main.ts"
click node_draw_store "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/store/draw.ts"
click node_auth_store "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/store/auth.ts"
click node_geometry_types "https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/toolbox/interfaces.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_application,node_map,node_layers,node_layer_controls,node_map_config,node_url_state,node_ion,node_user toneBlue
class node_query,node_identify,node_measure,node_slicing,node_earthquakes,node_toolbox,node_swissforages toneAmber
class node_geometry,node_drawing,node_dashboard,node_api_client,node_auth_ui,node_external_swissforages toneMint
class node_api_server,node_api_auth,node_database,node_s3 toneRose
class node_i18n,node_notifications,node_main_store,node_draw_store,node_auth_store,node_geometry_types,node_external_ion toneIndigo
```

## Components

### 3D Viewer

- [Viewer Application](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/ngm-app.ts): `ui/src/ngm-app.ts`
- [Cesium Viewer](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/viewer.ts): `ui/src/viewer.ts`
- [Layer Catalog](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/layertree.ts): `ui/src/layertree.ts`
- [Layer Controls](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/layers/ngm-layers.ts): `ui/src/layers/ngm-layers.ts`
- [Map Configuration](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/elements/ngm-cam-configuration.ts): `ui/src/elements/ngm-cam-configuration.ts`
- [Permalink State](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/permalink.ts): `ui/src/permalink.ts`
- [Cesium ION Assets](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/api-ion.ts): `ui/src/api-ion.ts`

### Map Tools

- [Feature Queries](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/query/QueryManager.ts): `ui/src/query/QueryManager.ts`
- [Swisstopo Identify](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/query/SwisstopoIdentify.ts): `ui/src/query/SwisstopoIdentify.ts`
- [Measurement](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/measure/MeasureTool.ts): `ui/src/measure/MeasureTool.ts`
- [3D Slicing](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/slicer/SlicingBox.ts): `ui/src/slicer/SlicingBox.ts`
- [Earthquake View](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/earthquakeVisualization/earthquakeVisualizer.js): `ui/src/earthquakeVisualization/earthquakeVisualizer.js`
- [Toolbox UI](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/toolbox/ngm-toolbox.ts): `ui/src/toolbox/ngm-toolbox.ts`
- [Swissforages Service](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/toolbox/SwissforagesService.ts): `ui/src/toolbox/SwissforagesService.ts`

### Projects and Geometry

- [Geometry Editing](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/toolbox/GeometryController.ts): `ui/src/toolbox/GeometryController.ts`
- [Geometry Drawing](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/draw/CesiumDraw.ts): `ui/src/draw/CesiumDraw.ts`
- [Project Dashboard](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/elements/dashboard/ngm-dashboard.ts): `ui/src/elements/dashboard/ngm-dashboard.ts`
- [Project API Client](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/api-client.ts): `ui/src/api-client.ts`
- [User Authentication](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/auth.ts): `ui/src/auth.ts`

### API and Storage

- [API Service](https://github.com/eleu/swissgeol-viewer-app/blob/master/api/src/handlers.rs): `api/src/handlers.rs`
- [API Authorization](https://github.com/eleu/swissgeol-viewer-app/blob/master/api/src/auth.rs): `api/src/auth.rs`
- [Project Database](https://github.com/eleu/swissgeol-viewer-app/blob/master/api/src/database.rs): `api/src/database.rs`
- [S3 Assets](https://github.com/eleu/swissgeol-viewer-app/blob/master/api/src/s3.rs): `api/src/s3.rs`

### Shared UI Services

- [Localization](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/i18n.js): `ui/src/i18n.js`
- [Notifications](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/notifications.ts): `ui/src/notifications.ts`
- [Viewer State](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/store/main.ts): `ui/src/store/main.ts`
- [Drawing State](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/store/draw.ts): `ui/src/store/draw.ts`
- [Authentication State](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/store/auth.ts): `ui/src/store/auth.ts`
- [Geometry Types](https://github.com/eleu/swissgeol-viewer-app/blob/master/ui/src/toolbox/interfaces.ts): `ui/src/toolbox/interfaces.ts`

### Other components

- **Viewer User**
- **Swissforages API**
- **Cesium ION**

## Connections

- Viewer User → Viewer Application: opens (evidence: `README.md`)
- Viewer Application → Cesium Viewer: presents
- Viewer Application → Project Dashboard: presents
- Cesium Viewer → Layer Catalog: uses
- Layer Catalog → Layer Controls: configures
- Cesium Viewer → Map Configuration: configures
- Cesium Viewer → Permalink State: restores state
- Viewer State → Permalink State: reads token (evidence: `ui/src/store/main.ts`)
- Viewer State → Cesium ION Assets: dispatches assets (evidence: `ui/src/store/main.ts`)
- Cesium ION Assets → Cesium ION: requests assets
- Cesium Viewer → Feature Queries: supports queries
- Feature Queries → Swisstopo Identify: calls identify (evidence: `ui/src/query/QueryManager.ts`)
- Cesium Viewer → Measurement: supports measuring
- Toolbox UI → 3D Slicing: offers slicing
- Toolbox UI → Earthquake View: offers visualization
- Project Dashboard → Project API Client: calls API (evidence: `ui/src/elements/dashboard/ngm-dashboard.ts`)
- Project API Client → User Authentication: gets token (evidence: `ui/src/api-client.ts`)
- User Authentication → Authentication State: updates user (evidence: `ui/src/auth.ts`)
- Project API Client → API Service: requests projects
- API Service → API Authorization: uses authorization (evidence: `api/src/lib.rs`)
- API Service → Project Database: uses database (evidence: `api/src/lib.rs`)
- API Service → S3 Assets: uses asset storage (evidence: `api/src/lib.rs`)
- Toolbox UI → Geometry Editing: offers editing
- Geometry Editing → Geometry Drawing: invokes drawing (evidence: `ui/src/toolbox/GeometryController.ts`)
- Geometry Editing → Drawing State: uses state (evidence: `ui/src/toolbox/GeometryController.ts`)
- Geometry Editing → Geometry Types: uses types (evidence: `ui/src/toolbox/GeometryController.ts`)
- Swissforages Service → Swissforages API: sends requests (evidence: `ui/src/toolbox/SwissforagesService.ts`)
- Swissforages Service → Notifications: reports errors (evidence: `ui/src/toolbox/SwissforagesService.ts`)
- Feature Queries → Geometry Types: uses types
- Viewer Application → Localization: initializes language
- Project Dashboard → Viewer State: uses state (evidence: `ui/src/elements/dashboard/ngm-dashboard.ts`)
- Project Dashboard → Authentication State: uses user (evidence: `ui/src/elements/dashboard/ngm-dashboard.ts`)