hpo-react-visualizer 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -80,6 +80,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",
@@ -1303,6 +1379,211 @@ function useOrganInteraction(options = {}) {
     isHovered
   };
 }
+function useZoom(options = {}) {
+  const { minZoom = 1, maxZoom = 5, zoomStep = 0.5 } = options;
+  const [zoom, setZoom] = react.useState(1);
+  const [pan, setPan] = react.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = react.useState(false);
+  const dragStartRef = react.useRef({ x: 0, y: 0 });
+  const panStartRef = react.useRef({ x: 0, y: 0 });
+  const containerRef = react.useRef(null);
+  const clampZoom = react.useCallback(
+    (value) => Math.max(minZoom, Math.min(maxZoom, value)),
+    [minZoom, maxZoom]
+  );
+  const zoomIn = react.useCallback(() => {
+    setZoom((prev) => clampZoom(prev + zoomStep));
+  }, [clampZoom, zoomStep]);
+  const zoomOut = react.useCallback(() => {
+    setZoom((prev) => clampZoom(prev - zoomStep));
+  }, [clampZoom, zoomStep]);
+  const resetZoom = react.useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+  react.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 = react.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))
+    };
+  }, []);
+  react.useEffect(() => {
+    setPan((currentPan) => clampPan(currentPan, zoom));
+  }, [zoom, clampPan]);
+  const handleMouseDown = react.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 = react.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 = react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getContainerStyle(isVisible), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onZoomIn,
+          disabled: isMaxZoom,
+          style: isMaxZoom ? buttonDisabledStyle : buttonBaseStyle,
+          "aria-label": "Zoom in",
+          children: "+"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onZoomOut,
+          disabled: isMinZoom,
+          style: isMinZoom ? buttonDisabledStyle : buttonBaseStyle,
+          "aria-label": "Zoom out",
+          children: "\u2212"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: getResetContainerStyle(isVisible && showResetButton), children: /* @__PURE__ */ jsxRuntime.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" },
@@ -1353,6 +1634,7 @@ var FOREGROUND_ORGANS = [
   "prenatal",
   "blood"
 ];
+var MIN_ZOOM = 1;
 function HpoVisualizer({
   organs,
   visibleOrgans,
@@ -1364,9 +1646,24 @@ function HpoVisualizer({
   width = BODY_VIEWBOX.width,
   height = BODY_VIEWBOX.height,
   className,
-  style
+  style,
+  maxZoom = 5
 }) {
   const visualizerID = react.useId();
+  const [isHovering, setIsHovering] = react.useState(false);
+  const {
+    zoom,
+    pan,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    isDragging,
+    isDefaultZoom,
+    containerRef
+  } = useZoom({ minZoom: MIN_ZOOM, maxZoom });
   const colorPalette = react.useMemo(
     () => createStrictColorPalette(inputColorPalette),
     [inputColorPalette]
@@ -1403,7 +1700,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);
@@ -1440,43 +1749,83 @@ function HpoVisualizer({
       `${visualizerID}-${organId}`
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: containerStyle, children: [
-    BACKGROUND_ORGANS.map((organId) => renderOrgan(organId, visibleOrganIds.includes(organId))),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "svg",
-      {
-        x: translateX,
-        y: "0",
-        width,
-        height,
-        viewBox,
-        style: { position: "absolute", top: "0", left: "0" },
-        pointerEvents: "none",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Human body" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Body,
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
+          BACKGROUND_ORGANS.map(
+            (organId) => renderOrgan(organId, visibleOrganIds.includes(organId))
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("title", { children: "Human body" }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          ZoomControls,
+          {
+            onZoomIn: zoomIn,
+            onZoomOut: zoomOut,
+            onReset: resetZoom,
+            showResetButton: !isDefaultZoom,
+            zoom,
+            minZoom: MIN_ZOOM,
+            maxZoom,
+            isVisible: isHovering
+          }
+        )
+      ]
+    }
+  );
 }
 
 exports.ANIMATION_DURATION_MS = ANIMATION_DURATION_MS;
 exports.DEFAULT_COLOR_PALETTE = DEFAULT_COLOR_PALETTE;
+exports.HPO_LABELS = HPO_LABELS;
+exports.HPO_LABEL_TO_ORGAN = HPO_LABEL_TO_ORGAN;
 exports.HpoVisualizer = HpoVisualizer;
 exports.ORGAN_COMPONENTS = ORGAN_COMPONENTS;
 exports.ORGAN_IDS = ORGAN_IDS;
 exports.ORGAN_NAMES_EN = ORGAN_NAMES_EN;
 exports.ORGAN_NAMES_KO = ORGAN_NAMES_KO;
+exports.ORGAN_TO_HPO_LABEL = ORGAN_TO_HPO_LABEL;
 exports.OrganSvg = OrganSvg;
 exports.useOrganInteraction = useOrganInteraction;
 //# sourceMappingURL=index.cjs.map