Spaces:
Paused
Paused
| /** | |
| * Attribution-matrix heatmap: one row per violation, one column per causal | |
| * layer. Cell color encodes tri-state evidence (SUPPORTED / RULED_OUT / | |
| * UNKNOWN); the primary layer carries a ring. Clicking a row selects the | |
| * violation for the consequence replay view. | |
| */ | |
| import Box from '@mui/material/Box'; | |
| import Chip from '@mui/material/Chip'; | |
| import Tooltip from '@mui/material/Tooltip'; | |
| import Typography from '@mui/material/Typography'; | |
| import type { RotrAttributionMatrix } from '../../types/rotr'; | |
| const LAYERS = [ | |
| 'perception', | |
| 'prediction', | |
| 'planning', | |
| 'localization', | |
| 'map', | |
| 'control', | |
| 'policy_rule', | |
| 'data_label', | |
| ]; | |
| const STATUS_COLOR: Record<string, string> = { | |
| SUPPORTED: '#c62828', | |
| RULED_OUT: '#1b5e20', | |
| UNKNOWN: '#616161', | |
| }; | |
| interface Props { | |
| matrix: RotrAttributionMatrix; | |
| selectedViolationId: string | null; | |
| onSelect: (violationId: string) => void; | |
| } | |
| export default function RotrAttributionHeatmap({ matrix, selectedViolationId, onSelect }: Props) { | |
| return ( | |
| <Box sx={{ overflowX: 'auto' }}> | |
| <Box sx={{ display: 'flex', gap: 1, mb: 1, alignItems: 'center', flexWrap: 'wrap' }}> | |
| {Object.entries(STATUS_COLOR).map(([status, color]) => ( | |
| <Chip | |
| key={status} | |
| size="small" | |
| label={status} | |
| sx={{ bgcolor: color, color: '#fff', fontSize: 10, height: 18 }} | |
| /> | |
| ))} | |
| <Typography variant="caption" sx={{ color: '#8a949e' }}> | |
| ring = primary layer (highest-confidence positive evidence) | |
| </Typography> | |
| </Box> | |
| <table style={{ borderCollapse: 'separate', borderSpacing: 3 }}> | |
| <thead> | |
| <tr> | |
| <th style={{ textAlign: 'left', fontSize: 11, color: '#8a949e', paddingRight: 8 }}> | |
| violation | |
| </th> | |
| {LAYERS.map((l) => ( | |
| <th | |
| key={l} | |
| style={{ | |
| fontSize: 10, | |
| color: '#8a949e', | |
| writingMode: 'vertical-rl', | |
| transform: 'rotate(180deg)', | |
| padding: '2px 0', | |
| }} | |
| > | |
| {l} | |
| </th> | |
| ))} | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {matrix.rows.map((row) => { | |
| const selected = row.violation_id === selectedViolationId; | |
| return ( | |
| <tr | |
| key={row.violation_id} | |
| onClick={() => onSelect(row.violation_id)} | |
| style={{ cursor: 'pointer' }} | |
| > | |
| <td | |
| style={{ | |
| fontSize: 11, | |
| fontFamily: 'monospace', | |
| color: selected ? '#4fc3f7' : '#c9d1d9', | |
| paddingRight: 8, | |
| whiteSpace: 'nowrap', | |
| borderLeft: selected ? '3px solid #4fc3f7' : '3px solid transparent', | |
| paddingLeft: 5, | |
| }} | |
| > | |
| {row.violation_id.replace(/^bank-[0-9a-f]+-/, '')} | |
| </td> | |
| {LAYERS.map((layer) => { | |
| const cell = row.layers[layer]; | |
| const status = cell?.status ?? 'UNKNOWN'; | |
| const isPrimary = row.primary_layer === layer; | |
| return ( | |
| <Tooltip | |
| key={layer} | |
| title={ | |
| <Box sx={{ maxWidth: 340 }}> | |
| <b> | |
| {layer}: {status} | |
| </b>{' '} | |
| (conf {cell ? cell.confidence.toFixed(2) : '—'}) | |
| <br /> | |
| {cell?.evidence ?? 'no evidence recorded'} | |
| </Box> | |
| } | |
| arrow | |
| > | |
| <td | |
| style={{ | |
| width: 26, | |
| height: 20, | |
| background: STATUS_COLOR[status], | |
| opacity: status === 'SUPPORTED' ? (cell ? 0.45 + 0.55 * cell.confidence : 1) : 0.85, | |
| borderRadius: 3, | |
| outline: isPrimary ? '2px solid #ffb300' : 'none', | |
| outlineOffset: -2, | |
| }} | |
| /> | |
| </Tooltip> | |
| ); | |
| })} | |
| </tr> | |
| ); | |
| })} | |
| </tbody> | |
| </table> | |
| <Typography variant="caption" sx={{ color: '#8a949e', display: 'block', mt: 1 }}> | |
| {matrix.invariant} | |
| </Typography> | |
| </Box> | |
| ); | |
| } | |