Skip to content

Evaluation table UI & Handle Temp Value for GPT-5 models#104

Merged
Ayush8923 merged 4 commits intomainfrom
fix/evalutation-result-table-UI
Apr 6, 2026
Merged

Evaluation table UI & Handle Temp Value for GPT-5 models#104
Ayush8923 merged 4 commits intomainfrom
fix/evalutation-result-table-UI

Conversation

@Ayush8923
Copy link
Copy Markdown
Collaborator

@Ayush8923 Ayush8923 commented Apr 2, 2026

Summary:

  • Fix the evaluation table UI because of text columns have overflow-auto but no word-break or word-wrap style, so long text without spaces won't wrap. Also, the table needs table-layout: fixed to enforce the column widths.
  • Handle the temp value in library for GPT-5 models.

Release Notes

  • Style
    • Improved table sizing and column behavior for better horizontal layout and overflow handling.
    • Standardized text styling in results tables: updated color, line-height, max height, and added word-wrapping to prevent overflow.
    • Adjusted background tone in grouped results for clearer visual consistency.

Summary by CodeRabbit

  • Style

    • Improved table sizing and column behavior for better horizontal layout and overflow handling.
    • Standardized text styling in results tables and added word-wrapping to prevent overflow.
    • Adjusted background tone in grouped results for clearer visual consistency.
  • Bug Fixes

    • Temperature badge and related UI now only display when a temperature value exists, preventing incorrect or empty renderings.

@Ayush8923 Ayush8923 self-assigned this Apr 2, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 2, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4545401d-b664-44af-98b9-a28af67a19d2

📥 Commits

Reviewing files that changed from the base of the PR and between 60045ae and 69060fa.

📒 Files selected for processing (1)
  • app/components/prompt-editor/DiffView.tsx

📝 Walkthrough

Walkthrough

Replaced inline styles with Tailwind utility classes in table components and tightened temperature rendering checks across ConfigCard, ConfigDrawer, ConfigSelector, and prompt-editor to avoid formatting null values and hide temperature when absent or for GPT‑5.

Changes

Cohort / File(s) Summary
Table styling
app/components/DetailedResultsTable.tsx, app/components/GroupedResultsTable.tsx
Replaced inline styles with Tailwind utilities: added min-w-[800px], table-fixed, swapped inline colors for text-text-secondary/text-[#171717], normalized line-height (leading-normal/leading-6), added max-h-[150px] and wrap-break-word. Changed ground-truth bg from bg-[#fafafa] to bg-bg-secondary.
Config UI: temperature handling
app/components/ConfigCard.tsx, app/components/ConfigDrawer.tsx, app/components/ConfigSelector.tsx, app/components/prompt-editor/DiffView.tsx
Guarded temperature rendering/formatting: only render temp when value != null, avoid calling .toFixed on null, narrowed ConfigDrawer condition to !isGpt5 && currentConfig.temperature != null, and used non-null assertion where presence is already checked.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • Prajna1999
  • AkhileshNegi

Poem

🐇 I nibbled inline styles, hopped to Tailwind fields,
Hid chilly temps where nulls won't yield,
Rows now tidy, colors set right,
A tiny rabbit's code-hop at night,
Snug tables, calm—my work is sealed.

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately captures both main changes: UI improvements to evaluation tables (styling, text wrapping, table layout) and temperature value handling for GPT-5 models.

✏️ 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 fix/evalutation-result-table-UI

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

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

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
app/components/DetailedResultsTable.tsx (2)

490-490: Inconsistent line-height value.

Line 490 uses leading-6 while all other similar cells (lines 233, 243, 250, 469, 476) use leading-normal. This creates visual inconsistency between the row-format and grouped-format answer cells.

Proposed fix
- <div className="text-sm overflow-auto text-[`#171717`] leading-6 max-h-[150px] wrap-break-word">
+ <div className="text-sm overflow-auto text-[`#171717`] leading-normal max-h-[150px] break-words">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/components/DetailedResultsTable.tsx` at line 490, The row uses a
different Tailwind line-height class causing visual inconsistency: in the
DetailedResultsTable component replace the mismatched class on the div with
className "text-sm overflow-auto text-[`#171717`] leading-6 max-h-[150px]
wrap-break-word" so it uses the same line-height as other cells (change
leading-6 to leading-normal) to match the grouped-format answer cells.

233-233: Hardcoded color values violate coding guidelines.

Using text-[#171717] embeds color values directly in Tailwind classes. Per coding guidelines, colors should reference the colors object via inline styles, or use the theme variables defined in globals.css (e.g., text-text-primary which maps to --color-text-primary: #171717``).

Proposed fix using theme variable
- <div className="text-sm overflow-auto text-[`#171717`] leading-normal max-h-[150px] break-words">
+ <div className="text-sm overflow-auto text-text-primary leading-normal max-h-[150px] break-words">

Based on learnings: "All Tailwind CSS classes should be used for layout and spacing only, with color values always referencing the colors object from /app/lib/colors.ts"

Also applies to: 243-243, 250-250, 469-469, 476-476, 490-490

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/components/DetailedResultsTable.tsx` at line 233, In
DetailedResultsTable.tsx, replace hardcoded Tailwind color classes like
"text-[`#171717`]" used in the className for the table cell/container with the
project theme variable (e.g., "text-text-primary") or apply an inline style that
pulls from the shared colors object (from app/lib/colors.ts or CSS custom
property --color-text-primary) so color values come from the centralized theme;
update the same pattern in the other occurrences noted (the other className uses
at the same component) to ensure all text color classes reference the theme
variable instead of hex literals.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/components/DetailedResultsTable.tsx`:
- Line 233: The Tailwind class "wrap-break-word" is invalid so word-wrapping
isn't applied; update the className strings in DetailedResultsTable.tsx where
"wrap-break-word" is used (the div at the shown diff and the other occurrences
noted in the PR) to use the correct Tailwind utility "break-words" instead;
search for "wrap-break-word" in DetailedResultsTable.tsx and replace each
instance with "break-words" (check the className on the divs around the
long-text cells to ensure spacing/order of classes remains correct).

---

Nitpick comments:
In `@app/components/DetailedResultsTable.tsx`:
- Line 490: The row uses a different Tailwind line-height class causing visual
inconsistency: in the DetailedResultsTable component replace the mismatched
class on the div with className "text-sm overflow-auto text-[`#171717`] leading-6
max-h-[150px] wrap-break-word" so it uses the same line-height as other cells
(change leading-6 to leading-normal) to match the grouped-format answer cells.
- Line 233: In DetailedResultsTable.tsx, replace hardcoded Tailwind color
classes like "text-[`#171717`]" used in the className for the table cell/container
with the project theme variable (e.g., "text-text-primary") or apply an inline
style that pulls from the shared colors object (from app/lib/colors.ts or CSS
custom property --color-text-primary) so color values come from the centralized
theme; update the same pattern in the other occurrences noted (the other
className uses at the same component) to ensure all text color classes reference
the theme variable instead of hex literals.
🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4a5f6ea4-86af-4660-9d0d-7a428085abb2

📥 Commits

Reviewing files that changed from the base of the PR and between d3f11ec and e5ce9ac.

📒 Files selected for processing (1)
  • app/components/DetailedResultsTable.tsx

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
app/components/ConfigCard.tsx (1)

255-267: Align SavedConfig.temperature type with actual nullability.

Line 255 guards temperature as nullable, but SavedConfig.temperature is typed as non-null number. Either update the type to number | null (if the API can omit temperature) or remove the unnecessary null check (if temperature is guaranteed at runtime). This inconsistency should be resolved to keep the type contract precise across all components.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/components/ConfigCard.tsx` around lines 255 - 267, The component guards
latestVersion.temperature for nullability but SavedConfig.temperature is
declared as a non-null number; update the SavedConfig type to reflect actual
nullability (change SavedConfig.temperature to number | null) and keep the
runtime null guard in ConfigCard.tsx (latestVersion.temperature) so consumers
and type-checking match runtime behavior; also scan for other usages of
SavedConfig.temperature (constructors, serializers, or other components) and
update logic or add null-aware handling where necessary.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@app/components/ConfigCard.tsx`:
- Around line 255-267: The component guards latestVersion.temperature for
nullability but SavedConfig.temperature is declared as a non-null number; update
the SavedConfig type to reflect actual nullability (change
SavedConfig.temperature to number | null) and keep the runtime null guard in
ConfigCard.tsx (latestVersion.temperature) so consumers and type-checking match
runtime behavior; also scan for other usages of SavedConfig.temperature
(constructors, serializers, or other components) and update logic or add
null-aware handling where necessary.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d34f97e9-d13a-4504-9b5b-0eddeea202f8

📥 Commits

Reviewing files that changed from the base of the PR and between 687c6d1 and 60045ae.

📒 Files selected for processing (3)
  • app/components/ConfigCard.tsx
  • app/components/ConfigDrawer.tsx
  • app/components/ConfigSelector.tsx
✅ Files skipped from review due to trivial changes (2)
  • app/components/ConfigDrawer.tsx
  • app/components/ConfigSelector.tsx

@Ayush8923 Ayush8923 changed the title Evaluation table UI Evaluation table UI & Handle Temp Value for GPT-5 models Apr 3, 2026
<div className="overflow-x-auto">
<table className="w-full border-collapse" style={{ minWidth: "800px" }}>
<table className="w-full border-collapse min-w-[800px] table-fixed">
{/* Table Header */}
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove GPT-4, GPT-4-Turbo and GPT-3.5-turbo as they are supeceded/or deprecated for better models. In the right configuration pane Type for Speech-to-Text and Text-to-Speech should be unselectable from the dropdown.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can handle this in another PR. The reason is that if I remove it for STT or TTS, I’ll need to recheck the entire flow and ensure there are no breaking changes. So for now, I want to avoid including it in this PR and proceed with a safe release.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the STT/TTS type was not enabled so nothing should break imo, but I think you are right. Approving

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I will remove these models from STT/TTS flow in another PR.

@Ayush8923 Ayush8923 merged commit 5eb3566 into main Apr 6, 2026
2 checks passed
@Ayush8923 Ayush8923 deleted the fix/evalutation-result-table-UI branch April 6, 2026 03:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants