Виджеты

DependencyGraph

Слоистая раскладка графа зависимостей с разрывом циклов.

Граф зависимостей: слоистая раскладка ориентированного графа. Сосед диаграммы Ганта — из тех же связей «A блокирует B» там считается критический путь, здесь строится картинка.

Установка

terminal

npx @toimetdev/pathlogs-ui add dep-graph

Пример

Кликните по узлу — подсветятся его прямые соседи, остальное приглушится.

Пропсы

Проп	Тип	По умолчанию	Описание
`nodes`*	`N[]`	—	Вершины. Нужен только id.
`edges`*	`{ from, to }[]`	—	Связи «from → to».
`renderNode`*	`(node, meta) => ReactNode`	—	Содержимое блока узла.
`direction`	`"LR" \| "TB"`	`"LR"`	Слева направо или сверху вниз.
`onSelect`	`(node) => void`	—	Клик по узлу.
`highlightNeighbours`	`boolean`	`true`	Подсвечивать соседей выбранного узла.

nodes*N[]

Вершины. Нужен только id.

edges*{ from, to }[]

Связи «from → to».

renderNode*(node, meta) => ReactNode

Содержимое блока узла.

direction"LR" | "TB"

по умолчанию: "LR"

Слева направо или сверху вниз.

onSelect(node) => void

Клик по узлу.

highlightNeighboursboolean

по умолчанию: true

Подсвечивать соседей выбранного узла.

Слоистая раскладка

Это упрощённый алгоритм Сугиямы: разрыв циклов, разбивка по слоям методом длиннейшего пути, снижение пересечений медианной эвристикой и только потом координаты. Связи, перескакивающие через слой, разбиваются служебными вершинами-изгибами и огибают чужие блоки.

Циклы

Раскладка отдельно

tsx

import {
  layoutDag,       // полная раскладка: узлы, рёбра, размеры
  breakCycles,     // снять обратные связи
  assignLayers,    // разбивка по слоям
  countCrossings,  // число пересечений (метрика качества)
} from "@/components/ui/dep-graph/dagLayout";