hpo-react-visualizer 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hpo-react-visualizer",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Interactive Human Phenotype Ontology (HPO) organ visualization library",
   "private": false,
   "type": "module",
@@ -30,23 +30,11 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "biome check .",
-    "lint:fix": "biome check --write .",
-    "generate:component": "turbo gen react-component",
-    "check-types": "tsc --noEmit",
-    "clean": "rm -rf dist",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@repo/typescript-config": "workspace:*",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^22.15.3",
@@ -55,6 +43,18 @@
     "jsdom": "^27.3.0",
     "tsup": "^8.3.5",
     "typescript": "5.9.2",
-    "vitest": "^4.0.15"
+    "vitest": "^4.0.15",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}

package/src/HpoVisualizer.tsx

@@ -1,10 +1,12 @@
-import { type CSSProperties, useId, useMemo } from "react";
+import { type CSSProperties, useId, useMemo, useState } from "react";
 import { BODY_VIEWBOX, DEFAULT_COLOR_NAME, ORGAN_IDS } from "./constants";
 import { createStrictColorPalette } from "./lib";
 import { OrganSvg } from "./OrganSvg";
 import { Body } from "./svg/Body";
 import type { HpoVisualizerProps, OrganConfig, OrganId, StrictColorPalette } from "./types";
 import { useOrganInteraction } from "./useOrganInteraction";
+import { useZoom } from "./useZoom";
+import { ZoomControls } from "./ZoomControls";
 
 /**
  * Default positions and viewBox dimensions for each organ in the visualizer
@@ -66,6 +68,10 @@ const FOREGROUND_ORGANS: readonly OrganId[] = [
   "blood",
 ] as const;
 
+type RenderEntry = { type: "organ"; organId: OrganId } | { type: "body" };
+
+const MIN_ZOOM = 1;
+
 /**
  * HPO Visualizer - Interactive human organ visualization component
  *
@@ -75,6 +81,7 @@ const FOREGROUND_ORGANS: readonly OrganId[] = [
  * - 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
  */
 export function HpoVisualizer({
   organs,
@@ -84,12 +91,30 @@ export function HpoVisualizer({
   onHover,
   onSelect,
   colorPalette: inputColorPalette,
-  width = BODY_VIEWBOX.width,
-  height = BODY_VIEWBOX.height,
+  width = "100%",
+  height = "100%",
   className,
   style,
+  maxZoom = 5,
+  wheelZoom = true,
 }: HpoVisualizerProps) {
   const visualizerID = useId();
+  const [isHovering, setIsHovering] = useState(false);
+
+  // Zoom and pan functionality
+  const {
+    zoom,
+    pan,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    isDragging,
+    isDefaultZoom,
+    containerRef,
+  } = useZoom({ minZoom: MIN_ZOOM, maxZoom, wheelZoom, viewBox: BODY_VIEWBOX });
 
   // Create strict color palette with all required colors and alpha values
   const colorPalette: StrictColorPalette = useMemo(
@@ -124,13 +149,54 @@ export function HpoVisualizer({
   }, [organs]);
 
   // Use the interaction hook
-  const { handlers, isHovered, isSelected } = useOrganInteraction({
+  const { handlers, isHovered, isSelected, state } = useOrganInteraction({
     hoveredOrgan: controlledHovered,
     selectedOrgan: controlledSelected,
     onHover,
     onSelect,
   });
 
+  const selectedOrganId = state.selectedOrgan;
+  const renderEntries = useMemo(() => {
+    const base: RenderEntry[] = [
+      ...BACKGROUND_ORGANS.map((organId): RenderEntry => ({ type: "organ", organId })),
+      { type: "body" },
+      ...FOREGROUND_ORGANS.map((organId): RenderEntry => ({ type: "organ", organId })),
+    ];
+
+    if (!selectedOrganId) {
+      return base;
+    }
+
+    const selectedIndex = base.findIndex(
+      (entry) => entry.type === "organ" && entry.organId === selectedOrganId,
+    );
+    if (selectedIndex === -1) {
+      return base;
+    }
+
+    const selectedEntry = base[selectedIndex];
+    if (!selectedEntry || selectedEntry.type !== "organ") {
+      return base;
+    }
+    return [...base.slice(0, selectedIndex), ...base.slice(selectedIndex + 1), selectedEntry];
+  }, [selectedOrganId]);
+
+  const {
+    padding,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingBlock,
+    paddingBlockStart,
+    paddingBlockEnd,
+    ...containerStyleOverrides
+  } = style ?? {};
+
   const containerStyle: CSSProperties = {
     display: "flex",
     justifyContent: "center",
@@ -139,12 +205,43 @@ export function HpoVisualizer({
     position: "relative",
     width: width,
     height: height,
-    ...style,
+    ...containerStyleOverrides,
+    // Apply overflow after style spread to ensure it takes precedence
+    overflow: "clip",
+  };
+
+  const contentStyle: CSSProperties = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "flex-end",
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box",
+    padding,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingBlock,
+    paddingBlockStart,
+    paddingBlockEnd,
+  };
+
+  const svgStyle: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    display: "block",
+    cursor: isDragging ? "grabbing" : zoom > 1 ? "grab" : "default",
+    overflow: "visible",
   };
 
   const viewBox = `0 0 ${BODY_VIEWBOX.width} ${BODY_VIEWBOX.height}`;
-  const scale = Math.min(Number(width) / BODY_VIEWBOX.width, Number(height) / BODY_VIEWBOX.height);
-  const translateX = (Number(width) - BODY_VIEWBOX.width * scale) / 2;
+  const centerX = BODY_VIEWBOX.width / 2;
+  const centerY = BODY_VIEWBOX.height / 2;
+  const zoomTransform = `translate(${centerX} ${centerY}) scale(${zoom}) translate(${-centerX} ${-centerY})`;
 
   // Helper function to render an organ
   const renderOrgan = (organId: OrganId, isVisible: boolean) => {
@@ -156,10 +253,10 @@ export function HpoVisualizer({
       return null;
     }
 
-    const x = translateX + position.x * scale;
-    const y = position.y * scale;
-    const width = position.width * scale;
-    const height = position.height * scale;
+    const x = position.x;
+    const y = position.y;
+    const width = position.width;
+    const height = position.height;
 
     return (
       <OrganSvg
@@ -184,27 +281,62 @@ export function HpoVisualizer({
   };
 
   return (
-    <div className={className} style={containerStyle}>
-      {BACKGROUND_ORGANS.map((organId) => renderOrgan(organId, visibleOrganIds.includes(organId)))}
-      {/* Background Body - rendered as nested SVG for flat structure */}
-      <svg
-        x={translateX}
-        y="0"
-        width={width}
-        height={height}
-        viewBox={viewBox}
-        style={{ position: "absolute", top: "0", left: "0" }}
-        pointerEvents="none"
-      >
-        <title>Human body</title>
-        <Body
-          colorScale={colorPalette[DEFAULT_COLOR_NAME]}
-          style={{
-            fill: "#fff",
-          }}
-        />
-      </svg>
-      {FOREGROUND_ORGANS.map((organId) => renderOrgan(organId, visibleOrganIds.includes(organId)))}
+    <div
+      className={className}
+      style={containerStyle}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => {
+        setIsHovering(false);
+        handleMouseUp();
+      }}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      role="application"
+      // biome-ignore lint/a11y/noNoninteractiveTabindex: Required for keyboard accessibility in zoom/pan application
+      tabIndex={0}
+    >
+      <div style={contentStyle}>
+        <svg
+          ref={containerRef}
+          width="100%"
+          height="100%"
+          viewBox={viewBox}
+          preserveAspectRatio="xMidYMid meet"
+          style={svgStyle}
+          aria-label="Human organ visualizer"
+        >
+          <title>Human organ visualizer</title>
+          <g transform={`translate(${pan.x} ${pan.y})`}>
+            <g transform={zoomTransform}>
+              {renderEntries.map((entry) => {
+                if (entry.type === "body") {
+                  return (
+                    <Body
+                      key={`${visualizerID}-body`}
+                      colorScale={colorPalette[DEFAULT_COLOR_NAME]}
+                      style={{
+                        fill: "#fff",
+                      }}
+                    />
+                  );
+                }
+                return renderOrgan(entry.organId, visibleOrganIds.includes(entry.organId));
+              })}
+            </g>
+          </g>
+        </svg>
+      </div>
+      <ZoomControls
+        onZoomIn={zoomIn}
+        onZoomOut={zoomOut}
+        onReset={resetZoom}
+        showResetButton={!isDefaultZoom}
+        zoom={zoom}
+        minZoom={MIN_ZOOM}
+        maxZoom={maxZoom}
+        isVisible={isHovering}
+      />
     </div>
   );
 }

package/src/OrganSvg.tsx

@@ -25,13 +25,13 @@ export 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;
@@ -93,25 +93,21 @@ export function OrganSvg({
     return mergeStyles(userStyle, strokeStyle);
   }, [config?.style, showOutline]);
 
-  const svgStyle: CSSProperties = {
-    position: "absolute",
-    left: x,
-    top: y,
+  const [minX = 0, minY = 0, viewBoxWidth, viewBoxHeight] = viewBox.split(" ").map(Number);
+  const scaleX = viewBoxWidth ? width / viewBoxWidth : 1;
+  const scaleY = viewBoxHeight ? height / viewBoxHeight : 1;
+  const transform = `translate(${x} ${y}) scale(${scaleX} ${scaleY}) translate(${-minX} ${-minY})`;
+  const groupStyle: CSSProperties = {
     transition: `${TRANSITION_STYLE}, visibility 0s`,
-    zIndex: isSelected ? 1 : 0,
   };
   const filter = isActive ? "blur(1px)" : undefined;
 
   return (
-    <svg
-      width={width}
-      height={height}
-      viewBox={viewBox}
-      style={svgStyle}
+    <g
+      transform={transform}
+      style={groupStyle}
       filter={filter}
       aria-label={organId}
-      overflow="visible"
-      pointerEvents="none"
       opacity={isVisible ? 1 : 0}
       visibility={isVisible ? "visible" : "hidden"}
     >
@@ -136,6 +132,6 @@ export function OrganSvg({
           colorScale={colorPalette[config?.colorName ?? DEFAULT_COLOR_NAME]}
         />
       </g>
-    </svg>
+    </g>
   );
 }

package/src/ZoomControls.tsx

@@ -0,0 +1,125 @@
+import type { CSSProperties } from "react";
+
+interface ZoomControlsProps {
+  /** Callback when zoom in button is clicked */
+  onZoomIn: () => void;
+  /** Callback when zoom out button is clicked */
+  onZoomOut: () => void;
+  /** Callback when reset button is clicked */
+  onReset: () => void;
+  /** Whether to show the reset button */
+  showResetButton: boolean;
+  /** Current zoom level (1 = 100%) */
+  zoom: number;
+  /** Minimum zoom level */
+  minZoom: number;
+  /** Maximum zoom level */
+  maxZoom: number;
+  /** Whether the controls are visible (for fade effect) */
+  isVisible: boolean;
+}
+
+const buttonBaseStyle: CSSProperties = {
+  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",
+};
+
+const buttonDisabledStyle: CSSProperties = {
+  ...buttonBaseStyle,
+  opacity: 0.4,
+  cursor: "not-allowed",
+};
+
+const getContainerStyle = (isVisible: boolean): CSSProperties => ({
+  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",
+});
+
+const getResetContainerStyle = (isVisible: boolean): CSSProperties => ({
+  position: "absolute",
+  bottom: 12,
+  left: 12,
+  zIndex: 10,
+  opacity: isVisible ? 1 : 0,
+  transition: "opacity 0.2s ease-in-out",
+  pointerEvents: isVisible ? "auto" : "none",
+});
+
+const resetButtonStyle: CSSProperties = {
+  ...buttonBaseStyle,
+  width: "auto",
+  padding: "6px 12px",
+  fontSize: 12,
+  fontWeight: 500,
+};
+
+/**
+ * Zoom control buttons component
+ * Displays +/- buttons in bottom right, reset button in bottom left
+ */
+export function ZoomControls({
+  onZoomIn,
+  onZoomOut,
+  onReset,
+  showResetButton,
+  zoom,
+  minZoom,
+  maxZoom,
+  isVisible,
+}: ZoomControlsProps) {
+  const isMinZoom = zoom <= minZoom;
+  const isMaxZoom = zoom >= maxZoom;
+
+  return (
+    <>
+      {/* Zoom in/out buttons - bottom right */}
+      <div style={getContainerStyle(isVisible)}>
+        <button
+          type="button"
+          onClick={onZoomIn}
+          disabled={isMaxZoom}
+          style={isMaxZoom ? buttonDisabledStyle : buttonBaseStyle}
+          aria-label="Zoom in"
+        >
+          +
+        </button>
+        <button
+          type="button"
+          onClick={onZoomOut}
+          disabled={isMinZoom}
+          style={isMinZoom ? buttonDisabledStyle : buttonBaseStyle}
+          aria-label="Zoom out"
+        >
+          −
+        </button>
+      </div>
+
+      {/* Reset button - bottom left (only shown when not at default zoom) */}
+      <div style={getResetContainerStyle(isVisible && showResetButton)}>
+        <button type="button" onClick={onReset} style={resetButtonStyle} aria-label="Reset zoom">
+          ↺
+        </button>
+      </div>
+    </>
+  );
+}

package/src/__tests__/hpoLabel.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+
+import { HPO_LABEL_TO_ORGAN, HPO_LABELS, ORGAN_IDS, ORGAN_TO_HPO_LABEL } from "../constants";
+import type { HPOLabel, OrganId } from "../types";
+
+describe("HPO Labels", () => {
+  describe("HPO_LABELS", () => {
+    it("should contain all 24 HPO labels", () => {
+      expect(HPO_LABELS).toHaveLength(24);
+    });
+
+    it("should include 'others' label", () => {
+      expect(HPO_LABELS).toContain("others");
+    });
+  });
+
+  describe("HPO_LABEL_TO_ORGAN mapping", () => {
+    it("should map all HPO labels except 'others' to OrganId", () => {
+      const labelsWithoutOthers = HPO_LABELS.filter((label) => label !== "others");
+      expect(Object.keys(HPO_LABEL_TO_ORGAN)).toHaveLength(labelsWithoutOthers.length);
+    });
+
+    it("should map each HPO label to a valid OrganId", () => {
+      for (const [_label, organId] of Object.entries(HPO_LABEL_TO_ORGAN)) {
+        expect(ORGAN_IDS).toContain(organId);
+      }
+    });
+
+    it("should correctly map specific HPO labels", () => {
+      expect(HPO_LABEL_TO_ORGAN["Abnormality of the digestive system"]).toBe("digestive");
+      expect(HPO_LABEL_TO_ORGAN["Growth abnormality"]).toBe("growth");
+      expect(HPO_LABEL_TO_ORGAN["Abnormality of the eye"]).toBe("eye");
+    });
+  });
+
+  describe("ORGAN_TO_HPO_LABEL mapping", () => {
+    it("should map all OrganIds to HPO labels", () => {
+      expect(Object.keys(ORGAN_TO_HPO_LABEL)).toHaveLength(ORGAN_IDS.length);
+    });
+
+    it("should map each OrganId to a valid HPO label", () => {
+      for (const [_organId, label] of Object.entries(ORGAN_TO_HPO_LABEL)) {
+        expect(HPO_LABELS).toContain(label);
+      }
+    });
+
+    it("should correctly map specific OrganIds", () => {
+      expect(ORGAN_TO_HPO_LABEL.digestive).toBe("Abnormality of the digestive system");
+      expect(ORGAN_TO_HPO_LABEL.growth).toBe("Growth abnormality");
+      expect(ORGAN_TO_HPO_LABEL.eye).toBe("Abnormality of the eye");
+    });
+  });
+
+  describe("Bidirectional mapping consistency", () => {
+    it("should have consistent bidirectional mapping", () => {
+      // HPO_LABEL_TO_ORGAN → ORGAN_TO_HPO_LABEL should return original label
+      for (const [label, organId] of Object.entries(HPO_LABEL_TO_ORGAN)) {
+        const reverseLabel = ORGAN_TO_HPO_LABEL[organId as OrganId];
+        expect(reverseLabel).toBe(label);
+      }
+    });
+
+    it("should have consistent reverse mapping", () => {
+      // ORGAN_TO_HPO_LABEL → HPO_LABEL_TO_ORGAN should return original organId
+      for (const [organId, label] of Object.entries(ORGAN_TO_HPO_LABEL)) {
+        const reverseOrganId = HPO_LABEL_TO_ORGAN[label as Exclude<HPOLabel, "others">];
+        expect(reverseOrganId).toBe(organId);
+      }
+    });
+  });
+});

package/src/__tests__/hpoVisualizerSizing.test.tsx

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { HpoVisualizer } from "../HpoVisualizer";
+
+describe("HpoVisualizer sizing", () => {
+  it("should render root svg with percentage sizing by default", () => {
+    const { container } = render(<HpoVisualizer />);
+    const rootSvg = container.querySelector(
+      "svg[aria-label='Human organ visualizer']",
+    ) as SVGSVGElement;
+    expect(rootSvg).toBeDefined();
+    expect(rootSvg.getAttribute("width")).toBe("100%");
+    expect(rootSvg.getAttribute("height")).toBe("100%");
+  });
+
+  it("should apply width/height props to the container", () => {
+    const { container } = render(<HpoVisualizer width={300} height={400} />);
+    const root = container.firstElementChild as HTMLElement;
+    expect(root.style.width).toBe("300px");
+    expect(root.style.height).toBe("400px");
+  });
+});

package/src/__tests__/organControlState.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+
+import { ORGAN_IDS } from "../constants";
+import { createOrganOutlineSet, createUniformOrganColorSchemes } from "../lib/organControlState";
+
+describe("organ control helpers", () => {
+  it("creates uniform color schemes for all organs", () => {
+    const schemes = createUniformOrganColorSchemes(ORGAN_IDS, "yellow");
+
+    for (const organId of ORGAN_IDS) {
+      expect(schemes[organId]).toBe("yellow");
+    }
+  });
+
+  it("creates outline sets based on the enabled flag", () => {
+    const enabledSet = createOrganOutlineSet(ORGAN_IDS, true);
+    const disabledSet = createOrganOutlineSet(ORGAN_IDS, false);
+
+    expect(enabledSet.size).toBe(ORGAN_IDS.length);
+    for (const organId of ORGAN_IDS) {
+      expect(enabledSet.has(organId)).toBe(true);
+    }
+
+    expect(disabledSet.size).toBe(0);
+  });
+});