hpo-react-visualizer 0.0.1 → 0.0.2

package/dist/index.d.cts

@@ -5,6 +5,11 @@ 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.
  */
@@ -129,6 +134,8 @@ interface HpoVisualizerProps {
     className?: string;
     /** Additional inline styles */
     style?: CSSProperties;
+    /** Maximum zoom level (default: 5 = 500%) */
+    maxZoom?: number;
 }
 
 /**
@@ -143,6 +150,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 +182,9 @@ 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, }: HpoVisualizerProps): react_jsx_runtime.JSX.Element;
 
 interface OrganSvgWrapperProps {
     /** Organ identifier */
@@ -241,4 +262,4 @@ interface UseOrganInteractionResult {
  */
 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, useOrganInteraction };

package/dist/index.d.ts

@@ -5,6 +5,11 @@ 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.
  */
@@ -129,6 +134,8 @@ interface HpoVisualizerProps {
     className?: string;
     /** Additional inline styles */
     style?: CSSProperties;
+    /** Maximum zoom level (default: 5 = 500%) */
+    maxZoom?: number;
 }
 
 /**
@@ -143,6 +150,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 +182,9 @@ 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, }: HpoVisualizerProps): react_jsx_runtime.JSX.Element;
 
 interface OrganSvgWrapperProps {
     /** Organ identifier */
@@ -241,4 +262,4 @@ interface UseOrganInteractionResult {
  */
 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, useOrganInteraction };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { useMemo, useState, useCallback, useId } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useState, useCallback, useId, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/constants.ts
 var ORGAN_IDS = [
@@ -78,6 +78,82 @@ var ORGAN_NAMES_KO = {
   prenatal: "\uD0DC\uC544",
   blood: "\uD608\uC561"
 };
+var HPO_LABELS = [
+  "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"
+];
+var HPO_LABEL_TO_ORGAN = {
+  "Growth abnormality": "growth",
+  "Abnormality of the genitourinary system": "kidney",
+  "Abnormality of the immune system": "immune",
+  "Abnormality of the digestive system": "digestive",
+  "Abnormality of metabolism/homeostasis": "metabolism",
+  "Abnormality of head or neck": "head",
+  "Abnormality of the musculoskeletal system": "muscle",
+  "Abnormality of the nervous system": "nervous",
+  "Abnormality of the respiratory system": "lung",
+  "Abnormality of the eye": "eye",
+  "Abnormality of the cardiovascular system": "heart",
+  "Abnormality of the ear": "ear",
+  "Abnormality of prenatal development or birth": "prenatal",
+  "Abnormality of the integument": "integument",
+  "Abnormality of the breast": "breast",
+  "Abnormality of the endocrine system": "endocrine",
+  "Abnormality of blood and blood-forming tissues": "blood",
+  "Abnormality of limbs": "limbs",
+  "Abnormality of the voice": "voice",
+  "Constitutional symptom": "constitutional",
+  Neoplasm: "neoplasm",
+  "Abnormal cellular phenotype": "cell",
+  "Abnormality of the thoracic cavity": "thoracicCavity"
+};
+var ORGAN_TO_HPO_LABEL = {
+  growth: "Growth abnormality",
+  kidney: "Abnormality of the genitourinary system",
+  immune: "Abnormality of the immune system",
+  digestive: "Abnormality of the digestive system",
+  metabolism: "Abnormality of metabolism/homeostasis",
+  head: "Abnormality of head or neck",
+  muscle: "Abnormality of the musculoskeletal system",
+  nervous: "Abnormality of the nervous system",
+  lung: "Abnormality of the respiratory system",
+  eye: "Abnormality of the eye",
+  heart: "Abnormality of the cardiovascular system",
+  ear: "Abnormality of the ear",
+  prenatal: "Abnormality of prenatal development or birth",
+  integument: "Abnormality of the integument",
+  breast: "Abnormality of the breast",
+  endocrine: "Abnormality of the endocrine system",
+  blood: "Abnormality of blood and blood-forming tissues",
+  limbs: "Abnormality of limbs",
+  voice: "Abnormality of the voice",
+  constitutional: "Constitutional symptom",
+  neoplasm: "Neoplasm",
+  cell: "Abnormal cellular phenotype",
+  thoracicCavity: "Abnormality of the thoracic cavity"
+};
 var DEFAULT_COLOR_PALETTE = {
   blue: {
     100: "#DBEAFE",
@@ -1301,6 +1377,211 @@ function useOrganInteraction(options = {}) {
     isHovered
   };
 }
+function useZoom(options = {}) {
+  const { minZoom = 1, maxZoom = 5, zoomStep = 0.5 } = options;
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartRef = useRef({ x: 0, y: 0 });
+  const panStartRef = useRef({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+  const clampZoom = useCallback(
+    (value) => Math.max(minZoom, Math.min(maxZoom, value)),
+    [minZoom, maxZoom]
+  );
+  const zoomIn = useCallback(() => {
+    setZoom((prev) => clampZoom(prev + zoomStep));
+  }, [clampZoom, zoomStep]);
+  const zoomOut = useCallback(() => {
+    setZoom((prev) => clampZoom(prev - zoomStep));
+  }, [clampZoom, zoomStep]);
+  const resetZoom = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const wheelZoomStep = 0.1;
+    const handleWheel = (e) => {
+      e.preventDefault();
+      const rect = container.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left - rect.width / 2;
+      const mouseY = e.clientY - rect.top - rect.height / 2;
+      const delta = e.deltaY > 0 ? -wheelZoomStep : wheelZoomStep;
+      setZoom((prevZoom) => {
+        const newZoom = clampZoom(prevZoom + delta);
+        if (newZoom === prevZoom) return prevZoom;
+        setPan((prevPan) => {
+          const contentX = (mouseX - prevPan.x) / prevZoom;
+          const contentY = (mouseY - prevPan.y) / prevZoom;
+          const newPanX = mouseX - contentX * newZoom;
+          const newPanY = mouseY - contentY * newZoom;
+          if (newZoom <= 1) {
+            return { x: 0, y: 0 };
+          }
+          const maxPanX = rect.width * (newZoom - 1) / 2;
+          const maxPanY = rect.height * (newZoom - 1) / 2;
+          return {
+            x: Math.max(-maxPanX, Math.min(maxPanX, newPanX)),
+            y: Math.max(-maxPanY, Math.min(maxPanY, newPanY))
+          };
+        });
+        return newZoom;
+      });
+    };
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+    };
+  }, [clampZoom]);
+  const clampPan = useCallback((newPan, currentZoom) => {
+    const container = containerRef.current;
+    if (!container || currentZoom <= 1) {
+      return { x: 0, y: 0 };
+    }
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+    const maxPanX = containerWidth * (currentZoom - 1) / 2;
+    const maxPanY = containerHeight * (currentZoom - 1) / 2;
+    return {
+      x: Math.max(-maxPanX, Math.min(maxPanX, newPan.x)),
+      y: Math.max(-maxPanY, Math.min(maxPanY, newPan.y))
+    };
+  }, []);
+  useEffect(() => {
+    setPan((currentPan) => clampPan(currentPan, zoom));
+  }, [zoom, clampPan]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (e.button !== 0 || zoom <= 1) return;
+      setIsDragging(true);
+      dragStartRef.current = { x: e.clientX, y: e.clientY };
+      panStartRef.current = { ...pan };
+      e.preventDefault();
+    },
+    [pan, zoom]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isDragging || zoom <= 1) return;
+      const dx = e.clientX - dragStartRef.current.x;
+      const dy = e.clientY - dragStartRef.current.y;
+      const newPan = {
+        x: panStartRef.current.x + dx,
+        y: panStartRef.current.y + dy
+      };
+      setPan(clampPan(newPan, zoom));
+    },
+    [isDragging, zoom, clampPan]
+  );
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const isDefaultZoom = zoom === 1 && pan.x === 0 && pan.y === 0;
+  return {
+    zoom,
+    pan,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    isDragging,
+    isDefaultZoom,
+    containerRef
+  };
+}
+var buttonBaseStyle = {
+  width: 32,
+  height: 32,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.9)",
+  border: "1px solid #d1d5db",
+  borderRadius: 6,
+  cursor: "pointer",
+  fontSize: 18,
+  fontWeight: "bold",
+  color: "#374151",
+  transition: "background-color 0.15s ease",
+  userSelect: "none"
+};
+var buttonDisabledStyle = {
+  ...buttonBaseStyle,
+  opacity: 0.4,
+  cursor: "not-allowed"
+};
+var getContainerStyle = (isVisible) => ({
+  position: "absolute",
+  bottom: 12,
+  right: 12,
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+  zIndex: 10,
+  opacity: isVisible ? 1 : 0,
+  transition: "opacity 0.2s ease-in-out",
+  pointerEvents: isVisible ? "auto" : "none"
+});
+var getResetContainerStyle = (isVisible) => ({
+  position: "absolute",
+  bottom: 12,
+  left: 12,
+  zIndex: 10,
+  opacity: isVisible ? 1 : 0,
+  transition: "opacity 0.2s ease-in-out",
+  pointerEvents: isVisible ? "auto" : "none"
+});
+var resetButtonStyle = {
+  ...buttonBaseStyle,
+  width: "auto",
+  padding: "6px 12px",
+  fontSize: 12,
+  fontWeight: 500
+};
+function ZoomControls({
+  onZoomIn,
+  onZoomOut,
+  onReset,
+  showResetButton,
+  zoom,
+  minZoom,
+  maxZoom,
+  isVisible
+}) {
+  const isMinZoom = zoom <= minZoom;
+  const isMaxZoom = zoom >= maxZoom;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { style: getContainerStyle(isVisible), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onZoomIn,
+          disabled: isMaxZoom,
+          style: isMaxZoom ? buttonDisabledStyle : buttonBaseStyle,
+          "aria-label": "Zoom in",
+          children: "+"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onZoomOut,
+          disabled: isMinZoom,
+          style: isMinZoom ? buttonDisabledStyle : buttonBaseStyle,
+          "aria-label": "Zoom out",
+          children: "\u2212"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: getResetContainerStyle(isVisible && showResetButton), children: /* @__PURE__ */ jsx("button", { type: "button", onClick: onReset, style: resetButtonStyle, "aria-label": "Reset zoom", children: "\u21BA" }) })
+  ] });
+}
 var ORGAN_POSITIONS = {
   growth: { x: 104, y: 1, width: 12, height: 349, viewBox: "0 0 12 349" },
   constitutional: { x: 0, y: 0, width: 122, height: 358, viewBox: "0 0 122 358" },
@@ -1351,6 +1632,7 @@ var FOREGROUND_ORGANS = [
   "prenatal",
   "blood"
 ];
+var MIN_ZOOM = 1;
 function HpoVisualizer({
   organs,
   visibleOrgans,
@@ -1362,9 +1644,24 @@ function HpoVisualizer({
   width = BODY_VIEWBOX.width,
   height = BODY_VIEWBOX.height,
   className,
-  style
+  style,
+  maxZoom = 5
 }) {
   const visualizerID = useId();
+  const [isHovering, setIsHovering] = useState(false);
+  const {
+    zoom,
+    pan,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    isDragging,
+    isDefaultZoom,
+    containerRef
+  } = useZoom({ minZoom: MIN_ZOOM, maxZoom });
   const colorPalette = useMemo(
     () => createStrictColorPalette(inputColorPalette),
     [inputColorPalette]
@@ -1401,7 +1698,19 @@ function HpoVisualizer({
     position: "relative",
     width,
     height,
-    ...style
+    ...style,
+    // Apply overflow after style spread to ensure it takes precedence
+    // Use 'clip' instead of 'hidden' to respect padding
+    overflow: "clip"
+  };
+  const contentStyle = {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    transform: `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`,
+    transformOrigin: "center center",
+    cursor: isDragging ? "grabbing" : zoom > 1 ? "grab" : "default",
+    transition: isDragging ? "none" : "transform 0.1s ease-out"
   };
   const viewBox = `0 0 ${BODY_VIEWBOX.width} ${BODY_VIEWBOX.height}`;
   const scale = Math.min(Number(width) / BODY_VIEWBOX.width, Number(height) / BODY_VIEWBOX.height);
@@ -1438,36 +1747,73 @@ function HpoVisualizer({
       `${visualizerID}-${organId}`
     );
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: containerStyle, children: [
-    BACKGROUND_ORGANS.map((organId) => renderOrgan(organId, visibleOrganIds.includes(organId))),
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        x: translateX,
-        y: "0",
-        width,
-        height,
-        viewBox,
-        style: { position: "absolute", top: "0", left: "0" },
-        pointerEvents: "none",
-        children: [
-          /* @__PURE__ */ jsx("title", { children: "Human body" }),
-          /* @__PURE__ */ jsx(
-            Body,
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: containerStyle,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => {
+        setIsHovering(false);
+        handleMouseUp();
+      },
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      role: "application",
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
+          BACKGROUND_ORGANS.map(
+            (organId) => renderOrgan(organId, visibleOrganIds.includes(organId))
+          ),
+          /* @__PURE__ */ jsxs(
+            "svg",
             {
-              colorScale: colorPalette[DEFAULT_COLOR_NAME],
-              style: {
-                fill: "#fff"
-              }
+              x: translateX,
+              y: "0",
+              width,
+              height,
+              viewBox,
+              style: { position: "absolute", top: "0", left: "0" },
+              pointerEvents: "none",
+              children: [
+                /* @__PURE__ */ jsx("title", { children: "Human body" }),
+                /* @__PURE__ */ jsx(
+                  Body,
+                  {
+                    colorScale: colorPalette[DEFAULT_COLOR_NAME],
+                    style: {
+                      fill: "#fff"
+                    }
+                  }
+                )
+              ]
             }
+          ),
+          FOREGROUND_ORGANS.map(
+            (organId) => renderOrgan(organId, visibleOrganIds.includes(organId))
           )
-        ]
-      }
-    ),
-    FOREGROUND_ORGANS.map((organId) => renderOrgan(organId, visibleOrganIds.includes(organId)))
-  ] });
+        ] }),
+        /* @__PURE__ */ jsx(
+          ZoomControls,
+          {
+            onZoomIn: zoomIn,
+            onZoomOut: zoomOut,
+            onReset: resetZoom,
+            showResetButton: !isDefaultZoom,
+            zoom,
+            minZoom: MIN_ZOOM,
+            maxZoom,
+            isVisible: isHovering
+          }
+        )
+      ]
+    }
+  );
 }
 
-export { ANIMATION_DURATION_MS, DEFAULT_COLOR_PALETTE, HpoVisualizer, ORGAN_COMPONENTS, ORGAN_IDS, ORGAN_NAMES_EN, ORGAN_NAMES_KO, OrganSvg, useOrganInteraction };
+export { ANIMATION_DURATION_MS, DEFAULT_COLOR_PALETTE, HPO_LABELS, HPO_LABEL_TO_ORGAN, HpoVisualizer, ORGAN_COMPONENTS, ORGAN_IDS, ORGAN_NAMES_EN, ORGAN_NAMES_KO, ORGAN_TO_HPO_LABEL, OrganSvg, useOrganInteraction };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map