feat: improve scatter legend interactivity by graphieros · Pull Request #2649 · npmx-dev/npmx.dev

graphieros · 2026-04-28T21:05:35Z

Follow up to #2493

This improves the interactivity features of the legend of the scatter chart in the compare page:

bump vue-data-ui to 3.18.2 (adds events to the #legend slot, see release notes)
datapoints are highlighted when hovering legend items (same behavior has hovering actual datapoints)
a css transition was added to ease the plots repositioning when filtering out a series results in a change of scale. This transition is not applied if prefers-reduced-motion.

Enregistrement.de.l.ecran.2026-04-28.a.22.59.51.mov

vercel · 2026-04-28T21:05:40Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 29, 2026 9:38am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 29, 2026 9:38am
npmx-lunaria	Ignored		Apr 29, 2026 9:38am

coderabbitai · 2026-04-28T21:06:18Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6fa39fd1-4c20-4796-bf48-41b903375a98

📥 Commits

Reviewing files that changed from the base of the PR and between e7a03c1 and 96d992b.

📒 Files selected for processing (1)

app/components/Compare/FacetScatterChart.vue

📝 Walkthrough

Summary by CodeRabbit

Improvements
- Clearer legend button interactions with improved hover, focus and keyboard behaviour
- Updated visual styling for legend items (strike-through when segregated, underline on hover)
- Smooth scatter‑chart transitions with a new easing; respects reduced‑motion accessibility setting
Chores
- Updated a project dependency version

Walkthrough

Refactors legend rendering in FacetScatterChart.vue to operate on VueUiScatterSeries objects, introduces a toggleLegendItem helper sequencing segregate() and onEnter(), updates ARIA/visual bindings, adds SVG transitions with a reduced-motion override, and bumps vue-data-ui 3.18.0 → 3.18.2.

Changes

Cohort / File(s)	Summary
FacetScatterChart component `app/components/Compare/FacetScatterChart.vue`	Legend rendering now iterates `VueUiScatterSeries` (`legendItem`); ARIA attributes, marker fill and text use `legendItem`; hover/focus call `legendItem.onEnter()` and blur/leave call `legendItem.onLeave()`; new `toggleLegendItem` helper calls `legendItem.segregate()` then `legendItem.onEnter()`; inline `textDecoration` replaced by conditional classes; SVG dot/scale/label transitions added with `--super-ease-out` and `prefers-reduced-motion` override.
Dependency update `package.json`	Bumped `dependencies.vue-data-ui` from `3.18.0` to `3.18.2`.

Sequence Diagram(s)

sequenceDiagram
participant User
participant FacetScatterChart
participant VueUiScatterSeries as Series
participant Renderer
User->>FacetScatterChart: click legend button
FacetScatterChart->>Series: toggleLegendItem() -> segregate()
Series-->>FacetScatterChart: segregation state updated
FacetScatterChart->>Series: onEnter()
Series-->>FacetScatterChart: highlight state updated
FacetScatterChart->>Renderer: re-render scatter (transitions applied)
Renderer-->>User: visual update (dot/label transitions)

Possibly related PRs

fix: improve compare scatter chart legend #2493: Related changes to scatter chart legend layout/teleport/responsive rendering in the same FacetScatterChart.vue.
chore: bump vue-data-ui from 3.17.13 to 3.18.0 #2633: Related modifications around scatter types/imports and runtime usage of VueUiScatterSeries/formatter typings in FacetScatterChart.vue.

Suggested reviewers

alexdln
MatteoGabriele

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately captures the main change: improving scatter legend interactivity with new event handling, hover highlighting, and CSS transitions.
Description check	✅ Passed	The description is clearly related to the changeset, providing context about the vue-data-ui version bump, legend interactivity improvements, and CSS transitions.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch compare-scatter-chart-legend-selection

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

_{Review rate limit: 5/8 reviews remaining, refill in 18 minutes and 43 seconds.}

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

socket-security · 2026-04-28T21:07:09Z

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

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@shikijs/markdown-exit@4.0.2
	@types/sanitize-html@2.16.1
	@unocss/nuxt@66.6.7
	@vueuse/shared@14.2.1
	@takumi-rs/core@1.0.9
	@takumi-rs/wasm@1.0.9
	@types/semver@7.7.1
	@vueuse/core@14.2.1
	@vueuse/router@14.2.1
	@voidzero-dev/vite-plus-test@0.1.16
	@unocss/preset-wind4@66.6.7
	@types/validate-npm-package-name@4.0.2
	@storybook/addon-a11y@10.3.5
	@vitest/coverage-v8@4.1.5
	@types/node@24.12.0
	@vite-pwa/assets-generator@1.0.2
	@vueuse/nuxt@14.2.1
	@vueuse/integrations@14.2.1
	@vue/test-utils@2.4.6
	@vite-pwa/nuxt@1.1.1
	@storybook/addon-themes@10.3.5
	@storybook-vue/nuxt@9.0.1
	@upstash/redis@1.37.0
	@storybook/addon-docs@10.3.5

View full report

socket-security · 2026-04-28T21:07:11Z

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Warn		Obfuscated code: npm `@voidzero-dev/vite-plus-core` is 91.0% likely obfuscated Confidence: 0.91 Location:Package overview From:pnpm-lock.yaml → `npm/@voidzero-dev/vite-plus-test@0.1.16` → `npm/@storybook-vue/nuxt@9.0.1` → `npm/@voidzero-dev/vite-plus-core@0.1.16` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/@voidzero-dev/vite-plus-core@0.1.16`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

github-actions · 2026-04-28T21:08:38Z

e18e dependency analysis

No dependency warnings found.

codecov · 2026-04-28T21:09:20Z

Codecov Report

❌ Patch coverage is 9.09091% with 10 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Compare/FacetScatterChart.vue	9.09%	10 Missing ⚠️

📢 Thoughts on this report? Let us know!

MatteoGabriele

LGTM! literally two skippable nit-peaking comments, but you can merge as is! 💖

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/components/Compare/FacetScatterChart.vue`:
- Around line 289-292: The click handler toggleLegendItem should not call
legendItem.onEnter() because that couples click/tap to hover state and causes
sticky highlights on coarse-pointer devices; instead, remove the onEnter()
invocation and only call legendItem.segregate() (or toggle visibility) in
toggleLegendItem, leaving highlight state to the existing hover/focus handlers
(e.g., onEnter/onLeave or focus/blur methods on VueUiScatterSeries); apply the
same change to the other similar handler that currently calls onEnter() after
segregate().

🪄 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: 0604eb8a-3d12-4ae4-a4e6-9820e09bb10d

📥 Commits

Reviewing files that changed from the base of the PR and between 54fab91 and cace89e.

📒 Files selected for processing (1)

app/components/Compare/FacetScatterChart.vue

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/components/Compare/FacetScatterChart.vue`:
- Line 398: The v-for on the legend uses a non-unique display label as the key
(the template line with li v-for="legendItem in legend" :key="legendItem.name");
change the key to a collision-safe unique identifier (e.g. use a stable id field
on legendItem like legendItem.id or a composite key such as
`${legendItem.name}-${index}`) and if no unique id exists add the index fallback
in the key expression so duplicate display names cannot cause incorrect list
patching or state reuse.

🪄 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: f1758748-6769-4fc9-961f-6ce7a6cb4bf0

📥 Commits

Reviewing files that changed from the base of the PR and between cace89e and e7a03c1.

📒 Files selected for processing (1)

app/components/Compare/FacetScatterChart.vue

graphieros added 2 commits April 28, 2026 22:58

chore: bump vue-data-ui from 3.18.0 to 3.18.2
c4976f7

feat: highlight scatter datapoints from its legend
e21dcb5

graphieros changed the title ~~Compare scatter chart legend selection~~feat: improve scatter legend interactivityApr 28, 2026

Merge branch 'main' into compare-scatter-chart-legend-selection
54fab91

vercelBotdeployed to Preview – npmx.dev April 28, 2026 21:09 View deployment

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

graphieros requested a review from a teamApril 28, 2026 21:29

MatteoGabriele approved these changes Apr 29, 2026
View reviewed changes

Comment threadapp/components/Compare/FacetScatterChart.vue Outdated
Comment threadapp/components/Compare/FacetScatterChart.vue Outdated

graphierosand others added 2 commits April 29, 2026 11:25

fix: refactor
15498c8

Merge branch 'main' into compare-scatter-chart-legend-selection
cace89e

vercelBotdeployed to Preview – npmx.dev April 29, 2026 09:27 View deployment

MatteoGabriele reviewed Apr 29, 2026
View reviewed changes

Comment threadapp/components/Compare/FacetScatterChart.vue Outdated

coderabbitaiBot reviewed Apr 29, 2026
View reviewed changes

Comment threadapp/components/Compare/FacetScatterChart.vue

fix: refactor
e7a03c1

vercelBotdeployed to Preview – npmx.dev April 29, 2026 09:33 View deployment

coderabbitaiBot reviewed Apr 29, 2026
View reviewed changes

Comment threadapp/components/Compare/FacetScatterChart.vue Outdated

fix: use id as key
96d992b

vercelBotdeployed to Preview – npmx.dev April 29, 2026 09:38 View deployment

43081j approved these changes Apr 29, 2026
View reviewed changes

graphieros added this pull request to the merge queue Apr 29, 2026

Merged via the queue into main with commit 2d613b2Apr 29, 2026
26 checks passed

graphieros deleted the compare-scatter-chart-legend-selection branch April 29, 2026 09:46

github-actionsBot mentioned this pull request Apr 29, 2026
chore: release v0.10.0 #2533
Merged

gameroman removed the needs review This PR is waiting for a review from a maintainer label May 24, 2026

ayo-run pushed a commit to ayo-run/npmx.dev that referenced this pull request Aug 5, 2026
feat: improve scatter legend interactivity (npmx-dev#2649)
7fb6893

Uh oh!

Uh oh!

Conversation

graphieros commented Apr 28, 2026

Uh oh!

vercelBot commented Apr 28, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitaiBot commented Apr 28, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested reviewers

Uh oh!

socket-securityBot commented Apr 28, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-securityBot commented Apr 28, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actionsBot commented Apr 28, 2026

e18e dependency analysis

Uh oh!

codecovBot commented Apr 28, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

MatteoGabriele left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitaiBot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitaiBot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercelBot commented Apr 28, 2026•
edited
Loading

coderabbitaiBot commented Apr 28, 2026•
edited
Loading

socket-securityBot commented Apr 28, 2026•
edited
Loading

socket-securityBot commented Apr 28, 2026•
edited
Loading

codecovBot commented Apr 28, 2026•
edited
Loading