OrganUI: 12 примеров медицинских интерфейсов на React

Показывать медицинские и биологические данные обычной таблицей удобно не всегда. Иногда нужно выбрать структуру внутри 3D-модели, сопоставить букву последовательности с пространственным объектом или посмотреть, как меняется изображение при другом диапазоне яркости.

OrganUI предлагает для таких задач исходники React-компонентов: анатомические просмотрщики, молекулярные визуализации, карты тела, сигналы и элементы интерфейсов с клиническими данными. Компоненты добавляются через shadcn CLI и остаются в вашем проекте, где их можно менять под конкретную задачу (репозиторий OrganUI, установка).

Ниже собрана собственная мастерская: десять примеров компонентов и два собранных интерфейса, в каждом есть действие, заметное изменение состояния и исходный код. Это не подборка внешних демо: модели, данные и управление работают прямо на этой странице.

Важно: материал адресован разработчикам. Значения измерений и последовательности в примерах учебные, срезы сгенерированы из геометрических фигур; мастерская не предназначена для диагностики, назначения лечения или работы с данными пациентов.

Что решает OrganUI, а что остаётся приложению

Библиотека помогает с отображением и взаимодействием: вращением модели, выбором структуры, просмотром срезов, разметкой сигнала, таблицами измерений и состояниями проверки текста. Это коллекция компонентов и утилит, а не готовая медицинская информационная система (состав OrganUI).

• Анатомия: модели органов, дерево структур и общий просмотрщик, связывающий выбор и видимость (пример сердца).
• Изображения: последовательности срезов, настройка окна и уровня, масштабирование и чтение поддерживаемого подмножества DICOM (ScanViewer).
• Молекулы и последовательности: просмотр PDB/mmCIF и схематическая ДНК, связанная с последовательностью оснований (MoleculeViewer, DnaHelix).
• Данные и рабочие процессы: ЭКГ, показатели, лабораторные результаты, карты тела и компоненты проверки AI-черновиков (каталог проекта).

Проектирование хранения, прав доступа, интеграций, журналирования и проверки данных нужно делать отдельно. Практический подход: сначала проверить, как компонент вписывается в ваш сценарий, затем определить требования к источнику данных и рабочему процессу.

Живая мастерская: двенадцать сценариев

Выберите пример, выполните задание над рабочей областью и посмотрите на результат под ней. Кнопка «Развернуть» увеличивает мастерскую без перезагрузки текущего примера; кнопка «Начать заново» возвращает выбранную сцену к исходному состоянию.

Сначала открыт лёгкий пример со срезами. 3D-компоненты и файлы моделей подключаются при выборе соответствующей сцены; на слабом устройстве можно начать с таблиц, карты тела или проверки текста.

В блоке «React-код этого примера» доступны копирование, отдельный TSX и общий архив со сценариями, стилями и ресурсами. Для запуска архива нужен Node.js 22 или новее; это исходный React-проект, а не один автономный HTML-файл.

Как использовать в интерфейсе: два собранных экрана

Отдельный просмотрщик показывает возможности компонента, но продукту нужен рабочий процесс. Поэтому в мастерской есть ещё два примера, в которых несколько частей интерфейса связаны общей задачей и состоянием.

Панель исследования: данные, описание, проверка

Откройте «Панель данных», выберите дату и сравните показатели с историей анализов. Затем перейдите к описанию, внесите учебный комментарий, примите его и скачайте согласованный снимок в JSON.

После изменения текста или даты прежнее решение сбрасывается. Это важная часть сценария: статус относится к определённой версии данных и описания, а не просто остаётся зелёным после любого нажатия «Одобрить».

• Один снимок: выбранная дата управляет карточками показателей, таблицей и резюме на этапе проверки.
• Явный следующий шаг: пользователь видит переход от просмотра данных к подготовке описания.
• Контролируемый экспорт: скачать согласованный снимок можно после принятия непустого описания; изменение версии снова блокирует этот путь.

Это прототип исследовательского рабочего места, не карта пациента и не медицинское заключение. На сервер ничего не записывается; AI, авторизация и журнал аудита не подключены.

Пройти сценарий панели исследования

Редактор учебного атласа: 3D, карточка, предпросмотр

Откройте «Редактор атласа», выберите структуру сердца и измените заголовок или учебную подпись. Переключите другую структуру, затем вернитесь: каждая карточка хранится отдельно по ID выбранного объекта.

В режиме «Вид читателя» показывается готовая карточка без полей редактирования. Экспорт включает изменённые тексты, идентификаторы и атрибуцию модели, чтобы было видно, какие данные можно передать в собственную CMS.

• Связь представлений: клик по 3D и обычный список открывают один и тот же редактор карточки.
• Работа с контентом: изменения относятся к выбранной структуре, а не к единому текстовому полю на всю модель.
• Проверка результата: режим читателя позволяет оценить карточку до выгрузки; сам GLB в JSON не дублируется.

Такой шаблон можно адаптировать под учебный каталог, интерактивный справочник или редактор аннотаций. Здесь тексты вводятся вручную и живут только в памяти сцены; для постоянного хранения понадобится отдельная интеграция.

Собрать карточки в редакторе атласа

Анатомия и молекулы: четыре осмысленных взаимодействия

Сердце: выбор структуры связан с деревом

Нажмите на часть модели или выберите её в списке справа. Под просмотрщиком появится имя и ID структуры; значок видимости позволит скрыть её, а выбор ракурса поможет посмотреть с другой стороны.

Смысл сценария не в самом вращении. Один выбор одновременно управляет моделью и информационным блоком, поэтому такой шаблон можно использовать как основу учебного атласа или справочника. OrganUI поддерживает это через selectedId, onSelectionChange и карту visibility (API компонента сердца).

Открыть сердце в мастерской

Мозг: разбор сложной модели по структурам

Выберите структуру в дереве, отключите видимость соседних групп и сравните результат с исходным видом. Выбор и скрытие здесь независимы: можно оставить структуру выбранной, даже когда она скрыта, и явно сообщить об этом пользователю.

В мастерской используется модель BodyParts3D, подготовленная OrganUI; английские имена структур сохранены, чтобы не расходиться с исходными идентификаторами. Происхождение, группировка сеток и преобразования описаны в уведомлении к модели (атрибуция модели мозга).

Разобрать модель мозга

Молекула: меняется представление, но не данные

Переключите ленты, шары со связями и сферы. Затем выберите остаток в последовательности: его идентификатор появится под моделью, а выделение останется связано с тем же набором данных.

Для примера взят крамбин, запись PDB 1CRN; файл и уведомление о происхождении включены в ресурсы мастерской. Сам MoleculeViewer умеет принимать PDB и mmCIF, но здесь показана именно PDB-структура, а не отдельное демо каждого формата (MoleculeViewer, структура 1CRN).

Сравнить представления молекулы

ДНК: последовательность управляет схемой

Введите от 4 до 40 букв A, C, G и T и нажмите «Построить». После выбора пары оснований появятся её номер, обе буквы и количество связей в схематическом представлении; некорректный ввод не заменит предыдущую модель.

Это пример синхронизации текстового ввода, 3D и выбранного элемента. DnaHelix строит процедурную схему по последовательности, а не предсказывает реальную молекулярную структуру или результаты генетического исследования (документация DnaHelix).

Построить учебную ДНК

Срезы и ЭКГ: управляемое чтение данных

Просмотр срезов и изменение контраста

Начните со среза в середине фантома и переключите окно «Мозг» на «Кости». Числа ширины и центра окна изменятся вместе с изображением; затем передвиньте ползунок, чтобы увидеть другой срез той же серии.

В этом примере используется createHeadPhantom: синтетический набор, а не КТ пациента. Сам ScanViewer может работать с массивами пикселей или изображениями по URL; оконное преобразование определяет, какой диапазон значений отображается от чёрного к белому (устройство просмотрщика).

В дополнительном блоке можно скачать наш синтетический DICOM и снова открыть его в просмотрщике. Чтение выполняется кодом примера в браузере; предусмотрены ограничение объёма и сообщение об ошибке, а предыдущая серия при неудаче остаётся на месте.

Поддержка DICOM ограничена: однокадровые монохромные файлы Part 10 без сжатия, implicit или explicit little-endian. Сжатые, цветные и многокадровые изображения этим парсером не поддерживаются; для них нужен другой стек обработки, а не обещание «работает с любым DICOM» (ограничения парсера).

Изменить срез и контраст

ЭКГ: частота генератора и усиление

Сравните 50 и 110 циклов в минуту: расстояние между пиками станет другим. После этого переключите усиление с 5 на 20 мм/мВ и обратите внимание на высоту кривой; подписи волн можно отключить.

Сигнал сгенерирован функцией syntheticEcg, не записан с человека и не моделирует заболевание. Компонент показывает запись, масштаб и аннотации; сам факт наличия кривой и подписей не означает диагностику или проверенную клиническую интерпретацию (EcgTrace).

Сравнить настройки сигнала

Данные и формы: ещё четыре прикладных сценария

Анализы: результат рядом с историей

Переключите первую и последнюю даты измерений. Значения, отметки диапазона и мини-графики обновятся вместе; отдельной кнопкой можно проверить состояние без результатов.

Числа и диапазоны в мастерской придуманы для демонстрации UI, не являются универсальными нормами и не относятся к пациенту. Компонент умеет отображать переданную историю и флаги результатов; ответственность за корректность диапазонов остаётся у источника данных и приложения (LabResultsTable).

Сравнить учебные анализы

Показатели: отсутствие данных не равно нулю

В наборе A заполнены все значения, в наборе B они другие, а в наборе C часть измерений отсутствует. Сравните, как интерфейс показывает пропуски, вместо того чтобы создавать ложное впечатление нулевого результата.

Переключение ручное: это не прямой эфир и не подключение к устройству. Встроенные диапазоны VitalSigns используются здесь только как конфигурация примера, а не как клинический критерий для конкретного человека (VitalSigns).

Проверить значения и пропуски

Карта тела: данные формы, а не иллюстрация

Выберите области спереди, переключитесь на вид сзади и добавьте ещё несколько. Те же области можно выбирать обычным списком, удалять по одной и выгружать вместе с учебной заметкой в JSON.

Практическая идея: SVG-карта и список управляют одним массивом идентификаторов. BodyMap предоставляет управляемый выбор областей; хранение и обработка формы в реальном продукте проектируются отдельно (BodyMap).

Собрать отметки на карте тела

Проверка текста: решение и обязательная причина

Запросите изменения или отклоните черновик: пока причина не введена, подтвердить такое решение нельзя. После сохранения решения появляется новый статус и комментарий; отмена возвращает состояние ожидания.

В мастерской используется фиксированный учебный текст, без подключения AI, врача, электронной подписи или серверной записи. ClinicianReview даёт элементы процесса согласования, но не выполняет медицинскую проверку за человека (ClinicianReview).

Пройти процесс проверки черновика

Как добавить OrganUI в React-проект

На момент подготовки материала документация требует React 19 и Tailwind CSS 4, а проект должен быть инициализирован через shadcn. Поддерживаются стили на Base UI и Radix; для Radix важно явно настроить адрес реестра со стилем (актуальная инструкция установки).

# Для нового проекта
npx shadcn@4.22.1 init --preset base-nova

# Добавить выбранные компоненты
npx shadcn@4.22.1 add @organui/heart @organui/anatomy-tree
npx shadcn@4.22.1 add @organui/scan-viewer @organui/lab-results

CLI добавляет исходники и зависимости выбранных компонентов. Это удобно для адаптации, но обновления нужно просматривать как изменения собственного кода: повторное добавление компонента не должно незаметно затереть ваши правки (модель установки и обновления).

Для явного подключения реестра используется такая запись в components.json. Перед добавлением в существующий проект сравните её с текущей конфигурацией, не заменяйте весь файл одним фрагментом (настройка namespace).

{
  "registries": {
    "@organui": "https://organui.com/r/styles/{style}/{name}.json"
  }
}

Минимальное подключение сердца выглядит так. Название экспортируемого компонента и путь ниже соответствуют стандартной структуре установки (пример Heart).

import { Heart } from "@/components/heart";

export function HeartDemo() {
  return <Heart />;
}

Главный приём: единое состояние для разных представлений

Для прикладного интерфейса полезнее связать модель с данными, чем добавить ещё один эффект. В примере сердца выбор из 3D и выбор из дерева записываются в один selectedId; отдельно хранится видимость структур.

Схема связи опирается на управляемые параметры Heart и AnatomyTree. Компоненты используют общие идентификаторы, поэтому согласованное состояние не требует поиска объектов по тексту подписи (управляемый выбор и дерево).

const [selectedId, setSelectedId] = useState<string | null>(null);
const [visibility, setVisibility] = useState<Record<string, boolean>>({});

<Heart
  selectedId={selectedId}
  onSelectionChange={setSelectedId}
  visibility={visibility}
/>

<AnatomyTree
  data={organAnatomyNodes(heartModel)}
  selectedId={selectedId}
  onSelectionChange={setSelectedId}
  visibility={visibility}
  onVisibilityChange={setVisibility}
/>

Это фрагмент архитектуры, не полный файл приложения. Полный вариант с импортами, состояниями, ракурсами и локальными ресурсами доступен в мастерской; аналогично устроены выбор среза, последовательности и областей тела.

Ресурсы, производительность и лицензии

В этой мастерской тяжёлые 3D-сцены подключаются по запросу, а модели сердца, мозга и PDB-файл размещаются вместе с приложением. Самостоятельное размещение GLB поддерживается параметром src, но не отменяет условий лицензии модели (локальное размещение модели).

MIT относится к коду, а не автоматически ко всем ресурсам. В каталоге есть модели с CC BY, CC BY-SA и CC0; для каждой нужно сохранять соответствующие сведения об авторстве и учитывать условия распространения адаптированной модели (лицензии OrganUI).

Используемые здесь сердце и мозг распространяются OrganUI с атрибуцией BodyParts3D и лицензией CC BY 4.0. Исходные уведомления о преобразованиях сохранены рядом с файлами; в мастерской геометрия не менялась (сердце, мозг).

• Загрузка: показывайте состояние ожидания и понятную ошибку, не оставляйте пустой прямоугольник вместо модели.
• Мобильный экран: разрешайте перенос панели управления и локальную прокрутку таблицы или сигнала; не сжимайте весь интерфейс до нечитаемых размеров.
• Доступность: оставляйте альтернативу клику по 3D: дерево, список, подпись выбранного объекта и управление с клавиатуры.
• Личные данные: не используйте произвольные файлы пациентов как тестовые примеры на публичном сайте. Для проверки интерфейса безопаснее синтетический или специально подготовленный открытый набор.

Когда библиотеку стоит попробовать

OrganUI имеет смысл оценить, если вам нужен React-прототип с анатомией, научными данными или медицинскими сценариями отображения, а исходники компонентов хочется контролировать в своём проекте. При этом заявленные возможности просмотрщиков и ограничения форматов нужно сверять с документацией конкретного компонента (проект OrganUI, пример ограничений ScanViewer).

Начать лучше с одного рабочего сценария: выделение структуры и карточка, измерение и история, область тела и запись формы. Если после действий понятно, какие данные изменились и как это помогает пользователю, компонент действительно выполняет задачу, а не просто украшает страницу.

Вернуться к мастерской или посмотреть исходный проект на GitHub. Все двенадцать сценариев выше можно проверить до выбора инструмента для своего приложения.