Skip to content

[OPIK-5027] [FE] fix: TraceLogsSidebar UX feedback iteration#5989

Merged
andriidudar merged 1 commit intomainfrom
andriidudar/OPIK-5027-trace-logs-sidebar-ux-feedback
Mar 31, 2026
Merged

[OPIK-5027] [FE] fix: TraceLogsSidebar UX feedback iteration#5989
andriidudar merged 1 commit intomainfrom
andriidudar/OPIK-5027-trace-logs-sidebar-ux-feedback

Conversation

@andriidudar
Copy link
Copy Markdown
Contributor

@andriidudar andriidudar commented Mar 31, 2026

Details

logs_sidebar_ux.mov

Address UX feedback from Jolanta on the TraceLogsSidebar (PR #5962). All changes are cosmetic/behavioral — no architectural changes.

  • Full-screen modal with no shadow (avoid piling up modals with elevation)
  • Rename all button text from "Go to traces" to "Go to logs"
  • Title uses Title/XXSmall (comet-title-xxs)
  • Header matches Figma: "Back to..." button (left) + X close button (right, ghost icon)
  • Playground: Reset and Logs as outline icon buttons with tooltips, separated from Run all by a divider
  • Removed unused "button" variant from TraceLogsSidebarButton (only "tag" and "icon" remain)
  • Reset trace details (tls_trace, tls_span) on sidebar close so reopening shows clean table
  • Refactored title/backLabel: moved from SOURCE_LABELS map in sidebar to call-site props
  • Show "Go to logs" button on compare page (pre-filtered to baseline experiment)
  • Trial page: back label "Back to trial", Compare page: "Back to compare"

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:
    • Sidebar opens full-screen with no shadow
    • Back button + X close button both work
    • Title is XXSmall
    • Playground has icon buttons with divider
    • Close sidebar with trace open → reopen → no trace details shown
    • Trial page says "Back to trial"
    • Compare page shows button, says "Back to compare"
    • Experiments page says "Back to experiment"

Documentation

N/A

Address UX feedback from Jolanta on the TraceLogsSidebar:

- Full-screen modal with no shadow (avoid piling up modals)
- Rename all button text to "Go to logs"
- Title uses Title/XXSmall (comet-title-xxs)
- Header: "Back to..." button (left) + X close button (right, ghost icon)
- Playground: Reset and Logs as outline icon buttons with tooltips + divider
- Remove unused "button" variant from TraceLogsSidebarButton
- Reset trace details (tls_trace, tls_span) on sidebar close
- Refactor: title/backLabel moved from SOURCE_LABELS map to call-site props
- Show "Go to logs" button on compare page (pre-filtered to baseline experiment)
- Trial page: back label says "Back to trial" (not "Back to optimization")
- Compare page: back label says "Back to compare"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@andriidudar andriidudar marked this pull request as ready for review March 31, 2026 09:03
@andriidudar andriidudar requested a review from a team as a code owner March 31, 2026 09:03
@andriidudar andriidudar added the test-environment Deploy Opik adhoc environment label Mar 31, 2026
@github-actions
Copy link
Copy Markdown
Contributor

🔄 Test environment deployment process has started

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

You can monitor the progress here.

@CometActions
Copy link
Copy Markdown
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.

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.

LGTM!

@andriidudar andriidudar merged commit d0f7904 into main Mar 31, 2026
29 checks passed
@andriidudar andriidudar deleted the andriidudar/OPIK-5027-trace-logs-sidebar-ux-feedback branch March 31, 2026 10:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants