Stones form in the gallbladder from bile overloaded with cholesterol. Most never cause trouble; the illness depends on where one gets stuck.
Installation
bunx shadcn@4.22.1 add @organui/gallstone-diseaseThis adds gallstone-disease.tsx, the disease's data and component, to your components directory. It is built on the disease viewer and reuses the models of the gallbladder, which install with it.
Usage
import { GallstoneDisease } from "@/components/gallstone-disease"
export function GallstoneDiseaseDemo() {
return <GallstoneDisease />
}Every structure is a finding: affected structures are amber and spared ones muted. Select one, in 3D or in the panel, to read what the disease does there.
Course
Set stage or defaultStage to one of these. Each stage changes which structures are affected and the investigations to expect.
- Colic
"biliary-colic"Biliary colic: pain after fatty meals that settles on its own. Elective laparoscopic cholecystectomy prevents the complications.
Affects 2 structures of the biliary tree.
- Cholecystitis
"cholecystitis"The stone stays stuck and the trapped gallbladder becomes inflamed: constant pain, fever and Murphy's sign.
Affects 2 structures of the biliary tree.
- Cholangitis
"cholangitis"A stone passes into the common bile duct and blocks it. Infected bile backs up into the liver: fever, jaundice and pain (Charcot's triad).
Affects 4 structures of the biliary tree.
- Pancreatitis
"pancreatitis"A small stone lodges where the bile and pancreatic ducts open into the duodenum. Pancreatic enzymes activate inside the gland and digest it.
Affects 4 structures of the biliary tree.
Without Panel
Hide the panel to place the model in your own layout, and choose the scale and stage with props.
Controlled
Drive the stage, scale and selection from your own state, such as a patient's timeline.
API Reference
Import GallstoneDiseaseProps from the same file as GallstoneDisease.
| Prop | Type | Default | Description |
|---|---|---|---|
scale | "gallbladder" | — | Control the scale shown. |
defaultScale | "gallbladder" | "gallbladder" | Choose the scale shown first. |
onScaleChange | (scale: string) => void | — | Receive the scale a reader chooses. |
stage | "biliary-colic" | "cholecystitis" | "cholangitis" | "pancreatitis" | — | Control the stage shown. |
defaultStage | "biliary-colic" | "cholecystitis" | "cholangitis" | "pancreatitis" | "biliary-colic" | Choose the stage shown first. |
onStageChange | (stage: string) => void | — | Receive the stage a reader chooses. |
selectedId | string | null | null | Control the selected structure ID. |
onSelectionChange | (id: string | null) => void | — | Receive selections from the model and the panel. |
panel | boolean | true | Show the stages, scales, findings and investigations beside the model. |
className | string | — | Set the layout of the model and the panel. |
Other props, such as visibility, controls, defaultView and ref, go to the organ viewer.
Models and licences
The component code is MIT. Each model keeps its own licence, and the viewer shows its credit; see Licences before hiding it.
- Biliary tree: BodyParts3D / Anatomography, © The Database Center for Life Science. CC BY-SA 2.1 Japan. Adapted by OrganUI., CC BY-SA 2.1 JP.
Educational, not for diagnosis or clinical decisions. The findings summarise typical disease; individual patients differ.