How sunil-kumawat-54/ml-monitoring-dashboard works
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: useStore.ts Dashboard state · layout.tsx Root layout · page.tsx Dashboard orchestrator · AuthContext.tsx Auth context
Components 23
App Shell
- Root layout
src/app/layout.tsx - Dashboard orchestrator
src/app/page.tsx - Top bar controls
src/components/navigation/TopBar.tsx - Sidebar navigation
src/components/navigation/Sidebar.tsx - Footer
src/components/navigation/Footer.tsx - Ambient 3D layer
src/components/AmbientLayer.tsx
Authentication
- Auth guard
src/components/auth/AuthGuard.tsx - Login and signup
src/components/auth/LoginPage.tsx - Auth context
src/lib/AuthContext.tsx - Supabase client
src/lib/supabase.ts
Monitoring Experience
- KPI strip
src/components/widgets/HeroKPIStrip.tsx - Data drift panel
src/components/widgets/DataDriftPanel.tsx - Performance timeline
src/components/widgets/PerformanceTimeline.tsx - Prediction calibration
src/components/widgets/PredictionCalibration.tsx - Feature importance shift
src/components/widgets/FeatureImportanceShift.tsx - Alert feed
src/components/widgets/AlertFeed.tsx - Reports panel
src/components/widgets/ReportsPanel.tsx
Simulation And State
- Dashboard state
src/store/useStore.ts - Simulation engine
src/lib/simulation.ts - Supabase data access
src/lib/supabase-data.ts
Other components
- Dashboard user
- Supabase Auth
- Supabase database
Connections 29
- 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