npm - hpo-react-visualizer - Versions diffs - 0.0.1 → 0.0.2 - Mend

hpo-react-visualizer 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/index.cjs +376 -27
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +23 -2
package/dist/index.d.ts +23 -2
package/dist/index.js +376 -30
package/dist/index.js.map +1 -1
package/package.json +3 -3
package/src/HpoVisualizer.tsx +88 -22
package/src/ZoomControls.tsx +125 -0
package/src/__tests__/hpoLabel.test.ts +71 -0
package/src/__tests__/useZoom.test.ts +110 -0
package/src/__tests__/zoomControls.test.tsx +106 -0
package/src/constants.ts +90 -1
package/src/index.ts +4 -0
package/src/types.ts +32 -0
package/src/useZoom.ts +196 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "hpo-react-visualizer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Interactive Human Phenotype Ontology (HPO) organ visualization library",
   "private": false,
   "type": "module",
@@ -42,8 +42,8 @@
     "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:*",

package/src/HpoVisualizer.tsx CHANGED Viewed

@@ -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,8 @@ const FOREGROUND_ORGANS: readonly OrganId[] = [
   "blood",
 ] as const;
+const MIN_ZOOM = 1;
 /**
  * HPO Visualizer - Interactive human organ visualization component
  *
@@ -75,6 +79,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,
@@ -88,8 +93,25 @@ export function HpoVisualizer({
   height = BODY_VIEWBOX.height,
   className,
   style,
+  maxZoom = 5,
 }: 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 });
   // Create strict color palette with all required colors and alpha values
   const colorPalette: StrictColorPalette = useMemo(
@@ -140,6 +162,19 @@ export function HpoVisualizer({
     width: width,
     height: height,
     ...style,
+    // 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",
+    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}`;
@@ -184,27 +219,58 @@ 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
+      ref={containerRef}
+      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}>
+        {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>
+      <ZoomControls
+        onZoomIn={zoomIn}
+        onZoomOut={zoomOut}
+        onReset={resetZoom}
+        showResetButton={!isDefaultZoom}
+        zoom={zoom}
+        minZoom={MIN_ZOOM}
+        maxZoom={maxZoom}
+        isVisible={isHovering}
+      />
     </div>
   );
 }

package/src/ZoomControls.tsx ADDED Viewed

@@ -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 ADDED Viewed

@@ -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__/useZoom.test.ts ADDED Viewed

@@ -0,0 +1,110 @@
+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);
+  });
+});

package/src/__tests__/zoomControls.test.tsx ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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.