Визуализация патиентской медкарты во времени

Как индустрия и академическая литература отображают патиентские медицинские записи во времени. Это словарь паттернов, чтобы у нас был общий язык для собственного timeline page (см. [[../product/timeline-page-design]]).

Контекст

У нас на горизонте — timeline-страница для /health view, где собрано всё что произошло с пациентом во времени: загрузки документов, лабораторные результаты, диагнозы, медикаменты, и (специфично для нас) версии AI-сводки через Composition.meta.versionId. Каждый AI-run = новое событие «сводка обновилась», на которое можно кликнуть и увидеть snapshot той генерации.

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

Зачем смотреть на чужие реализации

Patient-record visualization — давнее поле HCI-исследований (с середины 1990-х). LifeLines из университета Maryland (Plaisant, Shneiderman) стало foundational paper: оттуда происходит большая часть таксономии которую и индустрия, и последующие академические работы используют до сих пор. Поэтому смотрим — это базовая литература для любого решения в этом пространстве, не маргинальные эксперименты.

Индустриальные продукты (Epic, Apple, OpenMRS, Athenahealth) показывают живые компромиссы: что работает в production, какой UX выживает у миллионов пользователей.

Industry: продукты

Epic Storyboard

Persistent боковая панель (НЕ timeline в строгом смысле) — постоянный summary текущего контекста пациента, всегда виден в Hyperspace интерфейсе врача. Не axis-based, а snapshot-based: аллергии, активные назначения, текущие проблемы из problem list, демография — собраны в одну колонку слева. Hover-to-preview для быстрого детального просмотра без ухода с текущей вкладки¹.

Не наш паттерн (мы строим timeline, не sidebar), но полезен как анти-пример: «вертикальная колонка слева» как UI-приём ≠ «вертикальный timeline» как концепт. Storyboard показывает текущее состояние, не хронологию.

Carry-over: для хронологии у Epic есть отдельный экран — Chart Review (вкладки по типам данных: Encounters / Labs / Imaging / Procedures / Notes). Стоит посмотреть как именно Chart Review устроен — это второй ортогональный паттерн от того же вендора. Нужно WebSearch с конкретным запросом «Epic Chart Review timeline UI».

Apple Health Records

Реально существующая фича на iPhone начиная с iOS 11.3 (2018 год)². Агрегирует FHIR-данные из больниц и клиник в США (через интеграцию с провайдерами): аллергии, состояния (Conditions), вакцинации, лабораторные результаты, медикаменты, процедуры, vitals. По стандарту HL7 FHIR, не proprietary³.

UX — вертикальный chronological feed с time-grouped headers (Today / This Week / This Month / Older). Consumer-friendly, без визуальной дифференциации между категориями (всё в одном вертикальном scroll).

MyChart (Epic patient portal)

Health Summary — ближе к document-style чем timeline. Test results, immunizations, medications, visit summaries в табличных представлениях с фильтрами по типу. Timeline присутствует только в Past Visits view (по visit-у), не как primary navigation.⁴

OpenMRS Patient Chart (O3)

Visit-grouped view: каждый encounter принадлежит visit-контейнеру (start time + end time). Patient dashboard показывает Visits tab с list-видом всех visits. Отдельный Patient Data Based Timeline Module существует, но как add-on. O3 frontend модульный (openmrs-esm-patient-chart) — каждый widget timeline можно конфигурировать отдельно⁵.

Industry: академические foundations

LifeLines (Plaisant, Shneiderman, 1996)

Foundational paper по visualisation патиентских записей. One-screen overview через горизонтальную ось времени⁶:

• Линии (горизонтальные) — длительности: medical problems, госпитализации, медикаменты
• Иконки — точечные события: physician consultations, progress notes, тесты
• Цвет + толщина — отношения между событиями или significance (более толстая линия = более важная)
• Semantic zoom + фильтры — фокус на части информации, больше деталей on-demand

Каноническое разделение «duration vs point event» из этой работы 1996 года всё ещё применяется в современных продуктах (Apple Health timeline, OpenMRS visits) и параллельно проявляется в дизайне FHIR-ресурсов.

Откуда берётся разделение «длительности vs точки»

Это не следствие LifeLines в строгом смысле — обе модели (LifeLines visualization + FHIR resource design) независимо отражают природу медицинских данных: измерения происходят в момент, состояния тянутся во времени.

В FHIR это не enforced на уровне resource type, а через выбор внутри effective[X] choice:

Ресурс	Что обычно выбирают	Семантика
Observation	effectiveDateTime (точка)	измерение в момент T
Condition	onsetDateTime + abatementDateTime	состояние с началом и концом
MedicationStatement	effectivePeriod	приём — длительность
Procedure	performedDateTime или performedPeriod	оба варианта частые
DiagnosticReport	effectiveDateTime	момент когда лаборатория сделала тест

Поэтому split — emergent (выходит сам собой), а не нормативный. У одного и того же ресурса (например Observation) может быть и effectiveDateTime (одиночное измерение), и effectivePeriod (24-hour urine collection). Конкретное использование решается на инстанс-уровне.

Для timeline это важно: на одном экране у нас параллельно живут point-events (иконки) и duration-bars (полосы). Mixed-rendering обязательно.

LifeLines2 (продолжение, 2008+)

Multi-patient comparison + ARF framework: Align (выровнять записи разных пациентов по common event типа «initial diagnosis»), Rank (отсортировать по metric), Filter (отфильтровать по conditions). Не наш use case (single-patient view), но pattern Align-Rank-Filter применим к single patient versions: align по типу события, rank по времени, filter по category⁷.

EHR TimeBar (Holt, 2009)

Interactive design proposal (не deployed продукт): горизонтальная полоса времени снизу + колонка иконок справа, соединённых вертикальными линиями (анкоры по дате)⁸.

Особенности:

• Color-coding per category (например purple для consults: generic / cardiology / pulmonary / surgical)
• Date labels минимизированы — вертикальные линии делают позицию очевидной
• Hide/show toggles per category (показать только labs)
• Time-scale switcher — 3 года / 1 год / 6 месяцев
• Compare mode — multi-file viewing одновременно

Не реализован в production-продукте, но шаблон полезен как inventory of features.

Pattern taxonomy

«Ось» в этой главе — измерение (axis), по которому продукты различаются. Например, ось «orientation» — это вопрос «горизонтальный layout или вертикальный»; разные продукты дают разные ответы. Ниже 5 осей которые мы вынесли из survey’я.

Ось 1: ориентация

Ориентация	Кому подходит	Примеры
Горизонтальная ось	Desktop, длинные durations + много параллельных дорожек (lanes)	LifeLines, TimeBar
Вертикальная ось	Mobile-first, узкие экраны, scroll естественен	Apple Health, modern patient apps
Vertical sidebar	Snapshot контекста (НЕ timeline)	Epic Storyboard

Вертикальная предпочтительнее для consumer-facing patient view (унаследовано от mobile). Горизонтальная лучше для doctor view с многими параллельными категориями.

Ось 2: кодирование событий

Способ	Что обозначает	На каких ресурсах
Точечная иконка	Событие в момент T	Observation (lab), DiagnosticReport, document upload, AI run
Линия (длительность)	Период с начала до конца	Condition (хроника), MedicationStatement, Procedure (длительный)
Цвет	Category или severity	Все ресурсы — по [[fhir-resource-categories|Resource.category]]
Толщина / размер	Significance / criticality	Triage codes, severity flags

«Длительность vs точка» — основной split, видимый в LifeLines, повторяется везде. У нас естественно мапится: Observation / DocumentReference / Composition PUT — точки; Condition / MedicationStatement / Procedure — длительности.

Ось 3: группировка

Способ	Что это	Примеры
By visit / encounter	Каждый clinical visit = контейнер событий	OpenMRS, Epic Chart Review
By category (swim lanes)	Параллельные дорожки per category	LifeLines, TimeBar
By date (chronological feed)	Один stream, отсортированный по времени	Apple Health Records
Hybrid	Главный chronological + categorized side-views	MyChart

Для нашего случая «by category» наиболее естественен — иконки per Resource.category сразу дают группировку. «By visit» неприменим, потому что у нас нет concept’а визита (мы document-driven, не encounter-driven).

Ось 4: плотность

Длинная история = много событий на одной оси. Решения как переключаться в зависимости от плотности:

Приём	Что делает	Пример
Semantic zoom	На разных уровнях zoom — разная детализация	LifeLines: общий обзор → отдельные параметры в развёртке
Time-scale switcher	Кнопки 3y / 1y / 6m / 1m	TimeBar
Категориальные toggles	Показать только labs / только imaging	TimeBar
Time-grouped headers	Today / This Week / This Month / Older	Apple Health
Filtering	По диапазону дат, источнику, категории	Apple Health, MyChart

Для нашего timeline’а актуальные приёмы — time-grouped headers (consumer-friendly) и категориальные toggles. Semantic zoom — отложить на v2 (сложнее в реализации).

Ось 5: навигация по версиям

Специфично для AI-generated сводок (наш случай с Composition.meta.versionId 1→2→3):

• FHIR _history endpoint — стандартный механизм. GET Composition/<id>/_history возвращает Bundle всех версий, _history/<v> — конкретный snapshot⁹¹⁰
• Per-version snapshot view — старая версия отображается как frozen snapshot (read-only)
• Audit trail UI — past versions for audit (FHIR spec говорит «only available for audit/integrity purposes»)

Industry-стандартного pattern для отображения этого в timeline нет. Versioning history обычно проявляется как отдельный «Audit log» tab или «Document history» drawer, не интегрируется в clinical timeline. У нас есть возможность сделать это first-class: «Composition v2 created» = событие на timeline, click → snapshot view той генерации.

Связанные решения

• [[../product/timeline-page-design]] — конкретный design нашей страницы (vertical, two views: clinical + system, multi-date документ → N timepoint в clinical и 1 событие ingestion в system, и т.д.)
• [[../product/uploaded-document-types-supported]] — какие категории документов отображать в timeline
• [[../domain/category-coverage]] (TBD) — какие иконки берём из Resource.category и какие gap’ы закрываем
• [[../technical/historical-flag-removal]] — удаление dead-letter historical флага (был задумкой различать historical vs current data на timeline, но никогда не использовался)

Открытые вопросы

• Versioning UX: что именно показывать когда юзер кликает на «Composition v3 created» событие? Варианты — модал с diff между v3 и v2, full snapshot view (показать сводку как она была в момент v3), side-by-side comparison двух версий. Зависит от того, важнее ли «что изменилось» (diff) или «как было раньше» (snapshot)
• Двухосевая визуализация в industry — почти не встречается. Большинство продуктов — single-axis с фильтрами / табами. Epic делит через отдельные экраны (Storyboard = current state, Chart Review = chronology); у Apple Health одна ось без system-time. Наш случай с двумя view (clinical / system) — нестандартный, можно рассматривать как контрибьюшн UX
• Иконка-маппинг — отдельная UX-задача, нужен mapping table (laboratory → 🧪 / vital-signs → ❤️ и т.д.). Не в scope этой страницы

Связано

• [[fhir-resource-categories]] — категории, по которым groupируем events на timeline
• [[uploaded-document-types]] — типы документов, каждый = свой icon/category
• [[fhir-document-reference]] — ресурс, представляющий загрузку документа на timeline
• [[fhir-composition]] — ресурс AI-сводки, его versionId — основа versioning navigation
• [[fhir-condition]] / [[fhir-allergy-intolerance]] / [[fhir-medication-statement]] / [[fhir-procedure]] — события из medical-context на timeline
• [[../technical/health-report-versioning-model]] — где принято решение про PUT (canonical IDs, versionId 1→2→3)

Сноски

1. Epic Storyboard — https://www.epic.com/software/storyboard. ArhFoundation guide — https://www.arhfoundation.org/what-is-storyboard-in-epic. UI Health Care Epic Education — https://epicsupport.sites.uiowa.edu/epic-resources/storyboard ↩

2. Apple Newsroom (Jan 2018) — https://www.apple.com/newsroom/2018/01/apple-announces-effortless-solution-bringing-health-records-to-iPhone/ ↩

3. Apple Support — viewing health records — https://support.apple.com/en-us/105016 ↩

4. MyChart (Epic patient portal) — https://www.mychart.org/ ↩

5. OpenMRS Patient Dashboard — https://guide.openmrs.org/collecting-data/the-patient-dashboard-in-depth/. O3 chart repo — https://github.com/openmrs/openmrs-esm-patient-chart ↩

6. LifeLines (Plaisant et al, 1996) — http://www.cs.umd.edu/projects/hcil/lifelines/. PDF: https://www.cs.umd.edu/~ben/papers/Plaisant1996LifeLines.pdf. PubMed: https://pubmed.ncbi.nlm.nih.gov/9929185/ ↩

7. LifeLines2 (Wang et al, 2008+) — http://www.cs.umd.edu/hcil/lifelines2/ ↩

8. EHR TimeBar (Holt, 2009) — https://thehealthcareblog.com/blog/2009/06/26/the-ehr-timebar-a-new-visual-interface-design/ ↩

9. Azure Health Data Services FHIR — versioning policy и history — https://learn.microsoft.com/en-us/azure/healthcare-apis/fhir/fhir-versioning-policy-and-history-management ↩

10. Google Healthcare API fhir.history endpoint — https://cloud.google.com/healthcare-api/docs/reference/rest/v1/projects.locations.datasets.fhirStores.fhir/history ↩