upcoming: [DI-29393] : Utils and Hooks set up for supporting zoom in inside the charts in CloudPulse graphs by venkymano-akamai · Pull Request #13308 · linode/manager

venkymano-akamai · 2026-01-22T11:24:31Z

Description 📝

As a ask from customer, we are working towards adding the support for zooming in inside the CloudPulse graphs using click and drag on the timestamps inside the graphs, this PR has the initial changes for the zoom in such as the utilities required to support the click and drag and update data based on it,

Changes 🔄

Add a CloudPulseWidgetZoomInUtils, which has three functions and they do the following,
computeZoomedInData - Using the original data, and left and right timestamp of the click and drag event, returns the updated / truncated data
computeLegendRowsBasedOnData - Using the truncated data and left and right timestamp, re-calculates the avergage, max and last displayed in the legend rows
getMetricsFromDimensionData - Calculated the Average, Max and Last for the given data
A new hook useZoomController, that does the following
- Returns the zoom state, the min timestamp and the max timestamp
- Returns the OnMouseDown, OnMouseUp and OnMouseMove callbacks to listen to click and drag event
- Returns whether the data is actually zoomed in or not
- Retuns zoomOut callback, to reset the zoom state
Add relevant UT's for those files.

Scope 🚢

Upon production release, changes in this PR will be visible to:

All customers
Some customers (e.g. in Beta or Limited Availability)
No customers / Not applicable

No customers are impacted, since this is just utilities

Target release date 🗓️ Next Release

Preview 📷

No visible UI changes as this is just adding of utilities / helpers needed for zoom in

How to test 🧪

No visible UI changes as this is just adding of utilities / helpers needed for zoom in

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All tests and CI checks are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

venkymano-akamai · 2026-01-22T11:25:30Z

Team, Around 355 lines are UT's

…util_setup

… the charts in `CloudPulse metrics graphs`

venkymano-akamai · 2026-01-23T06:01:42Z

@pmakode-akamai , can we have a look at this?

Copilot

Pull request overview

This PR introduces infrastructure for zoom-in functionality in CloudPulse metrics graphs through new utilities and a custom React hook. The changes enable users to click and drag on chart timestamps to zoom into specific time ranges, with support for dynamic data filtering and legend recalculation.

Changes:

Added useZoomController hook to manage drag-to-zoom state and mouse event handlers
Created CloudPulseZoomInUtils with functions for filtering data, recalculating legend metrics, and computing aggregated values based on zoom state
Comprehensive unit tests for both the hook and utility functions

Reviewed changes

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

Show a summary per file

File	Description
packages/manager/src/features/CloudPulse/Widget/components/useZoomController.ts	Implements zoom state management and mouse event handlers for drag-to-zoom
packages/manager/src/features/CloudPulse/Widget/components/useZoomController.test.ts	Unit tests covering zoom controller behavior including drag handling and state reset
packages/manager/src/features/CloudPulse/Utils/CloudPulseZoomInUtils.ts	Utility functions for filtering data by zoom range and recalculating metrics
packages/manager/src/features/CloudPulse/Utils/CloudPulseZoomInUtils.test.ts	Unit tests for zoom utilities covering edge cases and metric calculations
packages/manager/.changeset/pr-13308-upcoming-features-1769081320065.md	Changeset documenting the new zoom functionality

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

Copilot · 2026-01-23T07:22:38Z

packages/manager/src/features/CloudPulse/Utils/CloudPulseZoomInUtils.test.ts

+    const data = [10, 20, NaN];
+    const result = getMetricsFromDimensionData(data);
+
+    expect(result.last).toBe(0);


The test expects last to be 0 when the last value is NaN, but according to the implementation in getMetricsFromDimensionData (line 138 of CloudPulseZoomInUtils.ts), last is assigned data[length - 1] || 0. Since NaN || 0 evaluates to 0, the test is correct. However, this behavior is inconsistent with how NaN values are handled in sum and max calculations (where they are skipped). Consider updating getMetricsFromDimensionData to filter out NaN values when determining the last value, or document this edge case behavior explicitly.

Copilot · 2026-01-23T07:22:38Z

packages/manager/src/features/CloudPulse/Utils/CloudPulseZoomInUtils.test.ts

+  it('should ignore NaN values', () => {
+    const data = [10, NaN, 30, NaN, 50];
+    const result = getMetricsFromDimensionData(data);
+    expect(result.total).toBe(90);


The test checks total and max but does not verify average and length when NaN values are present. The current implementation includes NaN values in the length calculation (line 133), which would make the average calculation include them in the denominator despite excluding them from the sum. Add assertions for average and length to ensure the behavior matches expectations.

pmakode-akamai

I can see the tests are passing but I noticed some edge cases and potential issues, and left comments for them that you might want to take a look at. We could consider adding additional test coverage for those scenarios if possible

pmakode-akamai · 2026-01-23T07:40:19Z

packages/manager/src/features/CloudPulse/Utils/CloudPulseZoomInUtils.ts

+    return legendRows;
+  }
+
+  const minZoom = zoom.left === 'dataMin' ? data[0].timestamp : zoom.left; // left zoom boundary


This could throw error if data is undefined or [] array. We may want to add a similar early return as in the utility above (returning whatever is appropriate in this context)

if (!data || data.length === 0) { return legendRows; }

pmakode-akamai · 2026-01-23T08:05:53Z

packages/manager/src/features/CloudPulse/Widget/components/useZoomController.ts

+
+  const onMouseDown = React.useCallback((e: CategoricalChartState) => {
+    const payload = e?.activePayload?.[0]?.payload;
+    if (!payload?.timestamp) return;


Suggested change

if (!payload?.timestamp) return;

if (payload?.timestamp === undefined) return;

If timestamp can be 0, this check would incorrectly exit early. The same applies to other similar checks in this hook

@pmakode-akamai , timestamps can never be 0, as there will no time with 0 value, but it is better to have a defensive check as well, so addressed these too.

pmakode-akamai · 2026-01-23T08:07:44Z

packages/manager/src/features/CloudPulse/Widget/components/useZoomController.ts

+    if (dragStart === null) return;
+
+    const payload = e?.activePayload?.[0]?.payload;
+    if (!payload?.timestamp) return;


same potential issue

pmakode-akamai · 2026-01-23T08:12:58Z

packages/manager/src/features/CloudPulse/Widget/components/useZoomController.ts

+        !prev.refAreaLeft ||
+        !prev.refAreaRight ||


Suggested change

!prev.refAreaLeft ||

!prev.refAreaRight ||

prev.refAreaLeft === undefined ||

prev.refAreaRight === undefined ||

Same potential issue: 0 can be a valid value, so this check could fail. Could you double check this?

venkymano-akamai · 2026-01-23T09:17:36Z

@pmakode-akamai , addressed the comments, lets see if it is good for approval

linode-gh-bot · 2026-01-23T11:32:46Z

Cloud Manager UI test results

🔺 1 failing test on test run #5 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`1 Failing`	`864 Passing`	`11 Skipped`	`37m 1s`

Details

Failing Tests
	Spec	Test
❌	`clone-linode.spec.ts`	Cloud Manager Cypress Tests→clone linode » can clone a Linode from Linode details page

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/linodes/clone-linode.spec.ts"

venkymano-akamai · 2026-01-23T13:43:48Z

Merging it since it has enough approvals, cypress test failures are unrelated, jobs passed

…inside the charts in CloudPulse graphs (linode#13308) * [DI-29167] - Initial changes for widget zoom in feature, Utility setup * [DI-29167] - Add understanding comments * Added changeset: Utils and Hooks set up for supporting zoom in inside the charts in `CloudPulse metrics graphs` * [DI-29167] - Address PR comments

venkymano-akamai added 2 commits January 22, 2026 15:33

[DI-29167] - Initial changes for widget zoom in feature, Utility setup

5469c8e

[DI-29167] - Add understanding comments

2c11d9d

github-project-automation bot added this to Cloud Manager Jan 22, 2026

github-project-automation bot moved this to Review in Cloud Manager Jan 22, 2026

venkymano-akamai added 2 commits January 22, 2026 16:55

Merge branch 'develop' of github.com:linode/manager into widget_zoom_…

262e9c0

…util_setup

Added changeset: Utils and Hooks set up for supporting zoom in inside…

f660451

… the charts in `CloudPulse metrics graphs`

venkymano-akamai self-assigned this Jan 22, 2026

venkymano-akamai added Cloud Pulse Cloud Pulse - Dashboards labels Jan 22, 2026

venkymano-akamai marked this pull request as ready for review January 22, 2026 11:36

venkymano-akamai requested a review from a team as a code owner January 22, 2026 11:36

venkymano-akamai requested review from bnussman-akamai and santoshp210-akamai January 22, 2026 11:36

santoshp210-akamai approved these changes Jan 22, 2026

View reviewed changes

venkymano-akamai requested review from dwiley-akamai and pmakode-akamai January 22, 2026 14:47

pmakode-akamai requested a review from Copilot January 23, 2026 07:21

Copilot AI reviewed Jan 23, 2026

View reviewed changes

pmakode-akamai reviewed Jan 23, 2026

View reviewed changes

[DI-29167] - Address PR comments

c43f8aa

venkymano-akamai requested a review from pmakode-akamai January 23, 2026 09:17

pmakode-akamai approved these changes Jan 23, 2026

View reviewed changes

github-project-automation bot moved this from Review to Approved in Cloud Manager Jan 23, 2026

Merge branch 'develop' into widget_zoom_util_setup

d26dbd3

venkymano-akamai added the Approved Multiple approvals and ready to merge! label Jan 23, 2026

venkymano-akamai merged commit 0c3607b into linode:develop Jan 23, 2026
34 of 35 checks passed

github-project-automation bot moved this from Approved to Merged in Cloud Manager Jan 23, 2026

venkymano-akamai mentioned this pull request Jan 27, 2026

[DI-29167] - Integration changes for graph data zoom in for CloudPulse metrics #13317

Merged

7 tasks

	if (!payload?.timestamp) return;
	if (payload?.timestamp === undefined) return;

Conversation

venkymano-akamai commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Scope 🚢

Target release date 🗓️ Next Release

Preview 📷

How to test 🧪

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

Uh oh!

venkymano-akamai commented Jan 22, 2026

Uh oh!

venkymano-akamai commented Jan 23, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

pmakode-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

pmakode-akamai Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

pmakode-akamai Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

venkymano-akamai Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

pmakode-akamai Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

pmakode-akamai Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

venkymano-akamai commented Jan 23, 2026

Uh oh!

linode-gh-bot commented Jan 23, 2026

Cloud Manager UI test results

🔺 1 failing test on test run #5 ↗︎

Details

Troubleshooting

Uh oh!

venkymano-akamai commented Jan 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

venkymano-akamai commented Jan 22, 2026 •

edited

Loading