← Cycles
Qmap · c17

Dataflow Detail

unlistedcreated 2026-03-23· last activity 2026-08-15

Single dataflow detail view with per-actor context toggling

New in this cycle: Single-dataflow detail with per-actor context toggling

Why

The app needs a focused view for individual dataflow detail pages — exactly two actors (source → destination) connected by a single flow line, sitting at the top of a "Dataflow" detail page. Unlike the full map, this view lets users toggle context per actor: revealing boundary rugs (Security Zone, Team, Region) that show where each actor sits in the broader system, without the noise of the full network map.

Objective

Build a view state for showing a single dataflow with larger actors, and allow toggling contexts independently for the source and the destination actor.

Key Changes

  • 2026-03-23 — Landed in the qmap c14+ release commit alongside the broader visualization engine:
    • New QMapDataflow wrapper component promoted to src/components/ and exported from the library
    • Per-actor context toggling via sourceContexts / destinationContexts props; dynamic visibleActors (focal actors + context siblings sharing tag values) and groupBy computed from active context keys
    • Reused useHighlightedDataflows for focal actor scaling and non-focal dimming
    • Experiment harness at dev/experiments/c17.dataflow-detail/ with a focal-dataflow picker and per-actor context toggle buttons; test data of 10 actors across 3 security zones and 3 teams, 10 dataflows, 5 curated focal selections

Outcome

Initial scaffold worked: the QMapDataflow wrapper shipped in the library and the experiment demonstrated per-actor context toggling over curated focal dataflows. Visual tuning and camera framing for 2-actor scenes were left open. c19 rebuilt this wrapper on the c18 config schema system (config-driven props, DATAFLOW_DEFAULTS), which replaced the hardcoded props from this cycle.

Visual record

9 captures — heroes, page slices, and full-page renders. Click to view.

Checkout → Stripe, no context
Checkout → Stripe, no context
Security zones toggled on both ends — the cross-zone story
Security zones toggled on both ends — the cross-zone story
Zones + team context — rugs stack
Zones + team context — rugs stack
Every context on — maximum situational grounding
Every context on — maximum situational grounding
API Gateway → Checkout — internal routing
API Gateway → Checkout — internal routing
Notifications → SendGrid — external email egress
Notifications → SendGrid — external email egress
Checkout → Orders DB — the database write
Checkout → Orders DB — the database write
User Service → Datadog — observability flow
User Service → Datadog — observability flow
c17 hero

Artifacts

/experiments/c17.dataflow-detail/ (local dev)

Qpoint Brand Style Guide