Widgets

DependencyGraph

Layered layout of a dependency graph, with cycles broken apart.

A dependency graph with a layered layout. A relative of the Gantt chart — the same «A blocks B» links yield a critical path there, and a picture here.

Installation

terminal

npx @toimetdev/pathlogs-ui add dep-graph

Example

Click a node — its immediate neighbours light up and everything else dims.

Props

Prop	Type	Default	Description
`nodes`*	`N[]`	—	The vertices. Only an id is required.
`edges`*	`{ from, to }[]`	—	«from → to» links.
`renderNode`*	`(node, meta) => ReactNode`	—	The contents of a node's box.
`direction`	`"LR" \| "TB"`	`"LR"`	Left to right, or top to bottom.
`onSelect`	`(node) => void`	—	A click on a node.
`highlightNeighbours`	`boolean`	`true`	Highlight the selected node's neighbours.

nodes*N[]

The vertices. Only an id is required.

edges*{ from, to }[]

«from → to» links.

renderNode*(node, meta) => ReactNode

The contents of a node's box.

direction"LR" | "TB"

defaults to: "LR"

Left to right, or top to bottom.

onSelect(node) => void

A click on a node.

highlightNeighboursboolean

defaults to: true

Highlight the selected node's neighbours.

Layered layout

This is a simplified Sugiyama algorithm: break the cycles, assign layers by longest path, reduce crossings with the median heuristic, and only then compute coordinates. Links that skip a layer are split by dummy bend vertices and route around other people's boxes.

Cycles

The layout, separately

tsx

import {
  layoutDag,       // the full layout: nodes, edges, dimensions
  breakCycles,     // remove the back edges
  assignLayers,    // assign vertices to layers
  countCrossings,  // the number of crossings (the quality metric)
} from "@/components/ui/dep-graph/dagLayout";