hpo-react-visualizer 0.0.1 → 0.0.3

package/src/__tests__/renderOrder.test.tsx

@@ -6,15 +6,12 @@ import type { OrganId } from "../types";
 describe("HpoVisualizer rendering order", () => {
   /**
    * Helper function to get rendered organ IDs in DOM order.
-   * OrganSvg elements are now <svg> elements with aria-label attribute.
+   * OrganSvg elements are now <g> elements with aria-label attribute.
    * Only includes visible organs (opacity !== 0).
    */
   const getRenderedOrganOrder = (container: HTMLElement): string[] => {
-    // Find all OrganSvg elements (they are nested svg elements with aria-label)
-    // Exclude the root svg which has aria-label="Human organ visualizer"
-    const organElements = container.querySelectorAll(
-      "svg[aria-label]:not([aria-label='Human organ visualizer'])",
-    );
+    // Find all OrganSvg elements (they are <g> elements with aria-label)
+    const organElements = container.querySelectorAll("g[aria-label]");
     return Array.from(organElements)
       .filter((el) => {
         // Filter out hidden organs (opacity: 0)
@@ -25,16 +22,6 @@ describe("HpoVisualizer rendering order", () => {
       .map((el) => el.getAttribute("aria-label") || "");
   };
 
-  /**
-   * Helper function to get z-index of an organ element
-   */
-  const getOrganZIndex = (container: HTMLElement, organId: string): number => {
-    const organElement = container.querySelector(`svg[aria-label="${organId}"]`) as HTMLElement;
-    if (!organElement) return -1;
-    const style = organElement.style.zIndex;
-    return style ? parseInt(style, 10) : 0;
-  };
-
   it("should render organs in ORGAN_POSITIONS key order regardless of organs array order", () => {
     // Provide organs in reverse alphabetical order
     const organs: { id: OrganId }[] = [
@@ -64,7 +51,7 @@ describe("HpoVisualizer rendering order", () => {
     ]);
   });
 
-  it("should give selectedOrgan higher z-index to appear on top", () => {
+  it("should render selectedOrgan after other organs to appear on top", () => {
     const organs: { id: OrganId }[] = [
       { id: "head" },
       { id: "eye" },
@@ -76,16 +63,12 @@ describe("HpoVisualizer rendering order", () => {
     // Select 'head'
     const { container } = render(<HpoVisualizer organs={organs} selectedOrgan="head" />);
 
-    // 'head' should have higher z-index since it's selected
-    expect(getOrganZIndex(container, "head")).toBe(1);
-    // Other organs should have z-index 0
-    expect(getOrganZIndex(container, "lung")).toBe(0);
-    expect(getOrganZIndex(container, "heart")).toBe(0);
-    expect(getOrganZIndex(container, "eye")).toBe(0);
-    expect(getOrganZIndex(container, "ear")).toBe(0);
+    const renderedOrder = getRenderedOrganOrder(container);
+    // 'head' should be rendered last since it's selected
+    expect(renderedOrder.at(-1)).toBe("head");
   });
 
-  it("should give selectedOrgan higher z-index even when it would normally be in the middle", () => {
+  it("should render selectedOrgan last even when it would normally be in the middle", () => {
     const organs: { id: OrganId }[] = [
       { id: "head" },
       { id: "lung" },
@@ -97,26 +80,19 @@ describe("HpoVisualizer rendering order", () => {
     // Select 'heart' which is in the middle of ORGAN_POSITIONS order
     const { container } = render(<HpoVisualizer organs={organs} selectedOrgan="heart" />);
 
-    // 'heart' should have higher z-index
-    expect(getOrganZIndex(container, "heart")).toBe(1);
-    // Other organs should have z-index 0
-    expect(getOrganZIndex(container, "lung")).toBe(0);
-    expect(getOrganZIndex(container, "digestive")).toBe(0);
-    expect(getOrganZIndex(container, "kidney")).toBe(0);
-    expect(getOrganZIndex(container, "head")).toBe(0);
+    const renderedOrder = getRenderedOrganOrder(container);
+    expect(renderedOrder.at(-1)).toBe("heart");
+    expect(renderedOrder.slice(0, -1)).toEqual(["lung", "digestive", "kidney", "head"]);
   });
 
-  it("should render all organs in ORGAN_RENDER_ORDER (no reordering for selection)", () => {
+  it("should render selected organ last while preserving order for others", () => {
     const organs: { id: OrganId }[] = [{ id: "head" }, { id: "eye" }, { id: "ear" }];
 
     const { container } = render(<HpoVisualizer organs={organs} selectedOrgan="eye" />);
 
     const renderedOrder = getRenderedOrganOrder(container);
 
-    // All organs should be rendered in ORGAN_RENDER_ORDER, not reordered
-    expect(renderedOrder).toEqual(["head", "eye", "ear"]);
-    // 'eye' has higher z-index because it's selected
-    expect(getOrganZIndex(container, "eye")).toBe(1);
+    expect(renderedOrder).toEqual(["head", "ear", "eye"]);
   });
 
   it("should not render selectedOrgan if it is not in organs array", () => {
@@ -143,4 +119,15 @@ describe("HpoVisualizer rendering order", () => {
     // Should follow ORGAN_RENDER_ORDER: lung, heart, kidney, head
     expect(renderedOrder).toEqual(["lung", "heart", "kidney", "head"]);
   });
+
+  it("should return deselected organ to normal order immediately", () => {
+    const organs: { id: OrganId }[] = [{ id: "head" }, { id: "eye" }, { id: "ear" }];
+    const { container, rerender } = render(<HpoVisualizer organs={organs} selectedOrgan="eye" />);
+
+    expect(getRenderedOrganOrder(container)).toEqual(["head", "ear", "eye"]);
+
+    rerender(<HpoVisualizer organs={organs} selectedOrgan={null} />);
+
+    expect(getRenderedOrganOrder(container)).toEqual(["head", "eye", "ear"]);
+  });
 });

package/src/__tests__/transitionStyle.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+
+import { TRANSITION_STYLE } from "../constants";
+
+describe("TRANSITION_STYLE", () => {
+  it("limits transitions to visual properties", () => {
+    expect(TRANSITION_STYLE).not.toContain("all");
+    expect(TRANSITION_STYLE).toContain("fill");
+    expect(TRANSITION_STYLE).toContain("opacity");
+  });
+});

package/src/__tests__/useOrganInteraction.test.ts

@@ -0,0 +1,31 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { OrganId } from "../types";
+import { useOrganInteraction } from "../useOrganInteraction";
+
+describe("useOrganInteraction hook", () => {
+  it("keeps hover state when deselecting a hovered organ", () => {
+    const organId: OrganId = "head";
+    const { result } = renderHook(() => useOrganInteraction());
+
+    act(() => {
+      result.current.handlers.handleMouseEnter(organId);
+    });
+
+    expect(result.current.state.hoveredOrgan).toBe(organId);
+
+    act(() => {
+      result.current.handlers.handleClick(organId);
+    });
+
+    expect(result.current.state.selectedOrgan).toBe(organId);
+    expect(result.current.state.hoveredOrgan).toBe(organId);
+
+    act(() => {
+      result.current.handlers.handleClick(organId);
+    });
+
+    expect(result.current.state.selectedOrgan).toBeNull();
+    expect(result.current.state.hoveredOrgan).toBe(organId);
+  });
+});

package/src/__tests__/useZoom.test.ts

@@ -0,0 +1,144 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useZoom } from "../useZoom";
+
+describe("useZoom hook", () => {
+  it("should initialize with default values", () => {
+    const { result } = renderHook(() => useZoom());
+
+    expect(result.current.zoom).toBe(1);
+    expect(result.current.pan).toEqual({ x: 0, y: 0 });
+    expect(result.current.isDefaultZoom).toBe(true);
+    expect(result.current.isDragging).toBe(false);
+  });
+
+  it("should increase zoom when zoomIn is called", () => {
+    const { result } = renderHook(() => useZoom());
+
+    act(() => {
+      result.current.zoomIn();
+    });
+
+    expect(result.current.zoom).toBe(1.5);
+    expect(result.current.isDefaultZoom).toBe(false);
+  });
+
+  it("should decrease zoom when zoomOut is called", () => {
+    const { result } = renderHook(() => useZoom());
+
+    // First zoom in to have room to zoom out
+    act(() => {
+      result.current.zoomIn();
+      result.current.zoomIn();
+    });
+
+    expect(result.current.zoom).toBe(2);
+
+    act(() => {
+      result.current.zoomOut();
+    });
+
+    expect(result.current.zoom).toBe(1.5);
+  });
+
+  it("should not go below minZoom", () => {
+    const { result } = renderHook(() => useZoom({ minZoom: 1 }));
+
+    act(() => {
+      result.current.zoomOut();
+      result.current.zoomOut();
+      result.current.zoomOut();
+    });
+
+    expect(result.current.zoom).toBe(1);
+  });
+
+  it("should not go above maxZoom", () => {
+    const { result } = renderHook(() => useZoom({ maxZoom: 2 }));
+
+    act(() => {
+      result.current.zoomIn();
+      result.current.zoomIn();
+      result.current.zoomIn();
+      result.current.zoomIn();
+      result.current.zoomIn();
+    });
+
+    expect(result.current.zoom).toBe(2);
+  });
+
+  it("should reset zoom and pan when resetZoom is called", () => {
+    const { result } = renderHook(() => useZoom());
+
+    act(() => {
+      result.current.zoomIn();
+      result.current.zoomIn();
+    });
+
+    expect(result.current.zoom).toBe(2);
+
+    act(() => {
+      result.current.resetZoom();
+    });
+
+    expect(result.current.zoom).toBe(1);
+    expect(result.current.pan).toEqual({ x: 0, y: 0 });
+    expect(result.current.isDefaultZoom).toBe(true);
+  });
+
+  it("should use custom zoomStep", () => {
+    const { result } = renderHook(() => useZoom({ zoomStep: 0.5 }));
+
+    act(() => {
+      result.current.zoomIn();
+    });
+
+    expect(result.current.zoom).toBe(1.5);
+  });
+
+  it("should return isDefaultZoom as false when zoomed", () => {
+    const { result } = renderHook(() => useZoom());
+
+    expect(result.current.isDefaultZoom).toBe(true);
+
+    act(() => {
+      result.current.zoomIn();
+    });
+
+    expect(result.current.isDefaultZoom).toBe(false);
+  });
+
+  describe("wheelZoom option", () => {
+    it("should accept wheelZoom option with default value true", () => {
+      const { result } = renderHook(() => useZoom());
+
+      // Hook should work normally with default wheelZoom=true
+      expect(result.current.zoom).toBe(1);
+      expect(result.current.containerRef).toBeDefined();
+    });
+
+    it("should accept wheelZoom option set to false", () => {
+      const { result } = renderHook(() => useZoom({ wheelZoom: false }));
+
+      // Hook should work normally with wheelZoom=false
+      expect(result.current.zoom).toBe(1);
+      expect(result.current.containerRef).toBeDefined();
+    });
+
+    it("should still allow button zoom when wheelZoom is disabled", () => {
+      const { result } = renderHook(() => useZoom({ wheelZoom: false }));
+
+      act(() => {
+        result.current.zoomIn();
+      });
+
+      expect(result.current.zoom).toBe(1.5);
+
+      act(() => {
+        result.current.zoomOut();
+      });
+
+      expect(result.current.zoom).toBe(1);
+    });
+  });
+});

package/src/__tests__/zoomControls.test.tsx

@@ -0,0 +1,106 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ZoomControls } from "../ZoomControls";
+
+describe("ZoomControls component", () => {
+  const defaultProps = {
+    onZoomIn: vi.fn(),
+    onZoomOut: vi.fn(),
+    onReset: vi.fn(),
+    showResetButton: false,
+    zoom: 1,
+    minZoom: 1,
+    maxZoom: 5,
+    isVisible: true,
+  };
+
+  it("should render zoom in and zoom out buttons", () => {
+    const { getByLabelText } = render(<ZoomControls {...defaultProps} />);
+
+    expect(getByLabelText("Zoom in")).toBeDefined();
+    expect(getByLabelText("Zoom out")).toBeDefined();
+  });
+
+  it("should call onZoomIn when + button is clicked", () => {
+    const onZoomIn = vi.fn();
+    const { getByLabelText } = render(<ZoomControls {...defaultProps} onZoomIn={onZoomIn} />);
+
+    fireEvent.click(getByLabelText("Zoom in"));
+
+    expect(onZoomIn).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onZoomOut when - button is clicked", () => {
+    const onZoomOut = vi.fn();
+    const { getByLabelText } = render(
+      <ZoomControls {...defaultProps} zoom={2} onZoomOut={onZoomOut} />,
+    );
+
+    fireEvent.click(getByLabelText("Zoom out"));
+
+    expect(onZoomOut).toHaveBeenCalledTimes(1);
+  });
+
+  it("should disable zoom in button when at maxZoom", () => {
+    const onZoomIn = vi.fn();
+    const { getByLabelText } = render(
+      <ZoomControls {...defaultProps} zoom={5} maxZoom={5} onZoomIn={onZoomIn} />,
+    );
+
+    const zoomInButton = getByLabelText("Zoom in") as HTMLButtonElement;
+    expect(zoomInButton.disabled).toBe(true);
+
+    fireEvent.click(zoomInButton);
+    expect(onZoomIn).not.toHaveBeenCalled();
+  });
+
+  it("should disable zoom out button when at minZoom", () => {
+    const onZoomOut = vi.fn();
+    const { getByLabelText } = render(
+      <ZoomControls {...defaultProps} zoom={1} minZoom={1} onZoomOut={onZoomOut} />,
+    );
+
+    const zoomOutButton = getByLabelText("Zoom out") as HTMLButtonElement;
+    expect(zoomOutButton.disabled).toBe(true);
+
+    fireEvent.click(zoomOutButton);
+    expect(onZoomOut).not.toHaveBeenCalled();
+  });
+
+  it("should hide reset button when showResetButton is false", () => {
+    const { getByLabelText } = render(<ZoomControls {...defaultProps} showResetButton={false} />);
+
+    const resetButton = getByLabelText("Reset zoom");
+    const container = resetButton.parentElement as HTMLElement;
+    expect(container.style.opacity).toBe("0");
+    expect(container.style.pointerEvents).toBe("none");
+  });
+
+  it("should render reset button when showResetButton is true", () => {
+    const { getByLabelText } = render(
+      <ZoomControls {...defaultProps} showResetButton={true} zoom={2} />,
+    );
+
+    expect(getByLabelText("Reset zoom")).toBeDefined();
+  });
+
+  it("should call onReset when reset button is clicked", () => {
+    const onReset = vi.fn();
+    const { getByLabelText } = render(
+      <ZoomControls {...defaultProps} showResetButton={true} zoom={2} onReset={onReset} />,
+    );
+
+    fireEvent.click(getByLabelText("Reset zoom"));
+
+    expect(onReset).toHaveBeenCalledTimes(1);
+  });
+
+  it("should display reset icon in reset button", () => {
+    const { getByLabelText } = render(
+      <ZoomControls {...defaultProps} showResetButton={true} zoom={1.5} />,
+    );
+
+    const resetButton = getByLabelText("Reset zoom");
+    expect(resetButton.textContent).toContain("↺");
+  });
+});

package/src/constants.ts

@@ -1,4 +1,4 @@
-import type { ColorName, OrganId, StrictColorPalette } from "./types";
+import type { ColorName, HPOLabel, OrganId, StrictColorPalette } from "./types";
 
 /**
  * All supported organ IDs
@@ -87,6 +87,95 @@ export const ORGAN_NAMES_KO: Record<OrganId, string> = {
   blood: "혈액",
 };
 
+/**
+ * All HPO category labels
+ */
+export const HPO_LABELS: readonly 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",
+] as const;
+
+/**
+ * Mapping from HPO label to OrganId
+ * Note: "others" has no corresponding OrganId
+ */
+export const HPO_LABEL_TO_ORGAN: Record<Exclude<HPOLabel, "others">, OrganId> = {
+  "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",
+};
+
+/**
+ * Mapping from OrganId to HPO label
+ */
+export const ORGAN_TO_HPO_LABEL: Record<OrganId, Exclude<HPOLabel, "others">> = {
+  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",
+};
+
 /**
  * Color palettes for each color scheme.
  * Based on Tailwind CSS color palette.
@@ -147,7 +236,20 @@ export const ANIMATION_DURATION_MS = 150;
 /**
  * CSS transition string for smooth style changes
  */
-export const TRANSITION_STYLE = `all ${ANIMATION_DURATION_MS}ms ease-out`;
+const TRANSITION_PROPERTIES = [
+  "fill",
+  "stroke",
+  "stroke-width",
+  "opacity",
+  "filter",
+  "stop-color",
+  "stop-opacity",
+  "visibility",
+];
+
+export const TRANSITION_STYLE = TRANSITION_PROPERTIES.map(
+  (property) => `${property} ${ANIMATION_DURATION_MS}ms ease-out`,
+).join(", ");
 
 /**
  * Body SVG viewBox dimensions

package/src/index.ts

@@ -4,11 +4,15 @@
 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 { createOrganOutlineSet, createUniformOrganColorSchemes } from "./lib";
 export type { OrganSvgWrapperProps } from "./OrganSvg";
 // OrganSvg wrapper for custom compositions
 export { OrganSvg } from "./OrganSvg";
@@ -18,6 +22,7 @@ export { ORGAN_COMPONENTS } from "./svg/index";
 export type {
   ColorName as ColorScheme,
   ColorScale as ColorPalette,
+  HPOLabel,
   HpoVisualizerProps,
   OrganConfig,
   OrganId,

package/src/lib/index.ts

@@ -1 +1,2 @@
 export { createStrictColorPalette } from "./createStrictColorPalette";
+export { createOrganOutlineSet, createUniformOrganColorSchemes } from "./organControlState";

package/src/lib/organControlState.ts

@@ -0,0 +1,21 @@
+import type { ColorScheme, OrganId } from "../types";
+
+export const createUniformOrganColorSchemes = (
+  organIds: readonly OrganId[],
+  scheme: ColorScheme,
+): Record<OrganId, ColorScheme> => {
+  return organIds.reduce(
+    (acc, organId) => {
+      acc[organId] = scheme;
+      return acc;
+    },
+    {} as Record<OrganId, ColorScheme>,
+  );
+};
+
+export const createOrganOutlineSet = (
+  organIds: readonly OrganId[],
+  enabled: boolean,
+): Set<OrganId> => {
+  return enabled ? new Set(organIds) : new Set<OrganId>();
+};

package/src/svg/Neoplasm.tsx

@@ -15,9 +15,12 @@ export function Neoplasm({ style, colorScale, isActive = false, className }: Org
         strokeWidth={style?.strokeWidth}
         style={{ transition: TRANSITION_STYLE }}
       />
+      <path d={OUTLINE_NEOPLASM_PATH} fill="transparent" style={{ transition: TRANSITION_STYLE }} />
     </g>
   );
 }
 
 const NEOPLASM_PATH =
   "M2.7706 0.345092C3.77204 -0.328406 4.67398 0.0748652 5.51994 0.775559C5.66929 0.84341 5.84084 0.854726 6.00335 0.870091C6.75039 0.90371 7.23202 1.47634 7.71526 1.9904C7.9442 2.15206 8.23991 2.13397 8.49487 2.22712C9.42032 2.53001 9.97875 3.53109 9.82848 4.52946C9.80496 4.72076 9.82624 4.9113 9.95893 5.05368C10.8667 5.72367 11.227 6.90427 10.8552 8.00289C10.8197 8.17335 10.8234 8.33612 10.8552 8.50914C11.1667 9.57255 10.4627 10.7371 9.42026 10.9099C9.00986 10.9605 8.83573 11.0538 8.57313 11.3857C7.90654 12.1783 6.69443 12.1982 5.99107 11.4787C5.5305 10.923 5.59744 10.7815 4.83778 10.6419C4.274 10.5136 4.05225 9.90237 3.47347 9.82554C2.48067 9.75886 1.64607 8.89953 1.56283 7.86148C1.52718 7.50386 1.66051 7.13178 1.52369 6.78727C1.3217 6.37915 1.32115 5.92532 1.23057 5.49352C1.10172 5.15452 0.710231 4.98692 0.513122 4.69274C-0.603239 3.37518 0.214433 1.09705 1.8828 0.870872C2.29014 0.811338 2.46031 0.574268 2.7706 0.345092ZM8.66675 8.95211C9.38993 8.35162 8.63882 7.25972 7.84647 7.70601C7.45807 7.89616 7.2217 7.60732 6.78065 7.86148C5.19403 8.99021 7.21312 10.9585 8.28615 9.18961C8.40479 9.09758 8.54993 9.05178 8.66675 8.95211ZM4.7104 6.27711L4.27303 6.33727C4.12492 6.3579 3.97681 6.38207 3.83565 6.41852C2.87888 6.71014 2.93127 8.12397 3.79805 8.44664C4.34702 8.66977 4.91047 8.31107 5.14548 7.78492C5.25444 7.61852 5.42561 7.46995 5.49231 7.2693C5.67652 6.73389 5.241 6.21214 4.7104 6.27711ZM8.15954 5.40524C8.913 4.35054 7.9177 2.94878 6.76301 3.66071C6.55641 3.79164 6.34141 3.80113 6.11308 3.86227C5.20786 4.14228 5.25696 5.42232 6.06934 5.76071C6.24349 5.83273 6.44219 5.82242 6.57808 5.96071C6.82774 6.35991 7.1629 6.64138 7.63085 6.42633C8.04922 6.26821 8.02001 5.76856 8.15954 5.40524ZM4.52778 2.60368C4.44638 2.07782 3.90894 1.82777 3.46273 2.07087C3.13279 2.34905 2.82713 2.08984 2.46597 2.10681C1.16526 2.23008 1.24741 4.22477 2.54961 4.25133C2.72681 4.26447 2.8382 4.34664 2.91869 4.51149C3.71452 6.01766 5.6609 4.68642 4.53008 3.18805C4.47929 2.99637 4.57022 2.79792 4.52778 2.60368Z";
+const OUTLINE_NEOPLASM_PATH =
+  "M2.7706 0.345092C3.77204 -0.328406 4.67398 0.0748652 5.51994 0.775559C5.66929 0.84341 5.84084 0.854726 6.00335 0.870091C6.75039 0.90371 7.23202 1.47634 7.71526 1.9904C7.9442 2.15206 8.23991 2.13397 8.49487 2.22712C9.42032 2.53001 9.97875 3.53109 9.82848 4.52946C9.80497 4.72076 9.82624 4.9113 9.95893 5.05368C10.8667 5.72367 11.227 6.90427 10.8552 8.00289C10.8197 8.17335 10.8234 8.33612 10.8552 8.50914C11.1667 9.57254 10.4627 10.7371 9.42026 10.9099C9.00986 10.9605 8.83573 11.0538 8.57313 11.3857C7.90654 12.1783 6.69443 12.1982 5.99108 11.4787C5.5305 10.923 5.59744 10.7815 4.83778 10.6419C4.274 10.5136 4.05225 9.90237 3.47347 9.82554C2.48067 9.75886 1.64607 8.89953 1.56283 7.86148C1.52718 7.50386 1.66051 7.13178 1.52369 6.78727C1.3217 6.37915 1.32115 5.92532 1.23057 5.49352C1.10172 5.15452 0.710231 4.98692 0.513122 4.69274C-0.603239 3.37518 0.214433 1.09705 1.8828 0.870872C2.29014 0.811338 2.46031 0.574268 2.7706 0.345092Z";

package/src/types.ts

@@ -28,10 +28,41 @@ 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.
  */
 export type ColorName = "blue" | "yellow" | "gray";
+export type ColorScheme = ColorName;
 /**
  * Color step
  */
@@ -159,4 +190,8 @@ export interface HpoVisualizerProps {
   className?: string;
   /** Additional inline styles */
   style?: CSSProperties;
+  /** Maximum zoom level (default: 5 = 500%) */
+  maxZoom?: number;
+  /** Enable zoom with mouse wheel (default: true) */
+  wheelZoom?: boolean;
 }

package/src/useOrganInteraction.ts

@@ -33,6 +33,7 @@ export interface UseOrganInteractionResult {
  * - Click on organ sets selectedOrgan and calls onSelect
  * - Click on already selected organ deselects it
  * - Click on different organ changes selection
+ * - Deselect keeps hover state when still over the organ
  * - Hover effects work independently even when an organ is selected
  */
 export function useOrganInteraction(
@@ -82,16 +83,8 @@ export function useOrganInteraction(
         setInternalSelected(newSelected);
       }
       onSelect?.(newSelected);
-
-      // When deselecting, also clear hover state
-      if (newSelected === null) {
-        if (!isHoverControlled) {
-          setInternalHovered(null);
-        }
-        onHover?.(null);
-      }
     },
-    [selectedOrgan, isSelectControlled, isHoverControlled, onSelect, onHover],
+    [selectedOrgan, isSelectControlled, onSelect],
   );
 
   const state: OrganInteractionState = useMemo(