[ADR-0006] Phase 4: Side Panel Polish by yurishkuro · Pull Request #3576 · jaegertracing/jaeger-ui

yurishkuro · 2026-03-07T19:16:18Z

Description of the changes

When a span is shown in the side panel, its Attributes and Resource sections are expanded by default, taking advantage of the extra screen real estate the panel provides. The inline detail view is unaffected.
The side panel shows up to 10 events/logs by default before requiring "show more", compared to 3 in the inline view.
Switching from inline to side panel mode keeps at most one span selected (the first currently expanded span, if any). Switching back to inline mode preserves the selected span so the user can then expand additional spans alongside it.

AI Usage in this PR (choose one)

See AI Usage Policy.

None: No AI tools were used in creating this PR
Light: AI provided minor assistance (formatting, simple suggestions)
Moderate: AI helped with code generation or debugging specific parts
Heavy: AI generated most or all of the code changes

Signed-off-by: Yuri Shkuro <github@ysh.us>

codecov · 2026-03-07T19:19:22Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.14%. Comparing base (10f8cf1) to head (53264ab).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3576   +/-   ##
=======================================
  Coverage   89.14%   89.14%           
=======================================
  Files         303      303           
  Lines        9688     9694    +6     
  Branches     2499     2584   +85     
=======================================
+ Hits         8636     8642    +6     
  Misses       1048     1048           
  Partials        4        4

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Signed-off-by: Yuri Shkuro <github@ysh.us>

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-07T20:16:38Z

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailSidePanel/index.tsx

  if (!spanID) return null;

-  const detailState = detailStates.get(spanID) ?? new DetailState();
+  const detailState = detailStates.get(spanID) ?? DetailState.forDetailPanelMode('sidepanel');


In side-panel mode, if detailStates already contains an entry created while in inline mode (e.g., user expanded a span inline and then switched to side panel), this code will reuse that existing detailState as-is. That means Attributes/Resource may remain collapsed, which conflicts with the Phase 4 requirement that spans shown in the side panel have those sections expanded by default. Consider normalizing the retained/selected DetailState on mode switch (in the reducer) or when rendering in the side panel (e.g., merge/apply side-panel defaults when the existing state matches inline defaults).

Suggested change

const detailState = detailStates.get(spanID) ?? DetailState.forDetailPanelMode('sidepanel');

const detailState = DetailState.forDetailPanelMode('sidepanel');

Closes out the ADR-0006 implementation (side panel span details + tree-only mode). Previous phases: [Phase 1 #3558](#3558), [Phase 2 #3562](#3562), [Phase 3 #3569](#3569), [Phase 4 #3576](#3576). ## What changed ### Analytics tracking (`duck.track.ts`) Three new Redux actions are now tracked: | Action | Category | Tracked value | |---|---|---| | `SET_DETAIL_PANEL_MODE` | `jaeger/ux/trace/timeline/panel-mode` | mode string (`'inline'` / `'sidepanel'`) | | `SET_TIMELINE_BARS_VISIBLE` | `jaeger/ux/trace/timeline/timeline-visible` | `'true'` / `'false'` | | `SET_SIDE_PANEL_WIDTH` | `jaeger/ux/trace/timeline/column` | width × 1000 (integer), same pattern as `SET_SPAN_NAME_COLUMN_WIDTH` | ### Test coverage (`index.test.js`) Added a `describe('layout combinations')` block that renders `TraceTimelineViewerImpl` for all four `{detailPanelMode, timelineBarsVisible}` combinations and asserts: - Side panel container is present/absent as expected - `VerticalResizer` is present only when `detailPanelMode='sidepanel'` **and** `timelineBarsVisible=true` - `VirtualizedTraceView` is always rendered ### ADR `docs/adr/0006-side-panel-span-details.md` status updated to **Implemented**; Phase 5 marked complete. ## Testing ```bash npm run prettier npm run lint npm test npm run build ``` All 2560 tests pass. ### Manual testing of all four layout combinations Enable the side panel feature flag in `default-config.ts` (`enableSidePanel: true`) or via query param, then verify each combination: | `detailPanelMode` | `timelineBarsVisible` | Expected | |---|---|---| | `inline` | `true` | Default behavior — inline expand, timeline bars visible | | `inline` | `false` | Tree-only — inline expand, no timeline bars | | `sidepanel` | `true` | Side panel on right, `VerticalResizer` divider visible | | `sidepanel` | `false` | Side panel fills remaining width, no resizer | To test in embedded mode, append `?uiEmbed=v0` (optionally with `uiTimelineCollapseTitle=1`, `uiTimelineHideMinimap=1`, `uiTimelineHideSummary=1`) to a trace URL and verify the side panel and settings gear work normally. ## AI Usage in this PR (choose one) See [AI Usage Policy](https://github.com/jaegertracing/jaeger/blob/main/CONTRIBUTING_GUIDELINES.md#ai-usage-policy). - [ ] **None**: No AI tools were used in creating this PR - [ ] **Light**: AI provided minor assistance (formatting, simple suggestions) - [ ] **Moderate**: AI helped with code generation or debugging specific parts - [x] **Heavy**: AI generated most or all of the code changes --------- Signed-off-by: Yuri Shkuro <github@ysh.us>

) ## Description of the changes - Enables displaying span details in a side panel as an option - Default view is still inline span details, can be changed via `traceTimeline.defaultDetailPanelMode="sidepanel"` config option. <img width="1920" height="964" alt="image" src="https://github.com/user-attachments/assets/c71a9f98-e30d-4030-8947-6dc8e5b6bd0c" /> Previous phases: [Phase 1 #3558](#3558), [Phase 2 #3562](#3562), [Phase 3 #3569](#3569), [Phase 4 #3576](#3576), [Phase 5 #3577](#3577). --------- Signed-off-by: Yuri Shkuro <github@ysh.us>

[ADR-0006] Phase 4: Side Panel Polish

111289f

Signed-off-by: Yuri Shkuro <github@ysh.us>

yurishkuro requested a review from a team as a code owner March 7, 2026 19:16

Copilot AI review requested due to automatic review settings March 7, 2026 19:16

yurishkuro added the changelog:experimental Experimental feature, may not be stable label Mar 7, 2026

Copilot started reviewing on behalf of yurishkuro March 7, 2026 19:16 View session

This comment was marked as off-topic.

Sign in to view

fix

634c8a0

Signed-off-by: Yuri Shkuro <github@ysh.us>

yurishkuro requested a review from Copilot March 7, 2026 19:42

Copilot started reviewing on behalf of yurishkuro March 7, 2026 19:42 View session

This comment was marked as outdated.

Sign in to view

fix

7fe970c

Signed-off-by: Yuri Shkuro <github@ysh.us>

yurishkuro requested a review from Copilot March 7, 2026 20:04

Copilot started reviewing on behalf of yurishkuro March 7, 2026 20:04 View session

This comment was marked as outdated.

Sign in to view

yurishkuro and others added 2 commits March 7, 2026 15:11

fix

add6f3c

Signed-off-by: Yuri Shkuro <github@ysh.us>

Merge branch 'main' into adr-0006/phase-4

53264ab

Copilot AI review requested due to automatic review settings March 7, 2026 20:12

Copilot started reviewing on behalf of yurishkuro March 7, 2026 20:12 View session

Copilot AI reviewed Mar 7, 2026

View reviewed changes

yurishkuro merged commit dd0441e into jaegertracing:main Mar 7, 2026
19 checks passed

yurishkuro deleted the adr-0006/phase-4 branch March 7, 2026 20:18

yurishkuro mentioned this pull request Mar 7, 2026

[ADR-0006] Phase 5: Combined Modes, Analytics, Final Polish #3577

Merged

4 tasks

yurishkuro mentioned this pull request Mar 7, 2026

Allow viewing span details in a side panel instead of inline view #3578

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ADR-0006] Phase 4: Side Panel Polish#3576

[ADR-0006] Phase 4: Side Panel Polish#3576
yurishkuro merged 5 commits intojaegertracing:mainfrom
yurishkuro:adr-0006/phase-4

yurishkuro commented Mar 7, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 7, 2026 •

edited

Loading

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	const detailState = detailStates.get(spanID) ?? DetailState.forDetailPanelMode('sidepanel');
	const detailState = DetailState.forDetailPanelMode('sidepanel');

Conversation

yurishkuro commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of the changes

AI Usage in this PR (choose one)

Uh oh!

codecov bot commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

yurishkuro commented Mar 7, 2026 •

edited

Loading

codecov bot commented Mar 7, 2026 •

edited

Loading