fix(ui): pass through y-axis labels to timelines

[cmatzenbach]

Description

Previously only network resource timeline rows had units; all other rows just had the axis max with no corresponding label to give the user information about what is being measured. This information was already being passed to the front end as a prop to ResourceTimeline; thus, we just need to unpack and display it for the other timeline rows. A couple other fixes found while testing:

1. Some timeline metrics were missing labels - default to fsmTypeName in these cases
2. Some rows had a axis max value that was not fully representative of the data within the timeline, due to rounding being applied. Thus, the axis would show, for example, a max of 7, while the user could see peak areas measuring greater than 7. Use Math.ceil to ensure we are rounding up and encompassing all data within the timeline.
3. One additional correctness fix added - in computeVisibleMaxValue the condition was checking whether a bin's timestamp (starting point) fell within the zoom window, however we should be checking whether the bin overlaps with the zoom window, and include it if so.

Related Issues

Closes #395

Testing

1. Verify that all resource timelines now show labels in addition to the axis max value, telling the user what is being measured. Ensure units are also shown if relevant.
2. Ensure no data within the timelines exceeds the max value shown on the axis label.

Screenshots

[johanpel]

Could we pass ResourceTypeDecl into ResourceTimeline and derive the label from its capacity/quantity metadata?

[johallar]

One design nit: i'm a little worried about covering more of the timeline data, I can see the argument for having this as close to the data as possible but I want to consider having this in the "Resource" column

[cmatzenbach]

Could we pass ResourceTypeDecl into ResourceTimeline and derive the label from its capacity/quantity metadata?

Yes, went ahead and made that change. It's good as well to give the component access to richer metadata without the caller having to extract properties first.

[cmatzenbach]

One design nit: i'm a little worried about covering more of the timeline data, I can see the argument for having this as close to the data as possible but I want to consider having this in the "Resource" column

Yeah, I think this is a very valid concern, as the timelines don't have a ton of vertical space themselves as it is, and longer labels can interfere with readability. I went ahead and prototyped what it might look like if we move it to the "Resource" column instead (screenshot below). A couple thoughts I have:

1. I'm not sure how obvious it is that this new section correlates to the y-axis. Metric was the best label I could come up with, but even then I'm not sure that the connection is obvious.
2. For many of the timelines, they are just showing the number of tasks. I had originally made it not show the Metric label when the timeline was just displaying tasks (as it's a repeat of FSM), but looking back, this ticket was originally created because the user didn't know what was being represented on task timelines (where there was no inherent metric to display). This is more explicit at the cost of maybe being redundant.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: QUIET

Plan: Enterprise

Run ID: 18dc4b41-f80b-4c87-a3e6-8db2122eed16

📥 Commits

Reviewing files that changed from the base of the PR and between fa70008 and 6f0be4d.

📒 Files selected for processing (1)

• ui/packages/@quent/components/src/lib/timeline.utils.ts

---

📝 Walkthrough

Walkthrough

Timeline construction now consumes ResourceTypeDecl metadata, derives a Y-axis label, filters partially overlapping bins correctly, and passes the label through ResourceTimeline to Timeline, which renders it alongside the maximum value.

Changes

Timeline and resource metadata

Layer / File(s)	Summary
Capacity labeling and timeline utilities ui/packages/@quent/components/src/lib/timeline.utils.ts	buildBinnedTimelineSeries accepts ResourceTypeDecl, derives capacity formatting and a Y-axis label, and filters bins by overlap with the zoom window.
Resource timeline metadata wiring ui/packages/@quent/components/src/resource-tree/UsageColumn.tsx, ui/packages/@quent/components/src/timeline/ResourceTimeline.tsx	Resource declarations flow through base and operator-overlay timeline construction, with axis-label propagation and fallback handling.
Timeline axis label rendering ui/packages/@quent/components/src/timeline/Timeline.tsx	Timeline renders the optional Y-axis label, rounds axis values upward before formatting, and stacks the maximum value with the axis label.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• rapidsai/quent#447: Both changes modify the timeline series construction API in timeline.utils.ts.

Suggested reviewers: johallar

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: passing y-axis labels through timeline components.
Description check	✅ Passed	The PR description includes the required sections and explains the change, related issue, testing, and screenshots.
Linked Issues check	✅ Passed	The code addresses #395 by deriving and displaying y-axis labels for timeline rows, including fallback labels and units.
Out of Scope Changes check	✅ Passed	The additional Math.ceil and overlap fixes are described in the PR objectives and are within scope.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ui/packages/`@quent/components/src/lib/timeline.utils.ts:
- Around line 75-83: Update deriveCapacityLabel to derive its label from all
capacities emitted by buildBinnedTimelineSeries rather than always selecting
resourceTypeDecl.capacities[0]. Ensure the returned label represents the
aggregate metric plotted by the timeline, while preserving the undefined
behavior for missing or unit-only capacities and the existing quantity-spec
symbol formatting.

In `@ui/src/components/QueryResourceTree.tsx`:
- Around line 223-238: Update the metric-label derivation in QueryResourceTree’s
row rendering so resourceTypeDecl is resolved from the row’s resource type
before deriving availableFsmTypes, matching UsageColumn’s leaf-resource metadata
behavior. Use the active selected FSM as the fallback label when multiple FSMs
are available, while preserving the existing single-FSM “(count)” label and
capacity-label precedence.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: QUIET

Plan: Enterprise

Run ID: 3c2ce1dc-0e25-43de-8c98-f909466bad7a

📥 Commits

Reviewing files that changed from the base of the PR and between 29a89b8 and 626a69d.

📒 Files selected for processing (9)

• ui/packages/@quent/components/src/index.ts
• ui/packages/@quent/components/src/lib/timeline.utils.ts
• ui/packages/@quent/components/src/resource-tree/ResourceColumn.tsx
• ui/packages/@quent/components/src/resource-tree/ResourceGroupRow.tsx
• ui/packages/@quent/components/src/resource-tree/ResourceRow.tsx
• ui/packages/@quent/components/src/resource-tree/UsageColumn.tsx
• ui/packages/@quent/components/src/timeline/ResourceTimeline.tsx
• ui/packages/@quent/components/src/timeline/Timeline.tsx
• ui/src/components/QueryResourceTree.tsx

[coderabbitai]

Note

Quiet mode is enabled, so only the most important comments were posted inline. Other review comments are grouped below.

🟠 Other critical/major comments (1)

ui/packages/@quent/components/src/lib/timeline.utils.ts-153-160 (1)

153-160: ⚠️ Potential issue | 🟠 Major

Still labels only the first capacity.

buildBinnedTimelineSeries can emit multiple capacity series, and the visible maximum sums them, but yAxisLabel describes only capacities[0]. Multi-capacity timelines can therefore display a misleading metric name or unit. Derive the label from all plotted capacities or enforce a single-capacity invariant.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/packages/`@quent/components/src/lib/timeline.utils.ts around lines 153 -
160, Update buildBinnedTimelineSeries so yAxisLabel reflects every capacity
represented in the plotted series rather than only
resourceTypeDecl?.capacities[0]. Derive a combined label and unit from all
capacities, or explicitly enforce that only one capacity can be plotted; keep
the existing undefined behavior when no valid capacity is available.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Other critical/major comments:
In `@ui/packages/`@quent/components/src/lib/timeline.utils.ts:
- Around line 153-160: Update buildBinnedTimelineSeries so yAxisLabel reflects
every capacity represented in the plotted series rather than only
resourceTypeDecl?.capacities[0]. Derive a combined label and unit from all
capacities, or explicitly enforce that only one capacity can be plotted; keep
the existing undefined behavior when no valid capacity is available.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: QUIET

Plan: Enterprise

Run ID: 028a9ecb-8426-4a5b-a701-6e73fd14c695

📥 Commits

Reviewing files that changed from the base of the PR and between 626a69d and fa70008.

📒 Files selected for processing (3)

• ui/packages/@quent/components/src/lib/timeline.utils.ts
• ui/packages/@quent/components/src/timeline/ResourceTimeline.tsx
• ui/packages/@quent/components/src/timeline/Timeline.tsx

[johallar]

If it's easy - I noticed one thing that becomes a little exaggerated with the new labels:

Screen.Recording.2026-07-29.at.1.08.44.PM.mov

The "value" box disappears when you scroll all data out of view, and the new request has not completed. It would be better to have that switch to a placeholder value ("-") or something like that to avoid the jumping.