hpo-react-visualizer 0.0.1

package/dist/index.d.cts

@@ -0,0 +1,244 @@
+import { CSSProperties, ComponentType } from 'react';
+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";
+/**
+ * Color scheme for each organ.
+ */
+type ColorName = "blue" | "yellow" | "gray";
+/**
+ * Color step
+ */
+type ColorStep = 100 | 200 | 300;
+/**
+ * Solid color scale (required colors)
+ */
+type SolidColorScale = Record<ColorStep, string>;
+/**
+ * Color scale for a color palette.
+ * Solid colors (100, 200, 300) are required.
+ * Alpha colors are all-or-nothing optional via the 'alpha' property.
+ */
+type ColorScale = SolidColorScale & {
+    alpha?: SolidColorScale;
+};
+type ColorPalette = Record<ColorName, ColorScale>;
+type StrictColorPalette = Record<ColorName, Required<ColorScale>>;
+/**
+ * Style properties for organ SVG elements
+ */
+interface OrganStyle {
+    /** Fill color of the organ */
+    fill?: string;
+    /** Stroke (border) color */
+    stroke?: string;
+    /** Stroke width in pixels */
+    strokeWidth?: number;
+    /** Opacity (0-1) */
+    opacity?: number;
+    /** Whether the organ is visible */
+    visible?: boolean;
+    /** Blur effect in pixels (CSS filter blur) */
+    blur?: number;
+}
+/**
+ * Configuration for individual organ
+ */
+interface OrganConfig {
+    /** Organ identifier */
+    id: OrganId;
+    /** Associated HPO IDs for this organ (optional) */
+    hpoIds?: string[];
+    /** Default style */
+    style?: OrganStyle;
+    /** Style when hovered */
+    hoverStyle?: OrganStyle;
+    /** Style when selected/active */
+    activeStyle?: OrganStyle;
+    /** Color scheme to use for this organ */
+    colorName?: ColorName;
+    /** Show red outline around this organ */
+    showOutline?: boolean;
+}
+/**
+ * Props for individual organ SVG components
+ */
+interface OrganSvgProps {
+    /** Current style to apply */
+    style?: OrganStyle;
+    /** CSS transition string for smooth style changes */
+    transition?: string;
+    /** Color scale to use for this organ (with guaranteed alpha values) */
+    colorScale: Required<ColorScale>;
+    /** Whether the organ is in active state (hovered or selected) */
+    isActive?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Internal state for organ interaction
+ */
+interface OrganInteractionState {
+    /** Currently hovered organ ID */
+    hoveredOrgan: OrganId | null;
+    /** Currently selected/clicked organ ID */
+    selectedOrgan: OrganId | null;
+}
+/**
+ * Handlers returned by useOrganInteraction hook
+ */
+interface OrganInteractionHandlers {
+    /** Handle mouse enter on organ */
+    handleMouseEnter: (organId: OrganId) => void;
+    /** Handle mouse leave on organ */
+    handleMouseLeave: () => void;
+    /** Handle click on organ */
+    handleClick: (organId: OrganId) => void;
+}
+/**
+ * Props for the main HpoVisualizer component
+ */
+interface HpoVisualizerProps {
+    /** Detailed organ configurations */
+    organs?: OrganConfig[];
+    /**
+     * List of organ IDs to display.
+     * - undefined: all organs are visible
+     * - OrganId[]: only the specified organs are visible
+     * - []: no organs are visible
+     */
+    visibleOrgans?: OrganId[];
+    /** Controlled: currently hovered organ */
+    hoveredOrgan?: OrganId | null;
+    /** Controlled: currently selected organ */
+    selectedOrgan?: OrganId | null;
+    /** Callback when hover state changes */
+    onHover?: (organId: OrganId | null) => void;
+    /** Callback when selection state changes */
+    onSelect?: (organId: OrganId | null) => void;
+    /** Color palette to use for organs */
+    colorPalette?: Partial<ColorPalette>;
+    /** Width of the visualizer */
+    width?: number | string;
+    /** Height of the visualizer */
+    height?: number | string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+
+/**
+ * All supported organ IDs
+ */
+declare const ORGAN_IDS: readonly OrganId[];
+/**
+ * Display names for organs (English)
+ */
+declare const ORGAN_NAMES_EN: Record<OrganId, string>;
+/**
+ * Display names for organs (Korean)
+ */
+declare const ORGAN_NAMES_KO: Record<OrganId, string>;
+/**
+ * Color palettes for each color scheme.
+ * Based on Tailwind CSS color palette.
+ */
+declare const DEFAULT_COLOR_PALETTE: StrictColorPalette;
+/**
+ * Animation duration in milliseconds
+ */
+declare const ANIMATION_DURATION_MS = 150;
+
+/**
+ * HPO Visualizer - Interactive human organ visualization component
+ *
+ * Features:
+ * - Displays organs as interactive SVG graphics
+ * - Hover effect with visual highlighting
+ * - Click to select/deselect organs
+ * - Hover effects work independently even when an organ is selected
+ * - Exposes hover and selection state via callbacks
+ */
+declare function HpoVisualizer({ organs, visibleOrgans, hoveredOrgan: controlledHovered, selectedOrgan: controlledSelected, onHover, onSelect, colorPalette: inputColorPalette, width, height, className, style, }: HpoVisualizerProps): react_jsx_runtime.JSX.Element;
+
+interface OrganSvgWrapperProps {
+    /** Organ identifier */
+    organId: OrganId;
+    /** Organ configuration */
+    config?: OrganConfig;
+    /** Color palette to use for this organ (with guaranteed alpha values) */
+    colorPalette: StrictColorPalette;
+    /** Whether the organ is currently hovered */
+    isHovered: boolean;
+    /** Whether the organ is currently selected */
+    isSelected: boolean;
+    /** Mouse enter handler */
+    onMouseEnter: () => void;
+    /** Mouse leave handler */
+    onMouseLeave: () => void;
+    /** Click handler */
+    onClick: () => void;
+    /** X position in parent coordinate system */
+    x: number;
+    /** Y position in parent coordinate system */
+    y: number;
+    /** Width of the organ SVG viewport */
+    width: number;
+    /** Height of the organ SVG viewport */
+    height: number;
+    /** ViewBox for the organ SVG (local coordinate system) */
+    viewBox: string;
+    /** Show red outline around this organ */
+    showOutline?: boolean;
+    /** Whether the organ is visible (controls opacity for animation) */
+    isVisible?: boolean;
+}
+/**
+ * Wrapper component for organ SVG with interaction handling
+ */
+declare function OrganSvg({ organId, config, colorPalette, isHovered, isSelected, onMouseEnter, onMouseLeave, onClick, x, y, width, height, viewBox, showOutline, isVisible, }: OrganSvgWrapperProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Map of organ IDs to their SVG components
+ */
+declare const ORGAN_COMPONENTS: Record<OrganId, ComponentType<OrganSvgProps>>;
+
+interface UseOrganInteractionOptions {
+    /** Controlled hover state from parent */
+    hoveredOrgan?: OrganId | null;
+    /** Controlled selected state from parent */
+    selectedOrgan?: OrganId | null;
+    /** Callback when hover state changes */
+    onHover?: (organId: OrganId | null) => void;
+    /** Callback when selected state changes */
+    onSelect?: (organId: OrganId | null) => void;
+}
+interface UseOrganInteractionResult {
+    /** Current interaction state */
+    state: OrganInteractionState;
+    /** Event handlers for organs */
+    handlers: OrganInteractionHandlers;
+    /** Check if an organ is currently highlighted (hovered or selected) */
+    isHighlighted: (organId: OrganId) => boolean;
+    /** Check if an organ is currently selected */
+    isSelected: (organId: OrganId) => boolean;
+    /** Check if an organ is currently hovered */
+    isHovered: (organId: OrganId) => boolean;
+}
+/**
+ * Hook to manage organ hover and click interactions
+ *
+ * Behavior:
+ * - Mouse enter on organ updates hoveredOrgan and calls onHover
+ * - Click on organ sets selectedOrgan and calls onSelect
+ * - Click on already selected organ deselects it
+ * - Click on different organ changes selection
+ * - 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 };

package/dist/index.d.ts

@@ -0,0 +1,244 @@
+import { CSSProperties, ComponentType } from 'react';
+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";
+/**
+ * Color scheme for each organ.
+ */
+type ColorName = "blue" | "yellow" | "gray";
+/**
+ * Color step
+ */
+type ColorStep = 100 | 200 | 300;
+/**
+ * Solid color scale (required colors)
+ */
+type SolidColorScale = Record<ColorStep, string>;
+/**
+ * Color scale for a color palette.
+ * Solid colors (100, 200, 300) are required.
+ * Alpha colors are all-or-nothing optional via the 'alpha' property.
+ */
+type ColorScale = SolidColorScale & {
+    alpha?: SolidColorScale;
+};
+type ColorPalette = Record<ColorName, ColorScale>;
+type StrictColorPalette = Record<ColorName, Required<ColorScale>>;
+/**
+ * Style properties for organ SVG elements
+ */
+interface OrganStyle {
+    /** Fill color of the organ */
+    fill?: string;
+    /** Stroke (border) color */
+    stroke?: string;
+    /** Stroke width in pixels */
+    strokeWidth?: number;
+    /** Opacity (0-1) */
+    opacity?: number;
+    /** Whether the organ is visible */
+    visible?: boolean;
+    /** Blur effect in pixels (CSS filter blur) */
+    blur?: number;
+}
+/**
+ * Configuration for individual organ
+ */
+interface OrganConfig {
+    /** Organ identifier */
+    id: OrganId;
+    /** Associated HPO IDs for this organ (optional) */
+    hpoIds?: string[];
+    /** Default style */
+    style?: OrganStyle;
+    /** Style when hovered */
+    hoverStyle?: OrganStyle;
+    /** Style when selected/active */
+    activeStyle?: OrganStyle;
+    /** Color scheme to use for this organ */
+    colorName?: ColorName;
+    /** Show red outline around this organ */
+    showOutline?: boolean;
+}
+/**
+ * Props for individual organ SVG components
+ */
+interface OrganSvgProps {
+    /** Current style to apply */
+    style?: OrganStyle;
+    /** CSS transition string for smooth style changes */
+    transition?: string;
+    /** Color scale to use for this organ (with guaranteed alpha values) */
+    colorScale: Required<ColorScale>;
+    /** Whether the organ is in active state (hovered or selected) */
+    isActive?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Internal state for organ interaction
+ */
+interface OrganInteractionState {
+    /** Currently hovered organ ID */
+    hoveredOrgan: OrganId | null;
+    /** Currently selected/clicked organ ID */
+    selectedOrgan: OrganId | null;
+}
+/**
+ * Handlers returned by useOrganInteraction hook
+ */
+interface OrganInteractionHandlers {
+    /** Handle mouse enter on organ */
+    handleMouseEnter: (organId: OrganId) => void;
+    /** Handle mouse leave on organ */
+    handleMouseLeave: () => void;
+    /** Handle click on organ */
+    handleClick: (organId: OrganId) => void;
+}
+/**
+ * Props for the main HpoVisualizer component
+ */
+interface HpoVisualizerProps {
+    /** Detailed organ configurations */
+    organs?: OrganConfig[];
+    /**
+     * List of organ IDs to display.
+     * - undefined: all organs are visible
+     * - OrganId[]: only the specified organs are visible
+     * - []: no organs are visible
+     */
+    visibleOrgans?: OrganId[];
+    /** Controlled: currently hovered organ */
+    hoveredOrgan?: OrganId | null;
+    /** Controlled: currently selected organ */
+    selectedOrgan?: OrganId | null;
+    /** Callback when hover state changes */
+    onHover?: (organId: OrganId | null) => void;
+    /** Callback when selection state changes */
+    onSelect?: (organId: OrganId | null) => void;
+    /** Color palette to use for organs */
+    colorPalette?: Partial<ColorPalette>;
+    /** Width of the visualizer */
+    width?: number | string;
+    /** Height of the visualizer */
+    height?: number | string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+
+/**
+ * All supported organ IDs
+ */
+declare const ORGAN_IDS: readonly OrganId[];
+/**
+ * Display names for organs (English)
+ */
+declare const ORGAN_NAMES_EN: Record<OrganId, string>;
+/**
+ * Display names for organs (Korean)
+ */
+declare const ORGAN_NAMES_KO: Record<OrganId, string>;
+/**
+ * Color palettes for each color scheme.
+ * Based on Tailwind CSS color palette.
+ */
+declare const DEFAULT_COLOR_PALETTE: StrictColorPalette;
+/**
+ * Animation duration in milliseconds
+ */
+declare const ANIMATION_DURATION_MS = 150;
+
+/**
+ * HPO Visualizer - Interactive human organ visualization component
+ *
+ * Features:
+ * - Displays organs as interactive SVG graphics
+ * - Hover effect with visual highlighting
+ * - Click to select/deselect organs
+ * - Hover effects work independently even when an organ is selected
+ * - Exposes hover and selection state via callbacks
+ */
+declare function HpoVisualizer({ organs, visibleOrgans, hoveredOrgan: controlledHovered, selectedOrgan: controlledSelected, onHover, onSelect, colorPalette: inputColorPalette, width, height, className, style, }: HpoVisualizerProps): react_jsx_runtime.JSX.Element;
+
+interface OrganSvgWrapperProps {
+    /** Organ identifier */
+    organId: OrganId;
+    /** Organ configuration */
+    config?: OrganConfig;
+    /** Color palette to use for this organ (with guaranteed alpha values) */
+    colorPalette: StrictColorPalette;
+    /** Whether the organ is currently hovered */
+    isHovered: boolean;
+    /** Whether the organ is currently selected */
+    isSelected: boolean;
+    /** Mouse enter handler */
+    onMouseEnter: () => void;
+    /** Mouse leave handler */
+    onMouseLeave: () => void;
+    /** Click handler */
+    onClick: () => void;
+    /** X position in parent coordinate system */
+    x: number;
+    /** Y position in parent coordinate system */
+    y: number;
+    /** Width of the organ SVG viewport */
+    width: number;
+    /** Height of the organ SVG viewport */
+    height: number;
+    /** ViewBox for the organ SVG (local coordinate system) */
+    viewBox: string;
+    /** Show red outline around this organ */
+    showOutline?: boolean;
+    /** Whether the organ is visible (controls opacity for animation) */
+    isVisible?: boolean;
+}
+/**
+ * Wrapper component for organ SVG with interaction handling
+ */
+declare function OrganSvg({ organId, config, colorPalette, isHovered, isSelected, onMouseEnter, onMouseLeave, onClick, x, y, width, height, viewBox, showOutline, isVisible, }: OrganSvgWrapperProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Map of organ IDs to their SVG components
+ */
+declare const ORGAN_COMPONENTS: Record<OrganId, ComponentType<OrganSvgProps>>;
+
+interface UseOrganInteractionOptions {
+    /** Controlled hover state from parent */
+    hoveredOrgan?: OrganId | null;
+    /** Controlled selected state from parent */
+    selectedOrgan?: OrganId | null;
+    /** Callback when hover state changes */
+    onHover?: (organId: OrganId | null) => void;
+    /** Callback when selected state changes */
+    onSelect?: (organId: OrganId | null) => void;
+}
+interface UseOrganInteractionResult {
+    /** Current interaction state */
+    state: OrganInteractionState;
+    /** Event handlers for organs */
+    handlers: OrganInteractionHandlers;
+    /** Check if an organ is currently highlighted (hovered or selected) */
+    isHighlighted: (organId: OrganId) => boolean;
+    /** Check if an organ is currently selected */
+    isSelected: (organId: OrganId) => boolean;
+    /** Check if an organ is currently hovered */
+    isHovered: (organId: OrganId) => boolean;
+}
+/**
+ * Hook to manage organ hover and click interactions
+ *
+ * Behavior:
+ * - Mouse enter on organ updates hoveredOrgan and calls onHover
+ * - Click on organ sets selectedOrgan and calls onSelect
+ * - Click on already selected organ deselects it
+ * - Click on different organ changes selection
+ * - 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 };