hpo-react-visualizer

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