Patient Body Map Viewer

Interactive medical visualization that maps patient conditions onto a human skeleton diagram.

Screenshots

Single Patient View

Compare Mode

Features

Core

• Interactive Skeleton - Click body parts to filter, hover to see conditions
• Smart Tooltips - Condition badges outside skeleton with connecting lines
• Collision Detection - Tooltips auto-reposition using physics-based repulsion
• Zoom and Pan - Ctrl+Scroll to zoom, drag to pan when zoomed

Visual Effects

• Breathing Animation - Subtle skeleton pulse for organic feel
• Severity Gradients - Background shifts based on condition severity
• Enhanced Glow - Dual-layer glow on condition badges
• Dark/Light Theme - Smooth theme toggle with persistence

Data and Filtering

• Sort Options - By name, date, severity, or age
• Gender Filter - Filter patients by gender
• Body Part Filter - Click skeleton to filter by affected area
• Search - Search by name, condition, or notes

Navigation

• Keyboard Shortcuts - Arrow keys navigate, Escape clears, Cmd+1/2/3 switch tabs
• Patient Navigation - Next/Previous in details view
• Tabbed Interface - Patients, Details, and Stats tabs
• URL Deep Linking - Shareable URLs for specific patients

Analytics

• Statistics Panel - Interactive charts using Recharts
• Severity Distribution - Pie chart of condition severity
• Age Distribution - Bar chart of patient demographics
• Condition Correlations - Common co-occurring body parts
• Compare Mode - Side-by-side comparison of 2 patients

Advanced

• PDF Export - Generate patient reports using html2pdf.js
• Visit Timeline - Patient history with previous visits
• Onboarding Tour - Interactive walkthrough for new users
• LocalStorage Persistence - Preferences saved across sessions
• Print-Friendly Styles - Optimized CSS for printing

New Features

• Condition Trends - Line chart showing severity changes over visits
• Risk Scoring - Calculate patient risk based on conditions, age, severity
• Patient Tags - Categorize patients (Critical, Follow-up, etc.)
• Data Import - Upload JSON files to add patients
• Data Export - Download all patients as CSV or JSON
• Skeleton Annotations - Draw markers, circles, notes on skeleton

State Management

Uses Zustand for global state with:

• Persistent preferences (sort, filter, theme)
• URL synchronization
• Devtools integration

const { selectPatient, navigatePatient, filteredPatients } = usePatientStore();

Technical Highlights

Collision Detection

// Physics-based repulsion for tooltip positioning
const force = Math.max(0, (minDistance - distance) / minDistance);
repulsionX += (dx / distance) * force * multiplier;

Body Part Mapping

const bodyPartRegions: Record<BodyPart, Region> = {
  head: { x: 35, y: 0, width: 30, height: 12 },
  chest: { x: 30, y: 16, width: 40, height: 14 },
};

Quick Start

npm install
npm run dev

Keyboard Shortcuts

Key	Action
Up / k	Previous patient
Down / j	Next patient
Escape	Clear selection
Cmd+1	Patients tab
Cmd+2	Details tab
Cmd+3	Stats tab
Ctrl+Scroll	Zoom skeleton

Libraries Used

• React 18 - UI framework
• TypeScript - Type safety
• Zustand - State management
• Recharts - Data visualization
• react-joyride - Onboarding tours
• html2pdf.js - PDF generation
• date-fns - Date formatting
• motion/react - Animations
• next-themes - Theme switching
• Tailwind CSS - Styling
• shadcn/ui - Component library

Code Organization

src/
├── components/
│   ├── SkeletonViewer/     # Skeleton visualization (modular)
│   │   ├── HumanSkeleton   # Main skeleton component
│   │   ├── TooltipWithLine # Condition badges with lines
│   │   ├── ZoomControls    # Zoom UI controls
│   │   ├── AnnotationLayer # Drawing on skeleton
│   │   ├── bodyPartRegions # Region configuration
│   │   └── tooltipPositioning # Collision detection utils
│   ├── Analytics/          # Trends, Risk, Correlations
│   ├── Timeline/           # Patient visit history
│   ├── Tags/               # Patient tagging system
│   ├── DataManagement/     # Import/Export panel
│   └── Onboarding/         # Tour component
├── stores/                 # Zustand stores
│   ├── usePatientStore     # Patient data and selection
│   ├── useUIStore          # UI state
│   ├── useTagStore         # Patient tags
│   └── useAnnotationStore  # Skeleton annotations
├── utils/                  # Utilities with JSDoc
└── types/                  # TypeScript definitions

Learning Points

• SVG interaction with overlay regions
• Physics-based UI collision detection
• Zustand for global state with persistence
• TypeScript discriminated unions
• JSDoc documentation patterns
• Component modularization
• Theme switching with next-themes
• Responsive split-panel layouts
• PDF generation from HTML
• Interactive data visualization with Recharts

---

Built for learning and demonstration.