Examples—InferaGraph

1

Basic Graph Render

The smallest useful InferaGraph: build a StaticDataAdapter from in-memory nodes and edges, then drop the <InferaGraph /> component (or the vanilla constructor) into a container. No server, no provider, no extra config — the defaults render a force-directed 3D layout you can rotate and zoom.

Live output

All four nodes, force-directed graph layout. Drag to rotate, scroll to zoom.

Sample data

// nodes + edges — generic, not domain-specific
const nodes = [
  { id: 'a', attributes: { title: 'Alpha', category: 'foo' } },
  { id: 'b', attributes: { title: 'Bravo', category: 'foo' } },
  { id: 'c', attributes: { title: 'Charlie', category: 'bar' } },
  { id: 'd', attributes: { title: 'Delta', category: 'bar' } },
];

const edges = [
  { id: 'e1', source: 'a', target: 'b', type: 'connects_to' },
  { id: 'e2', source: 'b', target: 'c', type: 'connects_to' },
  { id: 'e3', source: 'c', target: 'd', type: 'connects_to' },
];

Usage

import { StaticDataAdapter } from '@inferagraph/core/data';
import { GraphProvider, InferaGraph } from '@inferagraph/core/react';

const adapter = new StaticDataAdapter({ nodes, edges });

export function App() {
  return (
    <GraphProvider adapter={adapter}>
      <InferaGraph />
    </GraphProvider>
  );
}

2

Filter by Attribute

Pass a predicate and InferaGraph hides every node that doesn't match. Predicates are pure functions over the node, so they can read any attribute the host has attached. The same filter prop works in graph and tree modes — visualization changes never alter the public surface.

Live output

Filter active: only Alpha and Bravo (category: 'foo') are visible. Charlie and Delta are hidden.

Sample data

// nodes + edges — generic, not domain-specific
const nodes = [
  { id: 'a', attributes: { title: 'Alpha', category: 'foo' } },
  { id: 'b', attributes: { title: 'Bravo', category: 'foo' } },
  { id: 'c', attributes: { title: 'Charlie', category: 'bar' } },
  { id: 'd', attributes: { title: 'Delta', category: 'bar' } },
];

const edges = [
  { id: 'e1', source: 'a', target: 'b', type: 'connects_to' },
  { id: 'e2', source: 'b', target: 'c', type: 'connects_to' },
  { id: 'e3', source: 'c', target: 'd', type: 'connects_to' },
];

Usage

import { GraphProvider, InferaGraph } from '@inferagraph/core/react';

export function App() {
  // Show only nodes whose category attribute is 'foo'
  const filter = (node) => node.attributes.category === 'foo';

  return (
    <GraphProvider adapter={adapter}>
      <InferaGraph filter={filter} />
    </GraphProvider>
  );
}

3

Search and Highlight

The keyword search engine returns ranked node ids. Pipe those ids into the highlight prop (React) or setHighlight method (vanilla) and the matched nodes glow while the rest fade. The host owns the input field; InferaGraph owns the visual response.

Live output

Highlight active on 'Charlie' (the search match). Other nodes dim while the matched node stays full-bright.

Sample data

// nodes + edges — generic, not domain-specific
const nodes = [
  { id: 'a', attributes: { title: 'Alpha', category: 'foo' } },
  { id: 'b', attributes: { title: 'Bravo', category: 'foo' } },
  { id: 'c', attributes: { title: 'Charlie', category: 'bar' } },
  { id: 'd', attributes: { title: 'Delta', category: 'bar' } },
];

const edges = [
  { id: 'e1', source: 'a', target: 'b', type: 'connects_to' },
  { id: 'e2', source: 'b', target: 'c', type: 'connects_to' },
  { id: 'e3', source: 'c', target: 'd', type: 'connects_to' },
];

Usage

import { useInferaGraphSearch } from '@inferagraph/core/react';
import { GraphProvider, InferaGraph } from '@inferagraph/core/react';

function SearchBox() {
  const { search } = useInferaGraphSearch();
  const [highlight, setHighlight] = useState([]);

  async function onSearch(q) {
    const hits = await search(q);
    setHighlight(hits.map(h => h.nodeId));
  }

  return (
    <>
      <input onChange={e => onSearch(e.target.value)} />
      <InferaGraph highlight={highlight} />
    </>
  );
}

4

Tree Mode

Switch mode to 'tree' and InferaGraph renders an orthogonal, card-style hierarchy rooted at rootId. Filter, search, and highlight all behave identically; the visualization is the only thing that changes. Tree mode is a generic hierarchy renderer — org charts, supply chains, taxonomies, file systems, build dependencies, citation graphs, family trees, anything with a parent → child shape. TreeLayout follows parent_of edges by default; the recognized edge types are configurable via parentEdgeTypes (v0.6.4+) so you can point it at your domain's hierarchy edges. Generic relations like connects_to are intentionally ignored — a tree view requires a parent → child shape, so non-hierarchical edges are skipped rather than guessed at.

Live output

Three parent_of edges (a→b, a→c, c→d) drive the layout.

Sample data

// Tree mode requires a parent → child shape. TreeLayout follows
// parent_of edges by default; configure parentEdgeTypes to recognize
// your domain's hierarchy edges (org chart, supply chain, taxonomy, …).
const nodes = [
  { id: 'a', attributes: { title: 'Alpha' } },
  { id: 'b', attributes: { title: 'Bravo' } },
  { id: 'c', attributes: { title: 'Charlie' } },
  { id: 'd', attributes: { title: 'Delta' } },
];

const edges = [
  { id: 't1', source: 'a', target: 'b', type: 'parent_of' },
  { id: 't2', source: 'a', target: 'c', type: 'parent_of' },
  { id: 't3', source: 'c', target: 'd', type: 'parent_of' },
];

Usage

import { GraphProvider, InferaGraph } from '@inferagraph/core/react';

export function App() {
  // TreeLayout reads hierarchy from parent_of edges; rootId pins the apex.
  return (
    <GraphProvider adapter={adapter}>
      <InferaGraph mode="tree" rootId="a" />
    </GraphProvider>
  );
}

5

Custom Node Colors

InferaGraph is domain-agnostic — node attributes are opaque key-value pairs the host defines. Pass a theme.nodeColor function to map any attribute (here, category) to a color. The same hook works for edge color, node size, and label visibility.

Pass showExpandAffordance: false to disable the hover + drilldown affordance — useful for read-only embeds and marketing demos. Available in @inferagraph/core v0.6.2+.

Live output

Each node colored by its category attribute: foo → blue, bar → emerald, baz → amber.

Sample data

// Hosts attach any attributes they want — InferaGraph treats them as opaque.
// A small theme function maps category -> color at render time.
const nodes = [
  { id: 'a', attributes: { title: 'Alpha', category: 'foo' } },
  { id: 'b', attributes: { title: 'Bravo', category: 'foo' } },
  { id: 'c', attributes: { title: 'Charlie', category: 'bar' } },
  { id: 'd', attributes: { title: 'Delta', category: 'baz' } },
];

const palette = { foo: '#60a5fa', bar: '#34d399', baz: '#f59e0b' };
const nodeColor = (node) => palette[node.attributes.category] ?? '#a1a1aa';

Usage

import { GraphProvider, InferaGraph } from '@inferagraph/core/react';

export function App() {
  return (
    <GraphProvider adapter={adapter}>
      <InferaGraph
        theme={{
          nodeColor: (node) => palette[node.attributes.category],
        }}
        // Read-only marketing demo — hide the hover '+' affordance.
        showExpandAffordance={false}
      />
    </GraphProvider>
  );
}

6

Click Handler

Wire onNodeClick (React) or the 'nodeClick' event (vanilla) to drive a side pane, a modal, or anything else the host wants. InferaGraph hands you the full node — id plus all attributes — and stays out of the rest of your UI.

When the host doesn't wire setOnExpandRequest, pass showExpandAffordance: false to skip the hover + drilldown affordance entirely. Click handlers and tooltips still fire. Available in @inferagraph/core v0.6.2+.

Live output

Click any node — the side panel updates with the clicked node's title.

Sample data

// nodes + edges — generic, not domain-specific
const nodes = [
  { id: 'a', attributes: { title: 'Alpha', category: 'foo' } },
  { id: 'b', attributes: { title: 'Bravo', category: 'foo' } },
  { id: 'c', attributes: { title: 'Charlie', category: 'bar' } },
  { id: 'd', attributes: { title: 'Delta', category: 'bar' } },
];

const edges = [
  { id: 'e1', source: 'a', target: 'b', type: 'connects_to' },
  { id: 'e2', source: 'b', target: 'c', type: 'connects_to' },
  { id: 'e3', source: 'c', target: 'd', type: 'connects_to' },
];

Usage

import { GraphProvider, InferaGraph } from '@inferagraph/core/react';

export function App() {
  const [selected, setSelected] = useState(null);

  return (
    <GraphProvider adapter={adapter}>
      <InferaGraph
        onNodeClick={(node) => setSelected(node)}
        // Click-to-inspect only — no neighbor drilldown wired here.
        showExpandAffordance={false}
      />
      {selected && (
        <aside>
          <h2>{selected.attributes.title}</h2>
          <p>Category: {selected.attributes.category}</p>
        </aside>
      )}
    </GraphProvider>
  );
}

Examples

Basic Graph Render

Live output

Sample data

Usage

Filter by Attribute

Live output

Sample data

Usage

Search and Highlight

Live output

Sample data

Usage

Tree Mode

Live output

Sample data

Usage

Custom Node Colors

Live output

Sample data

Usage

Click Handler

Live output

Sample data

Usage

Looking for more?