[ADR-0006] Phase 2: Tree-Only Mode (Hide Timeline) by yurishkuro · Pull Request #3562 · jaegertracing/jaeger-ui

yurishkuro · 2026-03-05T20:50:45Z

Problem

The trace timeline view always shows the timeline bar column (ticks, span bars, minimap
viewing layer, column resizer). Users working primarily with the span hierarchy — analyzing
service dependencies or call patterns — have no way to reclaim that horizontal space for
the service/operation name tree.

Changes

Tree-only mode

When the "Show Timeline" toggle in the trace view settings menu is turned off,
the timeline bar column is hidden entirely and the service/operation name column
expands to fill the available width:

SpanBarRow — new timelineBarsVisible prop; span-view cell (ticks + SpanBar)
is omitted; name column expands to full width via effectiveColumnDivision.
SpanDetailRow — new timelineBarsVisible prop; left accent cell
(SpanTreeOffset + expanded-accent switch) is omitted entirely when bars are hidden
(avoids zero-width cell overflow); detail content cell expands to full width.
TimelineHeaderRow — new timelineBarsVisible prop; ticks, TimelineViewingLayer,
and VerticalResizer are omitted; title/collapser cell expands to full width.

The Redux-stored spanNameColumnWidth is left unchanged so the column ratio restores
correctly when bars are re-shown.

Consistent naming throughout the component tree

The Redux state field was renamed timelineVisible → timelineBarsVisible
(TTraceTimeline, duck.ts, all components and tests). The localStorage key
'timelineVisible' is kept unchanged for backward compatibility with stored user
preferences; comments in duck.ts document this intentional divergence.

The Redux action and action creator were also renamed for consistency:
SET_TIMELINE_VISIBLE → SET_TIMELINE_BARS_VISIBLE,
setTimelineVisible → setTimelineBarsVisible.

Testing

Added describe('tree-only mode') blocks to SpanBarRow.test.js,
SpanDetailRow.test.js, and TimelineHeaderRow.test.js covering:
- Name column expands to full width (width={1})
- Timeline cell / accent cell is not rendered
- Ticks, viewing layer, and resizer are not rendered
All existing tests updated to pass the new required timelineBarsVisible prop.
duck.test.js updated to use the renamed action creator
(actions.setTimelineBarsVisible).
TracePage/index.test.js updated for the renamed state field and dispatch prop.

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-05T20:54:52Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.68%. Comparing base (b5c0a73) to head (5b97a40).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3562      +/-   ##
==========================================
+ Coverage   88.67%   88.68%   +0.01%     
==========================================
  Files         300      300              
  Lines        9551     9560       +9     
  Branches     2520     2535      +15     
==========================================
+ Hits         8469     8478       +9     
+ Misses       1079     1078       -1     
- Partials        3        4       +1

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

Copilot

Pull request overview

Implements “tree-only” mode for the Trace Timeline Viewer by using the existing traceTimeline.timelineVisible state to hide timeline-related UI (ticks, viewing layer, span bars) while keeping the span tree/name column usable.

Changes:

Wire timelineVisible from state.traceTimeline into TraceTimelineViewer and propagate it down as timelineBarsVisible where needed.
Update header, span bar rows, and span detail rows to conditionally omit timeline/tick/resizer UI when timeline is hidden.
Add/extend unit tests to validate tree-only rendering behavior for header, bar rows, and detail rows.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.tsx	Reads `timelineVisible` from Redux and passes it to the header row as `timelineBarsVisible`.
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx	Passes `timelineVisible` through to row components as `timelineBarsVisible`.
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx	Hides viewing layer, ticks, and resizer when `timelineBarsVisible` is false; expands name column to full width.
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.js	Adds tests covering tree-only mode rendering/omissions for the header row.
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.tsx	Adjusts column widths based on `timelineBarsVisible` for detail rows.
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.test.js	Adds a tree-only mode assertion for full-width detail content.
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx	Conditionally removes the “span-view” (ticks + bar) cell when `timelineBarsVisible` is false; expands name column to full width.
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.test.js	Adds tests ensuring the bar cell is omitted and the name column expands in tree-only mode.

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

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.tsx

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

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

Copilot

Pull request overview

Copilot reviewed 8 out of 8 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.

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.tsx

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

Copilot

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.

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

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/duck.ts

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

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

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 2: Tree-Only Mode (Hide Timeline)

12cbda6

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

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

yurishkuro requested a review from a team as a code owner March 5, 2026 20:50

Copilot AI review requested due to automatic review settings March 5, 2026 20:50

Copilot started reviewing on behalf of yurishkuro March 5, 2026 20:51 View session

Copilot AI reviewed Mar 5, 2026

View reviewed changes

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.tsx Outdated Show resolved Hide resolved

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.tsx Outdated Show resolved Hide resolved

yurishkuro added 2 commits March 5, 2026 16:29

fix

3136a79

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

fix

ce8ad09

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

Copilot AI review requested due to automatic review settings March 5, 2026 21:39

Copilot started reviewing on behalf of yurishkuro March 5, 2026 21:39 View session

Copilot AI reviewed Mar 5, 2026

View reviewed changes

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.tsx Show resolved Hide resolved

yurishkuro added 2 commits March 5, 2026 16:51

fix

dc36394

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

fix

54914e7

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

Copilot AI review requested due to automatic review settings March 5, 2026 22:22

Copilot started reviewing on behalf of yurishkuro March 5, 2026 22:22 View session

Copilot AI reviewed Mar 5, 2026

View reviewed changes

fix

5b97a40

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

yurishkuro merged commit 42b5388 into jaegertracing:main Mar 6, 2026
15 checks passed

yurishkuro deleted the adr-6/phase-2 branch March 6, 2026 03:45

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 2: Tree-Only Mode (Hide Timeline)#3562

[ADR-0006] Phase 2: Tree-Only Mode (Hide Timeline)#3562
yurishkuro merged 6 commits intojaegertracing:mainfrom
yurishkuro:adr-6/phase-2

yurishkuro commented Mar 5, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

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

Uh oh!

Problem

Changes

Tree-only mode

Consistent naming throughout the component tree

Testing

AI Usage in this PR (choose one)

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

yurishkuro commented Mar 5, 2026 •

edited

Loading

codecov bot commented Mar 5, 2026 •

edited

Loading