Skip to content

[OPIK-3008] [FE] Refactor: NavigationTag infrastructure#3972

Merged
JetoPistola merged 2 commits intomainfrom
danield/OPIK-3008-navigation-tag-infra
Nov 9, 2025
Merged

[OPIK-3008] [FE] Refactor: NavigationTag infrastructure#3972
JetoPistola merged 2 commits intomainfrom
danield/OPIK-3008-navigation-tag-infra

Conversation

@JetoPistola
Copy link
Copy Markdown
Contributor

@JetoPistola JetoPistola commented Nov 7, 2025

Details

Refactored tooltip infrastructure for resource navigation tags by creating a reusable NavigationTag component that generates consistent tooltip text across the application.

Changes:

  • Added label field to RESOURCE_MAP in ResourceLink.tsx for all resource types (project, dataset, prompt, experiment, optimization run, trial, annotation queue)
  • Created NavigationTag component that automatically generates tooltip text: "Navigate to {resourceLabel}: {name}"
  • Refactored AnnotationQueuePage to use the new NavigationTag component, removing manual tooltip content generation
  • Improved code maintainability by following DRY principles

Implementation:

  • New component: src/components/shared/NavigationTag/NavigationTag.tsx
  • Component accepts id, name, and resource props
  • Dynamically generates tooltip content based on resource type
  • Renders ResourceLink with asTag prop for consistent styling

Change checklist

  • User facing
  • Documentation update

Issues

Testing

  • Manual testing: Navigate to annotation queue page
  • Verify tooltip appears on hover with correct text format: "Navigate to project: {project_name}"
  • Verify clicking the tag navigates to the correct resource page
  • Component can be easily extended to other pages displaying resource tags

Documentation

No documentation update needed - internal frontend refactor.
Component usage pattern established for future implementations.

@JetoPistola JetoPistola requested a review from a team as a code owner November 7, 2025 07:48
Copilot AI review requested due to automatic review settings November 7, 2025 07:48
@JetoPistola JetoPistola requested a review from aadereiko November 7, 2025 07:48
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 refactors the tooltip infrastructure for resource navigation tags by creating a reusable NavigationTag component that centralizes tooltip text generation. The main goal is to improve code maintainability by following DRY principles and establishing a consistent pattern for displaying navigable resource tags with tooltips.

Key changes:

  • Extended RESOURCE_MAP with human-readable label fields for all resource types
  • Created new NavigationTag component that automatically generates standardized tooltip text
  • Refactored AnnotationQueuePage to use the new component, eliminating manual tooltip content construction

Reviewed Changes

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

File Description
ResourceLink.tsx Added label field to each resource type in RESOURCE_MAP and exported the map for external use
NavigationTag/index.ts Created barrel export for the new NavigationTag component
NavigationTag/NavigationTag.tsx Implemented new component that wraps ResourceLink with auto-generated tooltip text
AnnotationQueuePage.tsx Replaced ResourceLink with NavigationTag, removing manual tooltip content generation

@JetoPistola JetoPistola added Frontend Infrastructure test-environment Deploy Opik adhoc environment and removed test-environment Deploy Opik adhoc environment labels Nov 7, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Nov 7, 2025

🔄 Test environment deployment started

Building images for PR #3972...

You can monitor the build progress here.

@CometActions
Copy link
Copy Markdown
Collaborator

Test environment is now available!

Access Information

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

@JetoPistola JetoPistola added the test-environment Deploy Opik adhoc environment label Nov 9, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Nov 9, 2025

🔄 Test environment deployment started

Building images for PR #3972...

You can monitor the build progress here.

@CometActions
Copy link
Copy Markdown
Collaborator

Test environment is now available!

Access Information

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

@JetoPistola JetoPistola merged commit 672798b into main Nov 9, 2025
40 checks passed
@JetoPistola JetoPistola deleted the danield/OPIK-3008-navigation-tag-infra branch November 9, 2025 06:16
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)
awkoy pushed a commit that referenced this pull request Nov 12, 2025
* [OPIK-3008] [FE] Refactor: Add NavigationTag infrastructure
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.

4 participants