# Heart Atlas. Интерактив в статьях

Дата: 12.10.2026
Статус: черновик
Связано: `docs/plans/2026-10-11-article-visuals.md` (схемы `<Diagram>`), `docs/plans/2026-10-12-disease-signs-3d.md` (признаки болезни на 3D-модели), `docs/plans/2026-10-12-home-redesign.md` (настройка анимации)

## Зачем

Никита просил больше интерактива и визуала в статьях: схемы, анимации, ЭКГ и 3D. Статьи пишет отдельный поток; этот поток добавляет интерактив в статьи, которые уже в `main`, и в каждую новую после её слияния.

## Что есть сейчас

Аудит `main` на 12.10.2026 (24 статьи, ru и en одинаковы по составу):

| Статьи | Схема `<Diagram>` | ЭКГ (часы сердца) | 3D-модель |
|---|---|---|---|
| ФП, АГ, ХСН, ИБС, аортальный стеноз, ДМПП, ДКМП | есть | пресет | признаки болезни |
| ГКМП | есть | нет | признаки болезни |
| Митральная регургитация, ДМЖП, ТЭЛА, инфекционный эндокардит, перикардит, миокардит | есть | нет | нет |
| Строение сердца, камеры, клапаны, коронарное кровообращение, проводящая система | есть | нет | нет |
| Сердечный цикл | нет | монитор | нет |
| ЭКГ | нет | монитор | нет |
| ЭхоКГ, холтер, натрийуретические пептиды | есть | нет | нет |

Меньше всего интерактива у шести болезней без ЭКГ и 3D, у пяти статей анатомии и у трёх статей диагностики: в них одна схема.

## Подход

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

### Этап A. Готовые блоки

1. **3D-модель в статьях анатомии.** `<HeartModel highlight={[…]} />` с подсветкой структур, о которых статья: камеры, клапаны, коронарные артерии и вены, узлы и пучки проводящей системы (в модели они схематичные, вьюер об этом говорит), перегородки и крупные сосуды для «Строения сердца». В «Сердечном цикле» модель бьётся вместе с ЭКГ-монитором статьи (`cycle="page"`).
2. **3D-модель с подсветкой в болезнях без признаков на модели.** Подсвечивается только то место, которое статья называет: ДМЖП — межжелудочковая перегородка; митральная регургитация — митральный клапан; ТЭЛА — лёгочный ствол и правый желудочек; инфекционный эндокардит — клапаны. Перикардит и миокардит без модели: перикарда в ней нет, а подсветка всего миокарда ничего не объясняет.
3. **Ссылки из текста на модель.** Новый MDX-компонент `<Structure id="mitral-valve">митральный клапан</Structure>`: слово в тексте становится кнопкой, которая подсвечивает структуру на 3D-модели этой страницы (событие `heart-atlas:highlight`, его уже понимает вьюер). Без модели на странице или без JavaScript это обычный текст. Текст статьи не меняется, меняется только разметка вокруг уже написанных слов.

Модель грузится по клику (`loadOn="click"`), как в статьях о болезнях, поэтому вес страницы до клика растёт только на оболочку вьюера.

### Этап B. Новые блоки

4. **ЭКГ-пресеты для болезней без пресета.** Кандидаты: перикардит (диффузный подъём ST), ТЭЛА (синусовая тахикардия), ГКМП. Каждый параметр берётся из источника статьи или помечается `assumption`, как в `packages/heart-clock/src/presets.ts`. Пакет `heart-clock` общий, поэтому изменение согласуется через координатора; отдельная короткая спека с таблицей «параметр — источник».
5. **«Проверь себя».** Компонент квиза и схему данных делает поток приложения (этап 6, квизы и учебные треки). Этот поток вставляет квизы в статьи, когда компонент будет в `main`. Вопросы только по тексту статьи, без вопросов про лечение и дозы, и проходят ту же независимую проверку, что и текст.
6. **Интерактив в диагностике.** Отдельные решения после этапа A: например, подписи зубцов на живой ЭКГ по наведению или фокусу и шкала холтера с событием. Каждое оформляется дополнением к этой спеке до кода.

## Дополнение: 3D-модель в статьях диагностики (2026-10-13)

Решение по пункту 6 для блока из этапа A. В статью диагностики `<HeartModel highlight>` ставится, только если статья сама называет место в сердце в предложении со своим `<Cite>`, и подсвечивается только оно. Модель стоит в конце раздела «Что показывает», вне блоков `<Patient>` и `<Student>`.

| Статья | Подсветка | На чём держится |
|---|---|---|
| Натрийуретические пептиды | оба желудочка | главный источник BNP — клетки желудочков (источник 3 статьи) |
| ЭхоКГ | четыре камеры | на четырёхкамерной позиции видны все четыре камеры, стенки и перегородки каждой камеры (источник 5) |
| ЭКГ | синусовый узел, оба предсердия, оба желудочка | импульс начинается в синусовом узле в правом предсердии; зубец P — предсердия, QRS — желудочки (источник 1) |

Холтер без модели: статья о записи ритма во времени и не называет места в сердце. Миокардит и перикардит по-прежнему без модели (пункт 2).

e2e: эти три страницы входят в проверку «подсвечивает место, которое называет статья».

## Дополнение: статьи этапа 10 (2026-10-13)

- Синдром Эйзенменгера: модель с подсветкой межжелудочковой перегородки, лёгочного ствола и правого желудочка, в конце раздела «Почему возникает», как в других статьях о болезнях. Статья называет дефект межжелудочковой перегородки самым частым пороком, высокое давление в лёгочной артерии и недостаточность правого желудочка на поздних стадиях (перегородка — источники 1, 2, 5; лёгочная артерия — 1, 2; правый желудочек — 1, 3, 5). Дефекта на модели нет, подсвечено только место, как у ДМЖП.
- Тампонада сердца без модели: перикарда в базовой модели нет (как у перикардита, пункт 2). ЭКГ-пресета нет: часы могут уменьшить амплитуду, но не умеют чередовать амплитуду QRS от удара к удару (электрическую альтернацию).
- Синдром Марфана и стеноз клапана лёгочной артерии: модель уже стоит в статьях.
- Все четыре статьи получают квиз.

## Дополнение: статьи этапа 11 (2026-10-13)

- Атриовентрикулярный септальный дефект: модель с подсветкой межпредсердной и межжелудочковой перегородок, митрального и трёхстворчатого клапанов, в конце раздела «Почему возникает». Статья описывает дефект перегородочной ткани над и под общим атриовентрикулярным клапаном: дефект между предсердиями и дефект между желудочками, первичный ДМПП и приточный ДМЖП (перегородки — источники 1, 3); эндокардиальные подушечки должны образовать два клапана, трёхстворчатый и митральный, а хирург разделяет общий клапан на правый и левый (клапаны — источник 1). Общего клапана на модели нет, подсвечены места, как у ДМЖП. `<Structure>`: «митрального клапана» в разделе для студентов (в en — «mitral valve» в разделе для пациентов).
- Двустворчатый аортальный клапан: модель с подсветкой аортального клапана и аорты, в конце раздела «Почему возникает». У аортального клапана две створки вместо трёх (источники 7, 8); у многих людей с ДАК расширяется аорта, чаще всего восходящая (источники 1, 7). Двух створок на модели нет, подсвечено только место. `<Structure>`: «аортальный клапан», «аорта».
- Миксома сердца: модель уже стоит в статье (левое предсердие, митральный клапан); добавлена разметка `<Structure>` для «левое предсердие» (источники 4, 5, 6) и «митральный клапан» (источник 5).
- Констриктивный перикардит без модели: перикарда в базовой модели нет (как у перикардита, пункт 2, и тампонады сердца).
- Все четыре статьи получают квиз.

## Правила для всех блоков

- Медицинский факт в интерактиве берётся из источников статьи и не добавляет новых утверждений. Подпись с фактом пишется в MDX и несёт `<Cite>`.
- Любая анимация слушается настройки движения сайта (`html[data-motion]`: полная, спокойная, стоп) и `prefers-reduced-motion`; при «Стоп» смысл передают подписи и стрелки.
- Работает с клавиатуры, у элементов есть доступное имя, контраст не ниже 4.5:1, axe без нарушений.
- Строки интерфейса в `messages/<locale>.json`, ключи сначала в `en.json`; CSS только логические свойства; ссылки через `BASE_URL`.
- Тяжёлый код только в островах, которые грузятся на нужных страницах. Бюджет JS в Lighthouse не растёт для страниц без нового блока.

## Новые статьи

Когда поток статей сливает новую статью, этот поток в отдельном PR решает, что ей подходит из готовых блоков (3D с подсветкой, `<Structure>`, ЭКГ-пресет, квиз), и добавляет это в ru и en.

## Проверки

- Unit: `<Structure>` рендерится кнопкой с доступным именем и шлёт событие с id; неизвестный id структуры роняет сборку; `<HeartModel>` в статье с неизвестной структурой роняет сборку.
- e2e: на статье анатомии и болезни модель грузится по клику и подсвечивает нужные структуры; кнопка `<Structure>` подсвечивает структуру; без JavaScript текст читается; axe на изменённых страницах.
- e2e на реальных статьях пропускаются при `HA_TEST_CONTENT=1`, как `disease-model.spec.ts`.

## Разбиение на PR

| PR | Содержание | Готово, когда |
|---|---|---|
| 1 | Эта спека | Спека в `main` |
| 2 | 3D-модель с подсветкой в шести статьях анатомии | Модель в статьях, e2e и axe зелёные |
| 3 | 3D-модель с подсветкой в ДМЖП, митральной регургитации, ТЭЛА, эндокардите | Модель в четырёх статьях |
| 4 | Компонент `<Structure>` и разметка в статьях с моделью | Слова в тексте подсвечивают модель |
| 5 | Спека и ЭКГ-пресеты для болезней без пресета | Через координатора, пакет общий |
| 6 | Квизы в статьях, когда компонент этапа 6 в `main` | Вопросы прошли проверку по источникам |