@tekkare/romulus 0.1.251 → 0.1.253

package/layer/app/components/oip-science/clinical-trials/PairBody.vue

@@ -0,0 +1,182 @@
+<!--
+  Corps d'une carte double : le meme essai enregistre dans CT.gov et dans
+  EUCT (CTIS). Colonne gauche : le corps habituel de la carte (slot). Colonne
+  droite : le resume de l'essai jumeau, avec son statut et le lien vers sa
+  fiche. Partage par les cartes NCT et EUCT.
+-->
+<template>
+  <div class="ct_pair oip-science">
+    <div class="ct_pair_col">
+      <p class="ct_pair_label">{{ kind === 'euct' ? '🇺🇸 NCT' : '🇪🇺 EUCT' }}</p>
+      <slot />
+    </div>
+
+    <div class="ct_pair_col ct_pair_col--linked">
+      <div class="oip_row v-center space-between gap-8 wrap">
+        <p class="ct_pair_label">{{ kind === 'euct' ? '🇪🇺 EUCT' : '🇺🇸 NCT' }}</p>
+        <div class="oip_row v-center gap-4 wrap">
+          <RmTag v-if="status" :variant="setColorStatus(status)">{{ status }}</RmTag>
+          <RmTag v-if="phase && phase !== 'Not Applicable'" variant="violet">{{ phase }}</RmTag>
+        </div>
+      </div>
+
+      <div class="oip_grid gap-12">
+        <OipScienceCommonTableTags
+          v-if="conditions.length"
+          :isShortFirstColumn="true"
+          icon="FaceMask"
+          :title="$t('oipScience.common.conditions')"
+          :values="conditions"
+          :highlightQueries="queries"
+          :isFullResults="false"
+        />
+        <OipScienceCommonTableTags
+          v-if="treatments.length"
+          :isShortFirstColumn="true"
+          :icon="kind === 'euct' ? 'Pill' : 'Clipboard'"
+          :title="kind === 'euct' ? $t('oipScience.common.products') : $t('oipScience.common.interventions')"
+          :values="treatments"
+          :highlightQueries="queries"
+          :isFullResults="false"
+        />
+        <OipScienceCommonTableTags
+          v-if="sponsors.length"
+          :isShortFirstColumn="true"
+          icon="Briefcase"
+          :title="$t('oipScience.common.sponsors')"
+          :values="sponsors"
+          :highlightQueries="queries"
+          :isFullResults="false"
+        />
+        <OipScienceCommonTableTags
+          v-if="enrollment != null && enrollment !== ''"
+          :isShortFirstColumn="true"
+          icon="ListBullets"
+          :title="$t('oipScience.cards.enrollment')"
+          :values="[ifNoRes(enrollment, 'number')]"
+          :isFullResults="false"
+        />
+      </div>
+
+      <a class="ct_pair_link" :href="nav.href(linkedType, linkedId)" @click.stop="followCardLink($event, nav, linkedType, linkedId)">
+        {{ kind === 'euct' ? $t('oipScience.cards.openEuctCard') : $t('oipScience.cards.openNctCard') }}
+        <RmIcon name="ArrowRight" :size="14" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ifNoRes, setColorStatus } from '../../../oip-science/utils/styleAndFormat';
+import { followCardLink } from '../../../oip-science/utils/b-openCard';
+
+const props = defineProps<{
+  /** Registre de l'essai jumeau, affiche dans la colonne droite. */
+  kind: 'euct' | 'nct';
+  /** L'essai jumeau, tel que le charge useLinkedTrials. */
+  linked: any;
+  queries?: any;
+}>();
+
+const uniq = (list: (string | null | undefined)[]) =>
+  [...new Set(list.filter((x): x is string => !!x))];
+
+const status = computed(() =>
+  props.kind === 'euct' ? props.linked?.global_status : props.linked?.overall_status,
+);
+const phase = computed(() =>
+  props.kind === 'euct' ? props.linked?.trial_phase : props.linked?.phase,
+);
+
+const conditions = computed(() =>
+  uniq(
+    ((props.kind === 'euct' ? props.linked?.medical_condition : props.linked?.conditions) || []).map(
+      (c: any) => c?.condition_name_en,
+    ),
+  ),
+);
+
+const treatments = computed(() =>
+  props.kind === 'euct'
+    ? uniq(
+        (props.linked?.products || []).map(
+          (p: any) =>
+            p?.productDictionaryInfo?.prodName || p?.productDictionaryInfo?.activeSubstanceName,
+        ),
+      )
+    : uniq((props.linked?.intervention || []).map((i: any) => i?.intervention_name)),
+);
+
+const sponsors = computed(() =>
+  props.kind === 'euct'
+    ? uniq((props.linked?.co_sponsors || []).map((s: any) => s?.organisation?.name))
+    : uniq((props.linked?.sponsors || []).map((s: any) => s?.sponsor_name)),
+);
+
+const enrollment = computed(() =>
+  props.kind === 'euct'
+    ? props.linked?.enrollment_status?.total_planned_enrollment
+    : props.linked?.enrollment,
+);
+
+// Fiche de l'essai jumeau, par la navigation du layer (page ou tiroir).
+const nav = useOipResourceNav();
+const linkedType = computed(() => (props.kind === 'euct' ? 'ClinicalTrialsEUCT' : 'ClinicalTrialsNCT'));
+const linkedId = computed<string>(() =>
+  props.kind === 'euct' ? props.linked?.euct_number : props.linked?.nct_id,
+);
+</script>
+
+<style scoped>
+.ct_pair {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-16);
+}
+
+.ct_pair_col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  min-width: 0;
+}
+
+/* L'essai jumeau dans le violet clair du bandeau de projet : on voit que
+   la carte en porte deux. */
+.ct_pair_col--linked {
+  padding: var(--space-12) var(--space-16);
+  border: 1px solid color-mix(in srgb, var(--rm-shell-accent) 40%, transparent);
+  border-radius: var(--radius-lg);
+  background: color-mix(in srgb, var(--rm-shell-accent) 8%, var(--rm-shell-surface));
+}
+
+.ct_pair_label {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-11);
+  font-weight: var(--weight-bold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.ct_pair_link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  margin-top: auto;
+  color: var(--color-primary);
+  font-size: var(--font-13);
+  font-weight: var(--weight-semibold);
+  text-decoration: none;
+}
+
+.ct_pair_link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 900px) {
+  .ct_pair {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>

package/layer/app/components/oip-science/clinical-trials/SitesDrawer.vue

@@ -0,0 +1,95 @@
+<!--
+  Les sites et les contacts d'un essai EUCT dans un pays. Ouvert depuis le
+  tableau de recrutement de la fiche et depuis les pastilles pays des cartes.
+  `country` vaut null tant que le tiroir est ferme.
+
+  RmDrawer se teleporte dans <body> : en-tete et contenu portent eux-memes
+  la classe `oip-science` pour garder les classes de FAS.
+-->
+<template>
+  <RmDrawer
+    v-model="open"
+    size="min(720px, 100vw)"
+    :label="$t('oipScience.trial.clinicalTrialsSite')"
+    :close-label="$t('oipScience.trial.close')"
+  >
+    <template #header>
+      <div class="oip-science">
+        <h2 class="kk_title_medium_2">{{ $t('oipScience.trial.clinicalTrialsSite') }}</h2>
+      </div>
+    </template>
+
+    <div v-if="country" class="oip-science oip_grid gap-24">
+      <div class="oip_row gap-8 v-center">
+        <h1 class="kk_title_medium_2">{{ getCountryEmoji(country) }}</h1>
+        <RmTag v-if="subjects != null" variant="gray">
+          {{ subjects }} {{ $t('oipScience.trial.subjects') }}
+        </RmTag>
+        <RmTag variant="gray">
+          {{ sites.length }} {{ sites.length > 1 ? $t('oipScience.trial.sites') : $t('oipScience.trial.site') }}
+        </RmTag>
+      </div>
+
+      <div v-if="sites.length > 0" class="oip_container_gray oip_grid gap-12">
+        <div v-for="(site, index) in sites" :key="index">
+          <h1 class="oip_subtitle">{{ site.organisation_name }}</h1>
+          <h2 class="oip_body">
+            {{ [site.street_address, site.post_code, site.city].filter(Boolean).join(', ') }}
+          </h2>
+        </div>
+      </div>
+
+      <div v-if="hcps.length > 0" class="oip_container_gray oip_grid gap-12">
+        <div v-for="(hcp, index) in hcps" :key="index">
+          <h1 class="oip_subtitle">
+            {{
+              [hcp.title, hcp.first_name, hcp.last_name]
+                .filter(Boolean)
+                .join(' ')
+                .concat(hcp.department_name ? ` - ${hcp.department_name}` : '')
+            }}
+          </h1>
+          <a
+            v-if="hcp.email"
+            :href="`mailto:${hcp.email}`"
+            class="kk_link_btn_underline oip_row v-center gap-4"
+          >
+            <RmIcon name="EnvelopeSimple" :size="16" color="var(--primary)" />
+            <span>{{ hcp.email }}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </RmDrawer>
+</template>
+
+<script setup lang="ts">
+import { getCountryEmoji } from '../../../oip-science/utils/styleAndFormat';
+
+const props = defineProps<{
+  /** L'essai : il porte `countries`, `sites` et `hcps`. */
+  trial: any;
+  country: string | null;
+}>();
+
+const emit = defineEmits<{ 'update:country': [value: string | null] }>();
+
+const open = computed({
+  get: () => !!props.country,
+  set: (value) => {
+    if (!value) emit('update:country', null);
+  },
+});
+
+const sites = computed<any[]>(() =>
+  (props.trial?.sites || []).filter((site: any) => site.country === props.country)
+);
+const hcps = computed<any[]>(() =>
+  (props.trial?.hcps || []).filter((hcp: any) => hcp.country === props.country)
+);
+const subjects = computed(
+  () =>
+    (props.trial?.countries || []).find((c: any) => c.country_name === props.country)
+      ?.planned_number_of_subjects
+);
+</script>

package/layer/app/components/oip-science/common/Form.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="oip-science oip_grid gap-4">
+    <p class="oip_underline">{{ title }}</p>
+
+    <RmTextHighlight
+      v-if="highlightQueries !== null"
+      :queries="highlightQueries"
+      :text="getContent"
+      class="oip_body"
+      :style="`font-size: ${kpiFontSize}px`"
+      :clamp="isReadMore ? 3 : 0"
+      :lang="$i18n.locale === 'en' ? 'en' : 'fr'"
+    />
+    <p
+      v-else
+      class="oip_body"
+      :class="{ isKpi: isKpi }"
+      :style="`font-size: ${kpiFontSize}px`"
+    >
+      <RmTextHighlight
+        :text="getContent"
+        :style="`font-size: ${kpiFontSize}px`"
+        :clamp="isReadMore ? 3 : 0"
+        :lang="$i18n.locale === 'en' ? 'en' : 'fr'"
+      />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+  isReadMore: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  isKpi: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  kpiFontSize: {
+    type: Number,
+    required: false,
+  },
+  highlightQueries: {
+    type: Array,
+    default: null,
+  },
+});
+
+const activeReadMore = ref(true);
+const readMore = () => {
+  activeReadMore.value = !activeReadMore.value;
+};
+
+const getContent = computed(() => {
+  // if (props.content.length > 200 && activeReadMore.value && props.isReadMore) {
+  //   return props.content.slice(0, 200) + '...';
+  // } else {
+  //   return props.content;
+  // }
+  return props.content;
+});
+</script>

package/layer/app/components/oip-science/common/MatchAvgTag.vue

@@ -0,0 +1,283 @@
+<template>
+  <template v-if="dedupedMatches.length > 0">
+    <div
+      ref="matchTagRef"
+      class="oip-science match-avg-wrapper"
+      @mouseenter="onTagEnter"
+      @mouseleave="onTagLeave"
+    >
+      <RmTag variant="blue">
+        Moyenne des matchs : {{ avgScorePct }}%
+      </RmTag>
+    </div>
+    <Teleport to="body">
+      <div
+        v-if="tooltipOpen"
+        class="oip-science match-avg-tooltip-portal"
+        :class="{ below: tooltipBelow }"
+        :style="tooltipStyle"
+        @mouseenter="onTooltipEnter"
+        @mouseleave="onTooltipLeave"
+      >
+        <div class="match-avg-tooltip-header">
+          <p class="match-avg-tooltip-header-title">Labels matchés</p>
+          <span class="match-avg-tooltip-count">{{ dedupedMatches.length }}</span>
+        </div>
+        <div class="match-avg-tooltip-list">
+          <div
+            v-for="(m, i) in dedupedMatches"
+            :key="i"
+            class="match-avg-tooltip-row"
+          >
+            <span class="match-avg-tooltip-name">{{ m.name }}</span>
+            <span
+              class="match-avg-tooltip-score"
+              :class="(m.score || 0) >= 0.8 ? 'high' : 'low'"
+            >{{ Math.round((m.score || 0) * 100) }}%</span>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </template>
+</template>
+
+<script setup lang="ts">
+type MatchEntry = { name: string; score: number; match_method?: string };
+
+const props = defineProps<{
+  nctName?: MatchEntry[] | null;
+  euctName?: MatchEntry[] | null;
+  pubmedName?: MatchEntry[] | null;
+}>();
+
+// Aggregate match labels, dedupe by name (keep best score), sort desc.
+// HCP entries may use {first_name, last_name} instead of {name}, so we derive a label.
+const dedupedMatches = computed(() => {
+  const raw = [
+    ...((props.nctName as any) || []),
+    ...((props.euctName as any) || []),
+    ...((props.pubmedName as any) || []),
+  ];
+  const all = raw
+    .map((m: any) => ({
+      name:
+        (m?.name && String(m.name).trim()) ||
+        [m?.first_name, m?.last_name].filter(Boolean).join(' ').trim() ||
+        null,
+      score: m?.score,
+      match_method: m?.match_method,
+    }))
+    .filter((m) => m.name && typeof m.score === 'number');
+  const byName = new Map<string, MatchEntry>();
+  for (const m of all) {
+    const existing = byName.get(m.name as string);
+    if (!existing || (m.score ?? 0) > (existing.score ?? 0)) {
+      byName.set(m.name as string, {
+        name: m.name as string,
+        score: m.score as number,
+        match_method: m.match_method,
+      });
+    }
+  }
+  return [...byName.values()].sort((a, b) => (b.score ?? 0) - (a.score ?? 0));
+});
+
+const avgScorePct = computed(() => {
+  if (dedupedMatches.value.length === 0) return 0;
+  const sum = dedupedMatches.value.reduce((acc, m) => acc + (m.score || 0), 0);
+  return Math.round((sum / dedupedMatches.value.length) * 100);
+});
+
+// Teleported tooltip state — escapes any overflow:hidden ancestor
+const matchTagRef = ref<HTMLElement | null>(null);
+const tooltipOpen = ref(false);
+const tooltipBelow = ref(false);
+const tooltipStyle = ref<Record<string, string>>({});
+let hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+const TOOLTIP_GAP = 10;
+const TOOLTIP_MAX_HEIGHT = 360;
+
+function computePosition() {
+  const el = matchTagRef.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const spaceAbove = rect.top;
+  const spaceBelow = window.innerHeight - rect.bottom;
+  const placeBelow = spaceAbove < TOOLTIP_MAX_HEIGHT && spaceBelow > spaceAbove;
+  tooltipBelow.value = placeBelow;
+  const left = rect.left + rect.width / 2 + window.scrollX;
+  if (placeBelow) {
+    tooltipStyle.value = {
+      top: `${rect.bottom + window.scrollY + TOOLTIP_GAP}px`,
+      left: `${left}px`,
+    };
+  } else {
+    tooltipStyle.value = {
+      top: `${rect.top + window.scrollY - TOOLTIP_GAP}px`,
+      left: `${left}px`,
+    };
+  }
+}
+
+function onTagEnter() {
+  if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
+  computePosition();
+  tooltipOpen.value = true;
+}
+
+function onTagLeave() {
+  scheduleHide();
+}
+
+function onTooltipEnter() {
+  if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
+}
+
+function onTooltipLeave() {
+  scheduleHide();
+}
+
+function scheduleHide() {
+  if (hideTimer) clearTimeout(hideTimer);
+  hideTimer = setTimeout(() => {
+    tooltipOpen.value = false;
+  }, 120);
+}
+
+onBeforeUnmount(() => {
+  if (hideTimer) clearTimeout(hideTimer);
+  tooltipOpen.value = false;
+});
+</script>
+
+<style scoped>
+.match-avg-wrapper {
+  display: inline-block;
+  cursor: help;
+}
+</style>
+
+<style>
+.match-avg-tooltip-portal {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+  width: max-content;
+  min-width: 280px;
+  max-width: 380px;
+  text-align: left;
+  z-index: 9999;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
+}
+.match-avg-tooltip-portal.below {
+  transform: translate(-50%, 0);
+}
+.match-avg-tooltip-portal::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 12px;
+  top: 100%;
+}
+.match-avg-tooltip-portal.below::before {
+  top: auto;
+  bottom: 100%;
+}
+.match-avg-tooltip-portal::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border: 7px solid transparent;
+  border-top-color: #ffffff;
+  top: 100%;
+  pointer-events: none;
+}
+.match-avg-tooltip-portal.below::after {
+  top: auto;
+  bottom: 100%;
+  border-top-color: transparent;
+  border-bottom-color: #ffffff;
+}
+.match-avg-tooltip-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-default);
+  background: var(--bg-surface-2);
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.match-avg-tooltip-header-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+.match-avg-tooltip-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--primary);
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 9px;
+  border-radius: 999px;
+  min-width: 24px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.4;
+}
+.match-avg-tooltip-list {
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+.match-avg-tooltip-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  padding: 7px 14px;
+}
+.match-avg-tooltip-row + .match-avg-tooltip-row {
+  border-top: 1px solid var(--border-soft);
+}
+.match-avg-tooltip-name {
+  flex: 1;
+  white-space: normal;
+  word-break: break-word;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.4;
+}
+.match-avg-tooltip-score {
+  font-weight: 600;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  padding: 2px 8px;
+  border-radius: 999px;
+}
+.match-avg-tooltip-score.high {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+.match-avg-tooltip-score.low {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+}
+</style>

package/layer/app/components/oip-science/common/NoData.vue

@@ -0,0 +1,16 @@
+<template>
+  <RmEmptyState class="oip-science" :title="text ?? $t('oipScience.common.noDataTitle')" :text="subText ?? $t('oipScience.common.noDataText')" />
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  text: {
+    type: String,
+    default: undefined,
+  },
+  subText: {
+    type: String,
+    default: undefined,
+  },
+});
+</script>

package/layer/app/components/oip-science/common/ScoreBadge.vue

@@ -0,0 +1,35 @@
+<!--
+  Score de rapprochement (0..1) d'une entite reconnue (RPPS / FINESS), dans la
+  rangee de pastilles d'une carte. Vert a partir de 85 %, orange en dessous.
+-->
+<template>
+  <span
+    v-if="score != null && !isNaN(score)"
+    class="oip-science score-badge"
+    :class="score >= 0.85 ? 'score-high' : 'score-low'"
+    :data-tooltip="$t('oipScience.common.matchingScoreTooltip')"
+  >{{ $t('oipScience.common.confidenceScore') }} · {{ Math.round(score * 100) }}%</span>
+</template>
+
+<script setup lang="ts">
+defineProps<{ score?: number | null }>();
+</script>
+
+<style scoped>
+.score-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: help;
+}
+.score-high {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+.score-low {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+}
+</style>