feat: persist timeline chart metric in URL

[graphieros]

🔗 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 (release notes)

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jul 17, 2026 5:17pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jul 17, 2026 5:17pm
npmx-lunaria	Ignored		Jul 17, 2026 5:17pm

[coderabbitai]

📝 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.12 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

Loading

Possibly related PRs

• npmx-dev/npmx.dev#2744: Updates the same vue-data-ui dependency.
• npmx-dev/npmx.dev#2918: Changes animation disabling behaviour in TimelineChart.vue.
• npmx-dev/npmx.dev#2979: Introduces 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 adds rendering, scroll-preservation, and dependency-bump changes beyond #3049's URL-state scope.	Separate the chart-rendering and dependency-update work into another PR, or link an issue that explicitly covers those changes.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The permalink state change satisfies #3049 by storing and restoring the selected timeline metric in the URL.
Title check	✅ Passed	The title clearly matches the main change: persisting the timeline chart metric in the URL.
Description check	✅ Passed	The description directly covers the URL persistence, active tab restore, and chart rendering fixes in the change set.

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

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]

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

View full report

[github-actions]

e18e dependency analysis

No dependency warnings found.