@data-stream/lineage-ui

A dependency-free React UI library for visualizing OpenLineage-compliant lineage data.

Components

| Export | Description | | --- | --- | | <LineageGraph layout={...} selectedId onSelect /> | Left-to-right SVG DAG of datasets + jobs, zoomable, with highlight-on-select. | | <LineageTree graph datasetId onSelect /> | Upstream/downstream nested tree for a selected dataset. | | <FacetPanel node onClose /> | Human-readable renderer for OpenLineage facets (schema, sql, columnLineage, outputStatistics, dataQualityAssertions, ownership, jobType, sourceCodeLocation). | | useLineage(url) | Hook that fetches RunEvents/job-summary JSON and returns { loading, error, data, graph, layout, refresh }. | | buildGraph / layoutGraph / getUpstream / getDownstream | Pure model helpers for building & laying out the graph. |

Data shapes

The library accepts either:

1. A list of OpenLineage RunEvents (eventType, job, run, inputs, outputs with facets) — see GET /api/lineage.
2. A compact job summary ({ job, inputs, outputs }) — see GET /api/jobs.

Usage in an app

import { useLineage, LineageGraph, LineageTree, FacetPanel } from '@data-stream/lineage-ui'

function App() {
  const { loading, error, layout } = useLineage('http://127.0.0.1:5000/api/lineage')
  const [sel, setSel] = useState(null)
  if (loading) return <p>Loading…</p>
  if (error) return <p>{error}</p>
  return (
    <LineageGraph layout={layout} selectedId={sel} onSelect={setSel} />
  )
}

Build

npm install
npm run build   # outputs dist/lineage-ui.js + lineage-ui.css