Vanilla Breeze

traceability-matrix

Auto-discovers a 2D cross-reference grid (RTM) from page elements; composes data-table for sortable + heatmap-able presentation, adds chain highlight.

Overview

The <traceability-matrix> component renders the canonical Requirements Traceability Matrix (RTM) shape — rows × columns at-a-glance — by auto-discovering source elements on the page. Use it to verify coverage between personas and stories, stories and work items, requirements and tests, or any other cross-cutting relationship in a planning artifact graph.

It composes <data-table> so the rendered grid is sortable and styleable, and adds two things data-table can't: auto-discovery (you give it CSS selectors, not hand-built rows) and chain highlight (clicking a cell marks the row and column source elements page-wide so authors can see the connection in surrounding components).

How it works

  1. Author CSS selectors for the row and column source elements (e.g. rows='[data-row-kind="story"]', cols='[data-row-kind="persona"]').
  2. Name the link attribute with link-attr. The component reads each row element's value(s) and matches against the column elements' id.
  3. Comma-separated values are supported out of the box — data-persona-id="p-sarah,p-jordan" renders two checkmarks.
  4. Orphan flagging — set flag-orphans to mark empty rows and columns with data-orphan so CSS can call them out (the default style adds a ⚠ glyph).

Attributes

Child attributes

Persona × Story example

Story × Work-item example

Native VB elements work too — point at <user-story> / <work-item> directly:

The matrix uses data-matrix-label on each source if present, else its id, else its trimmed text content.

Chain highlight

Clicking any cell in the matrix toggles data-state-highlighted on:

  • the cell itself,
  • the matrix row,
  • the row source element page-wide,
  • the column source element page-wide.

The default stylesheet adds an outline to highlighted source elements so authors can scan the page and see the connection. Listen for traceability-matrix:highlight to wire additional behaviour (auto-scroll, side panel, etc.).

Progressive Enhancement

  1. HTML. Without JS, the matrix host is empty — auto-discovery is inherently runtime. For no-JS RTMs, render a <data-table> directly with hand-built intersection rows. The matrix component is purely additive.
  2. CSS. The :not(:defined) selector keeps the host visible pre-upgrade.
  3. JS. Auto-discovers rows/cols, builds the table, wires chain-highlight clicks, fires traceability-matrix:ready.

Related
↑