Skip to content

Progressive Expand

Explore large graphs incrementally. Start with seed nodes, reveal neighbors on demand.

Initialize Expand Mode

TypeScript 
// Start with specific seed nodes
graph.initExpand({
  seeds: ['ceo', 'cto', 'cfo'],
  maxDepth: 3,
  showBadges: true,
  doubleClickExpand: true,
});

// Or auto-select top N most connected nodes
graph.initExpand({ seedCount: 5 });

All nodes except seeds are hidden. Each visible node shows a badge with its hidden neighbor count. Double-click to expand/collapse.

OptionTypeDefaultDescription
seedsstring[]undefinedNode IDs to show initially.
seedCountnumber5Auto-select top N by degree (if seeds not set).
maxDepthnumberInfinityMaximum expansion depth.
showBadgesbooleantrueShow hidden neighbor count badges.
doubleClickExpandbooleantrueDouble-click to toggle expand/collapse.

Expand & Collapse

TypeScript 
// Expand a node's neighbors
graph.expand('ceo');

// Collapse a node's neighbors
graph.collapse('ceo');

// Reveal all nodes
graph.expandAll();

// Collapse back to seeds
graph.collapseAll();

// Exit expand mode entirely
graph.resetExpand();

Newly revealed nodes animate in and the layout re-runs. If a neighbor was expanded by multiple nodes, it stays visible until all are collapsed.

Complete Example

TypeScript 
import { create } from '@topokit/renderer-canvas';

const app = create(container, {
  nodes: largeDataset.nodes,
  edges: largeDataset.edges,
  layout: 'force',
  theme: 'dark',
});

const graph = app.graph;

graph.initExpand({
  seeds: ['hub-1', 'hub-2', 'hub-3'],
  maxDepth: 2,
});

// Wire up toolbar buttons
expandAllBtn.addEventListener('click', () => graph.expandAll());
collapseAllBtn.addEventListener('click', () => graph.collapseAll());
resetBtn.addEventListener('click', () => graph.resetExpand());

Next Steps