Component

Graph View

A read-only knowledge and dependency graph rendered inside an InfiniteCanvas (pan + zoom). Concept nodes are coloured by mastery state; edges are smooth SVG curves. Designed for goal graphs, learning maps, and package dependency visualisations.

Knowledge map

A typical algorithm learning map with all four mastery states and an auto-generated legend. Pan and zoom with the InfiniteCanvas controls.

Mastered2In Progress2Not Started1Highlight1

Node states + legend

The four node states: mastered, in-progress, not-started, and highlight. The legend is driven by showLegend.

Mastered1In Progress1Not Started1Highlight1

Dependency graph

Package dependency graph with an onNodeClick handler. When a handler is provided the node chips become focusable buttons — click any node to see its label below.

Mastered2In Progress1Not Started2Highlight1

Installation

$pnpm add @refraction-ui/react

Usage

tsx
import { GraphView } from '@refraction-ui/react'
import type { GraphNode, GraphEdge } from '@refraction-ui/react'

const nodes: GraphNode[] = [
  { id: 'a', x: 100, y: 80,  label: 'Arrays',  state: 'mastered' },
  { id: 'b', x: 100, y: 200, label: 'Sorting',  state: 'in-progress' },
  { id: 'c', x: 100, y: 320, label: 'Graphs',   state: 'not-started' },
]

const edges: GraphEdge[] = [
  { id: 'e1', source: 'a', target: 'b' },
  { id: 'e2', source: 'b', target: 'c' },
]

export function KnowledgeMap() {
  return (
    <GraphView
      nodes={nodes}
      edges={edges}
      showLegend
      aria-label="Learning path"
      className="min-h-[400px]"
    />
  )
}

Props

PropTypeDefaultDescription
nodesGraphNode[]--Array of concept / module nodes. Each node has `id`, `x`, `y`, `label`, and an optional `state`.
edgesGraphEdge[]--Directed edges connecting nodes by `source` and `target` IDs.
onNodeClick(node: GraphNode) => void--Optional click handler. When provided the node chips become interactive buttons.
showLegendbooleanfalseRender a legend showing per-state node counts.
classNamestring--Additional CSS classes applied to the outer container.