feat: persist timeline chart metric in URL by graphieros · Pull Request #3051 · npmx-dev/npmx.dev

graphieros · Jul 15, 2026

🔗 Linked issue

Resolves #3049

🧭 Context

Timeline page: the selected timeline metric should be persisted in the URL.

📚 Description

Set the active tab from the permalink
Some issues related to the fact that the stackbar chart (dependency size chart) was previously never loaded as the first chart, are fixed:
- the chart internally has an autosize feature that adapts the chart area depending on the axis labels: on load, this auto-sizing was visible
- the chart showed its built-in skeleton loader, which was also visible until the chart computed the data set. The ideal solution in general is to set the skeleton to the same types of params as the final chart, but not in this case, since the params are unpredictable (package version names have various lengths, number of data points can vary a lot, making CLS unavoidable during the skeleton -> final render transition).

Both of these issues are fixed by setting the opacity of the chart to 0 while waiting for its internals to stabilize before bumping its opacity back to 1. It's not perfect, a proper solution might be required in the chart library itself, to signal when a chart is stable, but it seems to do the job for now.

The aspect ratio of the ClientOnly's fallback is now also adapted based on the metric, since both chart components have different aspect ratios.

Other:

Bump vue-data-ui to latest, with css transition improvements on scale labels

vercel · Jul 15, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Jul 19, 2026 3:13pm
npmx.dev	Ready	Preview, Comment	Jul 19, 2026 3:13pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Jul 19, 2026 3:13pm

coderabbitai · Jul 15, 2026

📝 Walkthrough

Walkthrough

The timeline chart now stores and validates its active metric in permalink state, preserves scroll position across query changes, coordinates loading visuals and animation pausing with chart state, and updates the vue-data-ui dependency.

Changes

Timeline URL state and rendering

Layer / File(s)	Summary
Permalink metric integration `app/components/Package/TimelineChart.vue`, `app/pages/package-timeline/[[org]]/[packageName].vue`	Reads and validates the metric from permalink state and preserves scroll position when query parameters change.
Chart loading and animation transitions `app/components/Package/TimelineChart.vue`	Adjusts pause timing, applies loading-aware animation controls, fades the stackbar while paused or loading, updates skeleton sizing, and targets loading selectors in scoped CSS.
Chart dependency update `package.json`, `pnpm-workspace.yaml`	Updates `vue-data-ui` to `3.22.13` and excludes that version from the minimum release-age restriction.

Sequence Diagram(s)

sequenceDiagram
  participant PackageTimelinePage
  participant TimelineChart
  participant URLQuery
  PackageTimelinePage->>PackageTimelinePage: preserve scroll on query change
  TimelineChart->>URLQuery: read metric query
  URLQuery-->>TimelineChart: active metric
  TimelineChart->>TimelineChart: reset unsupported metrics to totalSize

Possibly related PRs

npmx-dev/npmx.dev#2663: Introduces the timeline chart implementation modified by this change.
npmx-dev/npmx.dev#2918: Changes animation disabling behaviour in TimelineChart.vue.
npmx-dev/npmx.dev#2979: Adds related dependency-size chart and metric-tab animation behaviour.

Suggested reviewers: ghostdevv

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR also includes chart loading tweaks and a vue-data-ui bump, which are unrelated to storing the tab in the URL.	Move the rendering fixes and dependency bump into a separate PR, or explicitly include them in the linked issue scope.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The permalink metric handling satisfies `#3049` by storing and restoring the selected timeline tab in the URL.
Title check	✅ Passed	The title clearly summarises the main change: persisting the timeline chart metric in the URL.
Description check	✅ Passed	The description matches the changeset and covers URL persistence, chart loading fixes, aspect ratio changes, and the dependency bump.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch 3049-persist-timeline-chart-tab

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

codecov · Jul 15, 2026

Codecov Report

❌ Patch coverage is 80.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/TimelineChart.vue	80.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai

Actionable comments posted: 3

🤖 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 `@app/components/Package/TimelineChart.vue`:
- Line 190: Validate the value returned by usePermalink in activeTab against the
supported metrics totalSize, dependencyCount, and dependencySize, and normalize
unsupported URL values to totalSize. Preserve the existing permalink behavior
for valid metric values.
- Around line 49-53: Update the TimelineChart setup flow to use the declared
props.permalink value when initializing usePermalink, passing it as the
permanent option so the metric tab respects the requested permalink behavior;
remove the unused prop only if this component should always use
route-query-backed state.
- Around line 193-198: Update the chart animation pause flow around
startChartAnimationPauseTimer so props.loading also prevents the dependency-size
stacked bar from becoming visible while size data is still loading. Re-arm or
defer the 300 ms timer during loading, or include the loading state in the bar’s
visibility/opacity condition, while preserving the existing behavior once
loading completes.

🪄 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: CHILL

Plan: Pro

Run ID: 1b0d44c6-c3ab-4f87-b34e-315b091a81d4

📥 Commits

Reviewing files that changed from the base of the PR and between f43ec95 and 863dcf9.

📒 Files selected for processing (2)

app/components/Package/TimelineChart.vue
app/pages/package-timeline/[[org]]/[packageName].vue

socket-security · Jul 17, 2026

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	vue-data-ui@3.22.13

View full report

github-actions · Jul 17, 2026

e18e dependency analysis

No dependency warnings found.

shuuji3

LGTM 👍 Great attention to detail.

feat: persist timeline chart metric in URL

863dcf9

graphieros linked an issue Jul 15, 2026 that may be closed by this pull request

Store timeline page state in the URL #3049

Closed

3 tasks

coderabbitai Bot reviewed Jul 15, 2026

View reviewed changes

Comment thread app/components/Package/TimelineChart.vue

Comment thread app/components/Package/TimelineChart.vue Outdated

Comment thread app/components/Package/TimelineChart.vue

graphieros marked this pull request as draft July 15, 2026 21:24

fix: address CodeRabbit comments

5f74bd2

graphieros marked this pull request as ready for review July 15, 2026 21:41

graphieros marked this pull request as draft July 15, 2026 21:42

graphieros marked this pull request as ready for review July 15, 2026 21:43

vercel Bot deployed to Preview – npmx.dev July 15, 2026 21:44 View deployment

graphieros added the needs review This PR is waiting for a review from a maintainer label Jul 15, 2026

chore(deps): bump vue-data-ui from 3.22.6 to 3.22.12

9a88430

vercel Bot deployed to Preview – docs.npmx.dev July 17, 2026 17:11 View deployment

vercel Bot deployed to Preview – npmx.dev July 17, 2026 17:11 View deployment

Merge branch 'main' into 3049-persist-timeline-chart-tab

834e230

graphieros requested a review from a team July 17, 2026 17:15

vercel Bot deployed to Preview – npmx.dev July 17, 2026 17:17 View deployment

Merge branch 'main' into 3049-persist-timeline-chart-tab

349330c

vercel Bot deployed to Preview – npmx.dev July 19, 2026 15:07 View deployment

chore: bump vue-data-ui from 3.22.12 to 3.22.13

8dc7bf1

vercel Bot deployed to Preview – docs.npmx.dev July 19, 2026 15:12 View deployment

vercel Bot deployed to Preview – npmx.dev July 19, 2026 15:13 View deployment

shuuji3 approved these changes Jul 19, 2026

View reviewed changes

graphieros added this pull request to the merge queue Jul 19, 2026

graphieros removed the needs review This PR is waiting for a review from a maintainer label Jul 19, 2026

Merged via the queue into main with commit 51474c3 Jul 19, 2026
30 checks passed

graphieros deleted the 3049-persist-timeline-chart-tab branch July 19, 2026 16:00

github-actions Bot mentioned this pull request Jul 19, 2026

chore: release v0.18.0 #3057

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: persist timeline chart metric in URL - #3051

feat: persist timeline chart metric in URL#3051
graphieros merged 6 commits into
mainnpmx-dev/npmx.dev:mainfrom
3049-persist-timeline-chart-tabnpmx-dev/npmx.dev:3049-persist-timeline-chart-tabCopy head branch name to clipboard

graphieros commented Jul 15, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 15, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 15, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Jul 15, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

socket-security Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 17, 2026

Uh oh!

shuuji3 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Search code, repositories, users, issues, pull requests...

Uh oh!

Uh oh!

Conversation

graphieros commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Other:

Uh oh!

vercel Bot commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

socket-security Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 17, 2026

e18e dependency analysis

Uh oh!

shuuji3 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

graphieros commented Jul 15, 2026 •

edited

Loading

vercel Bot commented Jul 15, 2026 •

edited

Loading

coderabbitai Bot commented Jul 15, 2026 •

edited

Loading

codecov Bot commented Jul 15, 2026 •

edited

Loading

socket-security Bot commented Jul 17, 2026 •

edited

Loading