feat: add contributor avatars with circular clipping and border#84
feat: add contributor avatars with circular clipping and border#84rahul-vyas-dev wants to merge 1 commit into
Conversation
WalkthroughContributor nodes in the network graph SVG are changed from rendering a plain filled/stroked circle to rendering a clipped avatar image. Each node now gets a ChangesContributor Node Avatar Rendering
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested labels
Poem
🚥 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. Comment |
github-actions
Bot
added
no-issue-linked
![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 current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/NetworkPage.jsx`:
- Around line 100-103: The `svg.append('defs')` call is currently being executed
inside the contributor node iteration loop, creating a new `<defs>` container
for each node which is inefficient. Move the `svg.append('defs')` statement
outside and before the loop that iterates through contributors, store the
resulting `defs` reference in a variable, and then inside the loop append the
`clipPath` to the existing `defs` container instead of creating a new one each
time. This ensures a single shared `<defs>` container is created once and reused
for all subsequent `clipPath` elements.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: f75c1f57-245f-486f-9750-01f75b158dad
📒 Files selected for processing (1)
src/pages/NetworkPage.jsx
| svg.append('defs') | ||
| .append('clipPath') | ||
| .attr('id', clipId) | ||
| .append('circle') |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | ⚡ Quick win
Use a single shared <defs> container instead of creating one per node.
svg.append('defs') inside each contributor iteration creates unnecessary DOM nodes and work. Create <defs> once, then append each clipPath into it.
Proposed refactor
+ const defs = svg.append('defs')
+
node.each(function(d) {
const el = d3.select(this)
if (d.type === 'repo') {
const r = repoRadius(d.data.stargazers_count || 0)
el.append('rect')
@@
} else {
const r = contribR(d.data.totalContribs || 1)
const clipId = `avatar-clip-${d.id}`
- svg.append('defs')
- .append('clipPath')
+ defs.append('clipPath')
.attr('id', clipId)
.append('circle')
.attr('r', r)
.attr('cx', 0)
.attr('cy', 0)🤖 Prompt for 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.
In `@src/pages/NetworkPage.jsx` around lines 100 - 103, The `svg.append('defs')`
call is currently being executed inside the contributor node iteration loop,
creating a new `<defs>` container for each node which is inefficient. Move the
`svg.append('defs')` statement outside and before the loop that iterates through
contributors, store the resulting `defs` reference in a variable, and then
inside the loop append the `clipPath` to the existing `defs` container instead
of creating a new one each time. This ensures a single shared `<defs>` container
is created once and reused for all subsequent `clipPath` elements.
Source: Coding guidelines
1 participant
Screenshots/Recordings:
Before:
After:
Additional Notes:
This PR changes to show contributors avatar in Network tab for repo-contributor graph.
Previously this only shows a circle, but changes made in src/pages/NetworkPage.jsx to display the avatar of the contributor.
This change ensures better UX.
Checklist
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.
Summary by CodeRabbit