mirror of https://github.com/supermemoryai/supermemory.git synced 2026-10-02 02:11:20 +00:00

feat(memory-graph): add in-graph node search

The graph had no way to find a specific document or memory once the node
count grew past a screenful. You could pan, zoom, fit, and arrow-key
between neighbours, but locating "the Berlin memory" in a few hundred
nodes meant eyeballing the canvas.

Add a search box to the bottom-left control stack that finds nodes by
text and steps through the matches:

- searchNodes(nodes, query): a pure, case-insensitive substring matcher
  over document title/summary/type and memory text/content. Results are
  ranked (title/memory prefix, then substring, then supporting copy) with
  input order as a stable tiebreaker, so ordering never depends on where
  the force simulation happened to drop a node. Exported for advanced use.
- SearchControl: an input styled like the existing navigation controls,
  with a live "current/total" counter, prev/next steppers, and a clear
  button. Enter / Shift+Enter cycle matches, Escape clears.
- Wiring in MemoryGraph: the focused match is selected and centered
  (reusing the same selectAndCenter path as arrow-key navigation), and the
  documents behind all matches are highlighted (memory matches highlight
  their parent document) by merging into the existing highlightDocumentIds
  pipeline. Press "/" to focus the box, consistent with the existing
  single-key shortcuts.

The box is on by default; embedders can hide it with showSearch={false}
or relabel it with searchPlaceholder. Existing keyboard handlers already
ignore events originating from inputs, so typing a query never triggers
the fit/zoom/arrow shortcuts.

Tested: 14 new tests (searchNodes ranking/empty-query/null-field cases;
SearchControl typing, Enter/Shift+Enter/Escape, clear, counter, disabled
states). Full package suite green (202 tests), tsc --noEmit clean, biome
clean, vite build succeeds.

2026-08-22 05:24:30 +05:30

3.4 KiB

Raw Blame History

@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
Node search - Find documents and memories by text, highlight matches, and step through them (press / to focus, Enter / Shift+Enter to cycle)
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
`showSearch`	`boolean`	Show the in-graph node search box (default: `true`)
`searchPlaceholder`	`string`	Placeholder text for the search box

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

3.4 KiB Raw Blame History