Counterfactual Block

Data Display

Analysis

A what-if analysis component that displays the actual decision alongside counterfactual scenarios with optional probabilities.

Preview

What-if analysis with multiple scenarios

What-If Analysis

Actual Decision

Approved the loan application based on credit score of 720 and stable employment history.

If the credit score was below 650

Then: The application would likely be declined or require additional documentation.

Probability: 85%

If the applicant had less than 2 years of employment

Then: A co-signer would be required for approval.

Probability: 70%

If the loan amount was 50% higher

Then: The interest rate would increase by 1.5% and require collateral.

Probability: 60%

Without Probabilities

Counterfactuals without probability values

What-If Analysis

Actual Decision

Selected Model A for production deployment based on accuracy metrics.

If Model B had 5% better accuracy

Then: Model B would be selected, but latency would increase by 200ms.

If the dataset was 10x larger

Then: Both models would perform similarly, making cost the deciding factor.

Props

Component API reference

Prop	Type	Default	Description
`actual`	`string`	—	The actual/current outcome or decision
`counterfactuals`	`Counterfactual[]`	—	List of counterfactual scenarios
`className`	`string`	—	Additional CSS classes

Counterfactual Type

Shape of each counterfactual scenario

interface Counterfactual {
  condition: string   // The hypothetical condition ("if X...")
  outcome: string     // The predicted outcome ("then Y...")
  probability?: number // Optional probability percentage
}

Usage

Import and implementation example

import { CounterfactualBlock } from '@/components/ui/counterfactual-block'
import type { Counterfactual } from '@/components/ui/counterfactual-block'

const scenarios: Counterfactual[] = [
  {
    condition: 'we used a different model',
    outcome: 'Response time would improve by 30%',
    probability: 75,
  },
]

export default function Example() {
  return (
    <CounterfactualBlock
      actual="Used GPT-4 for content generation based on quality requirements."
      counterfactuals={scenarios}
    />
  )
}

Features

Built-in functionality

Actual vs hypothetical: Clear visual separation between the actual decision and what-if scenarios
Condition-outcome pairs: Each scenario shows the condition and its predicted outcome
Optional probabilities: Display probability percentages for each scenario
Visual hierarchy: Highlighted actual decision with indigo styling, neutral scenarios
Ref forwarding: Supports React ref forwarding

Accessibility

Accessibility considerations

ARIA Attributes

Uses semantic heading for the titleContent is structured with clear labels

Keyboard Navigation

Key	Action
`N/A`	Non-interactive display component

Notes

Actual decision is visually distinct with colored background
Each counterfactual has a help icon for visual context
Condition text starts with "If" and outcome with "Then" for clarity
Probability values are displayed as text, not only color

Related Components

Card Alert ConfidenceIndicator