@marxito/clinical-body-profile

Clinical anatomical body profile React component library. Interactive 2D/3D organ visualization with ICD-10 condition mapping, NER-based transcription suggestions, and SNOMED CT body site data.

Install

npm install @marxito/clinical-body-profile

Peer dependencies: react >=18, react-dom >=18, three >=0.160, @react-three/fiber >=8, @react-three/drei >=9, lucide-react >=0.300

Quick Start

import { BodyProfileProvider, OrganCardGrid } from '@marxito/clinical-body-profile'
import '@marxito/clinical-body-profile/styles.css'

function App() {
  return (
    <BodyProfileProvider config={{
      svgBasePath: '/svg',
      modelBasePath: '/models/anatomy',
      apiEndpoints: {
        anatomySystems: '/api/anatomy/systems',
        anatomyOrgans: '/api/anatomy/organs',
        anatomyStructures: '/api/anatomy/structures',
        activeConditions: '/api/body-profile/patient/:id/active-conditions',
      },
      onNotify: (msg, type) => console.log(`[${type}] ${msg}`),
    }}>
      <OrganCardGrid patientId="patient-123" />
    </BodyProfileProvider>
  )
}

Components

Viewer

• OrganViewer3D — Interactive 3D organ viewer (React Three Fiber)
• StructureLabel3D — 3D labels on anatomical meshes
• ConditionOverlay3D — Condition severity overlays on 3D meshes

Cards

• OrganCardGrid — Filterable grid of organ cards with system tabs
• OrganDetailView — Detail sheet with sub-structures, 2D/3D toggle, bookmarks
• OrganCard — Individual organ card with condition badges
• OrganIcon — System-colored organ icon
• PatientSummary — Patient-facing summary dialog (WhatsApp, print, copy)

Silhouette

• ClinicalBodySilhouette — Full-body SVG with clickable anatomical regions
• SVGBodyViewer — Per-system SVG diagram viewer

Controls

• ViewBookmark — Save/restore 3D camera positions
• ScreenshotCapture — Capture 3D canvas as image
• PatientModeToggle — Toggle clinical/patient-facing mode

Badges

• ConditionBadge — ICD-10 condition indicator (compact/full)
• NERSuggestionBadge — NER transcription suggestion with accept/dismiss

Hooks

• useAnatomySystems() — Fetch anatomical systems
• useSystemOrgans(systemId) — Fetch organs for a system
• useAllOrgans() — Fetch all organs
• useOrganStructures(fmaId) — Fetch sub-structures for an organ
• useAnatomySearch(query) — Search organs/structures
• usePatientActiveConditions(patientId) — Active ICD-10 conditions
• useBodyProfileHistory(patientId) — Marker history timeline
• useOrganModel(fmaId) — Resolve 3D model availability and path
• useViewBookmarks(fmaId) — Camera bookmark CRUD (localStorage)
• useNERBodySuggestion(text) — NER organ recognition from transcription text

Data

• 82 ICD-10 conditions mapped to anatomical organs (FMA IDs)
• 15 verified 3D models (GLB) with Spanish/English mesh names
• 30 organs with Latin nomenclature (TA2) and Mexican Spanish search terms
• 11 anatomical systems with metadata
• 74 CHOIR body regions with SNOMED CT codes
• 12 SVG anatomical diagrams included in assets/svg/

Provider Config

| Prop | Type | Required | Description | |------|------|----------|-------------| | svgBasePath | string | Yes | Base URL for SVG assets | | modelBasePath | string | Yes | Base URL for GLB 3D models | | apiEndpoints | object | No | API URLs for dynamic data | | fetcher | typeof fetch | No | Custom fetch (auth headers, etc.) | | onNotify | function | No | Toast/notification callback | | locale | 'es' \| 'en' | No | UI language (default: 'es') | | patientMode | boolean | No | Patient-facing mode (default: false) |

Assets

SVG diagrams are included at node_modules/@marxito/clinical-body-profile/assets/svg/. Copy them to your public directory or configure your bundler to serve them.

GLB 3D models are not included. Host them separately and configure modelBasePath.

License

MIT