Skip to content
organui
GitHub repository, 214 stars

Melanoma

A cancer of melanocytes, the pigment cells at the base of the epidermis. How deep it has grown, its Breslow thickness, predicts survival better than anything else.

ICD-10 C43On the skin4 stages

Installation

bunx shadcn@4.22.1 add @organui/melanoma

This adds melanoma.tsx, the disease's data and component, to your components directory. It is built on the disease viewer and reuses the models of the skin, which install with it.

View registry item JSON

Usage

import { Melanoma } from "@/components/melanoma"

export function MelanomaDemo() {
  return <Melanoma />
}

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.

  1. In situ "in-situ"

    Confined to the epidermis, so not yet invasive, and coded D03 rather than C43. Wide local excision with a 5 mm margin cures it.

    Affects 1 structure of the skin.

  2. Thin "thin"

    Breslow thickness up to 1 mm: it has crossed into the papillary dermis and started growing down. Five-year survival is about 99%.

    Affects 2 structures of the skin.

  3. Thick "thick"

    Breslow thickness over 2 mm, into the reticular dermis. A sentinel node biopsy finds out whether it has reached the lymph nodes.

    Affects 3 structures of the skin.

  4. Metastatic "metastatic"

    Through the dermis into fat and vessels, and spread to distant organs, most often the lungs, liver and brain. Immunotherapy has transformed survival.

    Affects 5 structures of the skin.

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 MelanomaProps from the same file as Melanoma.

Melanoma props
PropTypeDefaultDescription
scale"skin"—Control the scale shown.
defaultScale"skin""skin"Choose the scale shown first.
onScaleChange(scale: string) => void—Receive the scale a reader chooses.
stage"in-situ" | "thin" | "thick" | "metastatic"—Control the stage shown.
defaultStage"in-situ" | "thin" | "thick" | "metastatic""in-situ"Choose the stage shown first.
onStageChange(stage: string) => void—Receive the stage a reader chooses.
selectedIdstring | nullnullControl the selected structure ID.
onSelectionChange(id: string | null) => void—Receive selections from the model and the panel.
panelbooleantrueShow the stages, scales, findings and investigations beside the model.
classNamestring—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.

  • Skin: OrganUI Skin schematic model, dedicated to the public domain under CC0 1.0, CC0 1.0.

Educational, not for diagnosis or clinical decisions. The findings summarise typical disease; individual patients differ.