@tekkare/romulus 0.1.254 → 0.1.256

package/layer/app/components/oip-patients/PatientFiche.vue

@@ -0,0 +1,732 @@
+<!--
+  Vue de ressource `PatientProfile` : la fiche d'un patient de la litterature,
+  ou d'un groupe de patients, telle qu'OIP Case Atlas la montre. Sa page
+  /patients/[id] la monte, le tiroir d'un projet aussi, dans n'importe quelle
+  app du portail.
+
+  Reprend les onglets « Summary » et « Publications » de la fiche Discovery
+  (/omics/patients/[id]). Les onglets Pathologie et Genes lisaient les index
+  maladies et genes, que l'app n'interroge pas. L'onglet ouvert est donne par
+  `tab` et remonte par `update:tab` : la page l'ecrit dans son URL, le tiroir
+  le garde pour lui.
+
+  `id` : le `record_id` (« 41698193:p1 », celui de la page) ou l'`_id` (celui
+  qu'un projet range). La fiche remonte son document par `record` : la page
+  en tire son titre d'onglet et ses alertes.
+-->
+<template>
+  <div class="oip-patients">
+    <RmPageHeader
+      :have-return="!!backTo"
+      :back-to="backTo"
+      :eyebrow="profile ? patientLabelOf(RECORD_TYPE_LABELS, profile.record_type, lang) : fr ? 'Cas de maladies rares' : 'Rare disease cases'"
+      :tabs="profile ? headerTabs : []"
+      :tabs-label="fr ? 'Sections de la fiche' : 'Record sections'"
+      @tab="setTab"
+    >
+      <template #title>
+        <span class="record_title">{{ profile ? diseaseName || (fr ? "Pathologie non précisée" : "Condition not stated") : "" }}</span>
+        <slot name="title-link" />
+      </template>
+      <!-- Ranger la fiche dans le projet actif, par le bouton que l'app prete (cf. useOipResourceHooks). -->
+      <template v-if="hooks.projectButton && profile?._id" #actions>
+        <component :is="hooks.projectButton" :resource-id="profile._id" type="PatientProfile" :label="diseaseName" />
+      </template>
+      <div v-if="profile" class="oip_list gap-8">
+        <p class="record_subline">{{ subline }}</p>
+        <div v-if="headerTags.length" class="oip_row gap-8 wrap">
+          <RmTag v-for="tag in headerTags" :key="tag.label" :variant="tag.variant">{{ tag.label }}</RmTag>
+        </div>
+      </div>
+    </RmPageHeader>
+
+    <RmLoadingState v-if="loading" :lines="6" />
+
+    <RmErrorState
+      v-else-if="error"
+      icon="CloudWarning"
+      :title="fr ? 'Fiche indisponible' : 'Record unavailable'"
+      :text="fr ? 'L\'index des patients n\'a pas répondu.' : 'The patient index did not answer.'"
+      :action-label="fr ? 'Réessayer' : 'Retry'"
+      @action="reload()"
+    />
+
+    <RmEmptyState
+      v-else-if="!profile"
+      icon="Prohibit"
+      :title="fr ? 'Fiche introuvable' : 'Record not found'"
+      :text="fr ? `Aucune fiche ne porte l'identifiant ${id}.` : `No record has the id ${id}.`"
+    />
+
+    <div v-else-if="activeTab === 'publications'" class="oip_row gap-16 record_layout">
+      <RmChaptersNav v-if="publicationChapters.length > 1" :chapters="publicationChapters" />
+      <div class="oip_list gap-24 record_content">
+        <!-- L'article d'ou la fiche a ete lue, avec ses auteurs et son type. -->
+        <div id="source-paper">
+          <OipPatientsPublications
+            v-if="profile.pmid"
+            :lang="lang"
+            :title="fr ? 'Article source' : 'Source paper'"
+            :query="{ terms: { PubMed_ID: [String(profile.pmid)] } }"
+          />
+          <RmEmptyState v-else icon="Prohibit" :title="fr ? 'Aucun PMID sur cette fiche' : 'No PMID on this record'" />
+        </div>
+        <!-- Ce qui a ete publie d'autre sur les genes de la fiche : la meme
+             relation que les pages genes de Discovery. -->
+        <div v-if="geneSymbols.length" id="gene-papers">
+          <OipPatientsPublications
+            :lang="lang"
+            :title="fr ? `Articles sur ${geneSymbols.length > 1 ? 'ces gènes' : 'ce gène'} (${geneSymbols.join(', ')})` : `Papers on ${geneSymbols.length > 1 ? 'these genes' : 'this gene'} (${geneSymbols.join(', ')})`"
+            :query="geneQuery"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="oip_row gap-16 record_layout">
+      <RmChaptersNav :chapters="chapters" />
+
+      <div class="oip_list gap-16 record_content">
+        <RmSectionCard v-if="summary" id="in-short">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="FileText" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "En bref" : "In short" }}</h2>
+            </div>
+          </template>
+          <p class="record_text">{{ summary }}</p>
+        </RmSectionCard>
+
+        <RmSectionCard id="recorded">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="Clipboard" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "Ce que l'article rapporte" : "What the paper recorded" }}</h2>
+            </div>
+          </template>
+          <div class="oip_list gap-16">
+            <dl class="record_facts">
+              <div v-for="fact in facts" :key="fact.title" class="oip_row v-start gap-8">
+                <RmIcon :name="fact.icon" :size="16" class="record_fact_icon" />
+                <div>
+                  <dt class="record_fact_label">{{ fact.title }}</dt>
+                  <dd class="record_fact_value">{{ fact.note ? `${fact.value} · ${fact.note}` : fact.value }}</dd>
+                </div>
+              </div>
+            </dl>
+            <p v-if="hasInferredAge" class="record_muted">
+              {{
+                fr
+                  ? "* Âge placé dans une tranche, faute d'un âge exact dans l'article."
+                  : "* We placed this age in a band rather than reading an exact age from the paper."
+              }}
+            </p>
+          </div>
+        </RmSectionCard>
+
+        <RmSectionCard v-if="geneGroups.length" id="genetic-findings">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="Dna" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "Résultats génétiques" : "Genetic findings" }}</h2>
+            </div>
+          </template>
+          <!-- Le gene responsable et les genes testes puis ecartes ne se
+               lisent pas dans une meme liste : chaque groupe dit son role. -->
+          <div class="oip_list gap-16">
+            <div v-for="group in geneGroups" :key="group.key" class="oip_list gap-8">
+              <p class="record_gene_role" :class="`record_gene_role--${group.key.toLowerCase()}`">{{ group.title }}</p>
+              <div v-for="(gene, i) in group.genes" :key="i" class="oip_row v-center gap-8 wrap">
+                <span class="record_mono record_gene">{{ gene.gene_hgnc || (fr ? "gène non nommé" : "unnamed gene") }}</span>
+                <span v-if="gene.cdna" class="record_mono">{{ gene.cdna }}</span>
+                <span v-if="gene.protein" class="record_mono record_muted">{{ gene.protein }}</span>
+                <span v-if="gene.zygosity" class="record_muted">· {{ gene.zygosity }}</span>
+                <span v-if="gene.gene_source === 'paper'" class="record_muted">
+                  {{ fr ? "gène déduit de l'article" : "gene inferred from the paper" }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </RmSectionCard>
+
+        <RmSectionCard v-if="presentSigns.length || ruledOut.length" id="signs">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="FirstAidKit" :size="18" />
+              <h2 class="record_section_title">{{ signsTitle }}</h2>
+              <RmTag v-if="presentSigns.length" variant="gray">{{ presentSigns.length }}</RmTag>
+            </div>
+          </template>
+          <div class="oip_list gap-16">
+            <!-- Les signes d'un groupe sont ceux du groupe, pas d'un membre. -->
+            <p v-if="isCohort" class="record_muted">
+              {{
+                fr
+                  ? "Rapportés pour le groupe entier. L'article ne dit pas quel membre présentait quel signe : ils ne se comptent pas par personne."
+                  : "Reported for the group as a whole. The paper does not say which members had which, so they cannot be counted per person."
+              }}
+            </p>
+            <div v-if="presentSigns.length" class="oip_row gap-8 wrap">
+              <RmTag v-for="sign in presentSigns" :key="sign" variant="gray">{{ sign }}</RmTag>
+            </div>
+            <template v-if="ruledOut.length">
+              <p class="record_subtitle">{{ fr ? "Explicitement écartés" : "Specifically ruled out" }}</p>
+              <div class="oip_row gap-8 wrap">
+                <RmTag v-for="sign in ruledOut" :key="sign" variant="transparent">{{ sign }}</RmTag>
+              </div>
+            </template>
+          </div>
+        </RmSectionCard>
+
+        <RmSectionCard v-if="timeline.length" id="timeline">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="ListBullets" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "Chronologie" : "What happened, in order" }}</h2>
+            </div>
+          </template>
+          <ol class="record_timeline">
+            <li v-for="(step, i) in timeline" :key="i" class="record_timeline_step">
+              <span class="record_timeline_dot" />
+              <span class="record_mono record_timeline_when">{{ step.age?.text || "?" }}</span>
+              <span class="record_text">{{ step.event }}</span>
+            </li>
+          </ol>
+        </RmSectionCard>
+
+        <RmSectionCard v-if="hasGraph" id="connections">
+          <template #header>
+            <div class="oip_row v-center gap-8 wrap">
+              <RmIcon name="Graph" :size="18" />
+              <h2 class="record_section_title">{{ graphTitle }}</h2>
+              <span class="record_muted">
+                ·
+                {{
+                  isCohort
+                    ? fr
+                      ? "signes, changements génétiques et article du groupe"
+                      : "the group's signs, gene changes and the paper"
+                    : fr
+                      ? "ses signes, ses changements génétiques et l'article"
+                      : "their signs, gene changes and the paper"
+                }}
+              </span>
+            </div>
+          </template>
+          <ClientOnly>
+            <OipPatientsConnectionsGraph :data="profile" :lang="lang" />
+          </ClientOnly>
+        </RmSectionCard>
+
+        <RmSectionCard id="source">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="BookOpen" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "Source" : "Where this came from" }}</h2>
+            </div>
+          </template>
+          <div class="oip_list gap-8">
+            <p class="record_paper_title">{{ profile.title || (fr ? "Titre non disponible" : "Title not available") }}</p>
+            <p class="record_muted">
+              {{ profile.journal }}<template v-if="profile.year"> · {{ profile.year }}</template>
+            </p>
+            <a v-if="pubmedUrl" class="record_link" :href="pubmedUrl" target="_blank" rel="noopener">
+              {{ fr ? "Lire sur PubMed" : "Read on PubMed" }}
+              <RmIcon name="ArrowSquareOut" :size="12" />
+            </a>
+
+            <RmCallout v-if="clusterNote" tone="warning" icon="Warning" :text="clusterNote" />
+
+            <div v-if="samePaper.length" class="oip_list gap-8 record_siblings">
+              <p class="record_subtitle">
+                {{
+                  isCohort
+                    ? fr
+                      ? "Également décrits dans le même article"
+                      : "Others described in the same paper"
+                    : fr
+                      ? "Autres patients du même article"
+                      : "Other patients in the same paper"
+                }}
+              </p>
+              <div class="oip_row gap-16 wrap">
+                <!-- Dans une page, le lien navigue ; dans le tiroir d'un projet, il empile la fiche (cf. useOipResourceNav). -->
+                <a
+                  v-for="sibling in samePaper"
+                  :key="sibling.record_id"
+                  :href="nav.href('PatientProfile', sibling.record_id)"
+                  class="record_link"
+                  @click="openSibling($event, sibling.record_id)"
+                >
+                  {{ siblingLabel(sibling) }}
+                </a>
+              </div>
+            </div>
+          </div>
+        </RmSectionCard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AgeStatement, PatientProfile } from "../../oip-patients/types";
+import {
+  COHORT_SETTING_LABELS,
+  GENE_ROLE_LABELS,
+  OUTCOME_LABELS,
+  RECORD_TYPE_LABELS,
+  SEX_LABELS,
+  patientDiseaseName,
+  patientLabel,
+  patientLabelOf,
+} from "../../oip-patients/labels";
+import { OIP_PATIENT_INDEXES } from "../../oip-patients/indexes";
+import { PATIENT_KIND } from "../../oip-patients/kinds";
+import { useCaseRecord } from "../../oip-patients/useCaseRecord";
+import { useOipResourceHooks } from "../../composables/useOipResourceHooks";
+import { useOipResourceNav } from "../../composables/useOipResourceNav";
+
+type RmTagVariant = "gray" | "blue" | "green" | "orange" | "amber";
+
+const props = withDefaults(
+  defineProps<{
+    /** `record_id` du cas, ou son `_id` (le resourceId d'un projet). */
+    id: string;
+    type?: string;
+    /** Onglet ouvert : « summary » (defaut) ou « publications ». */
+    tab?: string;
+    /** Retour de la page vers sa liste. Absent (tiroir) : pas de fleche. */
+    backTo?: string;
+    highlight?: string[];
+    lang?: "fr" | "en";
+  }>(),
+  { type: "PatientProfile", tab: "", backTo: "", highlight: () => [], lang: "fr" },
+);
+
+const emit = defineEmits<{
+  "update:tab": [tab: string];
+  record: [profile: PatientProfile | null];
+}>();
+
+const lang = computed(() => props.lang);
+const fr = computed(() => lang.value === "fr");
+const hooks = useOipResourceHooks();
+const nav = useOipResourceNav();
+
+/** L'onglet ouvert : celui de la page, sinon le dernier choisi. */
+const activeTab = ref(props.tab === "publications" ? "publications" : "summary");
+watch(
+  () => props.tab,
+  (tab) => (activeTab.value = tab === "publications" ? "publications" : "summary"),
+);
+function setTab(key: string) {
+  activeTab.value = key === "publications" ? "publications" : "summary";
+  emit("update:tab", activeTab.value);
+}
+const headerTabs = computed(() =>
+  [
+    { key: "summary", label: fr.value ? "Résumé" : "Summary" },
+    { key: "publications", label: "Publications" },
+  ].map((tab) => ({ ...tab, active: tab.key === activeTab.value })),
+);
+
+const recordId = computed(() => props.id);
+const { profile: doc, samePaper: siblings, cluster, loading, error, reload } = useCaseRecord(
+  OIP_PATIENT_INDEXES.PATIENT_PROFILES,
+  recordId,
+  PATIENT_KIND.source!,
+);
+const profile = computed(() => doc.value as PatientProfile | null);
+const samePaper = computed(() => siblings.value as PatientProfile[]);
+watch(profile, (value) => emit("record", value));
+
+/** Ctrl/Cmd-clic garde le vrai lien, pour un nouvel onglet. */
+function openSibling(event: MouseEvent, recordId: string) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+  event.preventDefault();
+  nav.open("PatientProfile", recordId);
+}
+
+const record = computed(() => profile.value?.record);
+const isCohort = computed(() => profile.value?.record_type === "cohort");
+const diseaseName = computed(() => (profile.value ? patientDiseaseName(profile.value) : ""));
+const pubmedUrl = computed(() => (profile.value?.pmid ? `https://pubmed.ncbi.nlm.nih.gov/${profile.value.pmid}/` : undefined));
+const summary = computed(() => record.value?.summary || profile.value?.summary || "");
+
+const number = (n: number) => new Intl.NumberFormat(fr.value ? "fr-FR" : "en-US").format(n);
+
+/** Qui, et quand : « Le patient · femme · 2026 », comme sur la carte. */
+const subline = computed(() => {
+  const p = profile.value;
+  if (!p) return "";
+  const parts: string[] = [];
+  if (isCohort.value) {
+    parts.push(
+      p.n_patients
+        ? fr.value
+          ? `Groupe de ${number(p.n_patients)} patients`
+          : `Group of ${number(p.n_patients)} patients`
+        : patientLabelOf(RECORD_TYPE_LABELS, "cohort", lang.value),
+    );
+  } else {
+    parts.push(patientLabel(p.label));
+    if (p.sex) parts.push(patientLabelOf(SEX_LABELS, p.sex, lang.value).toLowerCase());
+  }
+  if (p.year) parts.push(String(p.year));
+  return parts.join(" · ");
+});
+
+/** Maladies Orphanet, pays et issue : ce qui situe la fiche avant de la lire. */
+const headerTags = computed(() => {
+  const p = profile.value;
+  if (!p) return [];
+  const tags: { label: string; variant: RmTagVariant }[] = [];
+  (p.source_orpha ?? []).forEach((code, i) => {
+    tags.push({ label: p.condition_name_orpha?.[i] || `ORPHA:${code}`, variant: "blue" });
+  });
+  const countries = p.cohort_country_names?.length ? p.cohort_country_names : p.country ? [p.country] : [];
+  countries.forEach((country) => tags.push({ label: country, variant: "gray" }));
+  if (p.outcome && p.outcome !== "unknown") {
+    tags.push({
+      label: patientLabelOf(OUTCOME_LABELS, p.outcome, lang.value),
+      variant: p.outcome === "alive" ? "green" : p.outcome === "died" ? "orange" : "gray",
+    });
+  }
+  if (p.subject === "animal" && p.species) tags.push({ label: p.species, variant: "amber" });
+  return tags;
+});
+
+const sexIcon = computed(() => {
+  if (profile.value?.sex === "male") return "GenderMale";
+  if (profile.value?.sex === "female") return "GenderFemale";
+  return "GenderIntersex";
+});
+
+/**
+ * Les faits a lire d'un coup d'oeil, sans ce que l'article n'a pas dit. Un
+ * groupe repond a d'autres questions qu'une personne : combien, comment il a
+ * ete constitue, sur quelle duree, jamais « quel sexe ».
+ */
+const facts = computed(() => {
+  const p = profile.value as PatientProfile | null;
+  const r = record.value;
+  if (!p) return [];
+  const rows: { icon: string; title: string; value: string; note?: string }[] = [];
+  const add = (icon: string, title: string, value?: string | number | null, note?: string) => {
+    if (value !== null && value !== undefined && value !== "" && value !== "unknown") rows.push({ icon, title, value: String(value), note });
+  };
+  const addAge = (icon: string, title: string, age?: AgeStatement) => {
+    if (!age?.text) return;
+    const inferred = age.precision === "class_derived" || age.precision === "assumed_unit";
+    add(icon, title, age.text + (inferred ? " *" : ""), age.class_label || undefined);
+  };
+  const t = (frText: string, enText: string) => (fr.value ? frText : enText);
+
+  if (isCohort.value) {
+    const forGroup = t("donné pour le groupe", "stated for the group");
+    add("UsersThree", t("Personnes dans le groupe", "People in this group"), p.n_patients ? number(p.n_patients) : null);
+    if (p.cohort_n_female != null || p.cohort_n_male != null) {
+      add(
+        "User",
+        t("Femmes et hommes", "Women and men"),
+        fr.value
+          ? `${p.cohort_n_female ?? "?"} femmes · ${p.cohort_n_male ?? "?"} hommes`
+          : `${p.cohort_n_female ?? "?"} female · ${p.cohort_n_male ?? "?"} male`,
+      );
+    }
+    if (p.cohort_n_died != null) add("Pulse", t("Décès pendant l'étude", "Died during the study"), p.cohort_n_died);
+    if (p.cohort_n_alive != null) add("Pulse", t("En vie au dernier suivi", "Alive at last report"), p.cohort_n_alive);
+    add("Funnel", t("Recrutement", "How they were found"), p.cohort_ascertainment);
+    add("Buildings", t("Cadre de l'étude", "Where they were studied"), patientLabelOf(COHORT_SETTING_LABELS, p.cohort_setting, lang.value));
+    add("ListBullets", t("Critères d'inclusion", "Who was included"), p.cohort_inclusion);
+    add("Clock", t("Durée du suivi", "Followed for"), p.cohort_follow_up);
+    add("Sun", t("Âge aux premiers signes", "Age when signs began"), r?.cohort?.age_onset_stat, forGroup);
+    add("Clock", t("Âge au diagnostic", "Age at diagnosis"), r?.cohort?.age_diagnosis_stat, forGroup);
+    add("Clock", t("Âge lors de l'étude", "Age when studied"), r?.cohort?.age_at_study_stat, forGroup);
+    return rows;
+  }
+
+  add(sexIcon.value, t("Sexe", "Sex"), p.sex && p.sex !== "unknown" ? patientLabelOf(SEX_LABELS, p.sex, lang.value) : null);
+  addAge("Sun", t("Premiers signes", "First signs"), r?.age_onset);
+  addAge("Clock", t("Diagnostic", "Diagnosed"), r?.age_diagnosis);
+  addAge("Clock", t("Âge à la description", "Age when reported"), r?.age_report);
+  addAge("Clock", t("Âge au décès", "Age at death"), r?.age_death);
+  add("Pulse", t("Issue", "Outcome"), p.outcome && p.outcome !== "unknown" ? patientLabelOf(OUTCOME_LABELS, p.outcome, lang.value) : null);
+  add("User", t("Origine", "Background"), p.ethnicity);
+  if (r?.consanguineous === true) add("Users", t("Parents", "Parents"), t("apparentés", "related"));
+  if (r?.consanguineous === false) add("Users", t("Parents", "Parents"), t("non apparentés", "not related"));
+  add("Users", t("Antécédents familiaux", "Family history"), r?.family_history);
+  if (p.subject === "animal") add("Prohibit", t("Sujet", "Subject"), p.species);
+  return rows;
+});
+
+const hasInferredAge = computed(() => facts.value.some((fact) => fact.value.endsWith("*")));
+
+/** Les genes ranges par le role que l'article leur donne, dans l'ordre du vocabulaire. */
+const geneGroups = computed(() => {
+  const rows = record.value?.genotype ?? [];
+  if (!rows.length) return [];
+  return Object.keys(GENE_ROLE_LABELS)
+    .map((key) => ({
+      key,
+      title: patientLabelOf(GENE_ROLE_LABELS, key, lang.value),
+      genes: rows.filter((g) => (g.interpretation_status || "UNKNOWN_STATUS") === key),
+    }))
+    .filter((group) => group.genes.length);
+});
+
+const presentSigns = computed(() =>
+  (record.value?.phenotypes ?? [])
+    .filter((s) => s.present !== false)
+    .map((s) => s.label || s.hpo_id || "")
+    .filter(Boolean),
+);
+
+/** Signes ecartes et diagnostics ecartes : les deux disent « ce n'est pas ca ». */
+const ruledOut = computed(() =>
+  [
+    ...(record.value?.phenotypes ?? []).filter((s) => s.present === false).map((s) => s.label || s.hpo_id || ""),
+    ...(record.value?.ruled_out ?? []).map((r) => r.disease || ""),
+  ].filter(Boolean),
+);
+
+const timeline = computed(() => (record.value?.timeline ?? []).filter((step) => step.event));
+
+const signsTitle = computed(() =>
+  isCohort.value
+    ? fr.value
+      ? "Signes rapportés dans le groupe"
+      : "Signs and symptoms reported across the group"
+    : fr.value
+      ? "Signes et symptômes"
+      : "Signs and symptoms",
+);
+
+/** Un groupe deja decrit ailleurs : le lien est deduit, jamais confirme. */
+const clusterNote = computed(() => {
+  const others = ((cluster.value?.pmids ?? []) as string[]).filter((pmid) => pmid !== profile.value?.pmid);
+  if (!others.length) return "";
+  const plural = others.length > 1;
+  return fr.value
+    ? `Probablement le même groupe que dans ${others.length} autre${plural ? "s" : ""} publication${plural ? "s" : ""} : leurs effectifs ne s'additionnent pas.`
+    : `Likely the same group as ${others.length} other publication${plural ? "s" : ""}: counts across them cannot be added together.`;
+});
+
+function siblingLabel(sibling: PatientProfile) {
+  if (sibling.record_type === "cohort") {
+    return sibling.n_patients
+      ? fr.value
+        ? `Groupe de ${number(sibling.n_patients)} patients`
+        : `Group of ${number(sibling.n_patients)} patients`
+      : patientLabelOf(RECORD_TYPE_LABELS, "cohort", lang.value);
+  }
+  return patientLabel(sibling.label) || sibling.record_id;
+}
+
+/** Chaque symbole que la fiche nomme, pour les articles sur ses genes. */
+const geneSymbols = computed(() => [
+  ...new Set(
+    [
+      ...(record.value?.genotype ?? []).map((g) => g.gene_hgnc),
+      ...(profile.value?.causative_genes ?? []),
+      ...(profile.value?.genes ?? []),
+    ].filter(Boolean) as string[],
+  ),
+]);
+
+const geneQuery = computed(() => ({
+  bool: {
+    must: [
+      { nested: { path: "genomics", query: { terms: { "genomics.gene_symbol.keyword": geneSymbols.value } } } },
+      { term: { delete: false } },
+    ],
+  },
+}));
+
+const publicationChapters = computed(() => [
+  { label: fr.value ? "Article source" : "Source paper", value: "source-paper" },
+  ...(geneSymbols.value.length ? [{ label: fr.value ? "Sur ces gènes" : "On these genes", value: "gene-papers" }] : []),
+]);
+
+/** Deux noeuds, le sujet et son article, ne montrent rien : le graphe attend des signes ou des genes. */
+const hasGraph = computed(() => (record.value?.phenotypes?.length ?? 0) + (record.value?.genotype?.length ?? 0) > 0);
+const graphTitle = computed(() =>
+  isCohort.value
+    ? fr.value
+      ? "Comment ce groupe se relie"
+      : "How this group connects"
+    : fr.value
+      ? "Comment ce patient se relie"
+      : "How this patient connects",
+);
+
+/** Seules les sections rendues : un chapitre qui ne mene nulle part est un lien mort. */
+const chapters = computed(() => {
+  const list: { label: string; value: string }[] = [];
+  if (summary.value) list.push({ label: fr.value ? "En bref" : "In short", value: "in-short" });
+  list.push({ label: fr.value ? "Ce que l'article rapporte" : "What the paper recorded", value: "recorded" });
+  if (geneGroups.value.length) list.push({ label: fr.value ? "Résultats génétiques" : "Genetic findings", value: "genetic-findings" });
+  if (presentSigns.value.length || ruledOut.value.length) list.push({ label: fr.value ? "Signes" : "Signs", value: "signs" });
+  if (timeline.value.length) list.push({ label: fr.value ? "Chronologie" : "Timeline", value: "timeline" });
+  if (hasGraph.value) list.push({ label: graphTitle.value, value: "connections" });
+  list.push({ label: "Source", value: "source" });
+  return list;
+});
+
+</script>
+
+<style scoped>
+.record_layout {
+  align-items: flex-start;
+  width: 100%;
+}
+
+/* Sans min-width, l'item flex ne descend pas sous son enfant le plus large. */
+.record_content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.record_subline {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.record_title {
+  display: block;
+}
+
+.record_section_title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.record_text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--text-primary);
+}
+
+.record_muted {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.record_subtitle {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.record_facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px 24px;
+  margin: 0;
+}
+
+.record_fact_icon {
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--text-muted);
+}
+
+.record_fact_label {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.record_fact_value {
+  margin: 2px 0 0;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.record_mono {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 13px;
+}
+
+.record_gene {
+  font-weight: 700;
+}
+
+.record_gene_role {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.record_gene_role--causative {
+  color: var(--primary);
+}
+
+.record_gene_role--rejected {
+  color: var(--text-muted);
+}
+
+/* Un rail relie les points : l'ordre se lit comme une suite, pas comme une liste. */
+.record_timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.record_timeline_step {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding-bottom: 12px;
+}
+
+.record_timeline_step:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 14px;
+  bottom: 0;
+  width: 1px;
+  background: var(--border-default);
+}
+
+.record_timeline_dot {
+  flex-shrink: 0;
+  width: 9px;
+  height: 9px;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: var(--primary);
+}
+
+.record_timeline_when {
+  flex-shrink: 0;
+  min-width: 90px;
+}
+
+.record_paper_title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.record_link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  font-size: 13px;
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.record_siblings {
+  margin-top: 8px;
+}
+</style>