Skip to content

feat: add contributor avatars with circular clipping and border #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rahul-vyas-dev wants to merge 1 commit into
base: main
Choose a base branch
from
+26 −3
Open

feat: add contributor avatars with circular clipping and border #84

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 26 additions & 3 deletions src/pages/NetworkPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,33 @@ export default function NetworkPage() {
.attr('fill', healthColor(d.data.healthScore || 0))
.attr('stroke', '#0d0d0d').attr('stroke-width', 1.5)
} else {
const r = contribR(d.data.totalContribs || 1)

const clipId = `avatar-clip-${d.id}`

svg.append('defs')
.append('clipPath')
.attr('id', clipId)
.append('circle')
Comment on lines +100 to +103

@coderabbitai coderabbitai Bot Jun 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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

.attr('r', r)
.attr('cx', 0)
.attr('cy', 0)

// Avatar image
el.append('image')
.attr('href', d.data.avatar_url)
.attr('x', -r)
.attr('y', -r)
.attr('width', r * 2)
.attr('height', r * 2)
.attr('clip-path', `url(#${clipId})`)

// Border around avatar
el.append('circle')
.attr('r', contribR(d.data.totalContribs || 1))
.attr('fill', d.data.isConnector ? '#f5c518' : '#555')
.attr('stroke', '#0d0d0d').attr('stroke-width', 1.5)
.attr('r', r)
.attr('fill', 'none')
.attr('stroke', d.data.isConnector ? '#f5c518' : '#555')
.attr('stroke-width', 2)
}
const labelY = d.type === 'repo'
? repoRadius(d.data.stargazers_count || 0) + 11
Expand Down
Loading