feat: Add interactive GitHub Repository Dependency Graph (JhaSourav07#1623)

Closes JhaSourav07#1183 

## Description
This PR introduces an interactive **GitHub Repository Dependency Graph**
to visualize a user's repository network, forks, and open-source
contributions.
### Key Changes

## Pillar
- [ ] 🎨 Pillar 1 — New Theme Design
- [x] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [x] 🛠️ Other (New UI visualization widget & GraphQL integration)

## Visual Preview

- Interactive 2D force-directed relationship graph rendered at the
bottom of the user's dashboard view.



https://github.com/user-attachments/assets/655018b3-4e00-49cc-ab3e-c26f3a9f2b68


<img width="1366" height="798" alt="Screenshot 2026-05-30 100932"
src="https://github.com/user-attachments/assets/8f84a132-002d-4052-920d-3229f3b98a51"
/>



## Checklist before requesting a review:
- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally.
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format.
- [] I have updated `README.md` if I added a new theme or URL parameter.
- [x] I have starred the repo.
- [x] I have made sure that I have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [x] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/(root)/dashboard/[username]/page.test.tsx

@@ -91,6 +91,7 @@ describe('DashboardPage', () => {
     insights: [],
     achievements: [],
     commitClock: [],
+    graphData: { nodes: [], links: [] },
   };
 
   beforeEach(() => {

components/dashboard/DashboardClient.test.tsx

@@ -134,6 +134,7 @@ const mockInitialData = {
   insights: [{ id: '1', icon: 'zap', text: 'Highly active in mornings' }],
   achievements: [],
   commitClock: [],
+  graphData: { nodes: [], links: [] },
 };
 
 const mockSecondData = {
@@ -170,6 +171,7 @@ const mockSecondData = {
   insights: [{ id: '1', icon: 'zap', text: 'Hard worker' }],
   achievements: [],
   commitClock: [],
+  graphData: { nodes: [], links: [] },
 };
 
 const initialDataWithHigherStreak = {

components/dashboard/DashboardClient.tsx

@@ -6,6 +6,7 @@ import { X, RefreshCw } from 'lucide-react';
 import Link from 'next/link';
 import { toast } from 'sonner';
 import type { Achievement } from '@/types/dashboard';
+import type { GraphNode, GraphLink } from '@/types';
 
 import RefreshButton from './RefreshButton';
 import ProfileCard from './ProfileCard';
@@ -16,6 +17,7 @@ import CommitClock from './CommitClock';
 import Heatmap from './Heatmap';
 import AIInsights from './AIInsights';
 import StatsCard from './StatsCard';
+import RepositoryGraph from './RepositoryGraph';
 import ComparisonStatsCard from './ComparisonStatsCard';
 import RadarChart from './RadarChart';
 import GrowthTrendChart from './GrowthTrendChart';
@@ -63,6 +65,10 @@ interface DashboardData {
     day: string;
     commits: number;
   }>;
+  graphData: {
+    nodes: GraphNode[];
+    links: GraphLink[];
+  };
 }
 
 interface DashboardClientProps {
@@ -505,7 +511,7 @@ export default function DashboardClient({ initialData, username }: DashboardClie
         /* Standard Single Profile View */
         <div className="grid grid-cols-1 lg:grid-cols-[300px_1fr_320px] gap-6 lg:gap-8">
           {/* Left Sidebar */}
-          <aside className="flex flex-col gap-6">
+          <aside className="flex flex-col gap-6 lg:row-span-2">
             <ProfileCard
               user={initialData.profile}
               exportData={{
@@ -562,6 +568,11 @@ export default function DashboardClient({ initialData, username }: DashboardClie
 
             <AIInsights insights={initialData.insights} />
           </aside>
+
+          {/* Repository Graph Section */}
+          <div className="col-span-1 lg:col-span-2 lg:col-start-2">
+            <RepositoryGraph data={initialData.graphData} />
+          </div>
         </div>
       ) : (
         /* Compare Mode Split-Dashboard View */

components/dashboard/RepositoryGraph.test.tsx

@@ -0,0 +1,163 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import React from 'react';
+import RepositoryGraph from './RepositoryGraph';
+import type { GraphNode, GraphLink } from '@/types';
+
+// Mock next/dynamic to return our ForceGraphMock component directly and synchronously
+vi.mock('next/dynamic', () => {
+  const DynamicForceGraphMock = React.forwardRef((props: any, ref: any) => {
+    React.useImperativeHandle(ref, () => ({
+      centerAt: vi.fn(),
+      zoom: vi.fn(),
+    }));
+
+    return (
+      <div data-testid="force-graph-2d">
+        {props.graphData?.nodes?.map((node: any) => (
+          <button
+            key={node.id}
+            data-testid={`graph-node-${node.id}`}
+            onClick={() => props.onNodeClick?.(node)}
+            onMouseEnter={() => props.onNodeHover?.(node)}
+            onMouseLeave={() => props.onNodeHover?.(null)}
+          >
+            {node.name}
+          </button>
+        ))}
+      </div>
+    );
+  });
+  DynamicForceGraphMock.displayName = 'ForceGraph2D';
+  return {
+    default: () => DynamicForceGraphMock,
+  };
+});
+
+// Mock window.innerWidth/innerHeight or clientWidth/clientHeight
+Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+  configurable: true,
+  value: 800,
+});
+
+describe('RepositoryGraph', () => {
+  const mockData = {
+    nodes: [
+      { id: 'user1', name: 'User 1', type: 'User', val: 30, color: '#FFF' },
+      {
+        id: 'repo1',
+        name: 'Repo 1',
+        type: 'Repo',
+        val: 15,
+        color: '#FFF',
+        stats: { stars: 10, forks: 2, language: 'TypeScript', updatedAt: '2024-05-30T00:00:00Z' },
+      },
+      {
+        id: 'fork1',
+        name: 'Fork 1',
+        type: 'Fork',
+        val: 10,
+        color: '#FFF',
+        stats: { stars: 0, forks: 0, language: 'JavaScript' },
+      },
+      {
+        id: 'contrib1',
+        name: 'Contrib 1',
+        type: 'Contribution',
+        val: 20,
+        color: '#FFF',
+        stats: { stars: 100, forks: 50, language: 'Rust' },
+      },
+    ] as GraphNode[],
+    links: [
+      { source: 'user1', target: 'repo1' },
+      { source: 'user1', target: 'fork1' },
+      { source: 'user1', target: 'contrib1' },
+    ] as GraphLink[],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the empty state if data has 1 or fewer nodes', () => {
+    const emptyData = { nodes: [mockData.nodes[0]], links: [] };
+    render(<RepositoryGraph data={emptyData} />);
+    expect(screen.getByText('No repository relationship data available yet.')).toBeDefined();
+  });
+
+  it('renders the title and filter buttons', () => {
+    render(<RepositoryGraph data={mockData} />);
+    expect(screen.getByText('🌐 Repository Dependency Graph')).toBeDefined();
+    expect(screen.getByText('Personal')).toBeDefined();
+    expect(screen.getByText('Contributions')).toBeDefined();
+    expect(screen.getByText('Forks')).toBeDefined();
+  });
+
+  it('toggles filters when clicked', () => {
+    render(<RepositoryGraph data={mockData} />);
+
+    const personalBtn = screen.getByText('Personal');
+    const contributionsBtn = screen.getByText('Contributions');
+    const forksBtn = screen.getByText('Forks');
+
+    // Turn off Personal
+    fireEvent.click(personalBtn);
+    expect(screen.queryByTestId('graph-node-repo1')).toBeNull();
+
+    // Turn off Contributions
+    fireEvent.click(contributionsBtn);
+    expect(screen.queryByTestId('graph-node-contrib1')).toBeNull();
+
+    // Turn off Forks
+    fireEvent.click(forksBtn);
+    expect(screen.queryByTestId('graph-node-fork1')).toBeNull();
+
+    // Turn Personal back on
+    fireEvent.click(personalBtn);
+    expect(screen.getByTestId('graph-node-repo1')).toBeDefined();
+  });
+
+  it('displays a tooltip on node hover', async () => {
+    render(<RepositoryGraph data={mockData} />);
+
+    const repoNode = screen.getByTestId('graph-node-repo1');
+
+    // Hover
+    fireEvent.mouseEnter(repoNode);
+    expect(screen.getAllByText('Repo 1').length).toBeGreaterThan(1);
+    expect(screen.getByText('10 Stars')).toBeDefined();
+    expect(screen.getByText('2 Forks')).toBeDefined();
+    expect(screen.getByText('TypeScript')).toBeDefined();
+
+    // Unhover
+    fireEvent.mouseLeave(repoNode);
+    expect(screen.queryByText('10 Stars')).toBeNull();
+  });
+
+  it('zooms on node click', () => {
+    render(<RepositoryGraph data={mockData} />);
+    const repoNode = screen.getByTestId('graph-node-repo1');
+    fireEvent.click(repoNode);
+    // Click successfully processed without throwing
+    expect(repoNode).toBeDefined();
+  });
+
+  it('handles window resize', () => {
+    render(<RepositoryGraph data={mockData} />);
+    act(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+    // Check that it didn't throw
+    expect(screen.getByText('🌐 Repository Dependency Graph')).toBeDefined();
+  });
+
+  it('calculates and renders correct insights in the sidebar', () => {
+    render(<RepositoryGraph data={mockData} />);
+    // mockData has 1 repo + 1 fork = 2 ecosystem size
+    expect(screen.getByText('2 Repositories connected')).toBeDefined();
+    // Contrib 1 is the most starred (100 stars)
+    expect(screen.getAllByText(/Contrib 1/).length).toBeGreaterThan(0);
+  });
+});