Explore a dependency graph

The dependency explorer is Graphora's most complete product example. It uses a fictional commerce system to show how graph navigation and ordinary DOM controls work together.

Open the hosted dependency explorer or view its deployed source.

Follow a request to storage

1. Search for Storefront and select it from the component list.
2. Inspect its direct connections in the details panel.
3. Open Trace a path, keep Storefront as the source, choose PostgreSQL as the target, and select Show directed path.
4. Use the result text as the exact path description; the same nodes and edges are emphasized on the Canvas.
5. Change the layout to Hierarchical to read the dependency direction from left to right, then use Fit graph.

The textual result matters: Canvas highlighting alone is not a complete accessible presentation of the path.

Filter without losing context

The type checkboxes produce a new graph value. The explorer passes graphUpdatePolicy="preserve", so nodes that remain visible keep their current positions and the viewport survives filtering. Hidden nodes recover remembered positions when shown again. Reset view clears that memory and runs the default layout again.

If a selected or highlighted item becomes unavailable, the surrounding React state reconciles it. This is application behavior built from Graphora's graph, selection, highlight, analytics, and ref APIs; it is not a general transformation pipeline.

Reuse the pattern

For an application-owned explorer:

1. Keep the complete source graph in application state.
2. Derive a visible graph with useMemo, filtering out edges whose endpoints are hidden.
3. Memoize the selected layout so ordinary UI renders do not rebuild the graph runtime.
4. Keep selection and highlight as separate state.
5. Use GraphRef for fit, viewport controls, explicit layout runs, and reset.
6. Put search results, connection lists, statuses, and commands in semantic DOM alongside the Canvas.

The explorer uses @graphora/analytics to compute a directed unweighted path and @graphora/core snapshots for neighbor queries. These helpers operate on in-memory snapshots. Graphora does not query a graph database, fetch remote data, or persist explorer state.

The checked-in source can be run from an authorized checkout:

cd graph-library
pnpm install --frozen-lockfile
pnpm build
pnpm exec vite examples/react/explorer \
  --config examples/react/vite.config.ts

Relevant references are GraphProps and GraphRef in the React API, shortestPath in the analytics API, and the layouts API.