PipelineGraph

Open in Playground

Job dependency graph, left to right like the workflow view on GitHub Actions. nodes: { id, label, status, duration?, needs? }, where status is queued, running, success, failed, skipped or cancelled. The column is the longest path from a root; the first dependent of a node stays on its row and the others open new rows. An unknown id in needs is ignored and a cycle drops the dependency that closes it.

Click, select and pan. Nodes are buttons: onNodeClick(node) and selectedId (it sets aria-current). When the graph is larger than its container, drag (or touch-drag) to pan; a drag does not click a node, and tabbing to a node scrolls it into view. Give the container a size with className. Each node can carry a React label, a description, a custom icon, a trailing slot, its own className, an ariaLabel and disabled; renderNode(node, { selected, icon }) replaces the whole content, and nodeWidth, nodeHeight, gapX and gapY set the sizes.

Selected: banana-test

Props

PipelineGraph

  • nodesPipelineNode[]

    Jobs; status is queued | running | success | failed | skipped | cancelled, needs lists the ids a job waits for. label, duration, description, icon and trailing take any React node; className styles one node, ariaLabel names it when the label is not text, disabled makes it unclickable. See the PipelineNode table below.

  • onNodeClick(node) => void

    Called when a node is clicked (not after a drag).

  • selectedIdstring | null

    Id of the highlighted node (sets aria-current).

  • renderNode(node, { selected, icon }) => ReactNode

    Replaces the content inside a node; icon is the default status icon, to keep it.

  • nodeWidthnumber
    Default: 176

    Node width in px.

  • nodeHeightnumber
    Default: 52

    Node height in px.

  • gapXnumber
    Default: 48

    Space between columns in px.

  • gapYnumber
    Default: 16

    Space between rows in px.

  • emptyTextReactNode

    Shown when there are no nodes (nothing is rendered by default).

  • aria-labelstring
    Default: 'Pipeline'

    Accessible name of the graph.

  • classNamestring
    Default: ''

    Extra classes for the root element.

PipelineNode

  • idstring

    Unique id of the job; other nodes name it in needs.

  • labelReactNode

    Name of the job.

  • status'queued' | 'running' | 'success' | 'failed' | 'skipped' | 'cancelled'

    Sets the icon, the border and the accessible name.

  • durationReactNode

    Shown under the label, e.g. '2m 25s'.

  • needsstring[]

    Ids of the nodes this one waits for. Unknown ids are ignored.

  • iconReactNode

    Replaces the status icon (the status still sets the border and the accessible name).

  • descriptionReactNode

    A second line under the label, above the duration.

  • trailingReactNode

    Content at the right edge of the node, e.g. a badge or an avatar.

  • classNamestring

    Extra classes for this node's button, e.g. to recolor its border or background.

  • ariaLabelstring

    Accessible name; by default the label (when it is text, else the id), the status and the duration.

  • titlestring

    Tooltip (default: the status).

  • disabledboolean
    Default: false

    Not clickable, and skipped by the keyboard.