# hpo-react-visualizer

[![npm version](https://img.shields.io/npm/v/hpo-react-visualizer.svg)](https://www.npmjs.com/package/hpo-react-visualizer)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Interactive Human Phenotype Ontology (HPO) organ visualization library for React.

## Installation

```bash
# npm
npm install hpo-react-visualizer

# pnpm
pnpm add hpo-react-visualizer

# yarn
yarn add hpo-react-visualizer
```

## Usage

```tsx
import { HpoVisualizer } from "hpo-react-visualizer";

export function Example() {
  return (
    <HpoVisualizer
      organs={[
        { id: 'heart', colorName: 'red' },
        { id: 'lung', colorName: 'blue' },
        { id: 'brain', colorName: 'purple' },
      ]}
      onSelect={(organId) => console.log('Selected:', organId)}
      onHover={(organId) => console.log('Hovered:', organId)}
    />
  );
}
```

## Props

| Prop | Type | Description |
|------|------|-------------|
| `organs` | `OrganConfig[]` | Array of organ configurations with `id` and optional styling |
| `onSelect` | `(organId: OrganId \| null) => void` | Callback when an organ is selected |
| `onHover` | `(organId: OrganId \| null) => void` | Callback when an organ is hovered |
| `selectedOrganId` | `OrganId \| null` | Controlled selected organ ID |
| `hoveredOrganId` | `OrganId \| null` | Controlled hovered organ ID |
| `colorPalette` | `ColorPalette` | Custom color palette for organs |

## Available Organs

The following organ IDs are supported:

- `brain`, `eye`, `ear`, `nose`, `teeth`, `throat`
- `heart`, `lung`, `liver`, `kidney`, `intestine`, `bladder`
- `integument`, `muscle`, `blood`, `cell`, `metabolism`
- `endocrine`, `neoplasm`, `immune`, `growth`, `prenatal`