opik icon indicating copy to clipboard operation
opik copied to clipboard
Published 1 month ago • verified publisher icon comet-ml

[OPIK-2477] [FE] Add expand/collapse feedback score reasons toggle button

Open JetoPistola opened this issue 1 month ago • 16 comments

Details

https://github.com/user-attachments/assets/615bc0ff-6edb-4a0b-b3fa-e268d139d134

https://github.com/user-attachments/assets/5042de3e-1bbd-4a6c-885b-37269da6c6bb

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 ✨

  • Added "Expand reasons" / "Collapse reasons" button in the Columns menu, next to "Feedback scores"
  • When expanded: Score reasons appear inline below the score value in the same cell (when row height is Medium or Large)
  • When collapsed: Reasons are only visible via tooltip icons
  • Automatically adjusts row height from Small to Medium when expanding (if currently Small)
  • Button is only visible when at least one feedback score column is selected
  • State persisted in localStorage per table type

Technical Details

Created Components:

  • FeedbackScoreReasonToggle - Reusable toggle button component with visibility logic

Updated Components:

  • FeedbackScoreCell - Displays reasons inline when showReasons is true and row height is Medium/Large
  • CompareExperimentsFeedbackScoreCell - Same inline reason display for experiment comparisons
  • useExperimentsTableConfig - Manages toggle state and passes it to column sections
  • ColumnsButton - Enhanced to support action elements in column sections

Updated Table Pages:

  • ExperimentsPage - Added showReasons state and toggle integration
  • TracesSpansTab - Added toggle with automatic row height adjustment
  • ThreadsTab - Added toggle with automatic row height adjustment
  • TraceQueueItemsTab - Added toggle with automatic row height adjustment
  • ThreadQueueItemsTab - Added toggle with automatic row height adjustment
  • PromptPage/ExperimentsTab - Integrated with hook's column sections

Features:

  • Reasons display inline in the same cell (below score value)
  • Multiline support with line-clamp-3 (max 3 lines with ellipsis)
  • overflow-hidden prevents content from spilling into cells below
  • break-words ensures proper text wrapping within cell boundaries
  • Supports multi-value feedback scores (joins multiple reasons with ", ")
  • Only shows toggle when feedback score columns are selected
  • Clean UI - toggle is contextual and only appears when relevant
  • Consistent behavior across all table types (Experiments, Traces, Threads, Annotation Queues)

Change checklist

  • [x] User facing
  • [x] Documentation update

Issues

  • OPIK-2477

Testing

Manual testing steps:

  1. Navigate to Experiments/Traces/Threads/Annotation Queue tables
  2. Ensure at least one feedback score column is visible
  3. Open the Columns menu and locate the "Expand reasons" button next to "Feedback scores"
  4. Click "Expand reasons" - verify row height adjusts to Medium if it was Small
  5. Verify reasons appear inline below score values in Medium/Large rows
  6. Verify reasons wrap properly within cell boundaries (max 3 lines with ellipsis)
  7. Verify content doesn't overflow into cells below
  8. Click "Collapse reasons" - verify reasons return to tooltip-only display
  9. Hide all feedback score columns - verify toggle button disappears
  10. Test with multi-value feedback scores (multiple reasons joined with ", ")
  11. Verify state persists after page refresh
  12. Test across all table types (Experiments, Traces spans, Threads, Queue items)

Changes:

  • Created FeedbackScoreReasonToggle reusable component with visibility logic
  • Updated FeedbackScoreCell and CompareExperimentsFeedbackScoreCell for inline reason display
  • Enhanced ColumnsButton to support action elements in column sections
  • Integrated toggle into all relevant table pages
  • Added automatic row height adjustment when expanding from Small
  • Implemented multiline support with proper overflow constraints
  • Verified toggle visibility based on selected score columns
  • Tested state persistence in localStorage

Documentation

No documentation changes required - UI is self-explanatory with the contextual toggle in Columns menu.

JetoPistola avatar Nov 19 '25 14:11 JetoPistola

🔄 Test environment deployment started

Building images for PR #4127...

You can monitor the build progress here.

github-actions[bot] avatar Nov 26 '25 14:11 github-actions[bot]

✅ Test environment is now available!

Access Information

  • URL: https://pr-4127.dev.comet.com
  • Cluster: comet-ml-development
  • Namespace: pr-4127
  • Version: 1.9.19-4127-merge-543
  • Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

CometActions avatar Nov 26 '25 14:11 CometActions

🔄 Test environment deployment started

Building images for PR #4127...

You can monitor the build progress here.

github-actions[bot] avatar Nov 26 '25 14:11 github-actions[bot]

✅ Test environment is now available!

Access Information

  • URL: https://pr-4127.dev.comet.com
  • Cluster: comet-ml-development
  • Namespace: pr-4127
  • Version: 1.9.19-4127-merge-545
  • Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

CometActions avatar Nov 26 '25 14:11 CometActions

🔄 Test environment deployment started

Building images for PR #4127...

You can monitor the build progress here.

github-actions[bot] avatar Nov 26 '25 17:11 github-actions[bot]

✅ Test environment is now available!

Access Information

  • URL: https://pr-4127.dev.comet.com
  • Cluster: comet-ml-development
  • Namespace: pr-4127
  • Version: 1.9.19-4127-merge-548
  • Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

CometActions avatar Nov 26 '25 17:11 CometActions

🔄 Test environment deployment started

Building images for PR #4127...

You can monitor the build progress here.

github-actions[bot] avatar Nov 27 '25 14:11 github-actions[bot]

✅ Test environment is now available!

Access Information

  • URL: https://pr-4127.dev.comet.com
  • Cluster: comet-ml-development
  • Namespace: pr-4127
  • Version: 1.9.19-4127-merge-560
  • Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

CometActions avatar Nov 27 '25 14:11 CometActions

🔄 Test environment deployment started

Building images for PR #4127...

You can monitor the build progress here.

github-actions[bot] avatar Nov 27 '25 17:11 github-actions[bot]

🔄 Test environment deployment started

Building images for PR #4127...

You can monitor the build progress here.

github-actions[bot] avatar Nov 27 '25 17:11 github-actions[bot]

🔄 Test environment deployment started

Building images for PR #4127...

You can monitor the build progress here.

github-actions[bot] avatar Nov 27 '25 17:11 github-actions[bot]

✅ Test environment is now available!

Access Information

  • URL: https://pr-4127.dev.comet.com
  • Cluster: comet-ml-development
  • Namespace: pr-4127
  • Version: 1.9.19-4127-merge-564
  • Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

CometActions avatar Nov 27 '25 17:11 CometActions

✅ Test environment is now available!

Access Information

  • URL: https://pr-4127.dev.comet.com
  • Cluster: comet-ml-development
  • Namespace: pr-4127
  • Version: 1.9.19-4127-merge-565
  • Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

CometActions avatar Nov 27 '25 17:11 CometActions

✅ Test environment is now available!

Access Information

  • URL: https://pr-4127.dev.comet.com
  • Cluster: comet-ml-development
  • Namespace: pr-4127
  • Version: 1.9.19-4127-merge-566
  • Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

CometActions avatar Nov 27 '25 17:11 CometActions

🔄 Test environment deployment started

Building images for PR #4127...

You can monitor the build progress here.

github-actions[bot] avatar Nov 27 '25 18:11 github-actions[bot]

✅ Test environment is now available!

Access Information

  • URL: https://pr-4127.dev.comet.com
  • Cluster: comet-ml-development
  • Namespace: pr-4127
  • Version: 1.9.19-4127-merge-572
  • Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

CometActions avatar Nov 27 '25 18:11 CometActions

🔄 Test environment deployment started

Building images for PR #4127...

You can monitor the build progress here.

github-actions[bot] avatar Dec 02 '25 15:12 github-actions[bot]

✅ Test environment is now available!

Access Information

  • URL: https://pr-4127.dev.comet.com
  • Cluster: comet-ml-development
  • Namespace: pr-4127
  • Version: 1.9.38-4127-merge-620
  • Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

CometActions avatar Dec 02 '25 15:12 CometActions

🔄 Test environment deployment started

Building images for PR #4127...

You can monitor the build progress here.

github-actions[bot] avatar Dec 03 '25 06:12 github-actions[bot]

✅ Test environment is now available!

Access Information

  • URL: https://pr-4127.dev.comet.com
  • Cluster: comet-ml-development
  • Namespace: pr-4127
  • Version: 1.9.38-4127-merge-626
  • Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

CometActions avatar Dec 03 '25 07:12 CometActions