# botts-innovative-research/osh-viewer architecture

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

- Interactive diagram: https://gitdiagram.com/botts-innovative-research/osh-viewer
- Repository: https://github.com/botts-innovative-research/osh-viewer

## Overview

OSHViewer is a browser-based Common Operating Picture (COP) viewer for OSH-connected systems, with map-based geospatial visualization and configurable dashboards. The apparent workflow is to connect to a node and discover its systems/data streams, select data and a visualization type, build visualizations, and view them on maps or panels; users can also manage overlays, missions, saved configurations, and Cesium Ion access. The README documents setup and OAuth configuration, not product behavior, so several feature relationships below are based on source-index references or are omitted where wiring is not shown.

Main entry points: [`src/stores/visualizationstore.ts`](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/visualizationstore.ts) (Visualization state), [`src/App.vue`](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/App.vue) (Application shell), [`src/lib/OSHConnectDataStructs.ts`](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/lib/OSHConnectDataStructs.ts) (OSH connection model), [`src/modules/map/composables/useMap.ts`](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/map/composables/useMap.ts) (Map controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["Application shell<br/>[App.vue]"]
  node_toolbar["Header toolbar<br/>[HeaderToolbar.vue]"]
  node_cop["COP view<br/>[COPView.vue]"]
end

subgraph group_osh["OSH data"]
  node_systembrowser["System browser"]
  node_oshconnect["OSH connection model"]
  node_nodes[("Node state<br/>[nodestore.ts]")]
  node_datastreams[("Datastream state<br/>[datastreamstore.ts]")]
  node_controlstreams[("Control stream state")]
end

subgraph group_viz["Visualization"]
  node_wizard["Visualization wizard"]
  node_registry["Visualization registry"]
  node_builders["Visualization builders"]
  node_vizstate[("Visualization state")]
  node_sidebar["Visualization sidebar"]
  node_vizserialization["Visualization serialization"]
end

subgraph group_mapping["Mapping"]
  node_mapview["Map view<br/>[MapView.vue]"]
  node_map["Map controller<br/>[useMap.ts]"]
  node_mapadapters["Map adapters"]
  node_geooverlay["Geospatial overlays"]
  node_missions["Mission planning"]
end

subgraph group_state["State and integrations"]
  node_persistence["Configuration persistence"]
  node_settings[("Settings state<br/>[settingsstore.ts]")]
  node_cesiumauth["Cesium Ion OAuth"]
  node_cesiumservice["Cesium Ion service"]
end

node_user(("COP user"))
node_ion{{"Cesium Ion"}}
node_oshservice{{"OSH service"}}

node_user -->|"uses"| node_app
node_app -->|"renders"| node_toolbar
node_app -->|"rehydrates"| node_nodes
node_app -->|"rehydrates"| node_vizstate
node_app -->|"routes to"| node_cop
node_toolbar -->|"offers save"| node_persistence
node_systembrowser -.->|"manages systems"| node_oshconnect
node_oshconnect -.->|"queries"| node_oshservice
node_oshconnect -->|"uses"| node_nodes
node_oshconnect -->|"populates"| node_datastreams
node_oshconnect -->|"populates"| node_controlstreams
node_wizard -->|"selects builder"| node_registry
node_wizard -->|"invokes builder"| node_builders
node_wizard -->|"updates"| node_vizstate
node_vizstate -->|"serializes"| node_vizserialization
node_vizserialization -->|"resolves streams"| node_datastreams
node_sidebar -->|"manages"| node_vizstate
node_sidebar -.->|"manages missions"| node_missions
node_cop -.->|"displays"| node_mapview
node_mapview -.->|"uses controller"| node_map
node_map -->|"dispatches map ops"| node_mapadapters
node_map -->|"reads visualizations"| node_vizstate
node_map -->|"reads map choice"| node_settings
node_map -.->|"uses overlays"| node_geooverlay
node_persistence -->|"reads and writes"| node_nodes
node_persistence -->|"reads and writes"| node_vizstate
node_persistence -->|"reads"| node_datastreams
node_cesiumauth -->|"exchanges OAuth"| node_ion
node_cesiumservice -.->|"uses Ion API"| node_ion
node_cesiumservice -->|"updates state"| node_settings

click node_app "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/App.vue"
click node_toolbar "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/components/HeaderToolbar.vue"
click node_cop "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/views/COPView.vue"
click node_systembrowser "https://github.com/botts-innovative-research/osh-viewer/tree/master/src/modules/system-browser"
click node_oshconnect "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/lib/OSHConnectDataStructs.ts"
click node_nodes "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/nodestore.ts"
click node_datastreams "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/datastreamstore.ts"
click node_controlstreams "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/controlstreamstore.ts"
click node_wizard "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/visualization/wizard/composables/useVisualizationWizard.ts"
click node_registry "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/visualization/registry/VisualizationRegistry.ts"
click node_builders "https://github.com/botts-innovative-research/osh-viewer/tree/master/src/modules/visualization/visualizations"
click node_vizstate "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/visualizationstore.ts"
click node_sidebar "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/visualization/sidebar/composables/useVisualizationSidebar.ts"
click node_vizserialization "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/visualization/services/visualization.serialization.ts"
click node_mapview "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/map/components/MapView.vue"
click node_map "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/map/composables/useMap.ts"
click node_mapadapters "https://github.com/botts-innovative-research/osh-viewer/tree/master/src/modules/map/adapters"
click node_geooverlay "https://github.com/botts-innovative-research/osh-viewer/tree/master/src/modules/map/geo-overlay"
click node_missions "https://github.com/botts-innovative-research/osh-viewer/tree/master/src/modules/visualization/visualizations/mission"
click node_persistence "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/composables/useConfigPersistence.ts"
click node_settings "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/settingsstore.ts"
click node_cesiumauth "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/cesium/cesiumAuth.service.ts"
click node_cesiumservice "https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/cesium/cesiumIon.service.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_app,node_toolbar,node_cop,node_user toneBlue
class node_systembrowser,node_oshconnect,node_nodes,node_datastreams,node_controlstreams toneAmber
class node_wizard,node_registry,node_builders,node_vizstate,node_sidebar,node_vizserialization toneMint
class node_mapview,node_map,node_mapadapters,node_geooverlay,node_missions toneRose
class node_persistence,node_settings,node_cesiumauth,node_cesiumservice,node_ion,node_oshservice toneIndigo
```

## Components

### Application

- [Application shell](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/App.vue): `src/App.vue`
- [Header toolbar](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/components/HeaderToolbar.vue): `src/components/HeaderToolbar.vue`
- [COP view](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/views/COPView.vue): `src/views/COPView.vue`

### OSH data

- [System browser](https://github.com/botts-innovative-research/osh-viewer/tree/master/src/modules/system-browser): `src/modules/system-browser`
- [OSH connection model](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/lib/OSHConnectDataStructs.ts): `src/lib/OSHConnectDataStructs.ts`
- [Node state](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/nodestore.ts): `src/stores/nodestore.ts`
- [Datastream state](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/datastreamstore.ts): `src/stores/datastreamstore.ts`
- [Control stream state](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/controlstreamstore.ts): `src/stores/controlstreamstore.ts`

### Visualization

- [Visualization wizard](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/visualization/wizard/composables/useVisualizationWizard.ts): `src/modules/visualization/wizard/composables/useVisualizationWizard.ts`
- [Visualization registry](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/visualization/registry/VisualizationRegistry.ts): `src/modules/visualization/registry/VisualizationRegistry.ts`
- [Visualization builders](https://github.com/botts-innovative-research/osh-viewer/tree/master/src/modules/visualization/visualizations): `src/modules/visualization/visualizations`
- [Visualization state](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/visualizationstore.ts): `src/stores/visualizationstore.ts`
- [Visualization sidebar](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/visualization/sidebar/composables/useVisualizationSidebar.ts): `src/modules/visualization/sidebar/composables/useVisualizationSidebar.ts`
- [Visualization serialization](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/visualization/services/visualization.serialization.ts): `src/modules/visualization/services/visualization.serialization.ts`

### Mapping

- [Map view](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/map/components/MapView.vue): `src/modules/map/components/MapView.vue`
- [Map controller](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/map/composables/useMap.ts): `src/modules/map/composables/useMap.ts`
- [Map adapters](https://github.com/botts-innovative-research/osh-viewer/tree/master/src/modules/map/adapters): `src/modules/map/adapters`
- [Geospatial overlays](https://github.com/botts-innovative-research/osh-viewer/tree/master/src/modules/map/geo-overlay): `src/modules/map/geo-overlay`
- [Mission planning](https://github.com/botts-innovative-research/osh-viewer/tree/master/src/modules/visualization/visualizations/mission): `src/modules/visualization/visualizations/mission`

### State and integrations

- [Configuration persistence](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/composables/useConfigPersistence.ts): `src/composables/useConfigPersistence.ts`
- [Settings state](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/stores/settingsstore.ts): `src/stores/settingsstore.ts`
- [Cesium Ion OAuth](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/cesium/cesiumAuth.service.ts): `src/modules/cesium/cesiumAuth.service.ts`
- [Cesium Ion service](https://github.com/botts-innovative-research/osh-viewer/blob/master/src/modules/cesium/cesiumIon.service.ts): `src/modules/cesium/cesiumIon.service.ts`

### Other components

- **COP user**
- **Cesium Ion**
- **OSH service**

## Connections

- COP user → Application shell: uses (evidence: `src/App.vue`)
- Application shell → Header toolbar: renders (evidence: `src/App.vue`)
- Application shell → Node state: rehydrates (evidence: `src/App.vue`)
- Application shell → Visualization state: rehydrates (evidence: `src/App.vue`)
- Application shell → COP view: routes to
- Header toolbar → Configuration persistence: offers save
- System browser → OSH connection model: manages systems
- OSH connection model → OSH service: queries
- OSH connection model → Node state: uses (evidence: `src/lib/OSHConnectDataStructs.ts`)
- OSH connection model → Datastream state: populates (evidence: `src/lib/OSHConnectDataStructs.ts`)
- OSH connection model → Control stream state: populates (evidence: `src/lib/OSHConnectDataStructs.ts`)
- Visualization wizard → Visualization registry: selects builder (evidence: `src/modules/visualization/wizard/composables/useVisualizationWizard.ts`)
- Visualization wizard → Visualization builders: invokes builder (evidence: `src/modules/visualization/wizard/composables/useVisualizationWizard.ts`)
- Visualization wizard → Visualization state: updates (evidence: `src/modules/visualization/wizard/composables/useVisualizationWizard.ts`)
- Visualization state → Visualization serialization: serializes (evidence: `src/stores/visualizationstore.ts`)
- Visualization serialization → Datastream state: resolves streams (evidence: `src/modules/visualization/services/visualization.serialization.ts`)
- Visualization sidebar → Visualization state: manages (evidence: `src/modules/visualization/sidebar/composables/useVisualizationSidebar.ts`)
- Visualization sidebar → Mission planning: manages missions
- COP view → Map view: displays
- Map view → Map controller: uses controller
- Map controller → Map adapters: dispatches map ops (evidence: `src/modules/map/composables/useMap.ts`)
- Map controller → Visualization state: reads visualizations (evidence: `src/modules/map/composables/useMap.ts`)
- Map controller → Settings state: reads map choice (evidence: `src/modules/map/composables/useMap.ts`)
- Map controller → Geospatial overlays: uses overlays (evidence: `src/modules/map/composables/useMap.ts`)
- Configuration persistence → Node state: reads and writes (evidence: `src/composables/useConfigPersistence.ts`)
- Configuration persistence → Visualization state: reads and writes (evidence: `src/composables/useConfigPersistence.ts`)
- Configuration persistence → Datastream state: reads (evidence: `src/composables/useConfigPersistence.ts`)
- Cesium Ion OAuth → Cesium Ion: exchanges OAuth (evidence: `src/modules/cesium/cesiumAuth.service.ts`)
- Cesium Ion service → Cesium Ion: uses Ion API
- Cesium Ion service → Settings state: updates state (evidence: `src/modules/cesium/cesiumIon.service.ts`)