VolGraph

<VolGraph> renders the knowledge map of a case. It lazy-imports @vol/viewer3d (three.js) only when mounted, so pages that do not show the map do not pay for it. While loading — or if the viewer is not available in your build — it shows a lightweight placeholder.

const ref = useRef<{ flyTo(i: number): void; startTour(): void; reset(): void }>(null);

<VolGraph
  case="papers"
  focus={{ citations: [412, 977], subgraph, clusters }}
  onNodeClick={(nodeIndex) => openDetails(nodeIndex)}
  viewerRef={ref}
  theme="dark"
  height={560}
/>;

Props

Prop	Type	Default	Description
case	CaseId	provider defaultCase	Map to load.
focus	{ citations: number[]; subgraph?: Subgraph; clusters?: AnswerCluster[] }	—	Answer mode: highlight cited nodes, neighbourhood and clusters.
onNodeClick	(nodeIndex: number) => void	—
theme	"dark" | "light"	"dark"
height	number | string	480	Container height.
viewerRef	Ref	—	Forwarded to the viewer for imperative calls (flyTo, startTour, reset).
viewerProps	object	—	Extra props passed through to the viewer.
exportName	string	auto	Export of @vol/viewer3d to render.
component	ComponentType	—	Use your own viewer and skip the dynamic import.
fallback	ReactNode	placeholder	Shown while loading or when unavailable.
className	string	—

How the viewer is resolved

1. import("@vol/viewer3d") (code-split by your bundler).
2. The first export found among exportName, SemanticViewer, KnowledgeMap, Viewer3D, VolViewer, GraphViewer or default is used (today @vol/viewer3d exports SemanticViewer).
3. If the module exports loadGraph(client, case), its result is passed to the viewer as data/graph.
4. The viewer receives client, case, data, graph, focus, onNodeClick, theme, ref and a style that fills the container. Anything in viewerProps (e.g. showEdges, autoTour, onTourStep) is passed through.

Building answer mode

const vol = useVolClient();
const [focus, setFocus] = useState<VolGraphFocus>();

<VolChat
  onAnswer={async (r) => {
    const nodeIndices = r.citations.map((c) => c.nodeIndex);
    const subgraph = await vol.graph.subgraph("papers", nodeIndices, { hops: 1 });
    setFocus({ citations: nodeIndices, subgraph, clusters: r.clusters });
  }}
/>;