Data pipelinePro

Records flowing live from three sources through one transform to every destination: raw dots go in, come out as solid squares and go to one, some or all outputs at their own pace, cards lighting up with live counts, the ring quickens as it works, and the count climbs; slows under the pointer, pauses, and stacks on phones.

When to use

Records flowing live from sources through a transform to every destination, card by card.
Data and integration products; a status card showing your own pipeline's events.

When not to use

Products that don't move data between systems: the diagram would promise something they don't do.
Operators who need each run's exact state: a table of runs; the cards only summarise.

Usage

Data pipeline with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { useEffect, useRef } from "react"
2import { Pipeline, type PipelineHandle } from "@/components/dashral/blocks/data-pipeline"
3
4const pipeline = useRef<PipelineHandle>(null)
5useEffect(() => events.on("record", (e) => pipeline.current?.send(e.source, { to: e.destinations })), [])
6
7<Pipeline
8  ref={pipeline}
9  mode="live"
10  inputs={sources}
11  hub={{ label: "Transform", description: `${total} processed` }}
12  outputs={destinations}
13/>

API reference

DataPipeline

The section: a heading, the diagram in a dotted panel with a Live badge and Pause, and a row of figures. Every part comes from props, with a sample pipeline by default.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`"Pipelines"`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`sources`	`FlowNode[]` The sources on the left (on top on phones) and the destinations on the right (below).	`sample`
`destinations`	`FlowNode[]`	`sample`
`hubLabel`	`string` The hub's name; under it, the count of records processed, from `processed`.	`"Transform"`
`processed`	`number` Where the processed count starts.	`12_527`
`stats`	`{ value: string; label: string }[]` The figures under the diagram; none hides the row.	`sample`
`mode`	`PipelineProps["mode"]` With your own pipeline's events and numbers instead of sample records (see Pipeline's mode="live").	—
`ref`	`React.Ref<PipelineHandle>`	—

Pipeline

Records flowing from sources through one hub to their destinations. Each record leaves a source as a hollow dot, is changed into a solid square in the hub (its ring quickens, its outline pulses), and goes out to one, some or all of the outputs, each copy at its own pace; cards light up as records leave and land, and keep live counts. Side by side when there's room, stacked on a narrow container. Sample records by default; with mode="live", only the ones you send (see PipelineHandle). One requestAnimationFrame loop writes the SVG attributes directly; React doesn't render per frame. The loop stops off screen, in a hidden tab, when paused and (live) with nothing on its way; with reduced motion it's a still picture with a record on every link.

Prop	Type	Default
`inputs`	`FlowNode[]` Required.	—
`hub`	`{ label: string; description: React.ReactNode }` Required.	—
`outputs`	`FlowNode[]` Required.	—
`speed`	`number` How fast records flow: 1 is the usual pace, 2 twice as fast, 0 holds them still.	`1`
`paused`	`boolean` Brings the flow to rest where it is (easing down, not stopping in one frame).	`false`
`onProcess`	`() => void` Called each time a record is processed in the hub, e.g. to count them.	—
`mode`	`"demo" \| "live"` "demo" plays sample records on its own; "live" moves one only when you send it (see PipelineHandle).	`"demo"`
`ref`	`React.Ref<PipelineHandle>`	—
`className`	`string`	—

type FlowNode

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`description`	`string`	—
`detail`	`string` More about it, in a tooltip on hover and keyboard focus (touch screens don't show it, so nothing essential).	—
`icon`	`LucideIcon`	—
`mark`	`React.ReactNode` A brand's own mark (white, on `color`), in place of an icon.	—
`color`	`string`	—
`metric`	`{ unit: string; value?: number; base?: number; per?: number }` A count on the card, then `unit`. `value` is your own number, shown as it is. Without it the card counts records itself: `base` plus one for every `per` records it sends or receives.	—

type PipelineHandle

Moves records through a live pipeline (mode="live").

Prop	Type	Default
`send`	`(from: string, options?: { to?: string[] }) => void` Sends one record from the source with this id, through the hub, to the destinations in `to` (every one without it). Off screen, in a hidden tab or with reduced motion it isn't drawn, but it's counted at once all the same.	—