Embedding mapPro
A 2D projection of chunks with clusters, the query as a point and lines to the neighbors it retrieved.
On this page
ProSix clusters of a support corpus; switch the query and its eight neighbors re-link on the map.
Installation
Usage
import { EmbeddingMap } from "@/components/ui/chatcn/pro/embedding-map"
<EmbeddingMap
points={points}
clusters={clusters}
query={{ text, x, y }}
neighbors={retrieved}
/>Project your vectors with UMAP or t-SNE and pass the coordinates; projectEmbeddings in chatcn-pro-rag-a does a dependency free PCA in the browser for a few thousand chunks. The map keeps the aspect so distances stay honest. Points stay one memoized layer, so panning thousands of them is smooth. A miss is easy to spot: the right chunk sits in another cluster with no line to it.
Examples
States
ProNo query with a pinned point and a hidden cluster, a dense corpus, projecting, failed and empty.
Props
| Prop | Type | Notes |
|---|---|---|
points | EmbeddingPoint[] | { id, x, y, cluster?, source?, text? } |
clusters | { id, label, color? }[] | Chart colors 1 to 6 |
query | { text, x, y } | The query projected into the same space |
neighbors | { id, score }[] | Best first; the top five get rank labels |
selectedId, hiddenClusters | controlled or default | Pinned point and hidden clusters |
loading, progress, error, onRetry | Projection states | |
method, height | string, number | string | Header note and plot height |
Keyboard
| Key | Action |
|---|---|
| Arrow keys on the map | Pan |
| + and - | Zoom in and out |
| 0 | Fit all points |
| Escape | Clear the pinned point |
| Tab | Zoom buttons, cluster toggles, then the neighbor list |
Accessibility
- The map is an image with a summary; the neighbor list beside it carries the same data as buttons.
- Cluster toggles are pressed buttons with the count in their name.
- Ctrl or Cmd and scroll zooms, so the page still scrolls under a plain wheel.
Motion
When a query lands its lines fade in by rank, 40 ms apart, and the query mark ripples once. Zoom and pan follow the pointer directly. Reduced motion drops the ripple and the stagger and keeps a short fade.