hpo-react-visualizer

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

Installation

# npm
npm install hpo-react-visualizer

# pnpm
pnpm add hpo-react-visualizer

# yarn
yarn add hpo-react-visualizer

Usage

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