mirror of https://github.com/supermemoryai/supermemory.git synced 2026-10-21 05:18:00 +00:00

History

abhay-codes07 0a16443929 fix(memory-graph): allow selecting nodes on touch devices Node selection only worked through the canvas click handler, but onTouchStart calls preventDefault() to stop page scroll/zoom, which also suppresses the browser-synthesized click. A single-finger touch went straight into panning, so on phones and tablets tapping a node did nothing: no selection, no popover, no way to open a document from the graph. Detect taps from the raw touch lifecycle instead: remember where the single-finger touch started, cancel the tap once the finger moves more than 10px or a second finger lands, and on release hit-test the start point through the viewport transform and forward the result to onNodeClick. Tapping empty space clears the selection, matching mouse behaviour. Covered with unit tests driving the handler through a stub canvas: tap on node, tap on empty space, jitter within the slop threshold, pan, pinch, and a tap through a zoomed/panned viewport.		2026-07-12 23:33:38 +05:30
..
scripts	Rewrite @supermemory/memory-graph with perf optimizations + consolidate consumers (#809 )	2026-03-28 19:06:27 -07:00
src	fix(memory-graph): allow selecting nodes on touch devices	2026-07-12 23:33:38 +05:30
.gitignore	package the graph (#563 )	2025-11-19 18:57:56 +00:00
.npmignore	package the graph (#563 )	2025-11-19 18:57:56 +00:00
CHANGELOG.md	MemoryGraph - revamped (#627 )	2025-12-29 00:32:26 +05:30
package.json	fix memory render (#1087 )	2026-06-14 23:45:53 +05:30
README.md	add docs for graph package (#603 )	2025-12-04 18:56:40 +00:00
tsconfig.json	Rewrite @supermemory/memory-graph with perf optimizations + consolidate consumers (#809 )	2026-03-28 19:06:27 -07:00
vite.config.ts	feat: make graph popover content scrollable and add View full button (#920 )	2026-05-11 02:09:36 +00:00

README.md

@supermemory/memory-graph

Interactive graph visualization for documents and their memory connections.

Installation

npm install @supermemory/memory-graph
# or
bun add @supermemory/memory-graph
# or
pnpm add @supermemory/memory-graph

Quick Start

import { MemoryGraph } from '@supermemory/memory-graph';
import type { DocumentWithMemories } from '@supermemory/memory-graph';

function App() {
  const [documents, setDocuments] = useState<DocumentWithMemories[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch('/api/graph')
      .then(res => res.json())
      .then(data => {
        setDocuments(data.documents);
        setIsLoading(false);
      });
  }, []);

  return (
    <div style={{ height: '100vh' }}>
      <MemoryGraph
        documents={documents}
        isLoading={isLoading}
        variant="console"
      />
    </div>
  );
}

Features

Interactive canvas visualization - Pan, zoom, and drag nodes using Canvas 2D rendering
Document and memory nodes - Documents as rectangles, memories as hexagons
Relationship visualization - Edges show document similarity and memory version chains
Space filtering - Filter by workspace or view all memories
Two variants - Full-featured console mode or embedded consumer mode
Pagination support - Load more documents on demand
TypeScript support - Full type definitions included

Essential Props

Prop	Type	Description
`documents`	`DocumentWithMemories[]`	Array of documents with their memory entries
`isLoading`	`boolean`	Show loading state
`variant`	`"console" \| "consumer"`	Display mode (default: "console")
`error`	`Error \| null`	Error to display
`loadMoreDocuments`	`() => Promise<void>`	Function to load more data
`highlightDocumentIds`	`string[]`	IDs of documents to highlight

Documentation

Full documentation available at docs.supermemory.ai:

Overview - What it is and when to use it
Installation - Setup and requirements
Quick Start - Get running in 2 minutes
API Reference - Complete API documentation
Examples - Common use cases
Troubleshooting - Common issues

Requirements

React 18+
Modern browser

License

MIT