Skip to content

[OPIK-5027] [FE] feat: TraceLogsSidebar — full traces table in Sheet overlay#5962

Merged
andriidudar merged 2 commits intomainfrom
andriidudar/OPIK-5027-trace-logs-sidebar
Mar 30, 2026
Merged

[OPIK-5027] [FE] feat: TraceLogsSidebar — full traces table in Sheet overlay#5962
andriidudar merged 2 commits intomainfrom
andriidudar/OPIK-5027-trace-logs-sidebar

Conversation

@andriidudar
Copy link
Copy Markdown
Contributor

@andriidudar andriidudar commented Mar 30, 2026 •
edited
Loading

Details

logs_sidebar.mov

Adds a reusable TraceLogsSidebar component that opens as a Sheet overlay with a full-featured traces table. This replaces the previous "View in experiment" navigation pattern with an inline trace viewing experience across multiple v2 pages.

Key changes:

  • TraceLogsSidebar — Sheet-based sidebar with complete traces table (columns, filters, search, sort, pagination, row height, export). Uses direct trace hooks (useTracesList, useTracesStatistic, useTracesFeedbackScoresNames) with enabled: open to avoid API calls when closed.
  • TraceLogsSidebarButton — Self-contained trigger component with two variants: "tag" (chip for experiments/trials) and "button" (outlined for playground). Manages sidebar open state via URL param (tls_open) for persistence across refreshes.
  • SheetContent header prop — Allows custom header in Sheet, used by sidebar for "← Back to experiment" button instead of default X close.
  • ResizableSidePanel container prop — Portal target override so TraceDetailsPanel renders inside the Sheet DOM (fixes Radix focus trap blocking pointer events).
  • TracesActionsPanel — Moved from pages/LogsPage/ to pages-shared/traces/ (fixes dependency-cruiser). Added hideEvaluate prop; "Add to" dropdown always visible, "Evaluate" hidden in sidebar context.
  • Annotation queue pages — Removed logsSource: LOGS_SOURCE.sdk filter from v2 annotation queue pages. Queues are manually curated collections and should show all traces regardless of source (consistent with SME flow which already had no source filter).
  • Experiment filter — Removed from LogsPage filtersConfig (filter by experiment no longer available in the filter UI).
  • "View in experiment" — Removed from v2 TraceDetailsActionsPanel.
  • Project stats — Added logsSource param to useProjectStatisticList for source-filtered stats on Projects page.

Integrations:

  • CompareExperimentsPage — replaced NavigationTag with TraceLogsSidebarButton
  • PlaygroundHeader — added TraceLogsSidebarButton with variant="button"
  • TrialDetails — added TraceLogsSidebarButton with experiment ID filter

Change checklist

  • User facing
  • Documentation update

Issues

  • OPIK-5027

AI-WATERMARK

AI-WATERMARK: yes

  • Tools: Claude Code
  • Model(s): Claude Opus 4.6
  • Scope: full implementation
  • Human verification: code review + manual testing

Testing

  • scripts/dev-runner.sh --lint-fe — lint, typecheck, dependency validation all pass
  • Manual testing:
    • Experiments page → click "Go to traces" → full table appears with all features
    • Filters, search, sort, columns, row height, date range, pagination all work
    • Clicking a trace opens TraceDetailsPanel nested on top of sidebar
    • Back button closes sidebar, Esc closes trace panel first
    • Playground page → "Go to traces" button visible and functional
    • Trial page → "Go to traces" tag with experiment ID filter
    • LogsPage still works normally, experiment filter removed from filter options
    • Annotation queue pages show all traces regardless of source
    • v1 pages unchanged

Documentation

N/A

@andriidudar @claude
[OPIK-5027] [FE] feat: add TraceLogsSidebar component with full trace…
ca724b8 
…s table

Create reusable TraceLogsSidebar that opens as a Sheet overlay with a
full-featured traces table matching the LogsPage TracesSpansTab. Includes
all columns, filters, search, sorting, pagination, column management,
row height, date range, export, and nested TraceDetailsPanel.

Changes:
- Add TraceLogsSidebar (full TracesSpansTab copy adapted for sidebar)
  with Sheet container, "← Back to experiment" header, auto-derived
  labels from logsSource, hidden sourceFilters, URL query param state
  (tls_ prefix), and localStorage persistence (tls-traces- prefix)
- Add TraceLogsSidebarButton (self-contained tag button + sidebar)
- Move TracesActionsPanel to pages-shared (fixes dependency-cruiser)
- Remove "View in experiment" from v2 TraceDetailsActionsPanel
- Remove experiment filter from v2 Logs page FiltersButton
- Integrate into CompareExperimentsDetails (replaces NavigationTag)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
baz-reviewer[bot]
baz-reviewer bot reviewed Mar 30, 2026
View reviewed changes
@andriidudar @claude
refactor(sidebar): extract prefix constants for localStorage and quer…
c7d284b 
…y params

- TLS_STORAGE_PREFIX for localStorage keys
- TLS_QUERY_PREFIX for URL query params, shared with TraceLogsSidebarButton
- Aligned query param names with LogsPage convention (search, trace, span, page, size, height, sort)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@andriidudar andriidudar added the test-environment Deploy Opik adhoc environment label Mar 30, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 30, 2026

🔄 Test environment deployment process has started

Phase 1: Deploying base version 1.10.56-4728 (from main branch) if environment doesn't exist
Phase 2: Building new images from PR branch andriidudar/OPIK-5027-trace-logs-sidebar
Phase 3: Will deploy newly built version after build completes

You can monitor the progress here.

@andriidudar andriidudar marked this pull request as ready for review March 30, 2026 14:27
@andriidudar andriidudar requested a review from a team as a code owner March 30, 2026 14:27
@CometActions
Copy link
Copy Markdown
Collaborator

CometActions commented Mar 30, 2026

✅ 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.

aadereiko
aadereiko approved these changes Mar 30, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@aadereiko aadereiko left a comment

Choose a reason for hiding this comment

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

The code looks good! Thanks!

miguelgrc
miguelgrc approved these changes Mar 30, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@miguelgrc miguelgrc left a comment

Choose a reason for hiding this comment

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

Looks good, just a minor comment but you can skip it :)

apps/opik-frontend/src/v2/pages-shared/traces/TracesActionsPanel/TracesActionsPanel.tsx
const entityType =
type === TRACE_DATA_TYPE.traces ? "trace" : ("span" as const);

const enableEvaluate = showEvaluate && !hideEvaluate;
Copy link
Copy Markdown
Contributor

@miguelgrc miguelgrc Mar 30, 2026

Choose a reason for hiding this comment

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

A bit weird having antonyms here but I guess it's not trivial to refactor

@andriidudar andriidudar merged commit a27a60f into main Mar 30, 2026
29 checks passed
@andriidudar andriidudar deleted the andriidudar/OPIK-5027-trace-logs-sidebar branch March 30, 2026 15:19
@andriidudar andriidudar mentioned this pull request Mar 31, 2026
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@miguelgrc miguelgrc miguelgrc approved these changes

@aadereiko aadereiko aadereiko approved these changes

+1 more reviewer

@baz-reviewer baz-reviewer[bot] baz-reviewer[bot] approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@andriidudar andriidudar

Labels

Frontend test-environment Deploy Opik adhoc environment typescript *.ts *.tsx

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@andriidudar @CometActions @miguelgrc @aadereiko