Disease viewer

The view every OrganUI disease is built on. Describe a condition as findings on any organ model, as this example does for hypertrophic cardiomyopathy; it shows what is affected and spared at each stage and scale, beside a panel with the condition's course and investigations.

Installation

Most apps want a ready-made disease: acute angle-closure glaucoma, acute appendicitis, autoimmune hepatitis, benign prostatic hyperplasia, ectopic pregnancy, gallstone disease, graves' disease, hodgkin lymphoma, ischaemic stroke, kidney stones, lobar pneumonia, melanoma, myocardial infarction, peptic ulcer disease, pituitary adenoma. To describe your own, install the viewer alone.

bunx shadcn@4.22.1 add @organui/disease-viewer

This adds disease-viewer.tsx and disease-model.ts, the disease types and the diseaseModel function, which has no client code so server components can use it too. It installs the organ viewer and shadcn's badge and button.

View registry item JSON

Usage

import type { Disease } from "@/components/disease-model"
import { kidneysModel } from "@/components/kidneys"

export const kidneyStones: Disease = {
  name: "Kidney stones",
  code: "N20.0",
  summary: "Crystals form in the urine and can block the ureter.",
  scales: [
    {
      id: "kidneys",
      label: "Kidneys",
      model: kidneysModel,
      // Structures without a finding are spared.
      findings: {
        "left-ureter": {
          affected: true,
          description: "A stone lodges and the kidney above it swells.",
        },
      },
    },
  ],
  stages: [
    { id: "colic", label: "Renal colic", summary: "Sudden loin-to-groin pain." },
  ],
  investigations: [
    { name: "Urine dipstick", result: "Blood", flag: "abnormal" },
  ],
}

A disease is drawn on the models of organ components, one per scale: a whole organ, and a tissue such as the liver lobule for what happens under the microscope. Findings name structures of that model; a structure without one is spared and keeps its anatomical description. A stage replaces the findings and investigations it lists, so it describes only what changes.

Affected structures share one amber, so a disease of a whole organ still shows, and spared ones a muted tone. Red is kept for critical results. An abnormal investigation is bold with an arrow for high or low, as in the lab results table.

Behaviour

Scale, stage and selection are each controlled or uncontrolled: pass stage with onStageChange to drive the stage from your own timeline, or defaultStage to only choose where it starts. Selecting a structure in 3D shows its finding in the panel, and selecting a finding highlights it in 3D. Spared structures the disease says nothing about fold behind a button, so a whole-body model lists only what matters; selecting one in 3D unfolds them. Changing the scale clears the selection, because each model has its own structures.

diseaseModel(disease, scale, stage) returns the organ model for one scale at one stage, for the anatomy tree or your own list. Pass panel={false} to show only the model.

API Reference

Import DiseaseViewerProps from the same file as DiseaseViewer.

DiseaseViewer props
Prop	Type	Default
`disease`	`Disease` The disease: its scales, stages, findings and investigations.	Required
`scale`	`string` The scale shown, by ID.	—
`defaultScale`	`string` The scale shown first when `scale` is not set. Defaults to the first.	`disease.scales[0]!.id`
`onScaleChange`	`(scale: string) => void` Called with the scale a reader chooses.	—
`stage`	`string` The stage shown, by ID.	—
`defaultStage`	`string` The stage shown first when `stage` is not set. Defaults to the first.	`disease.stages?.[0]?.id ?? ""`
`onStageChange`	`(stage: string) => void` Called with the stage a reader chooses.	—
`selectedId`	`string \| null` The selected structure ID, or null.	—
`onSelectionChange`	`(id: string \| null) => void` Called with the structure a reader selects, or null when they clear it.	—
`panel`	`boolean` Shows the panel with the stages, scales, findings and investigations. Defaults to true.	`true`