# sunil-kumawat-54/ml-monitoring-dashboard architecture

> Architecture diagram of the GitHub repository sunil-kumawat-54/ml-monitoring-dashboard, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sunil-kumawat-54/ml-monitoring-dashboard
- Repository: https://github.com/sunil-kumawat-54/ml-monitoring-dashboard

## Overview

ML Monitoring Dashboard is an interactive model-health interface: a signed-in user selects a drift scenario and live mode, the dashboard generates or ticks simulated monitoring data, and widgets present drift, performance, calibration, importance, KPIs, and alerts. The app also offers report-generation UI and persists snapshots and alerts to Supabase when a user is signed in. The README documents widget behavior not visible in sampled source; those features are represented without inferring their internal wiring.

Main entry points: [`src/store/useStore.ts`](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/store/useStore.ts) (Dashboard state), [`src/app/layout.tsx`](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/app/layout.tsx) (Root layout), [`src/app/page.tsx`](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/app/page.tsx) (Dashboard orchestrator), [`src/lib/AuthContext.tsx`](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/lib/AuthContext.tsx) (Auth context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Shell"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_dashboard["Dashboard orchestrator<br/>[page.tsx]"]
  node_topbar["Top bar controls<br/>[TopBar.tsx]"]
  node_sidebar["Sidebar navigation<br/>[Sidebar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_ambient["Ambient 3D layer<br/>[AmbientLayer.tsx]"]
end

subgraph group_auth["Authentication"]
  node_authguard["Auth guard<br/>[AuthGuard.tsx]"]
  node_login["Login and signup<br/>[LoginPage.tsx]"]
  node_authcontext["Auth context<br/>[AuthContext.tsx]"]
  node_supabaseclient["Supabase client<br/>[supabase.ts]"]
end

subgraph group_monitoring["Monitoring Experience"]
  node_kpi["KPI strip<br/>[HeroKPIStrip.tsx]"]
  node_drift["Data drift panel<br/>[DataDriftPanel.tsx]"]
  node_performance["Performance timeline"]
  node_calibration["Prediction calibration"]
  node_importance["Feature importance shift"]
  node_alerts["Alert feed<br/>[AlertFeed.tsx]"]
  node_reports["Reports panel<br/>[ReportsPanel.tsx]"]
end

subgraph group_data["Simulation And State"]
  node_store["Dashboard state<br/>[useStore.ts]"]
  node_simulation["Simulation engine<br/>[simulation.ts]"]
  node_datahelper["Supabase data access<br/>[supabase-data.ts]"]
end

node_user(("Dashboard user"))
node_supabaseauth{{"Supabase Auth"}}
node_supabasedb[("Supabase database")]

node_user -->|"signs in"| node_login
node_user -->|"controls dashboard"| node_topbar
node_layout -->|"provides auth"| node_authcontext
node_layout -->|"guards content"| node_authguard
node_layout -->|"renders"| node_topbar
node_layout -->|"renders"| node_sidebar
node_layout -->|"renders"| node_footer
node_layout -->|"renders"| node_ambient
node_layout -->|"renders"| node_dashboard
node_authguard -->|"checks session"| node_authcontext
node_authguard -->|"shows when signed out"| node_login
node_login -->|"requests auth"| node_authcontext
node_authcontext -->|"uses client"| node_supabaseclient
node_supabaseclient -->|"auth requests"| node_supabaseauth
node_topbar -->|"updates controls"| node_store
node_topbar -->|"signs out"| node_authcontext
node_dashboard -->|"generates and ticks"| node_simulation
node_simulation -->|"returns metrics"| node_dashboard
node_dashboard -->|"sets and ticks data"| node_store
node_dashboard -->|"reads signed-in user"| node_authcontext
node_dashboard -->|"saves snapshots and alerts"| node_datahelper
node_datahelper -->|"writes monitoring records"| node_supabasedb
node_kpi -->|"reads dashboard data"| node_store
node_drift -->|"reads dashboard data"| node_store
node_performance -->|"reads dashboard data"| node_store
node_calibration -->|"reads dashboard data"| node_store
node_importance -->|"reads dashboard data"| node_store
node_alerts -->|"reads and acknowledges"| node_store
node_reports -.->|"reads dashboard data"| node_store

click node_layout "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/app/layout.tsx"
click node_dashboard "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/app/page.tsx"
click node_topbar "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/navigation/TopBar.tsx"
click node_sidebar "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/navigation/Sidebar.tsx"
click node_footer "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/navigation/Footer.tsx"
click node_ambient "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/AmbientLayer.tsx"
click node_authguard "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/auth/AuthGuard.tsx"
click node_login "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/auth/LoginPage.tsx"
click node_authcontext "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/lib/AuthContext.tsx"
click node_supabaseclient "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/lib/supabase.ts"
click node_kpi "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/HeroKPIStrip.tsx"
click node_drift "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/DataDriftPanel.tsx"
click node_performance "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/PerformanceTimeline.tsx"
click node_calibration "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/PredictionCalibration.tsx"
click node_importance "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/FeatureImportanceShift.tsx"
click node_alerts "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/AlertFeed.tsx"
click node_reports "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/ReportsPanel.tsx"
click node_store "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/store/useStore.ts"
click node_simulation "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/lib/simulation.ts"
click node_datahelper "https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/lib/supabase-data.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_layout,node_dashboard,node_topbar,node_sidebar,node_footer,node_ambient,node_user toneBlue
class node_authguard,node_login,node_authcontext,node_supabaseclient,node_supabasedb toneAmber
class node_kpi,node_drift,node_performance,node_calibration,node_importance,node_alerts,node_reports toneMint
class node_store,node_simulation,node_datahelper toneRose
class node_supabaseauth toneIndigo
```

## Components

### App Shell

- [Root layout](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Dashboard orchestrator](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Top bar controls](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/navigation/TopBar.tsx): `src/components/navigation/TopBar.tsx`
- [Sidebar navigation](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/navigation/Sidebar.tsx): `src/components/navigation/Sidebar.tsx`
- [Footer](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/navigation/Footer.tsx): `src/components/navigation/Footer.tsx`
- [Ambient 3D layer](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/AmbientLayer.tsx): `src/components/AmbientLayer.tsx`

### Authentication

- [Auth guard](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/auth/AuthGuard.tsx): `src/components/auth/AuthGuard.tsx`
- [Login and signup](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/auth/LoginPage.tsx): `src/components/auth/LoginPage.tsx`
- [Auth context](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/lib/AuthContext.tsx): `src/lib/AuthContext.tsx`
- [Supabase client](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/lib/supabase.ts): `src/lib/supabase.ts`

### Monitoring Experience

- [KPI strip](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/HeroKPIStrip.tsx): `src/components/widgets/HeroKPIStrip.tsx`
- [Data drift panel](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/DataDriftPanel.tsx): `src/components/widgets/DataDriftPanel.tsx`
- [Performance timeline](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/PerformanceTimeline.tsx): `src/components/widgets/PerformanceTimeline.tsx`
- [Prediction calibration](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/PredictionCalibration.tsx): `src/components/widgets/PredictionCalibration.tsx`
- [Feature importance shift](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/FeatureImportanceShift.tsx): `src/components/widgets/FeatureImportanceShift.tsx`
- [Alert feed](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/AlertFeed.tsx): `src/components/widgets/AlertFeed.tsx`
- [Reports panel](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/components/widgets/ReportsPanel.tsx): `src/components/widgets/ReportsPanel.tsx`

### Simulation And State

- [Dashboard state](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/store/useStore.ts): `src/store/useStore.ts`
- [Simulation engine](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/lib/simulation.ts): `src/lib/simulation.ts`
- [Supabase data access](https://github.com/sunil-kumawat-54/ml-monitoring-dashboard/blob/main/src/lib/supabase-data.ts): `src/lib/supabase-data.ts`

### Other components

- **Dashboard user**
- **Supabase Auth**
- **Supabase database**

## Connections

- Dashboard user → Login and signup: signs in
- Dashboard user → Top bar controls: controls dashboard
- Root layout → Auth context: provides auth
- Root layout → Auth guard: guards content
- Root layout → Top bar controls: renders
- Root layout → Sidebar navigation: renders
- Root layout → Footer: renders
- Root layout → Ambient 3D layer: renders
- Root layout → Dashboard orchestrator: renders
- Auth guard → Auth context: checks session
- Auth guard → Login and signup: shows when signed out
- Login and signup → Auth context: requests auth
- Auth context → Supabase client: uses client
- Supabase client → Supabase Auth: auth requests
- Top bar controls → Dashboard state: updates controls
- Top bar controls → Auth context: signs out
- Dashboard orchestrator → Simulation engine: generates and ticks
- Simulation engine → Dashboard orchestrator: returns metrics
- Dashboard orchestrator → Dashboard state: sets and ticks data
- Dashboard orchestrator → Auth context: reads signed-in user
- Dashboard orchestrator → Supabase data access: saves snapshots and alerts
- Supabase data access → Supabase database: writes monitoring records
- KPI strip → Dashboard state: reads dashboard data
- Data drift panel → Dashboard state: reads dashboard data
- Performance timeline → Dashboard state: reads dashboard data
- Prediction calibration → Dashboard state: reads dashboard data
- Feature importance shift → Dashboard state: reads dashboard data
- Alert feed → Dashboard state: reads and acknowledges
- Reports panel → Dashboard state: reads dashboard data