Evaluation: Category-wise analytics for Evals

[Ayush8923]

Issue: ProjectTech4DevAI/kaapi-backend#844

Summary:

In this PR,

• Added a new Category Metrics table on the evaluation detail page showing total evals, avg cosine, and avg correctness per category.
• Added an optional category column to the results tables (detailed + grouped), shown only when category data exists.
• CSV upload now accepts the optional category column, with updated validation and form instructions.
• CSV export includes the category column when present.
• Minor cleanup: barrel exports for evaluation components/icons, moved pagination types to their own file, and a hydration warning fix.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds optional category metadata support throughout the evaluation system. It extends evaluation data types to include category fields, creates a new CategoryMetricsTable component to display per-category metric aggregates, adds conditional category columns to results tables, updates CSV import/export to handle categories, and establishes component barrel exports for cleaner imports.

Changes

Category Support for Evaluation Metrics

Layer / File(s)	Summary
Type System & Pagination Infrastructure app/lib/types/evaluation.ts, app/lib/types/pagination.ts	TraceItem, IndividualScore, and GroupedTraceItem gain optional category field; new CategoryMetric interface models per-category aggregates; NewScoreObjectV2 gains optional category_metrics array. Pagination types extracted to centralized module.
Data Normalization & Hook Updates app/lib/utils/evaluation.ts, app/hooks/usePaginatedList.ts, app/hooks/index.ts	normalizeToIndividualScores adds category field from trace data; pagination types imported from centralized location in hook and re-exported from hooks index.
Component Infrastructure & Barrel Exports app/components/evaluations/index.ts, app/components/icons/evaluations/index.ts, app/(main)/evaluations/[id]/page.tsx, app/components/evaluations/EvalRunCard.tsx, app/(main)/evaluations/page.tsx	New barrel modules export evaluation components and icons as named exports; consumers updated to import from barrels instead of individual module paths.
CategoryMetricsTable Component app/components/evaluations/CategoryMetricsTable.tsx, app/(main)/evaluations/[id]/page.tsx	New component renders styled table of per-category metric aggregates with formatted score columns; integrated into evaluation detail page to display metrics when available.
Results Tables - Category Column Support app/components/evaluations/DetailedResultsTable.tsx, app/components/evaluations/GroupedResultsTable.tsx	Both tables conditionally render category column based on whether any row contains category data; column widths adjusted dynamically; categories displayed as badges or em dash placeholders.
CSV Import/Export & Layout Fixes app/lib/utils/evaluationExport.ts, app/(main)/evaluations/page.tsx, app/components/evaluations/CreateDatasetForm.tsx, app/layout.tsx	CSV export functions conditionally include category column; upload validation allows optional category header; format hints updated; suppressHydrationWarning added to root layout element.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• ProjectTech4DevAI/kaapi-frontend#80: Introduces shared DatasetsTab/EvaluationsTab components and barrel usage in evaluations page, overlapping with this PR's component refactoring and import consolidation.
• ProjectTech4DevAI/kaapi-frontend#56: Modifies DetailedResultsTable rendering logic; this PR adds conditional category column behavior while the related PR refactors score-format branching.
• ProjectTech4DevAI/kaapi-frontend#69: Both PRs modify CSV upload header validation on the evaluations page; this PR allows optional category column while the related PR adjusts CSV column expectations.

Suggested labels

enhancement

Suggested reviewers

• vprashrex
• Prajna1999
• AkhileshNegi

Poem

🐰 Whiskers twitching with delight,
Categories now shine so bright,
Metrics grouped with careful grace,
Each row finds its rightful place!
CSV flows with newfound care, ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Evaluation: Category-wise analytics for Evals' directly summarizes the main change—adding category-based analytics and metrics to the evaluation system, which aligns with the primary objectives of implementing category metrics tables and category columns across results.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/evals-category

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/components/evaluations/CategoryMetricsTable.tsx (1)

9-12: 💤 Low value

Consider extracting formatScore to a shared utility.

The formatScore helper formats scores to 3 decimal places with null-safe handling. This pattern may be useful in other components displaying evaluation scores.

♻️ Optional extraction to shared utility

Create app/lib/utils/formatting.ts (if it doesn't exist):

exportfunctionformatScore(value: number|null|undefined): string{if(value===null||value===undefined)return"—";returnvalue.toFixed(3);}

Then import and use across evaluation components:

-function formatScore(value: number | null): string {- if (value === null || value === undefined) return "—";- return value.toFixed(3);-}+import { formatScore } from "`@/app/lib/utils/formatting`";

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/components/evaluations/CategoryMetricsTable.tsx` around lines 9 - 12,
Extract the local helper formatScore into a shared utility module (e.g., export
function formatScore(value: number | null | undefined): string { if (value ==
null) return "—"; return value.toFixed(3); }) and replace the inline function in
CategoryMetricsTable with an import of that exported function; update any other
evaluation components to import and use the same formatScore to centralize
formatting and null-safe handling.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/layout.tsx`:
- Line 30: Remove the suppressHydrationWarning prop from the root <html> element
in app/layout.tsx (the RootLayout component) and instead locate the specific
element causing the mismatch (likely the Providers component or the
theme/provider that toggles classes) and apply suppressHydrationWarning only to
that element or fix the mismatch at its source; remove the prop from the html
tag, reproduce the hydration warning to identify the offending component (e.g.,
Providers, ThemeProvider, or a client-only toggle), and either fix the
server/client rendering inconsistency there or move the suppressHydrationWarning
to that specific component.
---
Nitpick comments:
In `@app/components/evaluations/CategoryMetricsTable.tsx`:
- Around line 9-12: Extract the local helper formatScore into a shared utility
module (e.g., export function formatScore(value: number | null | undefined):
string { if (value == null) return "—"; return value.toFixed(3); }) and replace
the inline function in CategoryMetricsTable with an import of that exported
function; update any other evaluation components to import and use the same
formatScore to centralize formatting and null-safe handling.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e6fc016b-8d6b-482a-b0aa-8e46d2793bde

📥 Commits

Reviewing files that changed from the base of the PR and between d4f0b82 and a8bebe8.

📒 Files selected for processing (16)

• app/(main)/evaluations/[id]/page.tsx
• app/(main)/evaluations/page.tsx
• app/components/evaluations/CategoryMetricsTable.tsx
• app/components/evaluations/CreateDatasetForm.tsx
• app/components/evaluations/DetailedResultsTable.tsx
• app/components/evaluations/EvalRunCard.tsx
• app/components/evaluations/GroupedResultsTable.tsx
• app/components/evaluations/index.ts
• app/components/icons/evaluations/index.ts
• app/hooks/index.ts
• app/hooks/usePaginatedList.ts
• app/layout.tsx
• app/lib/types/evaluation.ts
• app/lib/types/pagination.ts
• app/lib/utils/evaluation.ts
• app/lib/utils/evaluationExport.ts

[github-actions]

🎉 This PR is included in version 0.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 0.2.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 0.3.0-main.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀