[ADR-0006] Phase 2: Tree-Only Mode (Hide Timeline) (#3562)

## 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](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>

Author: yurishkuro

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.test.js

@@ -112,7 +112,7 @@ describe('<TracePageHeader>', () => {
     showViewOptions: false,
     slimView: false,
     textFilter: '',
-    timelineVisible: true,
+    timelineBarsVisible: true,
     toSearch: null,
     viewType: ETraceViewType.TraceTimelineViewer,
     updateNextViewRangeTime: jest.fn(),

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

@@ -50,7 +50,7 @@ type TracePageHeaderEmbedProps = {
   showViewOptions: boolean;
   slimView: boolean;
   textFilter: string | TNil;
-  timelineVisible: boolean;
+  timelineBarsVisible: boolean;
   toSearch: string | null;
   trace: IOtelTrace;
   viewType: ETraceViewType;
@@ -143,7 +143,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
     disableJsonView,
     slimView,
     textFilter,
-    timelineVisible,
+    timelineBarsVisible,
     toSearch,
     trace,
     viewType,
@@ -215,7 +215,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
           enableSidePanel={enableSidePanel}
           onDetailPanelModeToggle={onDetailPanelModeToggle}
           onTimelineToggle={onTimelineToggle}
-          timelineVisible={timelineVisible}
+          timelineBarsVisible={timelineBarsVisible}
         />
         {showViewOptions && (
           <AltViewOptions

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TraceViewSettings.test.js

@@ -16,7 +16,7 @@ const defaultProps = {
   enableSidePanel: false,
   onDetailPanelModeToggle: jest.fn(),
   onTimelineToggle: jest.fn(),
-  timelineVisible: true,
+  timelineBarsVisible: true,
 };
 
 describe('<TraceViewSettings>', () => {

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TraceViewSettings.tsx

@@ -16,7 +16,7 @@ type Props = {
   enableSidePanel: boolean;
   onDetailPanelModeToggle: () => void;
   onTimelineToggle: () => void;
-  timelineVisible: boolean;
+  timelineBarsVisible: boolean;
 };
 
 const CHECK_STYLE = { marginRight: 8, fontSize: 14 };
@@ -29,15 +29,15 @@ export default function TraceViewSettings(props: Props) {
     enableSidePanel,
     onDetailPanelModeToggle,
     onTimelineToggle,
-    timelineVisible,
+    timelineBarsVisible,
   } = props;
 
   const [kbdModalVisible, setKbdModalVisible] = React.useState(false);
 
   const items: MenuProps['items'] = [
     {
       key: 'timeline',
-      icon: timelineVisible ? <IoCheckmark style={CHECK_STYLE} /> : CHECK_PLACEHOLDER,
+      icon: timelineBarsVisible ? <IoCheckmark style={CHECK_STYLE} /> : CHECK_PLACEHOLDER,
       label: 'Show Timeline',
       onClick: onTimelineToggle,
     },

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.test.js

@@ -51,6 +51,7 @@ describe('<SpanBarRow>', () => {
     isChildrenExpanded: true,
     isDetailExpanded: false,
     isMatchingFilter: false,
+    timelineBarsVisible: true,
     onDetailToggled: jest.fn(),
     onChildrenToggled: jest.fn(),
     numTicks: 5,
@@ -212,6 +213,20 @@ describe('<SpanBarRow>', () => {
     expect(svcName).toHaveClass('span-svc-name', 'is-children-collapsed');
   });
 
+  describe('tree-only mode (timelineBarsVisible=false)', () => {
+    it('does not render the span-view cell', () => {
+      render(<SpanBarRow {...defaultProps} timelineBarsVisible={false} />);
+      expect(screen.queryByTestId('span-bar')).not.toBeInTheDocument();
+    });
+
+    it('renders the span name column at full width', () => {
+      const { container } = render(<SpanBarRow {...defaultProps} timelineBarsVisible={false} />);
+      const nameCell = container.querySelector('.span-name-column');
+      expect(nameCell).toHaveStyle('flex-basis: 100%');
+      expect(nameCell).toHaveStyle('max-width: 100%');
+    });
+  });
+
   it('sets longLabel and hintSide to right when viewStart <= 1 - viewEnd', () => {
     const getViewedBounds = jest.fn().mockReturnValue({ start: 0.2, end: 0.3 });
     const props = {

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

@@ -24,6 +24,7 @@ type SpanBarRowProps = {
   isChildrenExpanded: boolean;
   isDetailExpanded: boolean;
   isMatchingFilter: boolean;
+  timelineBarsVisible: boolean;
   onDetailToggled: (spanID: string) => void;
   onChildrenToggled: (spanID: string) => void;
   numTicks: number;
@@ -68,6 +69,7 @@ const SpanBarRow: React.FC<SpanBarRowProps> = ({
   isChildrenExpanded,
   isDetailExpanded,
   isMatchingFilter,
+  timelineBarsVisible,
   numTicks,
   rpc = null,
   noInstrumentedServer,
@@ -117,6 +119,8 @@ const SpanBarRow: React.FC<SpanBarRowProps> = ({
   const hasLinks = span.links && span.links.length > 0;
   const hasInboundLinks = span.inboundLinks && span.inboundLinks.length > 0;
 
+  const effectiveColumnDivision = timelineBarsVisible ? columnDivision : 1;
+
   return (
     <TimelineRow
       className={`
@@ -126,7 +130,7 @@ const SpanBarRow: React.FC<SpanBarRowProps> = ({
           ${isMatchingFilter ? 'is-matching-filter' : ''}
         `}
     >
-      <TimelineRow.Cell className="span-name-column" width={columnDivision}>
+      <TimelineRow.Cell className="span-name-column" width={effectiveColumnDivision}>
         <div className={`span-name-wrapper ${isMatchingFilter ? 'is-matching-filter' : ''}`}>
           <SpanTreeOffset
             childrenVisible={isChildrenExpanded}
@@ -193,29 +197,31 @@ const SpanBarRow: React.FC<SpanBarRowProps> = ({
           )}
         </div>
       </TimelineRow.Cell>
-      <TimelineRow.Cell
-        className="span-view"
-        style={{ cursor: 'pointer' }}
-        width={1 - columnDivision}
-        onClick={_detailToggle}
-      >
-        <Ticks numTicks={numTicks} />
-        <SpanBar
-          criticalPath={criticalPath}
-          rpc={rpc}
-          viewStart={viewStart}
-          viewEnd={viewEnd}
-          getViewedBounds={getViewedBounds}
-          color={color}
-          shortLabel={label}
-          longLabel={longLabel}
-          hintSide={hintSide}
-          traceStartTime={traceStartTime}
-          span={span}
-          traceDuration={traceDuration}
-          useOtelTerms={useOtelTerms}
-        />
-      </TimelineRow.Cell>
+      {timelineBarsVisible && (
+        <TimelineRow.Cell
+          className="span-view"
+          style={{ cursor: 'pointer' }}
+          width={1 - columnDivision}
+          onClick={_detailToggle}
+        >
+          <Ticks numTicks={numTicks} />
+          <SpanBar
+            criticalPath={criticalPath}
+            rpc={rpc}
+            viewStart={viewStart}
+            viewEnd={viewEnd}
+            getViewedBounds={getViewedBounds}
+            color={color}
+            shortLabel={label}
+            longLabel={longLabel}
+            hintSide={hintSide}
+            traceStartTime={traceStartTime}
+            span={span}
+            traceDuration={traceDuration}
+            useOtelTerms={useOtelTerms}
+          />
+        </TimelineRow.Cell>
+      )}
     </TimelineRow>
   );
 };

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.test.js

@@ -41,6 +41,7 @@ describe('<SpanDetailRow>', () => {
   const props = {
     color: 'some-color',
     columnDivision: 0.5,
+    timelineBarsVisible: true,
     detailState: new DetailState(),
     onDetailToggled: jest.fn(),
     linksGetter: jest.fn(),
@@ -123,6 +124,17 @@ describe('<SpanDetailRow>', () => {
     expect(receivedProps.traceStartTime).toBe(props.traceStartTime);
   });
 
+  describe('tree-only mode (timelineBarsVisible=false)', () => {
+    it('renders the SpanDetail at full width', () => {
+      const { container } = render(<SpanDetailRow {...props} timelineBarsVisible={false} />);
+      const cells = container.querySelectorAll('[style*="flex-basis"]');
+      // left cell = 0%, right cell (detail) = 100%
+      const fullWidthCell = Array.from(cells).find(el => el.style.flexBasis === '100%');
+      expect(fullWidthCell).toBeTruthy();
+      expect(fullWidthCell.querySelector('[data-testid="mocked-span-detail"]')).toBeInTheDocument();
+    });
+  });
+
   it('adds span when calling linksGetter', () => {
     render(<SpanDetailRow {...props} />);
     expect(MockSpanDetail).toHaveBeenCalled();

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

@@ -16,6 +16,7 @@ import './SpanDetailRow.css';
 type SpanDetailRowProps = {
   color: string;
   columnDivision: number;
+  timelineBarsVisible: boolean;
   detailState: DetailState;
   onDetailToggled: (spanID: string) => void;
   linksGetter: (attributes: ReadonlyArray<IAttribute>, index: number) => Hyperlink[];
@@ -41,6 +42,7 @@ const SpanDetailRow = React.memo((props: SpanDetailRowProps) => {
   const {
     color,
     columnDivision,
+    timelineBarsVisible,
     detailState,
     eventsToggle,
     resourceToggle,
@@ -58,19 +60,21 @@ const SpanDetailRow = React.memo((props: SpanDetailRowProps) => {
   } = props;
   return (
     <TimelineRow className="detail-row">
-      <TimelineRow.Cell width={columnDivision}>
-        <SpanTreeOffset span={span} showChildrenIcon={false} color={color} />
-        <span>
-          <span
-            className="detail-row-expanded-accent"
-            aria-checked="true"
-            onClick={_detailToggle}
-            role="switch"
-            style={{ borderColor: color }}
-          />
-        </span>
-      </TimelineRow.Cell>
-      <TimelineRow.Cell width={1 - columnDivision}>
+      {timelineBarsVisible && (
+        <TimelineRow.Cell width={columnDivision}>
+          <SpanTreeOffset span={span} showChildrenIcon={false} color={color} />
+          <span>
+            <span
+              className="detail-row-expanded-accent"
+              aria-checked="true"
+              onClick={_detailToggle}
+              role="switch"
+              style={{ borderColor: color }}
+            />
+          </span>
+        </TimelineRow.Cell>
+      )}
+      <TimelineRow.Cell width={timelineBarsVisible ? 1 - columnDivision : 1}>
         <div className="detail-info-wrapper" style={{ borderTopColor: color }}>
           <SpanDetail
             detailState={detailState}

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.js

@@ -69,6 +69,7 @@ describe('<TimelineHeaderRow>', () => {
     onColummWidthChange: jest.fn(),
     onExpandAll: jest.fn(),
     onExpandOne: jest.fn(),
+    timelineBarsVisible: true,
     updateNextViewRangeTime: jest.fn(),
     updateViewRangeTime: jest.fn(),
     viewRangeTime: {
@@ -129,4 +130,28 @@ describe('<TimelineHeaderRow>', () => {
     render(<TimelineHeaderRow {...props} />);
     expect(screen.getByTestId('timeline-collapser')).toBeInTheDocument();
   });
+
+  describe('tree-only mode (timelineBarsVisible=false)', () => {
+    it('does not render the Ticks', () => {
+      render(<TimelineHeaderRow {...props} timelineBarsVisible={false} />);
+      expect(screen.queryByTestId('ticks')).not.toBeInTheDocument();
+    });
+
+    it('does not render the TimelineViewingLayer', () => {
+      render(<TimelineHeaderRow {...props} timelineBarsVisible={false} />);
+      expect(screen.queryByTestId('timeline-viewing-layer')).not.toBeInTheDocument();
+    });
+
+    it('does not render the VerticalResizer', () => {
+      render(<TimelineHeaderRow {...props} timelineBarsVisible={false} />);
+      expect(screen.queryByTestId('vertical-resizer')).not.toBeInTheDocument();
+    });
+
+    it('renders the name column at full width', () => {
+      const { container } = render(<TimelineHeaderRow {...props} timelineBarsVisible={false} />);
+      const cells = container.querySelectorAll('.TimelineRow--cellMock');
+      expect(cells).toHaveLength(1);
+      expect(cells[0]).toHaveAttribute('data-width', '1');
+    });
+  });
 });

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

@@ -22,6 +22,7 @@ type TimelineHeaderRowProps = {
   onColummWidthChange: (width: number) => void;
   onExpandAll: () => void;
   onExpandOne: () => void;
+  timelineBarsVisible: boolean;
   updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void;
   updateViewRangeTime: TUpdateViewRangeTimeFunction;
   viewRangeTime: IViewRangeTime;
@@ -38,16 +39,18 @@ export default function TimelineHeaderRow(props: TimelineHeaderRowProps) {
     onColummWidthChange,
     onExpandAll,
     onExpandOne,
+    timelineBarsVisible,
     updateViewRangeTime,
     updateNextViewRangeTime,
     viewRangeTime,
   } = props;
   const [viewStart, viewEnd] = viewRangeTime.current;
   const startTime = (viewStart * duration) as IOtelSpan['startTime'];
   const endTime = (viewEnd * duration) as IOtelSpan['endTime'];
+  const effectiveNameColumnWidth = timelineBarsVisible ? nameColumnWidth : 1;
   return (
     <TimelineRow className="TimelineHeaderRow">
-      <TimelineRow.Cell className="ub-flex ub-px2" width={nameColumnWidth}>
+      <TimelineRow.Cell className="ub-flex ub-px2" width={effectiveNameColumnWidth}>
         <h3 className="TimelineHeaderRow--title">
           Service &amp; {props.useOtelTerms ? 'Span Name' : 'Operation'}
         </h3>
@@ -58,16 +61,20 @@ export default function TimelineHeaderRow(props: TimelineHeaderRowProps) {
           onExpandOne={onExpandOne}
         />
       </TimelineRow.Cell>
-      <TimelineRow.Cell width={1 - nameColumnWidth}>
-        <TimelineViewingLayer
-          boundsInvalidator={nameColumnWidth}
-          updateNextViewRangeTime={updateNextViewRangeTime}
-          updateViewRangeTime={updateViewRangeTime}
-          viewRangeTime={viewRangeTime}
-        />
-        <Ticks numTicks={numTicks} startTime={startTime} endTime={endTime} showLabels />
-      </TimelineRow.Cell>
-      <VerticalResizer position={nameColumnWidth} onChange={onColummWidthChange} min={0.15} max={0.85} />
+      {timelineBarsVisible && (
+        <>
+          <TimelineRow.Cell width={1 - nameColumnWidth}>
+            <TimelineViewingLayer
+              boundsInvalidator={nameColumnWidth}
+              updateNextViewRangeTime={updateNextViewRangeTime}
+              updateViewRangeTime={updateViewRangeTime}
+              viewRangeTime={viewRangeTime}
+            />
+            <Ticks numTicks={numTicks} startTime={startTime} endTime={endTime} showLabels />
+          </TimelineRow.Cell>
+          <VerticalResizer position={nameColumnWidth} onChange={onColummWidthChange} min={0.15} max={0.85} />
+        </>
+      )}
     </TimelineRow>
   );
 }