hpo-react-visualizer 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hpo-react-visualizer",
-  "version": "0.0.2",
+  "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": "^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

@@ -68,6 +68,8 @@ const FOREGROUND_ORGANS: readonly OrganId[] = [
   "blood",
 ] as const;
 
+type RenderEntry = { type: "organ"; organId: OrganId } | { type: "body" };
+
 const MIN_ZOOM = 1;
 
 /**
@@ -89,11 +91,12 @@ 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);
@@ -111,7 +114,7 @@ export function HpoVisualizer({
     isDragging,
     isDefaultZoom,
     containerRef,
-  } = useZoom({ minZoom: MIN_ZOOM, maxZoom });
+  } = useZoom({ minZoom: MIN_ZOOM, maxZoom, wheelZoom, viewBox: BODY_VIEWBOX });
 
   // Create strict color palette with all required colors and alpha values
   const colorPalette: StrictColorPalette = useMemo(
@@ -146,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",
@@ -161,25 +205,43 @@ export function HpoVisualizer({
     position: "relative",
     width: width,
     height: height,
-    ...style,
+    ...containerStyleOverrides,
     // Apply overflow after style spread to ensure it takes precedence
-    // Use 'clip' instead of 'hidden' to respect padding
     overflow: "clip",
   };
 
   const contentStyle: CSSProperties = {
-    position: "relative",
+    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%",
-    transform: `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`,
-    transformOrigin: "center center",
+    display: "block",
     cursor: isDragging ? "grabbing" : zoom > 1 ? "grab" : "default",
-    transition: isDragging ? "none" : "transform 0.1s ease-out",
+    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) => {
@@ -191,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
@@ -220,7 +282,6 @@ export function HpoVisualizer({
 
   return (
     <div
-      ref={containerRef}
       className={className}
       style={containerStyle}
       onMouseEnter={() => setIsHovering(true)}
@@ -236,30 +297,35 @@ export function HpoVisualizer({
       tabIndex={0}
     >
       <div style={contentStyle}>
-        {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}
+          ref={containerRef}
+          width="100%"
+          height="100%"
           viewBox={viewBox}
-          style={{ position: "absolute", top: "0", left: "0" }}
-          pointerEvents="none"
+          preserveAspectRatio="xMidYMid meet"
+          style={svgStyle}
+          aria-label="Human organ visualizer"
         >
-          <title>Human body</title>
-          <Body
-            colorScale={colorPalette[DEFAULT_COLOR_NAME]}
-            style={{
-              fill: "#fff",
-            }}
-          />
+          <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>
-        {FOREGROUND_ORGANS.map((organId) =>
-          renderOrgan(organId, visibleOrganIds.includes(organId)),
-        )}
       </div>
       <ZoomControls
         onZoomIn={zoomIn}

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/__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);
+  });
+});

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

@@ -107,4 +107,38 @@ describe("useZoom hook", () => {
 
     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/constants.ts

@@ -236,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

@@ -12,6 +12,7 @@ export {
   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";

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

@@ -62,6 +62,7 @@ export type HPOLabel =
  * Color scheme for each organ.
  */
 export type ColorName = "blue" | "yellow" | "gray";
+export type ColorScheme = ColorName;
 /**
  * Color step
  */
@@ -191,4 +192,6 @@ export interface HpoVisualizerProps {
   style?: CSSProperties;
   /** Maximum zoom level (default: 5 = 500%) */
   maxZoom?: number;
+  /** Enable zoom with mouse wheel (default: true) */
+  wheelZoom?: boolean;
 }