Diagram - Data Pipeline Lab

#Follow an order through the workbench

Thirty fictional studio orders join a six-product catalog. Ten purpose-built operators normalize SKUs, join prices, filter payment state, split validation outcomes, group revenue and separate review holds from hard rejects. Row previews and counts from the sample populate the canvas immediately. All data stays in memory.

1. The authored Studio restock graph produces 20 Accepted, 4 Review and 3 Rejected orders, excluding three unpaid orders. Accepted revenue is $1,370.55: gear $694.50, lighting $199.80 and prints $476.25. These are illustrative USD values calculated from integer cents.
2. Choose Review or Rejected, then an Inspect order record. Its actual operator membership highlights the saved canvas connections. The lineage strip shows before/after SKU, joined product/price and the final issue; each stage button reveals and configures that operator. Accepted records also appear in their revenue category's membership.
3. Inspect Normalize SKU and clear Trim and uppercase SKU. Seven additional paid orders become unknown-SKU rejects. Payment filter can include unpaid orders; Validate orders changes the maximum units from 1–20. Enter or leave the quantity field to save; Escape restores the saved draft. Results change immediately after a committed edit.
4. Choose Supplier handoff challenge. The actual Catalog connection is removed, leaving the independent Orders input intact. Join catalog explains its missing Catalog input. The inspector selects Catalog and Product catalog's output; Connect input repairs the real graph and restores live results. Undo/Redo can reverse the challenge and repair independently. The history toolbar uses public Store history so consumer-owned connector removal remains undoable while node deletion is constrained. Ctrl/Cmd+Z and Shift+Ctrl/Cmd+Z (or Ctrl/Cmd+Y) use that same history inside the example, preserving native editing in text controls.
5. Choose Launch day · 32 orders for a different product mix and larger orders. Run flow, Pause, Resume and Step provide an optional finite walkthrough. They highlight incoming routes without hiding the live results or writing model history. Reset restores the authored graph and settings in one undoable transaction.

The node inspect buttons and named Inspect operator selector open the same contextual configuration. Escape closes it and returns focus to its opener. Selects use arrow keys/Enter; checkboxes use Space. Input port chooses each join input independently. Source output names operator, port and row type; Connect input uses public create/reconnect commands. Incompatible types, occupied inputs, cycles and wrong directions return Diagram diagnostics without changing the saved graph. The pointer Connect tool and endpoint gestures remain available. Find operator, Pan, zoom and Fit provide manual navigation. Below the readable whole-graph width, the join opens at 90% scale; named selection reveals other stages instead of shrinking every label to fit.

#Diagram and host responsibilities

Diagram supplies Vue node definitions, the Store and Session, typed dynamic ports, connection commands, scene paths, selection, movement, navigation and history. The host creates the Store and disposes it on unmount; the root manages the Session. The join has separate capacity-one Orders and Catalog inputs. Validation has Accepted and Issues outputs; Accepted fans out to the revenue and order previews. Review triage sends hard rejects to Rejected orders. Each output allows up to four attachments. Nodes cannot resize, rotate, duplicate or delete in this example.

The consumer owns its Vue node definitions, fixture, ten allowlisted operators, finite evaluator, configuration, previews, record lineage and walkthrough clock. Evaluation follows the saved edges and their named ports, never connector path shape. Missing inputs, wrong types, unsupported kinds, capacity violations and cycles stop the entire plan; no partial result is presented as current. Body/free endpoints remain valid Diagram geometry but are not executable inputs in this consumer. Imported data and port contracts receive the same checks instead of trusting interactive rules.

The join is a left join: unknown SKUs remain visible until validation/triage rejects them. Invalid quantities and unknown SKUs are hard rejects; unavailable products and orders above the saved quantity limit are held for review. The authored revenue input receives only Accepted rows. A type-compatible reconnection from Join can bypass filtering/validation, so its changed totals describe that edited graph, not a production financial policy. Undo restores the authored connection.

Line totals multiply integer quantities by integer minor-unit prices; grouping adds integer totals. Bounds and safe-integer checks prevent inexact arithmetic. Only formatting divides cents for display. No expression strings, scripts, external feeds, plugins or generic execution engine are accepted. Trace emphasis serializes the public scene ref from useDiagramContext() line/cubic segments in the projected viewport world, following movement, pan, zoom and Undo without measuring DOM paths.

#State and lifecycle

Every committed edit, including geometry, reset and Undo/Redo, cancels/fences the old walkthrough and recomputes current live output. Rejected edits retain the previous graph. A record choice is retained while it still belongs to its branch; otherwise it changes to that branch's first record. Missing inputs clear current rows and lineage. The clock cannot publish old revision results after an edit.

There is no animated autoplay. Hidden models pause a running walkthrough and require explicit Resume; destroy removes the visibility listener, unsubscribes Store commits and disposes both the clock and Store. One timer advances each stage, ending after the last operator. Reduced motion disables traveling dashes and inspector reveal while retaining static route emphasis, counts, previews and all controls. Route remount creates a new local fixture.

#Copy and adapt

Copy DataPipelineLabDemo.vue and its _shared/data-pipeline-lab files. DataPipelineLabWorkbench.vue composes the controls under the root; PipelineTrace.vue reads the current scene. Keep fixture.ts, evaluate.ts, run.ts, PipelineIcon.vue and styles.css with them. Surrounding controls use PrimeVue Button, Select, Checkbox and InputText, with individual PrimeIcons Vue components. Follow First Diagram for application setup.

BATCHES accepts 1–36 unique bounded orders per preset with string SKU/channel, integer quantities between -100 and 100 and boolean payment state. Nonpositive integer quantities intentionally reach validation so the reject story remains visible. PRODUCTS accepts 1–12 unique SKUs, names/categories, boolean availability and integer prices from 0 to 100,000,000 cents. Change PORTS, OPERATORS, the fixture and evaluator together to author another finite scenario; the evaluator allows at most ten known operators and twenty-four connections. These limits are consumer choices, not Diagram limits.

This is an illustrative in-memory workbench with no backend, persistence, order processing, accounting or output adapter. Authored placement is not automatic layout or obstacle avoidance; dragging can overlap paths. Custom Vue content has no portable export-fidelity claim. Physical touch and native hidden-tab execution depend on the host environment and are not implied by desktop checks.

The inspector overlays the canvas at wide and narrow sizes. Opening and closing it preserves the page position and drawing area; its content scrolls within the panel. Keyboard focus moves without scrolling the surrounding page.

#Related Docs

• Ports
• Connection Rules
• Connector Editing
• Node Content
• History
• Pan and Zoom