Graphify Visualizer

A high-performance, editorially-crafted graph visualization platform for exploring codebase architectures. Built with a precision-engineered PlayStation-inspired design system and neural rendering engine.

Overview

Graphify transforms complex dependency graphs into navigable architectural landscapes. Through a force-directed 2D canvas powered by WebGL acceleration, it renders 100k+ nodes with fluid interactivity while maintaining a disciplined editorial aesthetic.

Designed for developers, architects, and codebase explorers who demand clarity at scale.

Key Features

🧠 Neural Graph Engine

• Hardware-accelerated rendering via react-force-graph-2d (WebGL) supporting 100k+ nodes
• Instant focus navigation: Click any node to center and highlight its dependency tree
• Real-time physics: Force-directed layout with adjustable simulation parameters
• File type differentiation: Distinct visual treatment for modules, packages, and entry points

🔍 Intelligent Filtering System

• Neural Search: Real-time node filtering by identity across the entire graph
• Degree constraints: Filter by inbound/outbound connection counts (min/max thresholds)
• Community clustering: Partition analysis revealing architectural boundaries
• Multi-criteria composition: Combine search, degree, and cluster filters simultaneously
• Dynamic statistics: Live counts of visible nodes, edges, file types, and communities

🎨 PlayStation Design System

Every pixel reflects a disciplined design language inspired by PlayStation.com:

Typography

• SST typeface with weight-300 display hierarchy (22–54px)
• Nine distinct type scales from micro-captions to hero displays
• Letter-spacing tuned to 0.1–0.45px for editorial refinement

Color Palette

• PlayStation Blue (#0070cc) — primary brand anchor
• PlayStation Cyan (#1eaedb) — interaction accent (hover/focus only)
• Commerce Orange (#d53b00) — buy/action contexts
• Console Black, Paper White, Deep Charcoal surfaces

Interaction Signature

• Every primary button scales 1.2× on hover
• Cyan fill + 2px white border + 2px blue outer ring bloom
• 180ms ease transition across color, transform, and shadow

Spatial System

• 8px base unit spacing scale (1, 2, 3, 4.5, 5, 8, 9, 10, 12, 14, 15, 16, 18, 20, 21px)
• 11-radius scale: 2px → 999px pill (2, 3, 6, 12, 13, 19, 20, 24, 36, 48, 999)
• Four shadow tiers: 0.06 / 0.08 / 0.16 / 0.8 opacity
• Three-surface layout: Dark hero → White content → Deep blue footer

Responsive Architecture

• 9 breakpoints from 320px mobile to 2120px 4K displays
• TV-optimized tuning for PlayStation console browsing
• Touch targets WCAG AAA compliant (48px+)

Tech Stack

Core

• React 19 with Compiler enabled
• TypeScript strict type safety
• Vite build tooling with HMR

Visualization

• react-force-graph-2d ^1.29.1 — WebGL-accelerated force-directed graphs

Styling

• Tailwind CSS 4 utility-first styling
• clsx conditional class composition
• tailwind-merge conflict resolution

State Management

• Zustand ^5.0.12 lightweight store
• Web Worker for off-main-thread graph parsing (100MB file support)

Tooling

• ESLint with TypeScript-aware rules
• Babel + React Compiler
• PostCSS with Autoprefixer

Icons

• lucide-react ^1.9.0

Getting Started

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint codebase
npm run lint

Usage

1. Upload a Graph: Click "Upload Archive" and select a JSON graph file (≤100MB)

   Or place a graph.json in the /public folder for local development.

2. Navigate the Canvas:

   • Drag to pan
   • Scroll to zoom
   • Click nodes to focus and inspect
   • Drag nodes to reposition

3. Filter & Analyze:

   • Open the filter panel (bottom center)
   • Search by node name/identity
   • Adjust degree thresholds
   • Toggle community clusters
   • Reset with "Reset" button

4. Inspect Nodes:

   • Click any node to open detail panel
   • View imports, exports, and dependencies
   • Navigate connected modules

Architecture

Data Flow

JSON File → Web Worker → Parser → Zustand Store → React Components
                                          ↓
                                  Force-Graph 2D
                                          ↓
                                  WebGL Renderer

Component Structure

src/
├── App.tsx                 # Root layout with PS design system
├── components/
│   ├── FileUpload.tsx      # Archive upload with worker dispatch
│   ├── FilterPanel.tsx     # Search, degree, cluster controls
│   ├── GraphCanvas.tsx     # Force-graph 2D canvas wrapper
│   └── NodeDetailPanel.tsx # Node inspection sidebar
├── store/
│   └── useGraphStore.ts    # Zustand state management
├── hooks/
│   └── useFilteredGraph.ts # Memoized filter composition
└── utils/
    └── graphWorker.ts      # Off-thread graph parsing

State Management (Zustand)

The store manages:

• fullData — Complete parsed graph (nodes, links)
• filteredData — Reactively filtered subset
• selectedNode — Currently focused node
• filters — Search query, degree bounds, cluster selections
• loading — Async operation state

Design Tokens

All styling flows through CSS custom properties defined in src/index.css:

--color-ps-black: #000000
--color-ps-white: #ffffff
--color-ps-blue: #0070cc
--color-ps-cyan: #1eaedb
--color-ps-orange: #d53b00
--radius-pill: 999px
--shadow-hero: 0 5px 9px 0 rgba(0, 0, 0, 0.8)

Graph JSON Format

Expected structure for uploaded files:

{
  "nodes": [
    {
      "id": "module-name",
      "type": "file|package|entry",
      "fileType": "ts|js|json",
      "size": 1234,
      "label": "Short name"
    }
  ],
  "links": [
    {
      "source": "module-a",
      "target": "module-b",
      "type": "import|export|dependency"
    }
  ]
}

Constraints

• Max file size: 100MB (browser memory limits)
• Supported formats: JSON graph definitions
• Browser: Modern browsers with WebGL 2.0 support
• Performance: Optimized for 100k+ nodes on desktop hardware

Design Philosophy

Graphify adheres to a quiet authority principle inspired by PlayStation's editorial approach:

• Type recedes; content leads
• Color is purposeful, not decorative
• Space is premium; density is earned
• Interactions feel inevitable, not clever
• Systems over exceptions

The interface prioritizes architectural legibility over visual embellishment — every aesthetic choice serves the comprehension of complex dependency structures.

Future Enhancements

• 3D force graph visualization
• Export graph as SVG/PNG
• Custom layout algorithms (hierarchical, circular)
• Saved graph sessions
• Collaborative annotation layers
• Performance profiling overlays
• Code lens integration (VS Code extension)

License

MIT

Acknowledgments

• react-force-graph-2d — Vasco Asturiano
• Tailwind CSS — Adam Wathan & team
• PlayStation Design Language — Sony Interactive Entertainment
• SST Typeface — Sony / Toshi Omagari / Akira Kobayashi