Drilldown

Click to inspect, hover to expand: how InferaGraph routes user interaction between host detail UI and library-owned neighbor expansion.

Drilldown, Detail, and Expand

Hover a node and a themable + affordance appears. Click the node body to open a host-owned detail panel; click the + to expand its neighbors into the graph. The library owns the picking and the affordance; the host owns the detail UI. 

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

// Click a node body → host opens detail UI.
// Hover a node → "+" affordance shows; clicking it expands neighbors.
function App() {
  const [openId, setOpenId] = useState<string | null>(null);

  return (
    <InferaGraph
      data={data}
      // Optional: translate slugs → node IDs at load time.
      slugResolver={(slug) => resolveSlug(slug)}
      // Optional: cap retained nodes; LRU evicts the oldest unprotected.
      maxNodes={5000}
      onNodeClick={(id) => setOpenId(id)}
      // onExpandRequest defaults to useInferaGraphNeighbors().expand(id).
      // Override only if you want custom expansion behavior.
    />
  );
}

function DetailPanel({ idOrSlug }: { idOrSlug: string }) {
  const { data, loading, error } = useInferaGraphContent(idOrSlug);
  if (loading) return <Spinner />;
  if (error) return <div>{error.message}</div>;
  return <Markdown source={data?.content ?? ''} />;
}

onNodeClick

(nodeId: NodeId, node: NodeData) => void

Fires for clicks on a node body. Receives the canonical NodeId (post slug resolution). Clicks on the + affordance go through onExpandRequest instead.

onExpandRequest

(nodeId: NodeId) => void

Fires when the user clicks the + hover affordance. When omitted, InferaGraph installs a default that calls useInferaGraphNeighbors().expand(nodeId), so the affordance "just works" out of the box.

showExpandAffordance

v0.6.2+

boolean (default: true)

Whether to show the hover + drilldown affordance. Set to false for embeds, marketing demos, or any host that doesn't wire setOnExpandRequest. Click handlers and tooltips remain enabled. Available in @inferagraph/core v0.6.2 and later.

slugResolver

(slug: string) => Promise<NodeId>

Optional slug→NodeId translator. When supplied, hooks like useInferaGraphContent('paul') resolve through it before calling the DataAdapter. Hosts that route by raw UUIDs can omit it.

maxNodes

number

Soft cap on retained nodes. When exceeded, the built-in MemoryManager evicts the oldest non-protected (off-screen, not in the active path) nodes. Default: no cap.

useInferaGraphNeighbors()

Returns { expand, status }

Imperative neighbor expansion via the active DataAdapter's getNeighbors. The default +-affordance handler dispatches through this hook.

The + affordance is themable via 11 CSS custom properties (--ig-affordance-*) — fill, stroke, opacity, hover color, and so on.