Skip to content

[OPIK-2992] [FE] Add tooltips to DateTag component#4005

Merged
JetoPistola merged 3 commits intomainfrom
danield/OPIK-2992-datetag-with-tooltip
Nov 9, 2025
Merged

[OPIK-2992] [FE] Add tooltips to DateTag component#4005
JetoPistola merged 3 commits intomainfrom
danield/OPIK-2992-datetag-with-tooltip

Conversation

@JetoPistola
Copy link
Copy Markdown
Contributor

@JetoPistola JetoPistola commented Nov 9, 2025

Details

image image image

Enhanced the DateTag component to provide better UX by displaying context-aware tooltips on hover. The tooltip shows resource-specific creation time information (e.g., "Experiment creation time", "Dataset creation time").

Implementation:

  • Updated DateTag component to accept a resource prop for context
  • Wrapped Tag with TooltipWrapper to display contextual help text
  • Leveraged existing RESOURCE_MAP to generate appropriate tooltip labels
  • Added capitalize utility for proper text formatting

Pages Updated:

  • AnnotationQueuePage
  • CompareExperimentsDetails
  • CompareTrialsDetails
  • DatasetItemsPage
  • PromptPage

This change improves user experience by making the purpose of date tags clearer without cluttering the UI.

Change checklist

  • User facing
  • Documentation update

Issues

  • Resolves N/A
  • OPIK-2992
  • Part of parent story: OPIK-2991

Testing

Manual Testing:

  • Verified tooltips appear on hover for DateTag in all updated pages
  • Confirmed tooltip text format: "{Resource} creation time" (e.g., "Experiment creation time")
  • Tested across different resource types: annotation queue, experiment, trial, dataset, prompt
  • Verified no visual regression in date tag appearance

Quality Checks:

  • ✅ ESLint passed
  • ✅ TypeScript type checking passed

Documentation

No documentation updates required - this is a UI enhancement that improves existing functionality without changing behavior or APIs.

Enhanced DateTag component with context-aware tooltips that display resource-specific creation time information. Updated DateTag to accept a resource prop and wrapped it with TooltipWrapper to show contextual help text like 'Experiment creation time', 'Dataset creation time', etc.

Updated the following pages to pass resource context:
- AnnotationQueuePage
- CompareExperimentsDetails
- CompareTrialsDetails
- DatasetItemsPage
- PromptPage

Implements OPIK-2992: DateTag with tooltip
@JetoPistola JetoPistola requested a review from a team as a code owner November 9, 2025 06:41
Copilot AI review requested due to automatic review settings November 9, 2025 06:41
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR enhances the DateTag component with context-aware tooltips to improve user experience. When hovering over date tags, users now see descriptive tooltips (e.g., "Experiment creation time", "Dataset creation time") that clarify what the date represents.

Key changes:

  • Modified DateTag component to accept a resource prop and display resource-specific tooltips
  • Updated five pages to pass the appropriate resource type to DateTag
  • Removed redundant tooltip wrapper from AnnotationQueuePage in favor of the new built-in tooltip

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file
File Description
DateTag.tsx Added resource prop and TooltipWrapper to display contextual creation time information
PromptPage.tsx Updated DateTag usage to include RESOURCE_TYPE.prompt
DatasetItemsPage.tsx Updated DateTag usage to include RESOURCE_TYPE.dataset
CompareTrialsDetails.tsx Updated DateTag usage to include RESOURCE_TYPE.trial
CompareExperimentsDetails.tsx Updated DateTag usage to include RESOURCE_TYPE.experiment
AnnotationQueuePage.tsx Replaced manual tooltip wrapper with new built-in DateTag tooltip using RESOURCE_TYPE.annotationQueue

@JetoPistola JetoPistola merged commit 75f9584 into main Nov 9, 2025
8 checks passed
@JetoPistola JetoPistola deleted the danield/OPIK-2992-datetag-with-tooltip branch November 9, 2025 13:08
vincentkoc added a commit that referenced this pull request Nov 10, 2025
 into feat/optimizer-hybrid

* 'feat/optimizer-hybrid' of https://github.com/comet-ml/opik:
  [OPIK-2986] [FE] Refactor comparison pages to use NavigationTag component (#4006)
  [OPIK-2992] [FE] Add tooltips to DateTag component (#4005)
  [OPIK-2993] [FE] Add tooltips to feedback scores and tags icons (#4007)
  [OPIK-3008] [FE] Refactor: NavigationTag infrastructure (#3972)
vincentkoc added a commit that referenced this pull request Nov 10, 2025
 into vk/optimizer-oa_agent

* 'vk/optimizer-oa_agent' of https://github.com/comet-ml/opik:
  [issue-2520] [SDK] Added Sycophancy Evaluation Metric (#2624)
  [OPIK-2986] [FE] Refactor comparison pages to use NavigationTag component (#4006)
  [OPIK-2992] [FE] Add tooltips to DateTag component (#4005)
  [OPIK-2993] [FE] Add tooltips to feedback scores and tags icons (#4007)
  [OPIK-3008] [FE] Refactor: NavigationTag infrastructure (#3972)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants