hpo-react-visualizer 0.0.1 → 0.0.3

package/dist/index.d.cts

@@ -5,10 +5,16 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * Supported organ identifiers
  */
 type OrganId = "head" | "eye" | "ear" | "heart" | "lung" | "digestive" | "kidney" | "integument" | "constitutional" | "limbs" | "nervous" | "breast" | "thoracicCavity" | "voice" | "metabolism" | "cell" | "endocrine" | "neoplasm" | "immune" | "muscle" | "growth" | "prenatal" | "blood";
+/**
+ * HPO official category labels
+ * @see https://hpo.jax.org/
+ */
+type HPOLabel = "others" | "Growth abnormality" | "Abnormality of the genitourinary system" | "Abnormality of the immune system" | "Abnormality of the digestive system" | "Abnormality of metabolism/homeostasis" | "Abnormality of head or neck" | "Abnormality of the musculoskeletal system" | "Abnormality of the nervous system" | "Abnormality of the respiratory system" | "Abnormality of the eye" | "Abnormality of the cardiovascular system" | "Abnormality of the ear" | "Abnormality of prenatal development or birth" | "Abnormality of the integument" | "Abnormality of the breast" | "Abnormality of the endocrine system" | "Abnormality of blood and blood-forming tissues" | "Abnormality of limbs" | "Abnormality of the voice" | "Constitutional symptom" | "Neoplasm" | "Abnormal cellular phenotype" | "Abnormality of the thoracic cavity";
 /**
  * Color scheme for each organ.
  */
 type ColorName = "blue" | "yellow" | "gray";
+type ColorScheme = ColorName;
 /**
  * Color step
  */
@@ -129,6 +135,10 @@ interface HpoVisualizerProps {
     className?: string;
     /** Additional inline styles */
     style?: CSSProperties;
+    /** Maximum zoom level (default: 5 = 500%) */
+    maxZoom?: number;
+    /** Enable zoom with mouse wheel (default: true) */
+    wheelZoom?: boolean;
 }
 
 /**
@@ -143,6 +153,19 @@ declare const ORGAN_NAMES_EN: Record<OrganId, string>;
  * Display names for organs (Korean)
  */
 declare const ORGAN_NAMES_KO: Record<OrganId, string>;
+/**
+ * All HPO category labels
+ */
+declare const HPO_LABELS: readonly HPOLabel[];
+/**
+ * Mapping from HPO label to OrganId
+ * Note: "others" has no corresponding OrganId
+ */
+declare const HPO_LABEL_TO_ORGAN: Record<Exclude<HPOLabel, "others">, OrganId>;
+/**
+ * Mapping from OrganId to HPO label
+ */
+declare const ORGAN_TO_HPO_LABEL: Record<OrganId, Exclude<HPOLabel, "others">>;
 /**
  * Color palettes for each color scheme.
  * Based on Tailwind CSS color palette.
@@ -162,8 +185,12 @@ declare const ANIMATION_DURATION_MS = 150;
  * - Click to select/deselect organs
  * - Hover effects work independently even when an organ is selected
  * - Exposes hover and selection state via callbacks
+ * - Zoom and pan support with mouse wheel and drag
  */
-declare function HpoVisualizer({ organs, visibleOrgans, hoveredOrgan: controlledHovered, selectedOrgan: controlledSelected, onHover, onSelect, colorPalette: inputColorPalette, width, height, className, style, }: HpoVisualizerProps): react_jsx_runtime.JSX.Element;
+declare function HpoVisualizer({ organs, visibleOrgans, hoveredOrgan: controlledHovered, selectedOrgan: controlledSelected, onHover, onSelect, colorPalette: inputColorPalette, width, height, className, style, maxZoom, wheelZoom, }: HpoVisualizerProps): react_jsx_runtime.JSX.Element;
+
+declare const createUniformOrganColorSchemes: (organIds: readonly OrganId[], scheme: ColorScheme) => Record<OrganId, ColorScheme>;
+declare const createOrganOutlineSet: (organIds: readonly OrganId[], enabled: boolean) => Set<OrganId>;
 
 interface OrganSvgWrapperProps {
     /** Organ identifier */
@@ -182,13 +209,13 @@ interface OrganSvgWrapperProps {
     onMouseLeave: () => void;
     /** Click handler */
     onClick: () => void;
-    /** X position in parent coordinate system */
+    /** X position in parent viewBox coordinate system */
     x: number;
-    /** Y position in parent coordinate system */
+    /** Y position in parent viewBox coordinate system */
     y: number;
-    /** Width of the organ SVG viewport */
+    /** Width of the organ SVG viewport in viewBox units */
     width: number;
-    /** Height of the organ SVG viewport */
+    /** Height of the organ SVG viewport in viewBox units */
     height: number;
     /** ViewBox for the organ SVG (local coordinate system) */
     viewBox: string;
@@ -237,8 +264,9 @@ interface UseOrganInteractionResult {
  * - Click on organ sets selectedOrgan and calls onSelect
  * - Click on already selected organ deselects it
  * - Click on different organ changes selection
+ * - Deselect keeps hover state when still over the organ
  * - Hover effects work independently even when an organ is selected
  */
 declare function useOrganInteraction(options?: UseOrganInteractionOptions): UseOrganInteractionResult;
 
-export { ANIMATION_DURATION_MS, type ColorScale as ColorPalette, type ColorName as ColorScheme, DEFAULT_COLOR_PALETTE, HpoVisualizer, type HpoVisualizerProps, ORGAN_COMPONENTS, ORGAN_IDS, ORGAN_NAMES_EN, ORGAN_NAMES_KO, type OrganConfig, type OrganId, type OrganInteractionHandlers, type OrganInteractionState, type OrganStyle, OrganSvg, type OrganSvgProps, type OrganSvgWrapperProps, type UseOrganInteractionOptions, type UseOrganInteractionResult, useOrganInteraction };
+export { ANIMATION_DURATION_MS, type ColorScale as ColorPalette, type ColorName as ColorScheme, DEFAULT_COLOR_PALETTE, type HPOLabel, HPO_LABELS, HPO_LABEL_TO_ORGAN, HpoVisualizer, type HpoVisualizerProps, ORGAN_COMPONENTS, ORGAN_IDS, ORGAN_NAMES_EN, ORGAN_NAMES_KO, ORGAN_TO_HPO_LABEL, type OrganConfig, type OrganId, type OrganInteractionHandlers, type OrganInteractionState, type OrganStyle, OrganSvg, type OrganSvgProps, type OrganSvgWrapperProps, type UseOrganInteractionOptions, type UseOrganInteractionResult, createOrganOutlineSet, createUniformOrganColorSchemes, useOrganInteraction };

package/dist/index.d.ts

@@ -5,10 +5,16 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * Supported organ identifiers
  */
 type OrganId = "head" | "eye" | "ear" | "heart" | "lung" | "digestive" | "kidney" | "integument" | "constitutional" | "limbs" | "nervous" | "breast" | "thoracicCavity" | "voice" | "metabolism" | "cell" | "endocrine" | "neoplasm" | "immune" | "muscle" | "growth" | "prenatal" | "blood";
+/**
+ * HPO official category labels
+ * @see https://hpo.jax.org/
+ */
+type HPOLabel = "others" | "Growth abnormality" | "Abnormality of the genitourinary system" | "Abnormality of the immune system" | "Abnormality of the digestive system" | "Abnormality of metabolism/homeostasis" | "Abnormality of head or neck" | "Abnormality of the musculoskeletal system" | "Abnormality of the nervous system" | "Abnormality of the respiratory system" | "Abnormality of the eye" | "Abnormality of the cardiovascular system" | "Abnormality of the ear" | "Abnormality of prenatal development or birth" | "Abnormality of the integument" | "Abnormality of the breast" | "Abnormality of the endocrine system" | "Abnormality of blood and blood-forming tissues" | "Abnormality of limbs" | "Abnormality of the voice" | "Constitutional symptom" | "Neoplasm" | "Abnormal cellular phenotype" | "Abnormality of the thoracic cavity";
 /**
  * Color scheme for each organ.
  */
 type ColorName = "blue" | "yellow" | "gray";
+type ColorScheme = ColorName;
 /**
  * Color step
  */
@@ -129,6 +135,10 @@ interface HpoVisualizerProps {
     className?: string;
     /** Additional inline styles */
     style?: CSSProperties;
+    /** Maximum zoom level (default: 5 = 500%) */
+    maxZoom?: number;
+    /** Enable zoom with mouse wheel (default: true) */
+    wheelZoom?: boolean;
 }
 
 /**
@@ -143,6 +153,19 @@ declare const ORGAN_NAMES_EN: Record<OrganId, string>;
  * Display names for organs (Korean)
  */
 declare const ORGAN_NAMES_KO: Record<OrganId, string>;
+/**
+ * All HPO category labels
+ */
+declare const HPO_LABELS: readonly HPOLabel[];
+/**
+ * Mapping from HPO label to OrganId
+ * Note: "others" has no corresponding OrganId
+ */
+declare const HPO_LABEL_TO_ORGAN: Record<Exclude<HPOLabel, "others">, OrganId>;
+/**
+ * Mapping from OrganId to HPO label
+ */
+declare const ORGAN_TO_HPO_LABEL: Record<OrganId, Exclude<HPOLabel, "others">>;
 /**
  * Color palettes for each color scheme.
  * Based on Tailwind CSS color palette.
@@ -162,8 +185,12 @@ declare const ANIMATION_DURATION_MS = 150;
  * - Click to select/deselect organs
  * - Hover effects work independently even when an organ is selected
  * - Exposes hover and selection state via callbacks
+ * - Zoom and pan support with mouse wheel and drag
  */
-declare function HpoVisualizer({ organs, visibleOrgans, hoveredOrgan: controlledHovered, selectedOrgan: controlledSelected, onHover, onSelect, colorPalette: inputColorPalette, width, height, className, style, }: HpoVisualizerProps): react_jsx_runtime.JSX.Element;
+declare function HpoVisualizer({ organs, visibleOrgans, hoveredOrgan: controlledHovered, selectedOrgan: controlledSelected, onHover, onSelect, colorPalette: inputColorPalette, width, height, className, style, maxZoom, wheelZoom, }: HpoVisualizerProps): react_jsx_runtime.JSX.Element;
+
+declare const createUniformOrganColorSchemes: (organIds: readonly OrganId[], scheme: ColorScheme) => Record<OrganId, ColorScheme>;
+declare const createOrganOutlineSet: (organIds: readonly OrganId[], enabled: boolean) => Set<OrganId>;
 
 interface OrganSvgWrapperProps {
     /** Organ identifier */
@@ -182,13 +209,13 @@ interface OrganSvgWrapperProps {
     onMouseLeave: () => void;
     /** Click handler */
     onClick: () => void;
-    /** X position in parent coordinate system */
+    /** X position in parent viewBox coordinate system */
     x: number;
-    /** Y position in parent coordinate system */
+    /** Y position in parent viewBox coordinate system */
     y: number;
-    /** Width of the organ SVG viewport */
+    /** Width of the organ SVG viewport in viewBox units */
     width: number;
-    /** Height of the organ SVG viewport */
+    /** Height of the organ SVG viewport in viewBox units */
     height: number;
     /** ViewBox for the organ SVG (local coordinate system) */
     viewBox: string;
@@ -237,8 +264,9 @@ interface UseOrganInteractionResult {
  * - Click on organ sets selectedOrgan and calls onSelect
  * - Click on already selected organ deselects it
  * - Click on different organ changes selection
+ * - Deselect keeps hover state when still over the organ
  * - Hover effects work independently even when an organ is selected
  */
 declare function useOrganInteraction(options?: UseOrganInteractionOptions): UseOrganInteractionResult;
 
-export { ANIMATION_DURATION_MS, type ColorScale as ColorPalette, type ColorName as ColorScheme, DEFAULT_COLOR_PALETTE, HpoVisualizer, type HpoVisualizerProps, ORGAN_COMPONENTS, ORGAN_IDS, ORGAN_NAMES_EN, ORGAN_NAMES_KO, type OrganConfig, type OrganId, type OrganInteractionHandlers, type OrganInteractionState, type OrganStyle, OrganSvg, type OrganSvgProps, type OrganSvgWrapperProps, type UseOrganInteractionOptions, type UseOrganInteractionResult, useOrganInteraction };
+export { ANIMATION_DURATION_MS, type ColorScale as ColorPalette, type ColorName as ColorScheme, DEFAULT_COLOR_PALETTE, type HPOLabel, HPO_LABELS, HPO_LABEL_TO_ORGAN, HpoVisualizer, type HpoVisualizerProps, ORGAN_COMPONENTS, ORGAN_IDS, ORGAN_NAMES_EN, ORGAN_NAMES_KO, ORGAN_TO_HPO_LABEL, type OrganConfig, type OrganId, type OrganInteractionHandlers, type OrganInteractionState, type OrganStyle, OrganSvg, type OrganSvgProps, type OrganSvgWrapperProps, type UseOrganInteractionOptions, type UseOrganInteractionResult, createOrganOutlineSet, createUniformOrganColorSchemes, useOrganInteraction };