Component Library

D3.js force-directed graph rendering identity relationships: users ↔ fingerprints ↔ domainprints ↔ domains. Canvas-based for performance with 100+ nodes. Supports zoom, pan, and click-to-select.

Node types & colors:
├── user    → cyan (#06b6d4)
├── fp      → purple (#a855f7)
├── dp      → emerald (#10b981)
└── domain  → amber (#f59e0b)

Force simulation:
├── charge: -300 (repulsion)
├── link distance: 80
├── collision radius: 30
└── center: canvas center

Slide-in detail panel showing node metadata: events, related identities, risk scores. Positioned with z-index layering above the graph.

Risk score distribution chart with bar visualization. Shows breakdown by risk level (low/medium/high/critical) and detection signal types.

Visualizes fingerprint collisions — cases where the same browser fingerprint appears across multiple user accounts. Uses node-link diagram.

Geographic heatmap showing event distribution by country. Dynamic import (client-only) to avoid SSR issues with map libraries. Lazy-loaded wrapper pattern.

// GeoMap.tsx — dynamic import wrapper
const GeoMapInner = dynamic(
  () => import('./GeoMapInner'),
  { ssr: false, loading: () => <Skeleton /> }
);

Alert cards for impossible travel detections. Shows from/to countries, distance, speed, and risk score for each event. Sorted by speed (most extreme first).

{
  fingerprint: "a1b2...",
  from_country: "ES",
  to_country: "JP",
  distance_km: 10200,
  delta_hours: 0.5,
  speed_kmh: 20400,
  risk_score: 90
}

Collapsible sidebar with 9 navigation items. Mobile: hamburger menu with overlay. Desktop: collapse/expand toggle. Active route indicator with animated cyan glow.

CSS Variables:
├── --sidebar-width: 220px
├── --sidebar-collapsed: 56px
└── --header-height: 56px

Active indicator:
├── 3px cyan bar on left
├── box-shadow glow effect
└── Bold icon + text color

Rich event detail card showing all tracking data: fingerprint, domainprint, user ID, site, page, referrer, country, browser, OS, device type, risk score, fraud signals, attribution data, and timestamp.

Stat display card with icon, value, label, and optional trend indicator. Used across all dashboard pages for KPIs.

Multi-select dropdown for filtering by domain. Used in Identity Graph and Browse pages. Glassmorphism dropdown with z-index management.

Push notification bell icon with unread count badge. Manages service worker subscription, permission request, and real-time notification display.

Flow:
1. User clicks bell
2. Request notification permission
3. Register service worker
4. Subscribe to push API
5. POST /api/push/subscribe
6. Processor Lambda → POST /api/push/send
7. Service worker shows notification

Health check widget that pings GET /health and displays service status, DynamoDB connectivity, and API version. Auto-refreshes on mount.