feat: improve scatter legend interactivity#2649
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
graphieros
changed the title
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughSummary by CodeRabbit
WalkthroughRefactors 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 Changes
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
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Review rate limit: 5/8 reviews remaining, refill in 18 minutes and 43 seconds.Comment |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub. |
|
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.
|
e18e dependency analysisNo dependency warnings found. |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
graphieros
added
the
needs review
MatteoGabriele
left a comment
MatteoGabriele
left a comment
There was a problem hiding this comment.
LGTM! literally two skippable nit-peaking comments, but you can merge as is! 💖
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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
📒 Files selected for processing (1)
app/components/Compare/FacetScatterChart.vue
There was a problem hiding this comment.
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
📒 Files selected for processing (1)
app/components/Compare/FacetScatterChart.vue
3 participants
Follow up to #2493
This improves the interactivity features of the legend of the scatter chart in the compare page:
#legendslot, see release notes)Enregistrement.de.l.ecran.2026-04-28.a.22.59.51.mov