mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-10-22 05:26:17 +00:00
714d273ba5
SpatialIndex.rebuild() early-returns on an unchanged content hash, and
the hash only covers node ids and rounded positions. useGraphData
produces a brand-new generation of node objects whenever its memo deps
change — including on container resize and light/dark theme switches —
with identical ids and coordinates. The GraphCanvas [nodes] effect then
called rebuild(), the hash matched, and the grid kept serving the
previous generation of objects while the renderer and nodeMap moved on.
The first drag after any resize or theme toggle therefore grabbed a
detached object: onMouseDown pinned fx/fy on a node the renderer no
longer draws, the visible node ignored the cursor, and the drag-start
reheat() let it drift freely. Hover and click were unaffected (they
only use node.id), which is what kept this hidden.
Give rebuild() a force parameter and pass it from the identity-keyed
effect, keeping the cheap hash guard for the per-frame rebuilds in the
rAF loop. Covered with SpatialIndex tests that pin both behaviours:
the unforced hash guard keeps the old generation (documenting why force
exists), and a forced rebuild swaps the grid to the new objects and
refreshes the hash.
Also remove the colors re-merge in MemoryGraph: useGraphTheme already
returns the overrides merged and referentially stable by value, and
re-merging keyed on the raw prop identity made `colors` a fresh object
every render for inline `colors={{...}}` consumers — rebuilding the
entire node array each render and multiplying how often the stale-index
window occurred.
|
||
|---|---|---|
| .. | ||
| scripts | ||
| src | ||
| .gitignore | ||
| .npmignore | ||
| CHANGELOG.md | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| vite.config.ts | ||
@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