GraphMemory - Revamped

High-performance knowledge graph visualization with physics-driven interactions. Handles 500+ nodes smoothly with smart focus modes, animations and intuitive visual hierarchy.

Comment

supermemory MemoryGraph - revamped

Tagline: Physics-driven knowledge graph visualization that makes exploring complex memory networks feel natural. Smooth rendering with 500+ nodes.

Inspiration

Knowledge graphs are powerful for visualizing connections between information, but most implementations feel sluggish and lifeless. I wanted to create something that felt alive, where exploring knowledge network was as intuitive and engaging as browsing a physical space.

What it does

Memory Graph is a high-performance visualization component that transforms documents and memories into an interactive, physics-driven network. It automatically clusters related content, reveals hidden connections through AI-powered similarity detection, and makes exploration feel natural through smooth animations.

Key Features:

  • Physics-driven layout - Natural clustering using force simulation, no rigid structures
  • Slideshow mode - Auto-cycles through knowledge with animated physics pulses every 3.5s
  • Focus mode - Smooth background dimming highlights selected content
  • Smart performance - Handles 500+ nodes smoothly with intelligent limiting
  • Document type icons - Visual indicators for PDFs, Markdown, TXT, DOC files
  • Semantic connections - Automatically links similar documents based on content

Problem I Tackled

Performance Issues

  • Interactions felt sluggish with 1000+ memories
  • Browser would crash with very large datasets
  • No memory management led to severe slowdowns

Visual & UX Problems

  • Edges disappeared when moving nodes around
  • Poor color contrast made elements hard to distinguish
  • No visual feedback when focusing on specific nodes
  • Static, lifeless layout

Algorithmic Inefficiency

  • Similarity detection compared every document with every other (4,950 comparisons for 100 docs!)
  • Scaled terribly as datasets grew

How I Built It

Architecture

Built as a React component using HTML5 Canvas for rendering and d3-force for physics simulation. The system separates data processing, physics simulation, user interactions, and rendering into specialized modules for maintainability.

Key Solutions

1. Physics-Driven Layout

  • Uses d3-force with multiple forces (links, charge, collision, centering)
  • Simple grid initial positioning with random offsets for variety
  • 50 instant pre-calculation ticks for stable starting state
  • Smooth animations as physics settles into natural clusters

2. Performance Optimizations

  • Spatial grid indexing - Divides screen into cells, only checks nearby nodes for clicks
  • Batched rendering - Groups similar elements to reduce GPU state changes
  • Smart refresh - Only redraws when something actually changes
  • Level-of-detail - Simplified rendering when zoomed out

3. k-NN Similarity Algorithm Reduced comparisons from every-with-every to k-nearest-neighbors approach:

  • Each document only compared with 10 neighbors instead of all others
  • 5x fewer comparisons (4,950 → 1,000 for 100 docs)
  • 3x faster processing (~50ms → ~17ms)

4. Smart Node Limiting Distributes memory budget fairly across all documents:

  • Prevents browser slowdowns with configurable limits
  • Ensures every document represented before saturating any single one
  • Prioritizes recent memories

5. Focus Mode 1.5-second smooth dimming animation with natural deceleration:

  • Non-selected nodes fade to 10% opacity
  • Unconnected edges fade to 5% opacity
  • Highlights what matters while maintaining context

6. Slideshow Mode Auto-exploration with visual interest:

  • Randomly selects new node every 3.5s (avoids consecutive repeats)
  • Smoothly pans camera to selection
  • Brief 1-second physics pulse draws attention
  • One-click to stop and explore manually

7. Bug Fixes

  • Fixed edge culling to check both X and Y axes properly
  • Memory nodes now follow parent documents when dragged (relative positioning)
  • Fixed memory leaks in node cache

Built With

  • TypeScript - Type-safe development
  • React - Component architecture
  • D3.js - Physics simulation
  • HTML5 Canvas - High-performance rendering
  • Bun - Package manager

Challenges I Ran Into

Physics Instability: Nodes would "jump" on first touch. Fixed by pre-calculating 50 physics ticks before showing anything to users.

Edge Disappearing: Viewport culling was too aggressive. Had to implement smarter logic checking if both endpoints are actually off-screen.

Infinite Re-rendering: Physics never truly stops (microscopic vibrations). Solved by rounding positions to ignore sub-pixel movements.

Memory Limits: Large datasets crashed browsers. Built smart distribution system that maintains graph structure while respecting configurable limits.

Accomplishments That I'm Proud Of

3x faster similarity detection (50ms → 17ms for 100 docs)
5x reduction in comparisons via k-nearest-neighbors approach
Smooth rendering with 500+ nodes on standard hardware Polished animations that feel native and professional

What I Learned

  • Small visual touches (dimming, physics pulses) massively improve perceived quality
  • Pre-settling physics creates stable, predictable initial states
  • Spatial indexing transforms performance characteristics
  • Users notice smoothness more than features

What's Next

Performance

  • Web Workers for background processing
  • Better way of limiting max number of nodes/connections to improve performance based on the user's preference.

Features

  • Search & filter with highlighting
  • Custom JSON input to populate Graph instead of supermemory api key
  • Time-based visualization (scrub through history)

UX

  • Keyboard shortcuts for power users

Impact

Memory Graph makes knowledge exploration accessible and delightful. By prioritizing performance and natural interactions, users can:

  • Discover connections they didn't know existed through automatic similarity
  • Navigate confidently through large datasets without lag or crashes
  • Focus intuitively with visual feedback that highlights what matters
  • Explore organically through physics-driven spatial relationships

The optimizations transform this from a small-dataset demo tool into something people can actually use daily with real knowledge bases.

GitHub: https://github.com/vrupak/supermemory Package: @supermemory/memory-graph

Built With

Share this project:

Updates