AI Components / Data Lineage
Data Lineage
Data provenance flow with typed cg-badge nodes, SVG arrow connectors, upstream path highlighting, status dots, and keyboard nav. Horizontal and vertical.
ai-viz v0.6.0
Playground
Examples
RAG pipeline (highlighted)
<ai-data-lineage highlightPath="4" style="max-width:600px;"></ai-data-lineage>Vertical
<ai-data-lineage direction="vertical" style="max-width:180px;"></ai-data-lineage>Import
import { AiDataLineage } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-data-lineage';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | {id, label, type, status?}[] | — | Lineage nodes (type: source|transform|model|output) |
edges | {from, to}[] | — | Directed connections |
highlightPath | string | — | Node ID — highlights full upstream path |
direction | "horizontal"|"vertical" | "horizontal" | Flow direction |
rounded | "none"|"sm"|"md"|"lg" | "lg" | Border radius |
Events
| Event | Detail | Description |
|---|---|---|
ai-lineage-node-click | {id, label, type} | Node clicked |