git.stella-ops.org/docs/ui/components/score-breakdown-popover.md

ScoreBreakdownPopoverComponent

Detailed score breakdown popover showing all evidence dimensions, flags, and explanations.

Overview

The ScoreBreakdownPopoverComponent displays a comprehensive breakdown of an evidence-weighted score, including dimension bars, active flags, guardrails, and human-readable explanations.

Selector

<stella-score-breakdown-popover />

Inputs

Input	Type	Default	Description
scoreResult	EvidenceWeightedScoreResult	required	Full score result object
position	PopoverPosition	'bottom'	Popover placement

Position Options

type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';

Score Result Structure

interface EvidenceWeightedScoreResult {
  findingId: string;
  score: number;           // 0-100
  bucket: ScoreBucket;     // 'ActNow' | 'ScheduleNext' | 'Investigate' | 'Watchlist'
  inputs: {
    rch: number;           // Reachability (0-1)
    rts: number;           // Runtime signals (0-1)
    bkp: number;           // Backport availability (0-1)
    xpl: number;           // Exploitability (0-1)
    src: number;           // Source trust (0-1)
    mit: number;           // Mitigations (0-1)
  };
  weights: {
    rch: number;
    rts: number;
    bkp: number;
    xpl: number;
    src: number;
    mit: number;
  };
  flags: ScoreFlag[];
  explanations: string[];
  caps: {
    speculativeCap: boolean;
    notAffectedCap: boolean;
    runtimeFloor: boolean;
  };
  policyDigest: string;
  calculatedAt: string;    // ISO 8601
}

Dimension Labels

Key	Label	Description
rch	Reachability	Path to vulnerable code exists
rts	Runtime Signals	Active usage detected in production
bkp	Backport	Fix backported to current version
xpl	Exploitability	EPSS probability, known exploits
src	Source Trust	Advisory source reliability
mit	Mitigations	Active mitigations reduce risk

Usage Examples

Basic Usage

<stella-score-breakdown-popover [scoreResult]="scoreResult" />

With Position

<stella-score-breakdown-popover
  [scoreResult]="scoreResult"
  position="right"
/>

Triggered from Score Pill

<div class="score-container">
  <stella-score-pill
    [score]="score"
    (scoreClick)="showPopover = true"
  />

  @if (showPopover) {
    <stella-score-breakdown-popover
      [scoreResult]="scoreResult"
      (close)="showPopover = false"
    />
  }
</div>

In a Dialog

@Component({
  template: `
    <div class="dialog-content">
      <h2>Score Details</h2>
      <stella-score-breakdown-popover
        [scoreResult]="scoreResult"
      />
    </div>
  `
})
export class ScoreDialogComponent {
  scoreResult = input.required<EvidenceWeightedScoreResult>();
}

Popover Sections

1. Header

Displays the overall score with bucket label and color.

2. Dimensions Chart

Horizontal bar chart showing all six dimensions with their normalized values (0-100%).

3. Flags Section

Active flags displayed as badges. See ScoreBadge for flag types.

4. Guardrails Section

Applied caps and floors:

• Speculative Cap: Score limited due to unconfirmed evidence
• Not Affected Cap: Score reduced due to vendor VEX
• Runtime Floor: Score elevated due to active runtime signals

5. Explanations

Human-readable explanations of factors affecting the score.

6. Footer

• Policy digest (truncated SHA-256)
• Calculation timestamp

Accessibility

• Uses role="dialog" with aria-labelledby
• Focus trapped within popover when open
• Escape key closes popover
• Click outside closes popover
• Screen reader announces dimension values

Styling

stella-score-breakdown-popover {
  --popover-max-width: 360px;
  --popover-background: white;
  --popover-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

Related Components

• ScorePill - Compact score display
• ScoreBadge - Evidence flag badges