-
[OPIK-2477] [FE] Expand/collapse feedback score reasons, according to rows size (#4127)
frostbyte_neo 发布于
2025-12-03 08:28:53 +00:00 -
[OPIK-2477] [FE] Add score reason as optional column in trace, thread and experiment tables
-
Revision 2: Refactor to use global toggle for score reason columns
- 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
- Revision 3: Relocate reasons toggle to Columns menu
- 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
-
Revision 2: Show score reasons inline when row height is Medium/Large
-
Revision 3: Keep score and reason on same line, add to all resource pages
-
Revision 4: Align reason button with section title, match font size
-
Revision 5: Create reusable FeedbackScoreReasonToggle component (DRY) and fix vertical alignment
-
Revision 6: Add self-start alignment to reasons toggle button
-
Revision 7: Move self-start alignment to wrapper div in ColumnsButton
-
Revision 8: Remove bold font, increase spacing, add margin to toggle
-
Revision 9: Stack title and toggle button vertically (separate lines)
-
Revision 9: Allow label and toggle to wrap naturally with flex-wrap
-
Revision 10: Keep label and toggle on same line together with whitespace-nowrap
-
Revision 11: Increase dropdown menu width to prevent horizontal scroll
-
Revision 12: Remove unused FeedbackScoreReasonCell component
-
Revision 13: Remove obsolete comments from useExperimentsTableConfig
-
Revision 13: Remove obsolete comments and use cleaner arrow function syntax
-
Revision 14: Restore original scoresColumnsData format with array spread
-
Revision 14: Use TableMeta type and destructure meta properly
-
Revision 15: Use array includes for row height check
-
Revision 16: Encapsulate visibility logic in FeedbackScoreReasonToggle component
-
Revision 17: Return columnSections directly from hook without useMemos
-
Make showReasons and setShowReasons optional props with defaults in useExperimentsTableConfig
-
Make showReasons and setShowReasons optional props with defaults in useExperimentsTableConfig
-
Revision 18: Allow inline reasons to be multiline with proper truncation
-
Revision 19: Prevent inline reasons from overflowing into cells below
-
Revision 20: Add tooltip to show full reasons when truncated
-
Revision 21: Refactor to avoid duplicating tooltip wrapper
-
Revision 22: Apply linter fixes to FeedbackScoreReasonToggle
-
Apply suggestion from @JetoPistola
-
Revision 23: Add expand reasons toggle to ExperimentItemsTab
-
Revision 24: Fix inline reasons display in CompareExperimentsFeedbackScoreCell
-
Revision 26: Make row height the single source of truth for feedback score reasons display
-
Revision 28: Remove action support from ColumnsButton
-
Update DataTableRowHeightSelector labels for clarity
-
Refactor CompareExperimentsFeedbackScoreCell layout to conditionally apply flex-wrap and overflow styles based on inline reasons visibility
-
Refactor feedback score display logic to simplify inline reasons visibility. Updated conditions to show reasons based on row height, enhancing code clarity and maintainability across multiple components.
-
Remove unused 'showReasons' property from DataTable type definition to enhance code clarity and maintainability.
-
Revision 3: Fix alignment - ensure feedback score reasons display below score at top-right
-
Revision 4: Add self-start to ensure content starts at top of cell
-
Revision 6: Fix vertical alignment - use justify-start for flex-col to position content at top
-
Refactor feedback score cell components to improve layout handling based on row height. Introduced 'isSmall' variable for better readability and adjusted inline reasons display logic for consistency across components.
下载附件
-