hpo-react-visualizer 0.0.1 → 0.0.2

package/src/index.ts

@@ -4,9 +4,12 @@
 export {
   ANIMATION_DURATION_MS,
   DEFAULT_COLOR_PALETTE,
+  HPO_LABEL_TO_ORGAN,
+  HPO_LABELS,
   ORGAN_IDS,
   ORGAN_NAMES_EN,
   ORGAN_NAMES_KO,
+  ORGAN_TO_HPO_LABEL,
 } from "./constants";
 export { HpoVisualizer } from "./HpoVisualizer";
 export type { OrganSvgWrapperProps } from "./OrganSvg";
@@ -18,6 +21,7 @@ export { ORGAN_COMPONENTS } from "./svg/index";
 export type {
   ColorName as ColorScheme,
   ColorScale as ColorPalette,
+  HPOLabel,
   HpoVisualizerProps,
   OrganConfig,
   OrganId,

package/src/types.ts

@@ -28,6 +28,36 @@ export type OrganId =
   | "prenatal"
   | "blood";
 
+/**
+ * HPO official category labels
+ * @see https://hpo.jax.org/
+ */
+export 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.
  */
@@ -159,4 +189,6 @@ export interface HpoVisualizerProps {
   className?: string;
   /** Additional inline styles */
   style?: CSSProperties;
+  /** Maximum zoom level (default: 5 = 500%) */
+  maxZoom?: number;
 }

package/src/useZoom.ts

@@ -0,0 +1,196 @@
+import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
+
+export interface UseZoomOptions {
+  /** Minimum zoom level (default: 1 = 100%) */
+  minZoom?: number;
+  /** Maximum zoom level (default: 5 = 500%) */
+  maxZoom?: number;
+  /** Zoom step for button controls (default: 0.25 = 25%) */
+  zoomStep?: number;
+}
+
+export interface UseZoomReturn {
+  /** Current zoom level (1 = 100%) */
+  zoom: number;
+  /** Pan offset in pixels */
+  pan: { x: number; y: number };
+  /** Increase zoom level */
+  zoomIn: () => void;
+  /** Decrease zoom level */
+  zoomOut: () => void;
+  /** Reset zoom and pan to default values */
+  resetZoom: () => void;
+  /** Handle mouse down for drag start */
+  handleMouseDown: (e: React.MouseEvent) => void;
+  /** Handle mouse move for dragging */
+  handleMouseMove: (e: React.MouseEvent) => void;
+  /** Handle mouse up to end dragging */
+  handleMouseUp: () => void;
+  /** Whether currently dragging */
+  isDragging: boolean;
+  /** Whether zoom and pan are at default values */
+  isDefaultZoom: boolean;
+  /** Ref to attach to the container element for wheel event handling */
+  containerRef: RefObject<HTMLDivElement | null>;
+}
+
+/**
+ * Custom hook for zoom and pan functionality
+ */
+export function useZoom(options: UseZoomOptions = {}): UseZoomReturn {
+  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<HTMLDivElement | null>(null);
+
+  const clampZoom = useCallback(
+    (value: number) => 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 });
+  }, []);
+
+  // Use native event listener with passive: false to allow preventDefault
+  // Use smaller step for wheel (0.1) than buttons (zoomStep) for smoother zooming
+  // Zoom is centered on mouse pointer position
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const wheelZoomStep = 0.1;
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+
+      const rect = container.getBoundingClientRect();
+      // Mouse position relative to container center
+      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) => {
+          // Point under mouse in content space before zoom
+          const contentX = (mouseX - prevPan.x) / prevZoom;
+          const contentY = (mouseY - prevPan.y) / prevZoom;
+
+          // New pan to keep the same content point under mouse
+          const newPanX = mouseX - contentX * newZoom;
+          const newPanY = mouseY - contentY * newZoom;
+
+          // Clamp to bounds
+          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]);
+
+  // Calculate max pan bounds based on zoom level and container size
+  const clampPan = useCallback((newPan: { x: number; y: number }, currentZoom: number) => {
+    const container = containerRef.current;
+    if (!container || currentZoom <= 1) {
+      return { x: 0, y: 0 };
+    }
+
+    // Calculate how much extra content is visible when zoomed
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+
+    // At zoom level Z, the content is Z times larger
+    // The max pan is half of the extra size (since content is centered)
+    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)),
+    };
+  }, []);
+
+  // Recalculate pan bounds when zoom changes
+  useEffect(() => {
+    setPan((currentPan) => clampPan(currentPan, zoom));
+  }, [zoom, clampPan]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      // Only start drag with left mouse button, and only when zoomed in
+      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: React.MouseEvent) => {
+      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,
+  };
+}