[OPIK-2477] [FE] Add expand/collapse feedback score reasons toggle button #4127
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… and experiment tables
JetoPistola
force-pushed
the
danield/OPIK-2477-add-score-reason-optional-column
branch
from
f04509f to
85e33d8
Compare
- Add single 'Reasons' toggle button in toolbar instead of individual column settings - Reason columns now controlled by global showReasons state (persisted in localStorage) - Toggle button appears between row height selector and columns button - Button highlights when active (default variant) and shows outline when inactive - Applies to Experiments, Traces, and Threads tables consistently
- Move toggle button from toolbar to Columns menu under Feedback scores section - Button appears to the right of 'Feedback scores' title - Button text: 'Expand reasons' / 'Collapse reasons' with MessageSquareText icon - For Traces/Threads: Auto-switch row height from Small to Medium when expanding - Updated ColumnsButton to support optional action prop in sections - Applies to Experiments, Traces, and Threads tables consistently
… and fix vertical alignment
JetoPistola
force-pushed
the
danield/OPIK-2477-add-score-reason-optional-column
branch
from
8c1b4f8 to
252982f
Compare
JetoPistola
force-pushed
the
danield/OPIK-2477-add-score-reason-optional-column
branch
from
3c2da70 to
16ea198
Compare
…seExperimentsTableConfig
…seExperimentsTableConfig
JetoPistola
force-pushed
the
danield/OPIK-2477-add-score-reason-optional-column
branch
from
5fa9dab to
b753f17
Compare
JetoPistola
force-pushed
the
danield/OPIK-2477-add-score-reason-optional-column
branch
from
337e02c to
0b38cb7
Compare
Contributor
Collaborator
|
✅ Test environment is now available! Access Information
The deployment has completed successfully and the version has been verified. |
…score reasons display
JetoPistola
force-pushed
the
danield/OPIK-2477-add-score-reason-optional-column
branch
from
6d10939 to
8df202e
Compare
JetoPistola
force-pushed
the
danield/OPIK-2477-add-score-reason-optional-column
branch
from
192c822 to
a452951
Compare
JetoPistola
added
test-environment
Contributor
Collaborator
|
✅ Test environment is now available! Access Information
The deployment has completed successfully and the version has been verified. |
JetoPistola
added
test-environment
Contributor
JetoPistola
added
test-environment
Contributor
JetoPistola
added
test-environment
Contributor
Collaborator
|
✅ Test environment is now available! Access Information
The deployment has completed successfully and the version has been verified. |
Collaborator
|
✅ Test environment is now available! Access Information
The deployment has completed successfully and the version has been verified. |
Collaborator
|
✅ Test environment is now available! Access Information
The deployment has completed successfully and the version has been verified. |
…apply flex-wrap and overflow styles based on inline reasons visibility
JetoPistola
added
test-environment
Contributor
Collaborator
|
✅ Test environment is now available! Access Information
The deployment has completed successfully and the version has been verified. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
Screen.Recording.2025-11-26.at.16.50.49.mov
Screen.Recording.2025-11-26.at.16.49.55.mov
Added an "Expand reasons" toggle in the Columns menu to display feedback score reasons inline within the same cell when row size is Medium or Large.
Problem: Currently, the "score reason" field is only visible via hover tooltips, limiting readability and making it difficult to compare reasoning across multiple rows.
Solution: Introduced an "Expand reasons" / "Collapse reasons" toggle button in the Columns menu (next to "Feedback scores" section) that displays reasons inline within feedback score cells. This provides a clean, contextual UX without adding extra columns or cluttering the UI.
Implementation Approach
Contextual Toggle in Columns Menu ✨
Technical Details
Created Components:
FeedbackScoreReasonToggle- Reusable toggle button component with visibility logicUpdated Components:
FeedbackScoreCell- Displays reasons inline whenshowReasonsis true and row height is Medium/LargeCompareExperimentsFeedbackScoreCell- Same inline reason display for experiment comparisonsuseExperimentsTableConfig- Manages toggle state and passes it to column sectionsColumnsButton- Enhanced to support action elements in column sectionsUpdated Table Pages:
ExperimentsPage- Added showReasons state and toggle integrationTracesSpansTab- Added toggle with automatic row height adjustmentThreadsTab- Added toggle with automatic row height adjustmentTraceQueueItemsTab- Added toggle with automatic row height adjustmentThreadQueueItemsTab- Added toggle with automatic row height adjustmentPromptPage/ExperimentsTab- Integrated with hook's column sectionsFeatures:
line-clamp-3(max 3 lines with ellipsis)overflow-hiddenprevents content from spilling into cells belowbreak-wordsensures proper text wrapping within cell boundariesChange checklist
Issues
Testing
Manual testing steps:
Changes:
FeedbackScoreReasonTogglereusable component with visibility logicFeedbackScoreCellandCompareExperimentsFeedbackScoreCellfor inline reason displayColumnsButtonto support action elements in column sectionsDocumentation
No documentation changes required - UI is self-explanatory with the contextual toggle in Columns menu.