FEAT: Create Metrics page for visualizing latency, precision, and reflection metrics

[Fidelisaboke]

Short Summary

Create a Metrics page that visualizes key performance and quality metrics: latency, citation precision, and reflection score distributions.

Motivation & Context

The Metrics page is essential for monitoring, debugging, and showcasing the system's performance. Real-time visibility into latency, precision of citations, and the distribution of reflection scores (e.g., ISREL, ISSUP, ISUSE) makes it easy to understand the system’s behavior under load.

Proposed Solution

• Create Metrics.tsx under frontend/src/pages/.

• Use Axios to fetch data from a new backend endpoint GET /api/metrics.

• Display:

  • Latency: e.g., bar chart or time-series plot (average, min, max).
  • Citation Precision: e.g., gauge or bar showing precision@k across test queries.
  • Reflection Scores: distribution charts (e.g., histograms or box plots) for metrics like ISREL, ISSUP, ISUSE.

• Use a charting library (e.g., Chart.js, Recharts, or Tremor UI) to render interactive charts.

• Include date or query filters (optional, if time allows) to refine displayed metrics.

• Ensure the page shows loading states and error messages gracefully.

Affected Components

• Frontend (UI)
• Backend (API)
• Ingestion Pipeline
• RAG Pipeline
• Vector Storage
• Documentation
• Other

Estimated Time (hours)

1

Acceptance Criteria

• Given the Metrics page is open, When the frontend calls GET /api/metrics, Then loading indicators appear until data arrives, and charts populate correctly.

• Given valid metric data:

  • Latency chart displays average, minimum, and maximum values.
  • Citation Precision chart shows precision at k (e.g., P@5, P@10).
  • Reflection Scores chart shows distributions for ISREL, ISSUP, ISUSE (e.g., histograms or box plots).

• Given the metrics endpoint fails (e.g., HTTP error), Then an error notification or fallback UI is displayed informing the user.

• Given multiple datasets or timestamps are supported, When the user selects a time range (if implemented), Then the charts refresh to reflect the selected range.

• Given data loads quickly, Then the page should not freeze or block the UI—charts should render smoothly.