Skip to content

Filtering & Highlighting

Filtering hides nodes entirely. Highlighting dims non-matching nodes to keep context visible.

Filtering

Removes nodes from display without deleting them. Edges to hidden nodes hide automatically.

TypeScript 
// Show only nodes of type 'server'
graph.filter((node) => node.data.type === 'server');

// Show nodes with more than 5 connections
graph.filter((node) => graph.getNeighbors(node.id).length > 5);

// Show nodes matching a search term
graph.filter((node) =>
  node.data.name.toLowerCase().includes(searchTerm.toLowerCase())
);

// Remove all filters
graph.resetFilter();

Calling filter() again replaces the previous filter -- they do not stack. Compose conditions within a single predicate.

Highlighting

Dims non-matching nodes while keeping the full graph context visible.

TypeScript 
// Spotlight all 'database' nodes
graph.highlightByPredicate(
  (node) => node.data.type === 'database',
  {
    dimOpacity: 0.15,
    edgeDimOpacity: 0.08,
    includeNeighborEdges: true,
  }
);

// Highlight specific nodes by ID
graph.highlightNodes(['server-1', 'server-2', 'database-main']);

// Highlight a node and its neighbors
const neighbors = graph.getNeighbors('server-1');
graph.highlightNodes(['server-1', ...neighbors.map(n => n.id)]);

// Reset highlighting
graph.resetHighlight();

Highlight Options

OptionTypeDefaultDescription
dimOpacitynumber0.15Opacity for non-highlighted nodes.
edgeDimOpacitynumber0.08Opacity for non-highlighted edges.
includeNeighborEdgesbooleantrueAlso highlight edges of matching nodes.

Combining Filter + Highlight

Filter for a broad subset, then highlight within it.

TypeScript 
// Filter to engineering department
graph.filter((node) => node.data.department === 'engineering');

// Highlight senior engineers within filtered view
graph.highlightByPredicate(
  (node) => node.data.level === 'senior',
  { dimOpacity: 0.2 }
);

// Reset both
graph.resetHighlight();
graph.resetFilter();

Hiding Orphan Nodes

Set hideOrphans: true on the create config to hide every non-combo node that has zero incident visible edges in the currently rendered graph (i.e. after combo collapse and any active edge-type filter). Combo containers are never treated as orphans, even when empty.

TypeScript 
const app = create(container, {
  nodes: [...],
  edges: [...],
  hideOrphans: true,   // default false — SDK doesn't decide visibility unless you ask
});
OptionTypeDefaultDescription
hideOrphansbooleanfalseHide non-combo nodes whose visible incident edge count drops to zero.

The orphan set recomputes on each batch:end tick, so it stays correct as you collapse combos, toggle edge categories, or mutate the graph at runtime.

Edge-Type Filter (via Legend)

The Legend grows a per-edge-type section when you opt in with legend.groupEdgesBy — or when any edge has a recognized auto-detect field. Clicking an edge category toggles all edges in that group between visible and faded (default opacity 0.25); edges don't disappear, so the spatial structure of the graph stays stable.

TypeScript 
const app = create(container, {
  nodes: [...],
  edges: [...],
  legend: {
    groupBy: 'data.type',
    groupEdgesBy: 'data.kind',   // explicit edge grouping
    // Or omit and let auto-detect probe: type → category → role → kind → class
  },
});

// Toggle programmatically
app.legend.toggleEdgeCategory('auth');

// Subscribe to filter changes
app.graph.on('focus:edge-filter', ({ hiddenTypes }) => {
  console.log('Currently hidden edge categories:', hiddenTypes);
});

Effective-visible edge count gates auto-collapse heuristics (autoCollapseCombosThreshold): the filter is applied first, then the count is taken. hideOrphans also reacts to edge-type filtering — toggling a category off may newly orphan some nodes, which then hide on the next batch end.

TypeScript 
const searchInput = document.getElementById('search');

searchInput.addEventListener('input', (e) => {
  const term = e.target.value.trim().toLowerCase();
  if (!term) { graph.resetHighlight(); return; }

  graph.highlightByPredicate(
    (node) => node.data.name?.toLowerCase().includes(term),
    { dimOpacity: 0.1, includeNeighborEdges: true }
  );
});

Next Steps