@tekkare/romulus 0.1.250 → 0.1.252

package/layer/app/components/oip-science/ctgov/StudyDescription.vue

@@ -0,0 +1,1136 @@
+<!--
+  Onglet « Description de l'etude » d'un essai CT.gov (portage de la page
+  /ctgov/[id]/study-description de France Augmented Science). L'en-tete de
+  fiche reste dans l'app : le titre officiel n'est pas repete ici.
+-->
+<template>
+  <div ref="root" class="oip-science">
+  <div v-if="trial && !isLoadingQueryClinicalTrial">
+    <div class="oip_row gap-16">
+      <div class="chapters_col">
+        <RmChaptersNav
+          class="chapters_sticky"
+          :chapters="chaptersList"
+          :title="$t('oipScience.trial.chapters')"
+          :offset="chaptersOffset"
+          :style="{ top: `${stickyTop}px` }"
+          @select="scrollToChapter"
+        />
+      </div>
+      <div class="oip_widthFill sd-page">
+        <!-- OVERVIEW : statut, chiffres cles, resume. Le titre officiel est
+             deja dans l'en-tete de fiche, on ne le repete pas. -->
+        <section class="oip_card sd-section" id="summary">
+          <div class="sd-overview-head">
+            <div class="sd-tags">
+              <RmTag :variant="setColorStatus(trial.overall_status)">
+                {{ ifNoRes(trial.overall_status) }}
+              </RmTag>
+              <RmTag v-if="trial.study_type" variant="gray">{{ trial.study_type }}</RmTag>
+              <RmTag v-if="trial.phase && trial.phase !== 'Not Applicable'" variant="gray">
+                {{ trial.phase }}
+              </RmTag>
+              <RmTag v-if="trial.with_result" variant="green">{{ $t('oipScience.trial.resultsPosted') }}</RmTag>
+              <RmTag v-if="trial.acronym" variant="indigo">{{ trial.acronym }}</RmTag>
+            </div>
+            <div class="sd-tags">
+              <RmCopyCode v-if="trial.nct_id" :value="trial.nct_id" lang="en" />
+              <a
+                v-if="trial.nct_id"
+                class="sd-external"
+                :href="`https://clinicaltrials.gov/study/${trial.nct_id}`"
+                target="_blank"
+                rel="noopener"
+              >
+                ClinicalTrials.gov
+                <RmIcon name="ArrowSquareOut" :size="12" />
+              </a>
+            </div>
+          </div>
+
+          <RmCallout v-if="trial.why_stopped" tone="warning">
+            <b>{{ $t('oipScience.trial.whyStopped') }}</b> {{ trial.why_stopped }}
+          </RmCallout>
+
+          <!-- Le titre officiel est dans l'en-tete ; le titre court n'apparait
+               que s'il en differe. -->
+          <div v-if="trial.brief_title && trial.brief_title !== trial.official_title" class="sd-block">
+            <h2 class="sd-h2">{{ $t('oipScience.trial.briefTitle') }}</h2>
+            <p class="oip_body">{{ trial.brief_title }}</p>
+          </div>
+
+          <div class="sd-kpis">
+            <RmKpi
+              :label="$t('oipScience.trial.enrollment')"
+              :value="ifNoRes(trial.enrollment, 'number')"
+              :unit="trial.enrollment != null ? $t('oipScience.trial.participants') : undefined"
+              :note="dateKind(trial.enrollment_type)"
+            />
+            <RmKpi
+              :label="$t('oipScience.trial.startDate')"
+              :value="ifNoRes(trial.start_date, 'date')"
+              :note="dateKind(trial.start_date_type)"
+            />
+            <RmKpi
+              :label="$t('oipScience.trial.primaryCompletion')"
+              :value="ifNoRes(trial.primary_completion_date, 'date')"
+              :note="dateKind(trial.primary_completion_date_type)"
+            />
+            <RmKpi :label="$t('oipScience.trial.primaryPurpose')" :value="ifNoRes(design?.primary_purpose)" />
+          </div>
+
+          <div v-if="briefSummary" class="sd-block">
+            <h2 class="sd-h2">{{ $t('oipScience.trial.briefSummary') }}</h2>
+            <RmTextHighlight
+              class="oip_body sd-prose"
+              :text="briefSummary"
+              :queries="highlight"
+            />
+          </div>
+
+          <div v-if="trial.description_name" class="sd-block" id="detailed-description">
+            <h2 class="sd-h2">{{ $t('oipScience.trial.detailedDescription') }}</h2>
+            <RmTextHighlight
+              class="oip_body sd-prose"
+              :text="trial.description_name"
+              :queries="highlight"
+              :clamp="6"
+              :lang="lang"
+            />
+          </div>
+
+          <OipScienceCommonSource :sources="['CT.gov']" :lang="lang" />
+        </section>
+
+        <!-- CONDITIONS : tags OIP, conditions, mots cles. -->
+        <section v-if="hasConditionsBlock" class="oip_card sd-section" id="conditions">
+          <h1 class="sd-h1">{{ $t('oipScience.trial.conditionsAndKeywords') }}</h1>
+
+          <RmTable
+            v-if="conditionRows.length"
+            :columns="[
+              { key: 'name', label: $t('oipScience.trial.condition'), width: '30%' },
+              { key: 'description', label: $t('oipScience.trial.description') },
+            ]"
+            :rows="conditionRows"
+            compact
+            flat
+          >
+            <template #name="{ value }">
+              <RmTextHighlight :queries="highlight" :text="value" />
+            </template>
+            <template #description="{ value }">
+              <RmTextHighlight :queries="highlight" :text="ifNoRes(value)" />
+            </template>
+          </RmTable>
+
+          <div v-if="getRareDiseases.length" class="sd-block">
+            <h2 class="sd-h2">{{ $t('oipScience.trial.rareDiseases') }} <span class="sd-hint">{{ $t('oipScience.trial.oipDiscoveryTagsHint') }}</span></h2>
+            <div class="sd-tags">
+              <RmTag v-for="disease in getRareDiseases" :key="String(disease)" variant="purple">
+                {{ disease }}
+              </RmTag>
+            </div>
+          </div>
+
+          <div v-if="keywords.length" class="sd-block">
+            <h2 class="sd-h2">{{ $t('oipScience.trial.keywords') }}</h2>
+            <div class="sd-tags">
+              <RmTag v-for="keyword in keywords" :key="keyword" variant="gray">
+                <RmTextHighlight :queries="highlight" :text="keyword" />
+              </RmTag>
+            </div>
+          </div>
+        </section>
+
+        <!-- DESIGN -->
+        <section class="oip_card sd-section" id="study-design">
+          <h1 class="sd-h1">{{ $t('oipScience.trial.studyDesign') }}</h1>
+          <dl class="sd-facts">
+            <div v-for="fact in designFacts" :key="fact.label" class="sd-fact">
+              <dt>{{ fact.label }}</dt>
+              <dd>{{ fact.value }}</dd>
+            </div>
+          </dl>
+          <div v-for="note in designNotes" :key="note.label" class="sd-block">
+            <h2 class="sd-h2">{{ note.label }}</h2>
+            <p class="oip_body sd-prose">{{ note.text }}</p>
+          </div>
+        </section>
+
+        <!-- ARMS AND INTERVENTIONS : une seule table. La liste des
+             interventions ne sort seule que s'il n'y a pas de bras. -->
+        <section v-if="armRows.length || interventionRows.length" class="oip_card sd-section" id="arms-and-intervention">
+          <h1 class="sd-h1">{{ $t('oipScience.trial.armsAndInterventions') }}</h1>
+
+          <RmTable
+            v-if="armRows.length"
+            :columns="[
+              { key: 'arm', label: isCohort ? $t('oipScience.trial.groupCohort') : $t('oipScience.trial.arm'), width: '40%' },
+              { key: 'interventions', label: $t('oipScience.trial.interventions') },
+            ]"
+            :rows="armRows"
+            flat
+          >
+            <template #arm="{ row }">
+              <div class="sd-cell">
+                <p class="sd-cell-title">
+                  <RmTag v-if="row.group_type" variant="gray" class="sd-cell-tag">{{ row.group_type }}</RmTag>
+                  {{ row.title }}
+                </p>
+                <RmTextHighlight
+                  v-if="row.description"
+                  class="sd-muted"
+                  :queries="highlight"
+                  :text="row.description"
+                />
+              </div>
+            </template>
+            <template #interventions="{ row }">
+              <div class="sd-cell-list">
+                <div v-for="(item, i) in row.interventions" :key="i" class="sd-cell">
+                  <p class="sd-cell-title">
+                    <span class="sd-kind">{{ item.type }}</span> {{ item.name }}
+                  </p>
+                  <RmTextHighlight
+                    v-if="item.description"
+                    class="sd-muted"
+                    :queries="highlight"
+                    :text="item.description"
+                  />
+                  <p v-if="item.otherNames" class="sd-muted">
+                    {{ $t('oipScience.trial.otherNames') }} <RmTextHighlight class="sd-inline" :queries="highlight" :text="item.otherNames" />
+                  </p>
+                </div>
+              </div>
+            </template>
+          </RmTable>
+
+          <RmTable
+            v-else
+            :columns="[
+              { key: 'name', label: $t('oipScience.trial.intervention'), width: '30%' },
+              { key: 'description', label: $t('oipScience.trial.description') },
+            ]"
+            :rows="interventionRows"
+            compact
+            flat
+          >
+            <template #name="{ row }">
+              <span class="sd-kind">{{ row.type }}</span>
+              <RmTextHighlight class="sd-inline" :queries="highlight" :text="row.name" />
+            </template>
+            <template #description="{ value }">
+              <RmTextHighlight :queries="highlight" :text="ifNoRes(value)" />
+            </template>
+          </RmTable>
+        </section>
+
+        <!-- OUTCOME MEASURES -->
+        <section v-if="outcomeGroups.length" class="oip_card sd-section" id="outcome-measures">
+          <h1 class="sd-h1">{{ $t('oipScience.trial.outcomeMeasures') }}</h1>
+          <div v-for="group in outcomeGroups" :key="group.type" class="sd-block">
+            <h2 class="sd-h2">
+              {{ group.label }} <span class="sd-hint">({{ group.items.length }})</span>
+            </h2>
+            <ol class="sd-outcomes">
+              <li v-for="(measure, index) in group.items" :key="index" class="sd-outcome">
+                <p class="sd-cell-title">
+                  <RmTextHighlight :queries="highlight" :text="measure.measure" />
+                </p>
+                <RmTextHighlight
+                  v-if="measure.outcome_description"
+                  class="sd-muted"
+                  :queries="highlight"
+                  :text="measure.outcome_description"
+                />
+                <p v-if="measure.time_frame" class="sd-meta">
+                  <RmIcon name="Clock" :size="12" /> {{ measure.time_frame }}
+                </p>
+                <p v-if="measure.population" class="sd-meta">
+                  <RmIcon name="Users" :size="12" /> {{ measure.population }}
+                </p>
+              </li>
+            </ol>
+          </div>
+        </section>
+
+        <!-- ELIGIBILITY : faits d'abord, puis inclusion / exclusion cote a cote. -->
+        <section class="oip_card sd-section" id="eligibility-criteria">
+          <h1 class="sd-h1">{{ $t('oipScience.trial.eligibilityCriteria') }}</h1>
+          <dl class="sd-facts">
+            <div class="sd-fact">
+              <dt>{{ $t('oipScience.trial.ages') }}</dt>
+              <dd>{{ eligibleAges }}</dd>
+            </div>
+            <div class="sd-fact">
+              <dt>{{ $t('oipScience.trial.sexes') }}</dt>
+              <dd>{{ ifNoRes(eligibility?.gender) }}</dd>
+            </div>
+            <div class="sd-fact">
+              <dt>{{ $t('oipScience.trial.healthyVolunteers') }}</dt>
+              <dd>{{ eligibility ? yesNo(eligibility.healthy_volunteers) : 'N/A' }}</dd>
+            </div>
+            <div v-if="eligibility?.sampling_method" class="sd-fact">
+              <dt>{{ $t('oipScience.trial.samplingMethod') }}</dt>
+              <dd>{{ humanize(eligibility.sampling_method) }}</dd>
+            </div>
+          </dl>
+
+          <div v-if="eligibility?.population" class="sd-block">
+            <h2 class="sd-h2">{{ $t('oipScience.trial.studyPopulation') }}</h2>
+            <p class="oip_body sd-prose">{{ eligibility.population }}</p>
+          </div>
+
+          <div v-if="criteria?.inclusion != null" class="sd-criteria">
+            <div class="sd-criteria-col sd-criteria-col--in">
+              <h2 class="sd-h2">{{ $t('oipScience.trial.inclusion') }}</h2>
+              <RmTextHighlight
+                class="oip_body sd-prose"
+                :queries="highlight"
+                :text="criteria.inclusion || 'N/A'"
+              />
+            </div>
+            <div class="sd-criteria-col sd-criteria-col--out">
+              <h2 class="sd-h2">{{ $t('oipScience.trial.exclusion') }}</h2>
+              <RmTextHighlight
+                class="oip_body sd-prose"
+                :queries="highlight"
+                :text="criteria.exclusion || 'N/A'"
+              />
+            </div>
+          </div>
+          <RmTextHighlight
+            v-else-if="criteria?.all"
+            class="oip_body sd-prose"
+            :queries="highlight"
+            :text="criteria.all"
+          />
+        </section>
+
+        <!-- DOCUMENTS & LINKS : documents deposes, sites du sponsor, partage des
+             donnees individuelles (IPD) et fiche CT.gov. -->
+        <section class="oip_card sd-section" id="documents-and-links">
+          <h1 class="sd-h1">{{ $t('oipScience.trial.documentsAndLinks') }}</h1>
+
+          <div v-if="studyDocuments.length" class="sd-block">
+            <h2 class="sd-h2">{{ $t('oipScience.trial.studyDocuments') }} <span class="sd-hint">({{ studyDocuments.length }})</span></h2>
+            <ul class="sd-links">
+              <li v-for="doc in studyDocuments" :key="doc.key" class="sd-link">
+                <RmIcon :name="doc.isPdf ? 'FilePdf' : 'FileText'" :size="16" class="sd-link-icon" />
+                <div class="sd-cell">
+                  <a v-if="doc.url" :href="doc.url" target="_blank" rel="noopener" class="sd-link-title">
+                    {{ doc.type }} <RmIcon name="ArrowSquareOut" :size="12" />
+                  </a>
+                  <span v-else class="sd-cell-title">{{ doc.type }}</span>
+                  <p v-if="doc.id" class="sd-meta">ID: {{ doc.id }}</p>
+                  <p v-if="doc.comment" class="sd-muted">{{ doc.comment }}</p>
+                </div>
+              </li>
+            </ul>
+          </div>
+
+          <div class="sd-block">
+            <h2 class="sd-h2">{{ $t('oipScience.trial.websites') }}</h2>
+            <ul class="sd-links">
+              <li v-for="link in websiteLinks" :key="link.url" class="sd-link">
+                <RmIcon name="Globe" :size="16" class="sd-link-icon" />
+                <div class="sd-cell">
+                  <a :href="link.url" target="_blank" rel="noopener" class="sd-link-title">
+                    {{ link.label }} <RmIcon name="ArrowSquareOut" :size="12" />
+                  </a>
+                  <p class="sd-meta sd-url">{{ link.url }}</p>
+                </div>
+              </li>
+            </ul>
+          </div>
+
+          <div v-if="trial.plan_to_share_ipd" class="sd-block">
+            <h2 class="sd-h2">{{ $t('oipScience.trial.ipdSharing') }}</h2>
+            <dl class="sd-facts">
+              <div class="sd-fact">
+                <dt>{{ $t('oipScience.trial.planToShare') }}</dt>
+                <dd>{{ humanize(trial.plan_to_share_ipd) }}</dd>
+              </div>
+              <div v-if="trial.ipd_time_frame" class="sd-fact">
+                <dt>{{ $t('oipScience.trial.timeFrame') }}</dt>
+                <dd>{{ trial.ipd_time_frame }}</dd>
+              </div>
+            </dl>
+            <p v-if="trial.plan_to_share_ipd_description" class="oip_body sd-prose">
+              {{ trial.plan_to_share_ipd_description }}
+            </p>
+            <p v-if="trial.ipd_access_criteria" class="sd-muted">
+              <b>{{ $t('oipScience.trial.accessCriteria') }}</b> {{ trial.ipd_access_criteria }}
+            </p>
+          </div>
+        </section>
+
+        <!-- KEY DATES : frise des champs NCT dates renseignes + leur type
+             (Actual / Estimated). Remplace Study timeline. -->
+        <section v-if="keyDates.length" class="oip_card sd-section" id="key-dates">
+          <h1 class="sd-h1">{{ $t('oipScience.trial.keyDates') }}</h1>
+          <ol class="sd-timeline">
+            <li
+              v-for="row in keyDates"
+              :key="row.field"
+              class="sd-step"
+              :class="{ 'sd-step--estimated': row.estimated }"
+            >
+              <span class="sd-dot" aria-hidden="true" />
+              <div class="sd-step-body">
+                <p class="sd-step-head">
+                  <span class="sd-step-label">{{ row.label }}</span>
+                  <span class="sd-step-date">{{ ifNoRes(row.date, 'date') }}</span>
+                  <RmTag :variant="row.estimated ? 'yellow' : 'gray'">
+                    {{ row.estimated ? $t('oipScience.trial.estimated') : $t('oipScience.trial.actual') }}
+                  </RmTag>
+                </p>
+                <p class="sd-muted">{{ row.desc }}</p>
+              </div>
+            </li>
+          </ol>
+        </section>
+
+        <!-- ALL DATES : table de reference des champs NCT dates, vides compris. -->
+        <section class="oip_card sd-section" id="all-dates">
+          <h1 class="sd-h1">{{ $t('oipScience.trial.allDates') }}</h1>
+          <RmTable
+            :columns="[
+              { key: 'field', label: $t('oipScience.trial.field'), width: '28%' },
+              { key: 'anticipated', label: $t('oipScience.trial.anticipated'), width: '14%' },
+              { key: 'actual', label: $t('oipScience.trial.actual'), width: '14%' },
+              { key: 'desc', label: $t('oipScience.trial.whatItRepresents') },
+            ]"
+            :rows="allDatesRows"
+            compact
+            flat
+          >
+            <template #field="{ value }">
+              <code class="sd-code">{{ value }}</code>
+            </template>
+            <template #anticipated="{ value }">
+              <span :class="value ? 'sd-step-date' : 'sd-na'">{{ value ? ifNoRes(value, 'date') : 'N/A' }}</span>
+            </template>
+            <template #actual="{ value }">
+              <span :class="value ? 'sd-step-date' : 'sd-na'">{{ value ? ifNoRes(value, 'date') : 'N/A' }}</span>
+            </template>
+            <template #desc="{ value }">
+              <span class="sd-muted">{{ value }}</span>
+            </template>
+          </RmTable>
+        </section>
+      </div>
+    </div>
+  </div>
+
+  <RmLoadingState v-if="!loaded || isLoadingQueryClinicalTrial" :lines="3" :chart-height="240" />
+  <RmEmptyState
+    v-else-if="!trial"
+    :title="$t('oipScience.common.noDataTitle')"
+    :text="$t('oipScience.common.noDataText')"
+  />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useGlobalClinicalTrials from '../../../oip-science/composables/useGlobalClinicalTrials';
+import { ifNoRes, removeDuplicate, setColorStatus } from '../../../oip-science/utils/styleAndFormat';
+
+const props = withDefaults(
+  defineProps<{
+    /** Numero NCT de l'essai. */
+    id: string;
+    /** Termes de la recherche en cours, surlignes dans la fiche. */
+    highlight?: string[];
+    lang?: 'fr' | 'en';
+  }>(),
+  { highlight: () => [], lang: 'fr' },
+);
+
+const { t } = useI18n();
+
+const {
+  findClinicalTrialById,
+  isLoadingQueryClinicalTrial,
+  resultsQueryClinicalTrial,
+} = useGlobalClinicalTrials();
+
+// La fiche est typee lache cote composable : on la lit une fois ici.
+const trial = computed(() => resultsQueryClinicalTrial.value as Record<string, any> | null);
+
+// Le composable part a `false` : sans ce drapeau, l'etat vide sortirait avant la requete.
+const loaded = ref(false);
+
+// QUERY
+async function load() {
+  if (!props.id) return;
+  await findClinicalTrialById({ id: props.id.toString() });
+  loaded.value = true;
+}
+
+onMounted(load);
+watch(() => props.id, load);
+
+// :::::::::::::::::::::::::::::
+// HELPERS
+
+// Les booleens CT.gov arrivent parfois en texte ('Yes', 't', 'true').
+const yesNo = (value: unknown) =>
+  value === true || /^(yes|true|t)$/i.test(String(value ?? '')) ? t('oipScience.trial.yes') : t('oipScience.trial.no');
+
+// CT.gov type les dates et l'effectif : ESTIMATED (= Anticipated) ou ACTUAL.
+const isEstimated = (type: unknown) => /^(estimated|anticipated)$/i.test(String(type ?? ''));
+const dateKind = (type: unknown) => (type ? (isEstimated(type) ? t('oipScience.trial.estimated') : t('oipScience.trial.actual')) : undefined);
+
+// SAMPLES_WITHOUT_DNA -> Samples without DNA
+const humanize = (value: unknown) =>
+  value ? String(value).toLowerCase().replace(/_/g, ' ').replace(/^./, (c) => c.toUpperCase()) : '';
+
+const design = computed(() => trial.value?.designs?.[0]);
+const eligibility = computed(() => trial.value?.eligibilities?.[0]);
+
+const briefSummary = computed(() => trial.value?.brief_summary?.[0]?.brief_summary ?? null);
+
+// :::::::::::::::::::::::::::::
+// CONDITIONS & KEYWORDS
+
+const getRareDiseases = computed(() =>
+  removeDuplicate(
+    trial.value?.rare_diseases?.map((res: any) => res.concat_disease_name_orpha_code) ?? []
+  ) as string[]
+);
+
+const keywords = computed(() =>
+  removeDuplicate(trial.value?.keywords?.map((val) => val.keyword_name) ?? []) as string[]
+);
+
+const conditionRows = computed(() =>
+  ((trial.value?.conditions ?? []) as any[]).map((c) => ({
+    name: c.condition_name_en || c.condition_name_fr,
+    description: c.condition_description,
+  }))
+);
+
+const hasConditionsBlock = computed(
+  () => conditionRows.value.length > 0 || getRareDiseases.value.length > 0 || keywords.value.length > 0
+);
+
+// :::::::::::::::::::::::::::::
+// DESIGN
+
+// Seuls les champs renseignes sortent : un essai observationnel n'a ni
+// allocation ni masquage, un interventionnel n'a pas de modele observationnel.
+const designFacts = computed(() => {
+  const d = design.value;
+  const masked = [
+    d?.subject_masked && t('oipScience.trial.maskedParticipant'),
+    d?.caregiver_masked && t('oipScience.trial.maskedCareProvider'),
+    d?.investigator_masked && t('oipScience.trial.maskedInvestigator'),
+    d?.outcomes_assessor_masked && t('oipScience.trial.maskedOutcomesAssessor'),
+  ].filter(Boolean);
+  return [
+    { label: t('oipScience.trial.studyType'), value: trial.value?.study_type },
+    { label: t('oipScience.trial.phase'), value: trial.value?.phase },
+    { label: t('oipScience.trial.primaryPurpose'), value: d?.primary_purpose },
+    { label: t('oipScience.trial.allocation'), value: d?.allocation },
+    { label: t('oipScience.trial.interventionModel'), value: d?.intervention_model },
+    { label: t('oipScience.trial.observationalModel'), value: d?.observational_model },
+    { label: t('oipScience.trial.timePerspective'), value: d?.time_perspective },
+    { label: t('oipScience.trial.masking'), value: d?.masking },
+    { label: t('oipScience.trial.maskedRoles'), value: masked.join(', ') },
+    { label: t('oipScience.trial.targetDuration'), value: trial.value?.target_duration },
+    { label: t('oipScience.trial.biospecimenRetention'), value: humanize(trial.value?.biospec_retention) },
+    { label: t('oipScience.trial.resultsPosted'), value: yesNo(trial.value?.with_result) },
+    { label: t('oipScience.trial.dataMonitoringCommittee'), value: yesNo(trial.value?.has_dmc) },
+    { label: t('oipScience.trial.expandedAccess'), value: yesNo(trial.value?.has_expanded_access) },
+    { label: t('oipScience.trial.fdaRegulatedDrug'), value: yesNo(trial.value?.is_fda_regulated_drug) },
+    { label: t('oipScience.trial.fdaRegulatedDevice'), value: yesNo(trial.value?.is_fda_regulated_device) },
+  ].filter((fact) => fact.value);
+});
+
+// Textes libres du design, affiches sous la grille quand ils existent.
+const designNotes = computed(() =>
+  [
+    { label: t('oipScience.trial.interventionModelDescription'), text: design.value?.intervention_model_description },
+    { label: t('oipScience.trial.maskingDescription'), text: design.value?.masking_description },
+    { label: t('oipScience.trial.biospecimenDescription'), text: trial.value?.biospec_description },
+  ].filter((note) => note.text)
+);
+
+// :::::::::::::::::::::::::::::
+// BRANCHES ET INTERVENTIONS
+
+const isCohort = computed(() => !trial.value?.number_of_arms && !!trial.value?.number_of_groups);
+
+// Une ligne par design_group : les lignes de la jointure se fondent par id.
+const resultDesignGroupsInterventions = computed(() => {
+  const list = trial.value?.resultDesignGroupsInterventions;
+  if (!Array.isArray(list)) return [];
+
+  const idMap = list.reduce((result: Record<string, any>, current: { design_group_id?: string }) => {
+    if (current.design_group_id && result[current.design_group_id] == null) {
+      result[current.design_group_id] = { ...current };
+    } else if (current.design_group_id) {
+      Object.assign(result[current.design_group_id], current);
+    }
+    return result;
+  }, {});
+
+  return Object.values(idMap) as Record<string, any>[];
+});
+
+const otherNamesById = computed(() => {
+  const map = new Map<string, string>();
+  for (const inter of (trial.value?.intervention ?? []) as Record<string, any>[]) {
+    if (inter.intervention_id != null && inter.intervention_other_name) {
+      map.set(String(inter.intervention_id), inter.intervention_other_name);
+    }
+  }
+  return map;
+});
+
+const armRows = computed(() =>
+  resultDesignGroupsInterventions.value.map((arm) => {
+    const linked = (trial.value?.armAndInterventionList ?? []).filter(
+      (x) => x.design_group_id === arm.design_group_id
+    );
+    // Sans jointure bras/intervention (etudes observationnelles), l'intervention
+    // est portee par la ligne du groupe elle-meme.
+    const interventions = linked.length
+      ? linked.map((x: Record<string, any>) => ({
+          type: x.intervention_type,
+          name: x.name,
+          description: x.description,
+          otherNames: otherNamesById.value.get(String(x.intervention_id)),
+        }))
+      : arm.intervention_name
+        ? [{ type: arm.intervention_type, name: arm.intervention_name, description: arm.intervention_description }]
+        : [];
+    return {
+      group_type: arm.group_type,
+      title: arm.title,
+      description: arm.description,
+      interventions,
+    };
+  })
+);
+
+const interventionRows = computed(() =>
+  ((trial.value?.intervention ?? []) as any[]).map((i) => ({
+    type: i.intervention_type,
+    name: i.intervention_name,
+    description: i.intervention_description,
+  }))
+);
+
+// :::::::::::::::::::::::::::::
+// OUTCOMES
+
+const outcomeGroups = computed(() => {
+  const outcomes = (trial.value?.design_outcomes ?? []) as Record<string, any>[];
+  return [
+    { type: 'primary', label: t('oipScience.trial.outcomePrimary') },
+    { type: 'secondary', label: t('oipScience.trial.outcomeSecondary') },
+    { type: 'other', label: t('oipScience.trial.outcomeOther') },
+  ]
+    .map((g) => ({ ...g, items: outcomes.filter((o) => o.outcome_type === g.type) }))
+    .filter((g) => g.items.length);
+});
+
+// :::::::::::::::::::::::::::::
+// ELIGIBILITY
+
+const eligibleAges = computed(() => {
+  const min = eligibility.value?.minimum_age;
+  const max = eligibility.value?.maximum_age;
+  if (min && max) return t('oipScience.trial.agesRange', { min, max });
+  if (min) return t('oipScience.trial.agesMin', { min });
+  if (max) return t('oipScience.trial.agesMax', { max });
+  return 'N/A';
+});
+
+// Le texte CT.gov porte ses intertitres « Inclusion Criteria: » et
+// « Exclusion Criteria: » sur leur propre ligne. On coupe dessus ; si le texte
+// ne suit pas ce format, il sort d'un bloc.
+const criteria = computed(() => {
+  const text = eligibility.value?.criteria;
+  if (!text) return null;
+  const parts = text.split(/^\s*exclusion criteria\s*:?\s*$/im);
+  if (parts.length !== 2) return { all: text };
+  return {
+    inclusion: (parts[0] ?? '').replace(/^\s*inclusion criteria\s*:?\s*$/im, '').trim(),
+    exclusion: (parts[1] ?? '').trim(),
+  };
+});
+
+// :::::::::::::::::::::::::::::
+// DOCUMENTS & LINKS
+
+// Un meme document revient parfois en double dans la jointure : on dedoublonne
+// sur type + id + url.
+const studyDocuments = computed(() => {
+  const seen = new Set<string>();
+  return ((trial.value?.documents ?? []) as Record<string, any>[])
+    .map((d) => ({
+      key: `${d.document_type}|${d.document_id}|${d.url}`,
+      type: d.document_type || t('oipScience.trial.document'),
+      id: d.document_id,
+      url: d.url,
+      comment: d.comment,
+      isPdf: /\.pdf($|\?)/i.test(String(d.url ?? '')),
+    }))
+    .filter((d) => (seen.has(d.key) ? false : (seen.add(d.key), true)));
+});
+
+// Fiche CT.gov d'abord, puis les sites declares par le sponsor et le lien IPD.
+const websiteLinks = computed(() => {
+  const links = [
+    { label: t('oipScience.trial.ctgovRecord'), url: `https://clinicaltrials.gov/study/${trial.value?.nct_id}` },
+    ...((trial.value?.links_t ?? []) as Record<string, any>[])
+      .filter((l) => l.url)
+      .map((l) => ({ label: l.description || l.url, url: l.url })),
+  ];
+  if (trial.value?.ipd_url) links.push({ label: t('oipScience.trial.ipdSharingLink'), url: trial.value.ipd_url });
+  return links.filter((l, i) => links.findIndex((x) => x.url === l.url) === i);
+});
+
+// Champs date NCT, chacun accompagne de son `_type` (ACTUAL / ESTIMATED).
+const dateRows = computed(() => {
+  const r = trial.value ?? ({} as Record<string, any>);
+  const rows = [
+    {
+      field: 'study_first_posted_date',
+      label: t('oipScience.trial.dateFirstPosted'),
+      desc: t('oipScience.trial.dateFirstPostedDesc'),
+    },
+    { field: 'start_date', label: t('oipScience.trial.dateStudyStart'), desc: t('oipScience.trial.dateStudyStartDesc') },
+    {
+      field: 'primary_completion_date',
+      label: t('oipScience.trial.primaryCompletion'),
+      desc: t('oipScience.trial.datePrimaryCompletionDesc'),
+    },
+    {
+      field: 'completion_date',
+      label: t('oipScience.trial.dateStudyCompletion'),
+      desc: t('oipScience.trial.dateStudyCompletionDesc'),
+    },
+    {
+      field: 'results_first_posted_date',
+      label: t('oipScience.trial.dateResultsFirstPosted'),
+      desc: t('oipScience.trial.dateResultsFirstPostedDesc'),
+    },
+    {
+      field: 'disposition_first_posted_date',
+      label: t('oipScience.trial.dateDispositionFirstPosted'),
+      desc: t('oipScience.trial.dateDispositionFirstPostedDesc'),
+    },
+    {
+      field: 'last_update_posted_date',
+      label: t('oipScience.trial.dateLastUpdatePosted'),
+      desc: t('oipScience.trial.dateLastUpdatePostedDesc'),
+    },
+    // Dates de depot, sans `_type` : la table seulement, pas la frise.
+    {
+      field: 'study_first_submitted_date',
+      label: t('oipScience.trial.dateFirstSubmitted'),
+      desc: t('oipScience.trial.dateFirstSubmittedDesc'),
+      timeline: false,
+    },
+    {
+      field: 'study_first_submitted_qc_date',
+      label: t('oipScience.trial.dateFirstSubmittedQc'),
+      desc: t('oipScience.trial.dateFirstSubmittedQcDesc'),
+      timeline: false,
+    },
+    {
+      field: 'results_first_submitted_date',
+      label: t('oipScience.trial.dateResultsFirstSubmitted'),
+      desc: t('oipScience.trial.dateResultsFirstSubmittedDesc'),
+      timeline: false,
+    },
+    {
+      field: 'last_update_submitted_date',
+      label: t('oipScience.trial.dateLastUpdateSubmitted'),
+      desc: t('oipScience.trial.dateLastUpdateSubmittedDesc'),
+      timeline: false,
+    },
+    {
+      field: 'verification_date',
+      label: t('oipScience.trial.dateLastVerified'),
+      desc: t('oipScience.trial.dateLastVerifiedDesc'),
+      timeline: false,
+    },
+  ];
+  return rows.map((row) => ({
+    ...row,
+    date: r[row.field],
+    estimated: isEstimated(r[`${row.field}_type`]),
+  }));
+});
+
+const keyDates = computed(() => dateRows.value.filter((row) => row.date && row.timeline !== false));
+
+// All dates : la table de reference, tous les champs, vides compris. La date
+// tombe dans la colonne de son type ; sans type, elle passe en Actual.
+const allDatesRows = computed(() =>
+  dateRows.value.map((row) => ({
+    field: row.field,
+    anticipated: row.date && row.estimated ? row.date : null,
+    actual: row.date && !row.estimated ? row.date : null,
+    desc: row.desc,
+  }))
+);
+
+// Le sommaire defile le conteneur de la fiche (cadre ou tiroir de projet).
+const root = ref<HTMLElement | null>(null);
+const { chaptersOffset, stickyTop, scrollToChapter } = useOipChapterScroll(root);
+
+const chaptersList = computed(() =>
+  [
+    { label: t('oipScience.trial.overview'), value: 'summary', show: true },
+    { label: t('oipScience.trial.conditionsAndKeywords'), value: 'conditions', show: hasConditionsBlock.value },
+    { label: t('oipScience.trial.studyDesign'), value: 'study-design', show: true },
+    {
+      label: t('oipScience.trial.armsAndInterventions'),
+      value: 'arms-and-intervention',
+      show: armRows.value.length > 0 || interventionRows.value.length > 0,
+    },
+    { label: t('oipScience.trial.outcomeMeasures'), value: 'outcome-measures', show: outcomeGroups.value.length > 0 },
+    { label: t('oipScience.trial.eligibilityCriteria'), value: 'eligibility-criteria', show: true },
+    { label: t('oipScience.trial.documentsAndLinks'), value: 'documents-and-links', show: true },
+    { label: t('oipScience.trial.keyDates'), value: 'key-dates', show: keyDates.value.length > 0 },
+    { label: t('oipScience.trial.allDates'), value: 'all-dates', show: true },
+
+  ]
+    .filter((c) => c.show)
+    .map(({ label, value }) => ({ label, value }))
+);
+</script>
+
+<style scoped>
+.chapters_col {
+  flex: 0 0 auto;
+}
+.chapters_sticky {
+  position: sticky;
+}
+
+.sd-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.sd-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.sd-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.sd-h1 {
+  font-family: var(--font-display, Caudex, serif);
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+.sd-h2 {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  margin: 0;
+}
+.sd-hint {
+  text-transform: none;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+.sd-prose {
+  white-space: pre-wrap;
+  line-height: 1.6;
+  max-width: 80ch;
+}
+.sd-muted {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.sd-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Overview */
+.sd-overview-head {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+.sd-external {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-primary, var(--primary));
+  text-decoration: none;
+}
+.sd-external:hover {
+  text-decoration: underline;
+}
+.sd-kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+}
+
+/* Faits (design, eligibilite) */
+.sd-facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1px;
+  margin: 0;
+  background: var(--border-default);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.sd-fact {
+  background: var(--bg-surface);
+  padding: 12px 14px;
+}
+.sd-fact dt {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+.sd-fact dd {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Cellules de tables */
+.sd-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.sd-cell-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.sd-cell-title {
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+.sd-cell-tag {
+  margin-right: 6px;
+}
+/* RmTextHighlight est un bloc : apres un libelle ou un type sur la meme
+   ligne, on le remet dans le flux du texte. */
+.sd-inline,
+.sd-inline :deep(.rm-thl__body) {
+  display: inline;
+}
+.sd-kind {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
+  margin-right: 4px;
+}
+
+/* Outcomes */
+.sd-outcomes {
+  list-style: none;
+  counter-reset: outcome;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.sd-outcome {
+  counter-increment: outcome;
+  position: relative;
+  padding: 0 0 12px 32px;
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.sd-outcome:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+.sd-outcome::before {
+  content: counter(outcome);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--bg-surface-2);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  display: grid;
+  place-items: center;
+}
+.sd-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+/* Eligibilite */
+.sd-criteria {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+.sd-criteria-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 8px;
+  background: var(--bg-surface-2);
+  border-left: 3px solid var(--border-default);
+}
+.sd-criteria-col--in {
+  border-left-color: var(--color-success, #2e9e6a);
+}
+.sd-criteria-col--out {
+  border-left-color: var(--color-danger, #d64545);
+}
+
+/* Frise des dates */
+.sd-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.sd-step {
+  position: relative;
+  display: flex;
+  gap: 14px;
+  padding-bottom: 16px;
+}
+.sd-step:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 14px;
+  bottom: 0;
+  width: 2px;
+  background: var(--border-default);
+}
+.sd-dot {
+  /* border-box : sans lui, la bordure elargit la pastille a 16px et son
+     centre sort de l'axe du trait (6px). */
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+  flex: 0 0 12px;
+  height: 12px;
+  margin-top: 4px;
+  border-radius: 50%;
+  background: var(--color-primary, var(--primary));
+  border: 2px solid var(--color-primary, var(--primary));
+}
+.sd-step--estimated .sd-dot {
+  background: var(--bg-surface);
+  border-style: dashed;
+}
+.sd-step-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.sd-step-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+.sd-step-label {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.sd-step-date {
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+}
+
+/* All dates */
+.sd-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-primary, var(--primary));
+  background: var(--bg-surface-2);
+  padding: 2px 6px;
+  border-radius: 4px;
+  word-break: break-all;
+}
+.sd-na {
+  color: var(--text-muted);
+  font-style: italic;
+  font-size: 12px;
+}
+/* Documents & links */
+.sd-links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.sd-link {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+.sd-link-icon {
+  flex: 0 0 auto;
+  margin-top: 2px;
+  color: var(--text-muted);
+}
+.sd-link-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+  color: var(--color-primary, var(--primary));
+  text-decoration: none;
+}
+.sd-link-title:hover {
+  text-decoration: underline;
+}
+.sd-url {
+  word-break: break-all;
+}
+</style>