[OPIK-4043] [FE] Update table action buttons to icon-only with tooltips #4915
+99
−76
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
… to icon-only with tooltips - Convert DataTableRowHeightSelector to icon-only button with tooltip - Convert ColumnsButton to icon-only button with tooltip - Convert Add tags buttons to icon-only in action panels (5 files) - Convert Evaluate buttons to icon-only in action panels (2 files) This improves UX by making table toolbars more compact while maintaining accessibility through tooltips on hover. Filters and Groups buttons will be updated in a future commit.
- Add tooltip support to FiltersButton when in icon layout - Add tooltip support to GroupsButton when in icon layout - Update 6 FiltersButton usages to use layout="icon" - Update 2 GroupsButton usages to use layout="icon" All table action buttons now use icon-only layout with tooltips for improved UX and more compact table toolbars.
…sion tags button - Update 13 additional FiltersButton usages to layout="icon": - AnnotationQueuesPage - DatasetsPage - DatasetItemsPage (old and new) - DatasetItemsTab (old) - AnnotationQueuePage (TraceQueueItemsTab, ThreadQueueItemsTab) - AnnotationQueuesTab - PromptsPage - CommitsTab - OptimizationsPage - CompareExperimentsPage - AlertsPage - Convert Add version tags button to icon-only in CommitsActionsPanel All table action buttons now consistently use icon-only layout with tooltips.
Contributor
|
🔄 Test environment deployment process has started Phase 1: Deploying base version You can monitor the progress here. |
Collaborator
|
✅ Test environment is now available! To configure additional Environment variables for your environment, run [Deploy Opik AdHoc Environment workflow] (https://github.com/comet-ml/comet-deployment/actions/workflows/deploy_opik_adhoc_env.yaml) 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
Before:
After:
This PR converts all table action buttons from text buttons to icon-only buttons with tooltips for improved UX and more compact table toolbars.
Changes Made
Reusable Components (4 components):
DataTableRowHeightSelector- Converted to icon-only with "Rows" tooltipColumnsButton- Converted to icon-only with "Columns" tooltipFiltersButton- Added tooltip support when in icon layoutGroupsButton- Added tooltip support when in icon layoutAction Panel Buttons (6 panels):
ThreadsActionsPanel- Add tags & Evaluate buttons → icon-onlyTracesActionsPanel- Add tags & Evaluate buttons → icon-onlyExperimentsActionsPanel- Add tags button → icon-onlyDatasetItemsActionsPanel- Add tags button → icon-onlyDatasetItemsActionsPanel (Legacy)- Add tags button → icon-onlyCommitsActionsPanel- Add version tags button → icon-onlyButton Usages Updated (21 files):
layout="icon"layout="icon"Implementation Details
size="icon-sm"(32x32px) for consistencyTooltipWrappercomponentsize-3.5) matching Figma designFiles Modified
29 files changed, 99 insertions(+), 76 deletions(-)
Change checklist
Issues
Testing
Manual Testing Required:
Pages to Test:
Buttons to Verify:
Documentation
N/A - UI change only, no documentation updates required