# amriteren-debug/ocean-embed architecture

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

- Interactive diagram: https://gitdiagram.com/amriteren-debug/ocean-embed
- Repository: https://github.com/amriteren-debug/ocean-embed

## Overview

Ocean Predictor is a web application for exploring date-specific ocean temperature predictions across depth, with map visualization and sector-focused analysis. The main workflow is a user selecting a date, the frontend requesting raw surface data and a subsurface prediction, and the backend returning depth grids for visualization and analysis. The repository also includes ARGO dashboard and skill-metric capabilities, regional proof-of-concept views, embeddings, and model training. The README is empty, and excerpts are partial; links are limited to documented endpoints and visible calls.

Main entry points: [`backend/main.py`](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/main.py) (Prediction API), [`frontend/src/App.jsx`](https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/App.jsx) (Dashboard app), [`frontend/src/components/VisualizationCanvas.jsx`](https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/components/VisualizationCanvas.jsx) (Map visualization), [`backend/train_pipeline.py`](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/train_pipeline.py) (Training pipeline)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Ocean explorer"]
  node_app["Dashboard app<br/>[App.jsx]"]
  node_api["Ocean API client<br/>[oceanApi.js]"]
  node_visual["Map visualization"]
  node_profile["Profile popup<br/>[ProfilePopup.jsx]"]
end

subgraph group_inference["Prediction service"]
  node_backend["Prediction API<br/>[main.py]"]
  node_preprocess["Ocean preprocessing<br/>[preprocessing.py]"]
  node_cache[("Prediction cache<br/>[main.py]")]
  node_inferdemo["Inference runner"]
end

subgraph group_analytics["Analysis views"]
  node_sector["Sector analysis"]
  node_sectorcards["Sector insights"]
  node_argo["ARGO dashboard<br/>[ArgoDashboard.jsx]"]
  node_percentiles["Percentile products"]
  node_regional["Regional demo<br/>[poc_demo.py]"]
end

subgraph group_model["Model development"]
  node_train["Training pipeline<br/>[train_pipeline.py]"]
  node_modeldef["Model definition"]
  node_fetcher["Data fetching<br/>[data_fetcher.py]"]
  node_stats["Depth statistics"]
end

node_user(("Ocean user"))
node_copernicus["Copernicus data"]
node_argoobs["ARGO observations"]

node_user -->|"selects date"| node_app
node_app -->|"requests depths"| node_backend
node_app -->|"requests raw SST"| node_backend
node_app -->|"requests prediction"| node_backend
node_app -->|"renders grids"| node_visual
node_app -->|"opens view"| node_argo
node_visual -->|"uses metrics"| node_sector
node_visual -->|"opens profile"| node_profile
node_sectorcards -->|"uses analysis"| node_sector
node_backend -->|"loads and regrids"| node_preprocess
node_backend -->|"reads and writes"| node_cache
node_backend -->|"downloads data"| node_copernicus
node_backend -->|"compares observations"| node_argoobs
node_train -->|"instantiates model"| node_modeldef
node_train -.->|"loads dataset"| node_fetcher
node_inferdemo -.->|"loads model"| node_modeldef
node_backend -->|"serves regional demo"| node_regional
node_backend -.->|"serves percentiles"| node_percentiles
node_backend -.->|"loads target stats"| node_stats

click node_app "https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/App.jsx"
click node_api "https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/api/oceanApi.js"
click node_visual "https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/components/VisualizationCanvas.jsx"
click node_sector "https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/hooks/useSectorAnalysis.js"
click node_sectorcards "https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/components/SectorInsightsCard.jsx"
click node_profile "https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/components/ProfilePopup.jsx"
click node_argo "https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/components/ArgoDashboard.jsx"
click node_backend "https://github.com/amriteren-debug/ocean-embed/blob/main/backend/main.py"
click node_preprocess "https://github.com/amriteren-debug/ocean-embed/blob/main/backend/preprocessing.py"
click node_cache "https://github.com/amriteren-debug/ocean-embed/blob/main/backend/main.py"
click node_inferdemo "https://github.com/amriteren-debug/ocean-embed/blob/main/backend/inference_pipeline.py"
click node_train "https://github.com/amriteren-debug/ocean-embed/blob/main/backend/train_pipeline.py"
click node_modeldef "https://github.com/amriteren-debug/ocean-embed/blob/main/backend/verify_prediction.py"
click node_fetcher "https://github.com/amriteren-debug/ocean-embed/blob/main/backend/data_fetcher.py"
click node_stats "https://github.com/amriteren-debug/ocean-embed/blob/main/backend/compute_target_stats.py"
click node_percentiles "https://github.com/amriteren-debug/ocean-embed/blob/main/backend/compute_percentiles.py"
click node_regional "https://github.com/amriteren-debug/ocean-embed/blob/main/backend/poc_demo.py"

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_api,node_visual,node_profile,node_user toneBlue
class node_backend,node_preprocess,node_cache,node_inferdemo toneAmber
class node_sector,node_sectorcards,node_argo,node_percentiles,node_regional toneMint
class node_train,node_modeldef,node_fetcher,node_stats toneRose
class node_copernicus,node_argoobs toneIndigo
```

## Components

### Ocean explorer

- [Dashboard app](https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Ocean API client](https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/api/oceanApi.js): `frontend/src/api/oceanApi.js`
- [Map visualization](https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/components/VisualizationCanvas.jsx): `frontend/src/components/VisualizationCanvas.jsx`
- [Profile popup](https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/components/ProfilePopup.jsx): `frontend/src/components/ProfilePopup.jsx`

### Prediction service

- [Prediction API](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/main.py): `backend/main.py`
- [Ocean preprocessing](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/preprocessing.py): `backend/preprocessing.py`
- [Prediction cache](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/main.py): `backend/main.py`
- [Inference runner](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/inference_pipeline.py): `backend/inference_pipeline.py`

### Analysis views

- [Sector analysis](https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/hooks/useSectorAnalysis.js): `frontend/src/hooks/useSectorAnalysis.js`
- [Sector insights](https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/components/SectorInsightsCard.jsx): `frontend/src/components/SectorInsightsCard.jsx`
- [ARGO dashboard](https://github.com/amriteren-debug/ocean-embed/blob/main/frontend/src/components/ArgoDashboard.jsx): `frontend/src/components/ArgoDashboard.jsx`
- [Percentile products](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/compute_percentiles.py): `backend/compute_percentiles.py`
- [Regional demo](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/poc_demo.py): `backend/poc_demo.py`

### Model development

- [Training pipeline](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/train_pipeline.py): `backend/train_pipeline.py`
- [Model definition](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/verify_prediction.py): `backend/verify_prediction.py`
- [Data fetching](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/data_fetcher.py): `backend/data_fetcher.py`
- [Depth statistics](https://github.com/amriteren-debug/ocean-embed/blob/main/backend/compute_target_stats.py): `backend/compute_target_stats.py`

### Other components

- **Ocean user**
- **Copernicus data**
- **ARGO observations**

## Connections

- Ocean user → Dashboard app: selects date
- Dashboard app → Prediction API: requests depths
- Dashboard app → Prediction API: requests raw SST
- Dashboard app → Prediction API: requests prediction
- Dashboard app → Map visualization: renders grids
- Dashboard app → ARGO dashboard: opens view
- Map visualization → Sector analysis: uses metrics
- Map visualization → Profile popup: opens profile
- Sector insights → Sector analysis: uses analysis
- Prediction API → Ocean preprocessing: loads and regrids
- Prediction API → Prediction cache: reads and writes
- Prediction API → Copernicus data: downloads data
- Prediction API → ARGO observations: compares observations
- Training pipeline → Model definition: instantiates model
- Training pipeline → Data fetching: loads dataset
- Inference runner → Model definition: loads model
- Prediction API → Regional demo: serves regional demo
- Prediction API → Percentile products: serves percentiles
- Prediction API → Depth statistics: loads target stats