[OPIK-2983] [FE] Fix aggregation change triggering unwanted sort

[JetoPistola]

Details

Screen.Recording.2025-11-16.at.17.01.51.mov

Fixed a bug where changing the aggregation type (p50/p90/p99 or avg/sum) in table column headers was unintentionally triggering column sorting.

Root Cause: Click events from the HeaderStatistic dropdown component were bubbling up to the HeaderWrapper's onClick handler, which is used for sorting.

Solution: Added event.stopPropagation() to the statistics section wrapper in HeaderWrapper.tsx to prevent click events from reaching the parent sort handler while preserving the sorting functionality when clicking on the column header text.

Impact: This fix applies to all tables using statistics headers:

• Traces table (Duration, Cost, Token columns)
• Spans table (Duration, Cost, Token columns)
• Experiments comparison table (Duration column)
• Annotation queues (Duration column)

Change checklist

• User facing
• Documentation update

Issues

• OPIK-2983

Testing

Manual testing scenarios completed:

1. Trace table - Duration column:

   • Navigate to Traces tab
   • Click Duration column aggregation dropdown
   • Change between p50, p90, p99
   • ✅ Verified: Only the statistic value changes, no sorting triggered
   • ✅ Verified: Clicking column header (outside dropdown) still sorts correctly

2. Cost/Token columns:

   • Test avg ↔ sum toggle in Estimated cost and token columns
   • ✅ Verified: No sorting triggered when changing aggregation

3. Experiments comparison:

   • Compare multiple experiments
   • Test aggregation dropdown in Duration column
   • ✅ Verified: Same behavior as traces table

Affected components:

• All tables using HeaderWrapper with statistics (Traces, Spans, Experiments, Annotation queues)

Code changes:

• Modified: apps/opik-frontend/src/components/shared/DataTableHeaders/HeaderWrapper.tsx
• Added: onClick={(e) => e.stopPropagation()} to statistics section wrapper (line 58)

Documentation

No documentation changes needed - this is a bug fix for existing functionality that restores the intended behavior.

[Copilot]

Pull Request Overview

This PR fixes a bug where clicking aggregation type dropdowns (p50/p90/p99 or avg/sum) in table column headers was unintentionally triggering column sorting. The fix adds event propagation stopping to the statistics section wrapper, preventing click events from bubbling up to the parent sort handler.

Key Changes:

• Added stopPropagation() to statistics section click handler to prevent unwanted sort triggering
• Preserves normal column sorting when clicking header text outside the dropdown

[github-actions]

🔄 Test environment deployment started

Building images for PR #4082...

You can monitor the build progress here.

[CometActions]

❌ Test environment deployment failed

The deployment encountered an error. Please check the deployment logs for details.

[CometActions]

❌ Test environment deployment failed

The deployment encountered an error. Please check the deployment logs for details.

[github-actions]

🔄 Test environment deployment started

Building images for PR #4082...

You can monitor the build progress here.

[CometActions]

❌ Test environment deployment failed

The deployment encountered an error. Please check the deployment logs for details.

[CometActions]

❌ Test environment deployment failed

The deployment encountered an error. Please check the deployment logs for details.