gh-repomap-dashboard

A modern web dashboard for visualizing inter-repository dependency graphs produced by gh-repo-map. Designed for enterprise scale — handles 10,000+ repositories across multiple GitHub organizations.

Features

• 📊 Overview Dashboard — Stats, dependency type distribution, critical repos at a glance
• 🔍 Searchable Repo List — Virtualized table with sorting, filtering, and keyboard navigation
• 🌐 Interactive Dependency Graph — WebGL-powered (Sigma.js) visualization with zoom, pan, and highlighting
• 🎯 Smart Filtering — Filter by org, ecosystem, dependency type, confidence level, connected repo group (weak), archived toggle, and free-text search
• 📋 Repo Detail Panel — Drill into direct, transitive, and reverse dependencies
• 💡 Insights — Critical repos, mutual dependency groups (strong), orphan repos, connected repo group explorer (weak), connectivity comparison, migration cohort guidance
• 📤 Export — Share filtered views via URL, export as JSON or CSV
• 🌓 Dark Mode — Full Primer design system integration
• ♿ Accessible — WCAG 2.1 AA, keyboard navigation, screen reader support

Quick Start

npm install
npm run dev

Open http://localhost:5173 and upload a gh-repo-map JSON file.

Usage

1. Generate a dependency map: gh repo-map --orgs my-org --output repomap.json
2. Open the dashboard and upload the JSON file (drag-and-drop or file picker)
3. Explore the dependency graph, filter by org/type, and drill into individual repos

For split files (per-org mode), upload all files at once — they'll be automatically merged.

Interpreting Connectivity Groups

• Repo Groups (Weak): ignores edge direction; good for migration wave sizing and blast-radius scoping.
• Repo Groups (Strong): keeps edge direction; shows repos that are mutually reachable and harder to separate.

Example: if A depends on B, B depends on C, and C depends on B — weak grouping places A, B, C together (any connection counts), while strong grouping yields {B, C} as a group (they depend on each other) and A stays separate (nothing depends back on A).

Caveat: both group types can include external/unscanned repos when dependencies target repos outside the scanned set.

Tech Stack

• React 19 + TypeScript (strict mode)
• GitHub Primer Design System (@primer/react)
• Sigma.js v3 + Graphology (WebGL graph visualization)
• Zustand (state management with URL sync)
• Zod (runtime schema validation)
• Vite (build tooling)
• Vitest + React Testing Library (testing)

Development

npm run dev          # Start dev server
npm run build        # Production build
npm run test         # Run tests
npm run test:watch   # Watch mode
npm run lint         # Lint
npm run typecheck    # Type check

Generating Test Fixtures

npx tsx src/test/fixtures/generate.ts

Generates small.json (50 repos), medium.json (1K repos), and edge-cases.json fixtures.

Deployment (GitHub Pages)

1. In GitHub, go to Settings > Pages and set Source to GitHub Actions.
2. Push to main (or run Actions > Deploy to GitHub Pages > Run workflow).
3. The workflow installs dependencies, runs tests + type-check, builds, and deploys dist/.

The workflow sets VITE_BASE_PATH from actions/configure-pages for correct project Pages paths.

Architecture

Static SPA with zero backend. Users upload JSON files directly in the browser.

• Data pipeline: File → Web Worker (parse + validate + build graph) → Zustand store
• Graph engine: Graphology (data model) + Sigma.js (WebGL rendering)
• Filtering: Toggling hidden attributes on graph nodes/edges (no rebuild)
• Scale: Tested with 10K+ repos, virtualized lists, WebGL rendering

License

MIT