View Contexts

QMap is a production component (c15) with a props-driven API: <QMap :actors :dataflows :groupBy />. But different consumers need fundamentally different configurations — a policy violation page needs a focused, non-interactive view highlighting specific actors, while a dashboard needs the full interactive map.

This cycle explores the right "view context" abstraction and implements the first real view: policy violation.

Config Object Pattern (validated)

createViewContext(overrides) returns a plain object with two parts:

• qmapProps — props passed directly to <QMap> (width, height, selectable, etc.)
• behavior — wrapper-level config (highlights, cameraPreset, interactive, groupBy)

Policy Violation View (functional)

New QMap prop: highlightedDataflows — an array of dataflow objects with a semantic status field (e.g., "violation", "healthy", "warning"). QMap renders these flows immediately on load (no click required), maps the status to visual treatment (color, thickness), and highlights the involved actors while dimming the rest.

The wrapper says what the dataflow represents, QMap decides how to render it.

Flow Status → Visual Mapping

Defined in src/flows/BaseFlow.js:

• healthy — green (0x34bc6c), normal thickness
• violation — red (0xff4444), 1.3x thickness
• warning — amber (0xf59e0b), 1.2x thickness
• default — purple (0x9c5cf2), normal thickness

Key Changes

• src/flows/BaseFlow.js — FLOW_STATUSES map, status constructor option, getProtocolColor() returns status color when set
• src/flows/index.js — createFlow() passes through status/protocol/volume from flowData
• src/composables/useHighlightedDataflows.js — New composable: creates flows, highlights involved actors, dims others, focuses camera
• src/components/QMap.vue — New highlightedDataflows prop, wires composable, skips click-to-select when highlights active
• QMapPolicyViolation.vue — Builds highlightedDataflows from violation payload with status: 'violation', removed broken applyHighlightsToScene() hack

Expression Props (explored, parked)

Built infrastructure for schema-driven visual tuning: DevExpressionControls auto-generates UI from a { kind, val, props } schema, useExpressionWiring connects changes to live scene objects. Parked — the QMapExpressionLab component was removed during cleanup; the supporting composable (useExpressionWiring.js) and schema (expressionProps.js) remain in shared/ for future use.

Experiment: dev/experiments/c16.view-contexts/

• components/QMapPolicyViolation.vue — Non-interactive violation wrapper
• shared/views/policyViolation.js — Builds view context + highlighted dataflows
• shared/data/policyViolationData.js — Sample violation payload (8 actors, 6 dataflows, 2 violations)
• shared/viewContext.js — createViewContext(), HIGHLIGHT_STYLES, applyHighlights()
• shared/expressionProps.js — Expression schema (parked)
• shared/composables/useExpressionWiring.js — Expression wiring (parked)