@tekkare/romulus 0.1.254 → 0.1.255

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.253",
+  "version": "0.1.254",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

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

@@ -0,0 +1,354 @@
+<!--
+  Ce a quoi un sujet se relie : les signes que l'article lui attribue, les
+  changements genetiques qu'il rapporte, et l'article lui-meme.
+
+  Reprend PatientsConnectionsGraph de Discovery (cytoscape + fcose). Un signe
+  explicitement ecarte, ou un gene teste puis ecarte, se dessine en pointille,
+  jamais en trait plein : un trait plein affirmerait ce que l'article nie.
+-->
+<template>
+  <div class="oip_list gap-8">
+    <div class="oip_row v-center space-between gap-16 wrap">
+      <div class="oip_row v-center gap-8">
+        <span class="graph_label">{{ fr ? "Disposition" : "Layout" }}</span>
+        <select v-model="layoutName" class="graph_select">
+          <option value="fcose">{{ fr ? "Force" : "Force" }}</option>
+          <option value="concentric">{{ fr ? "Concentrique" : "Concentric" }}</option>
+          <option value="circle">{{ fr ? "Cercle" : "Circle" }}</option>
+          <option value="grid">{{ fr ? "Grille" : "Grid" }}</option>
+        </select>
+        <button type="button" class="graph_fit" @click="fit">{{ fr ? "Recentrer" : "Fit" }}</button>
+      </div>
+      <div class="graph_legend">
+        <button
+          v-for="legend in legendEntries"
+          :key="legend.type"
+          type="button"
+          class="graph_leg"
+          :class="{ 'graph_leg--dim': hiddenTypes.has(legend.type) }"
+          :aria-pressed="!hiddenTypes.has(legend.type)"
+          :title="hiddenTypes.has(legend.type) ? `${fr ? 'Afficher' : 'Show'} ${legend.label}` : `${fr ? 'Masquer' : 'Hide'} ${legend.label}`"
+          @click="toggleType(legend.type)"
+        >
+          <span class="graph_dot" :style="{ background: colors[legend.type] }" />
+          {{ legend.label }}
+        </button>
+      </div>
+    </div>
+    <div ref="container" class="graph_container" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PatientProfile } from "../../oip-patients/types";
+
+type NodeType = "subject" | "paper" | "phenotype" | "gene" | "variant";
+
+const props = withDefaults(defineProps<{ data: PatientProfile; lang?: "fr" | "en" }>(), { lang: "fr" });
+
+const fr = computed(() => props.lang !== "en");
+
+/**
+ * Lues dans les jetons plutot qu'ecrites ici : cytoscape veut une valeur
+ * concrete qu'il ne sait pas resoudre lui-meme, et la palette suit le theme.
+ */
+function token(name: string, fallback: string): string {
+  if (typeof window === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+
+const colors = ref<Record<NodeType, string>>({
+  subject: "#1dacfc",
+  paper: "#07816f",
+  phenotype: "#fda929",
+  gene: "#a17def",
+  variant: "#f55a8d",
+});
+
+function readColors() {
+  colors.value = {
+    subject: token("--chart-cat-1", colors.value.subject),
+    paper: token("--color-primary", colors.value.paper),
+    phenotype: token("--chart-cat-3", colors.value.phenotype),
+    gene: token("--chart-cat-4", colors.value.gene),
+    variant: token("--chart-cat-5", colors.value.variant),
+  };
+}
+
+const LEGEND_LABELS = computed<Record<NodeType, string>>(() => ({
+  subject: fr.value ? "Ce sujet" : "This subject",
+  paper: fr.value ? "Article" : "Paper",
+  phenotype: fr.value ? "Signe" : "Sign",
+  gene: fr.value ? "Gène" : "Gene",
+  variant: "Variant",
+}));
+
+const container = ref<HTMLElement | null>(null);
+const layoutName = ref("fcose");
+const hiddenTypes = ref<Set<NodeType>>(new Set());
+let cy: any = null;
+let observer: ResizeObserver | null = null;
+
+function toggleType(type: NodeType) {
+  const next = new Set(hiddenTypes.value);
+  if (next.has(type)) next.delete(type);
+  else next.add(type);
+  hiddenTypes.value = next;
+}
+
+function fit() {
+  cy?.fit(undefined, 40);
+}
+
+const elements = computed(() => {
+  const record = props.data.record;
+  const subjectId = props.data.record_id;
+  const edgeLabel = (frText: string, enText: string) => (fr.value ? frText : enText);
+  const items: any[] = [{ data: { id: subjectId, label: props.data.label || subjectId, nodeType: "subject", size: 46 } }];
+
+  if (props.data.pmid) {
+    items.push({ data: { id: `pmid:${props.data.pmid}`, label: props.data.pmid, nodeType: "paper", size: 34 } });
+    items.push({ data: { source: subjectId, target: `pmid:${props.data.pmid}`, label: edgeLabel("décrit dans", "reported in"), dashed: false } });
+  }
+
+  for (const sign of record?.phenotypes ?? []) {
+    const id = sign.hpo_id || sign.label;
+    if (!id) continue;
+    items.push({ data: { id, label: sign.label || id, nodeType: "phenotype", size: 26 } });
+    items.push({
+      data: {
+        source: subjectId,
+        target: id,
+        label: sign.present === false ? edgeLabel("absent", "not present") : edgeLabel("présente", "has"),
+        dashed: sign.present === false,
+      },
+    });
+  }
+
+  for (const gene of record?.genotype ?? []) {
+    if (!gene.gene_hgnc) continue;
+    const rejected = gene.interpretation_status === "REJECTED";
+    items.push({ data: { id: `gene:${gene.gene_hgnc}`, label: gene.gene_hgnc, nodeType: "gene", size: 32 } });
+    items.push({ data: { source: subjectId, target: `gene:${gene.gene_hgnc}`, label: edgeLabel("gène", "gene"), dashed: rejected } });
+
+    const change = gene.cdna || gene.protein;
+    if (change) {
+      const id = `variant:${gene.gene_hgnc}:${change}`;
+      items.push({ data: { id, label: change, nodeType: "variant", size: 26 } });
+      items.push({ data: { source: `gene:${gene.gene_hgnc}`, target: id, label: gene.zygosity || edgeLabel("variant", "change"), dashed: rejected } });
+    }
+  }
+  return items;
+});
+
+/** Seuls les types presents, calcules avant le masquage : un type masque garde sa pastille. */
+const legendEntries = computed(() => {
+  const present = new Set(elements.value.filter((item) => item.data.id).map((item) => item.data.nodeType as NodeType));
+  return (Object.keys(LEGEND_LABELS.value) as NodeType[])
+    .filter((type) => present.has(type))
+    .map((type) => ({ type, label: LEGEND_LABELS.value[type] }));
+});
+
+/**
+ * Masquer par type sans toucher a la disposition : les positions restent, le
+ * retour remet tout en place. Une arete part avec ses extremites.
+ */
+function applyFilter() {
+  if (!cy) return;
+  cy.batch(() => {
+    cy.elements().show();
+    const hidden = cy.nodes().filter((node: any) => hiddenTypes.value.has(node.data("nodeType")));
+    hidden.connectedEdges().hide();
+    hidden.hide();
+  });
+}
+
+const style = () => {
+  const text = token("--text-primary", "#0f172a");
+  const muted = token("--text-muted", "#64748b");
+  const line = token("--border-strong", "#94a3b8");
+  const lineSoft = token("--border-default", "#cbd5e1");
+  return [
+    {
+      selector: "node",
+      style: {
+        label: "data(label)",
+        "text-valign": "center",
+        "text-halign": "center",
+        "font-size": "10px",
+        "font-family": "Inter, sans-serif",
+        "text-margin-y": -12,
+        width: "data(size)",
+        height: "data(size)",
+        color: text,
+        "font-weight": 600,
+      },
+    },
+    ...(Object.entries(colors.value) as [NodeType, string][]).map(([type, color]) => ({
+      selector: `node[nodeType="${type}"]`,
+      style: { "background-color": color },
+    })),
+    {
+      selector: "edge",
+      style: {
+        width: 1.5,
+        "line-color": line,
+        "curve-style": "bezier",
+        "font-size": "8px",
+        color: muted,
+        label: "data(label)",
+        "text-rotation": "autorotate",
+      },
+    },
+    { selector: "edge[?dashed]", style: { "line-style": "dashed", "line-color": lineSoft } },
+  ];
+};
+
+/**
+ * Sans arete, une disposition de force n'a rien a resoudre et empile les noeuds
+ * hors champ : la grille est le repli honnete.
+ */
+function layoutOptions(hasEdges: boolean) {
+  const shared = { padding: 40, stop: () => fit() };
+  if (!hasEdges) return { ...shared, name: "grid", avoidOverlap: true };
+  if (layoutName.value === "concentric") {
+    return { ...shared, name: "concentric", concentric: (node: any) => node.degree(), levelWidth: () => 2, minNodeSpacing: 60 };
+  }
+  if (layoutName.value === "circle" || layoutName.value === "grid") {
+    return { ...shared, name: layoutName.value, spacingFactor: 1.5 };
+  }
+  return {
+    ...shared,
+    name: "fcose",
+    quality: "proof",
+    animate: true,
+    animationDuration: 500,
+    nodeDimensionsIncludeLabels: true,
+    nodeRepulsion: () => 20000,
+    idealEdgeLength: () => 150,
+    gravity: 0.3,
+  };
+}
+
+function relayout() {
+  if (!cy) return;
+  cy.layout(layoutOptions(cy.edges(":visible").length > 0)).run();
+}
+
+let fcoseRegistered = false;
+
+async function draw() {
+  if (!container.value) return;
+  const cytoscape = (await import("cytoscape")).default;
+  if (!fcoseRegistered) {
+    cytoscape.use((await import("cytoscape-fcose")).default);
+    fcoseRegistered = true;
+  }
+  readColors();
+  cy?.destroy();
+
+  const els = elements.value;
+  cy = cytoscape({
+    container: container.value,
+    elements: els,
+    style: style() as any,
+    layout: layoutOptions(els.some((element) => !element.data.id)) as any,
+    minZoom: 0.2,
+    maxZoom: 3,
+    wheelSensitivity: 0.3,
+  });
+  applyFilter();
+  cy.one("layoutstop", fit);
+}
+
+onMounted(async () => {
+  await draw();
+  // Cytoscape mesure son canevas une fois : le rail et la barre laterale
+  // changent la largeur apres le montage.
+  if (container.value && typeof ResizeObserver !== "undefined") {
+    observer = new ResizeObserver(() => cy?.resize());
+    observer.observe(container.value);
+  }
+});
+
+watch(() => props.data.record_id, draw);
+watch(locale, draw);
+watch(layoutName, relayout);
+watch(hiddenTypes, applyFilter);
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  cy?.destroy();
+});
+</script>
+
+<style scoped>
+.graph_container {
+  width: 100%;
+  max-width: 100%;
+  height: 440px;
+  overflow: hidden;
+}
+
+.graph_label {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.graph_select {
+  padding: 2px 6px;
+  font-size: 12px;
+  color: var(--text-primary);
+  background: transparent;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+}
+
+.graph_fit {
+  padding: 0;
+  font-size: 13px;
+  color: var(--primary);
+  text-decoration: underline;
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+.graph_legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.graph_leg {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  font-size: 12px;
+  color: var(--text-primary);
+  background: none;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    opacity 0.15s;
+}
+
+.graph_leg:hover {
+  background: var(--bg-surface-2);
+}
+
+.graph_leg--dim {
+  opacity: 0.4;
+}
+
+.graph_dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+</style>