merge(v13-d): Carte O Option B rectangle central + bandeau sommaire + legende + TMIP

2026-05-11 20:01:34 +02:00
parent 6b9f6bf751 8f8b0c5f4c
commit 8e7125b426
6 changed files with 186 additions and 116 deletions
--- a/src/components/astro/ColCentre.astro
+++ b/src/components/astro/ColCentre.astro
@@ -1,9 +1,9 @@
 ---
-// Centre - HAUT : tabs (Carte O mindmap | Chatbot RAG branche PC7).
+// Centre - HAUT : Carte O mindmap (V1.3-D : onglet Chatbot retire, bandeau "Sommaire editorial" + legende).
 //          MILIEU : preview article (V1.2-P) - inseree au clic journal-item-click.
 //          BAS  : iframe carte AEP (toujours visible).
+// V1.3-D : ChatbotV2 retire du DOM (backlog V2). Pour reactivation -> reintroduire le tab + panel.
 import CarteOWrapper from '../vue/CarteOWrapper.vue';
-import ChatbotV2 from '../vue/ChatbotV2.vue';
 import EmbedDynamique from '../vue/EmbedDynamique.vue';
 import PreviewArticle from '../vue/PreviewArticle.vue';
 ---
@@ -19,56 +19,49 @@ import PreviewArticle from '../vue/PreviewArticle.vue';
  data-preview-open="false"
  style="height: 100%; overflow-y: hidden;"
 >
-  <!-- HAUT (default flex-1 base 33%) : tabs Carte O / Chatbot -->
+  <!-- HAUT (default flex-1 base 33%) : V1.3-D bandeau "Sommaire editorial" + legende + Carte O plein espace -->
  <section
    id="col-centre-haut"
    class="border border-neutral-200 rounded flex flex-col overflow-hidden bg-white"
    style="min-height: 0; flex: 1 1 33%;"
  >
-    <nav role="tablist" aria-label="Vues centrales" class="flex border-b border-neutral-200 px-1 pt-1">
-      <button
-        type="button"
-        role="tab"
-        id="tab-mindmap"
-        aria-controls="panel-mindmap"
-        aria-selected="true"
-        data-tab="mindmap"
-        class="tab-btn px-3 py-2 text-sm border-b-2 border-neutral-900 font-medium text-neutral-900"
-      >
-        Carte O
-      </button>
-      <button
-        type="button"
-        role="tab"
-        id="tab-chatbot"
-        aria-controls="panel-chatbot"
-        aria-selected="false"
-        data-tab="chatbot"
-        class="tab-btn px-3 py-2 text-sm border-b-2 border-transparent text-neutral-500 hover:text-neutral-900"
-      >
-        Chatbot
-      </button>
-    </nav>
+    <!-- V1.3-D : bandeau header (titre gauche + legende droite) -->
+    <header
+      class="flex items-center justify-between gap-3 px-3 py-2 border-b border-neutral-200 shrink-0"
+      style="font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;"
+    >
+      <span class="text-xs truncate" style="color: #475569;">
+        Sommaire éditorial d'architecture d'écologie politique
+      </span>
+      <ul class="flex items-center gap-3 shrink-0 text-xs" style="color: #475569;" aria-label="Légende">
+        <li class="flex items-center gap-1.5">
+          <span
+            aria-hidden="true"
+            style="width: 8px; height: 8px; border-radius: 999px; background: #0F172A; display: inline-block;"
+          ></span>
+          <span>publié</span>
+        </li>
+        <li class="flex items-center gap-1.5">
+          <span
+            aria-hidden="true"
+            style="width: 8px; height: 8px; border-radius: 999px; background: transparent; border: 1px solid #0F172A; display: inline-block;"
+          ></span>
+          <span>à venir</span>
+        </li>
+        <li class="flex items-center gap-1.5">
+          <span
+            aria-hidden="true"
+            style="width: 8px; height: 8px; border-radius: 999px; background: #B45309; display: inline-block;"
+          ></span>
+          <span>projet</span>
+        </li>
+      </ul>
+    </header>

    <div class="flex-1 overflow-hidden relative">
-      <div
-        id="panel-mindmap"
-        role="tabpanel"
-        aria-labelledby="tab-mindmap"
-        data-tab-panel="mindmap"
-        class="absolute inset-0"
-      >
+      <div id="panel-mindmap" class="absolute inset-0">
        <CarteOWrapper client:visible />
      </div>
-      <div
-        id="panel-chatbot"
-        role="tabpanel"
-        aria-labelledby="tab-chatbot"
-        data-tab-panel="chatbot"
-        class="absolute inset-0 hidden"
-      >
-        <ChatbotV2 client:visible />
-      </div>
    </div>
  </section>

@@ -260,28 +253,5 @@ import PreviewArticle from '../vue/PreviewArticle.vue';
    });
  }

-  // Tabs toggle.
-  const tabs = document.querySelectorAll<HTMLButtonElement>('[data-tab]');
-  const panels = document.querySelectorAll<HTMLElement>('[data-tab-panel]');
-
-  tabs.forEach((tab) => {
-    tab.addEventListener('click', () => {
-      const target = tab.dataset.tab;
-      if (!target) return;
-
-      tabs.forEach((t) => {
-        const active = t.dataset.tab === target;
-        t.setAttribute('aria-selected', active ? 'true' : 'false');
-        t.classList.toggle('border-neutral-900', active);
-        t.classList.toggle('border-transparent', !active);
-        t.classList.toggle('font-medium', active);
-        t.classList.toggle('text-neutral-900', active);
-        t.classList.toggle('text-neutral-500', !active);
-      });
-
-      panels.forEach((p) => {
-        p.classList.toggle('hidden', p.dataset.tabPanel !== target);
-      });
-    });
-  });
+  // V1.3-D : tabs Chatbot retires, plus de toggle a gerer (un seul panel Carte O).
 </script>
--- a/src/components/vue/CarteO.vue
+++ b/src/components/vue/CarteO.vue
@@ -25,12 +25,18 @@ interface CarteNode {
 // V1.2-O : logos plateforme via Brandfetch CDN (visible zoom > 1.5x seulement)
 const BRANDFETCH_CLIENT_ID = '4ae58bd85c8140eab0cee72f40656120'
 const LOGO_ZOOM_THRESHOLD = 1.5
+
+// V1.3-D : dimensions rectangle central (phrase manifeste 3 lignes)
+const CENTRAL_W = 300
+const CENTRAL_H = 64
+const CENTRAL_COLLIDE_RADIUS = 160  // demi-largeur + marge
 const logoUrl = (domain: string) =>
  `https://cdn.brandfetch.io/${domain}/w/64/h/64?c=${BRANDFETCH_CLIENT_ID}`

 interface CarteEdge {
  source: string | CarteNode
  target: string | CarteNode
+  central?: boolean  // V1.3-D : link au noeud central (court/fort)
 }

 const props = withDefaults(defineProps<{
@@ -118,25 +124,38 @@ function truncate(str: string, max: number): string {
  return str.length > max ? str.slice(0, max - 1) + '…' : str
 }

-// Split intelligent du label central sur 2-3 lignes (autour de "+")
-function splitCentralLabel(label: string): string[] {
+// V1.3-D : Wrap intelligent du label central sur 3 lignes (rectangle 300x64).
+// Phrase cible : "Une medecine du corps social pour ecrire un nouveau contrat social"
+// Heuristique : decoupe en mots, repartit sur ~3 lignes de longueur equilibree.
+function splitCentralLabel(label: string, maxLines = 3, maxCharsPerLine = 30): string[] {
  if (!label) return ['']
-  // priorite : split sur " + " si present
+  // Fallback : pivot legacy " + " (V1.2 backward compat)
  if (label.includes(' + ')) {
    const parts = label.split(' + ')
    return [parts[0].trim(), '+', parts.slice(1).join(' + ').trim()]
  }
-  // fallback : split a peu pres au milieu sur un espace
-  if (label.length > 14) {
-    const mid = Math.floor(label.length / 2)
-    const left = label.lastIndexOf(' ', mid)
-    const right = label.indexOf(' ', mid)
-    const cut = (mid - left <= right - mid && left > 0) ? left : right
-    if (cut > 0) {
-      return [label.slice(0, cut).trim(), label.slice(cut).trim()]
+  const words = label.split(/\s+/).filter(Boolean)
+  if (words.length <= 1) return [label]
+
+  // Repartit en lignes en respectant maxCharsPerLine, max maxLines lignes
+  const lines: string[] = []
+  let current = ''
+  for (const w of words) {
+    const next = current ? `${current} ${w}` : w
+    if (next.length > maxCharsPerLine && current && lines.length < maxLines - 1) {
+      lines.push(current)
+      current = w
+    } else {
+      current = next
    }
  }
-  return [label]
+  if (current) lines.push(current)
+  // Si plus de lignes que prevu (mots tres longs), concatene les dernieres
+  while (lines.length > maxLines) {
+    const last = lines.pop()!
+    lines[lines.length - 1] = `${lines[lines.length - 1]} ${last}`
+  }
+  return lines
 }

 function buildSimNodes(): SimNode[] {
@@ -232,18 +251,33 @@ function render() {
    .style('cursor', 'pointer')
    .on('click', (_event, d) => emit('node-click', { node: d as CarteNode, x: (d as SimNode).x || 0, y: (d as SimNode).y || 0 }))
    .on('mouseover', function (_event, d) {
-      d3.select(this).select('circle')
+      // V1.3-D : selecteur etendu rect|circle (rect pour central, circle pour autres)
+      d3.select(this).select('rect, circle')
        .transition().duration(120)
        .attr('stroke-width', strokeWidthFor(d) + 1.5)
    })
    .on('mouseout', function (_event, d) {
-      d3.select(this).select('circle')
+      d3.select(this).select('rect, circle')
        .transition().duration(120)
        .attr('stroke-width', strokeWidthFor(d))
    })

-  // Cercle
-  nodeGroups.append('circle')
+  // V1.3-D : nœud central = rectangle 300x64 (phrase 3 lignes), autres = cercle
+  const isCentral = (d: SimNode) => d.niveau === 0
+
+  nodeGroups.filter(isCentral)
+    .append('rect')
+    .attr('x', -CENTRAL_W / 2)
+    .attr('y', -CENTRAL_H / 2)
+    .attr('width', CENTRAL_W)
+    .attr('height', CENTRAL_H)
+    .attr('rx', 6)
+    .attr('fill', d => colorFor(d))
+    .attr('stroke', d => strokeFor(d))
+    .attr('stroke-width', d => strokeWidthFor(d))
+
+  nodeGroups.filter(d => !isCentral(d))
+    .append('circle')
    .attr('r', d => getRadius(d))
    .attr('fill', d => colorFor(d))
    .attr('stroke', d => strokeFor(d))
@@ -256,10 +290,10 @@ function render() {
    const inside = labelInsideFor(d)

    if (inside && d.niveau === 0) {
-      // Noeud central : label en 2 lignes inscrites au centre
-      const parts = splitCentralLabel(d.label)
-      const lineHeight = isMobile.value ? 10 : 12
-      const fs = isMobile.value ? 9 : 11
+      // V1.3-D : noeud central = rectangle, label 3 lignes 13px line-height 1.35
+      const fs = isMobile.value ? 11 : 13
+      const lineHeight = Math.round(fs * 1.35)
+      const parts = splitCentralLabel(d.label, 3, isMobile.value ? 22 : 30)
      const startY = -((parts.length - 1) * lineHeight) / 2
      parts.forEach((line, i) => {
        g.append('text')
@@ -269,7 +303,7 @@ function render() {
          .attr('y', startY + i * lineHeight)
          .attr('font-size', fs)
          .attr('font-family', 'system-ui, sans-serif')
-          .attr('font-weight', 'bold')
+          .attr('font-weight', '500')
          .attr('fill', '#FFFFFF')
          .attr('pointer-events', 'none')
          .text(line)
@@ -332,21 +366,54 @@ function render() {
  nodeGroups.append('title')
    .text(d => `${d.label}\n[${d.family}]\n${truncate(d.resume || d.intention || '', 200)}`)

-  // Simulation force avec charges differenciees par niveau
+  // V1.3-D : Simulation force-directed fit-cadre + animation continue subtile
+  // - link distance/strength differencies : TMIP (central) court/fort, autres essais souples
+  // - collide +12 zero overlap labels
+  // - forceX/Y faibles rappel cadre
+  // - alphaDecay 0.025 (anime sans vertige)
  simulation = d3.forceSimulation<SimNode, SimLink>(simNodes)
    .force('link', d3.forceLink<SimNode, SimLink>(simLinks)
      .id(d => d.id)
-      .distance(80)
-      .strength(0.35))
+      .distance(l => {
+        const link = l as SimLink & { central?: boolean }
+        // Lien central -> TMIP (projet) = court (90), autres centraux (essais) = standard (200)
+        if (link.central) {
+          const tgt = link.target as SimNode
+          const src = link.source as SimNode
+          const other = (tgt.niveau === 0 ? src : tgt) as SimNode
+          if (other.nature === 'projet') return 90
+          return 200
+        }
+        return 180
+      })
+      .strength(l => {
+        const link = l as SimLink & { central?: boolean }
+        if (link.central) {
+          const tgt = link.target as SimNode
+          const src = link.source as SimNode
+          const other = (tgt.niveau === 0 ? src : tgt) as SimNode
+          if (other.nature === 'projet') return 0.6
+          return 0.3
+        }
+        return 0.3
+      }))
    .force('charge', d3.forceManyBody<SimNode>().strength(d => {
-      if (d.niveau === 0) return -800
+      if (d.niveau === 0) return -1200
      if (d.niveau === 1) return -400
-      if (d.niveau === 2) return -150
+      if (d.niveau === 2) return -180
      return -220
    }))
    .force('center', d3.forceCenter(width.value / 2, height.value / 2))
-    .force('collide', d3.forceCollide<SimNode>().radius(d => getRadius(d) + 6))
-    .alphaDecay(0.03)
+    .force('x', d3.forceX<SimNode>(width.value / 2).strength(0.05))
+    .force('y', d3.forceY<SimNode>(height.value / 2).strength(0.05))
+    .force('collide', d3.forceCollide<SimNode>().radius(d => {
+      // V1.3-D : central traite comme zone large (rect 300x64 -> rayon equivalent 160)
+      if (d.niveau === 0) return CENTRAL_COLLIDE_RADIUS
+      return getRadius(d) + 12
+    }))
+    .alphaDecay(0.025)
+    .velocityDecay(0.4)
+    .alphaMin(0.001)
    .on('tick', tick)

  // Bind drag once simulation exists.
@@ -409,6 +476,8 @@ onMounted(() => {
    }
    if (simulation) {
      simulation.force('center', d3.forceCenter(width.value / 2, height.value / 2))
+      simulation.force('x', d3.forceX<SimNode>(width.value / 2).strength(0.05))
+      simulation.force('y', d3.forceY<SimNode>(height.value / 2).strength(0.05))
      simulation.alpha(0.3).restart()
    }
  })
--- a/src/components/vue/CarteOWrapper.vue
+++ b/src/components/vue/CarteOWrapper.vue
@@ -19,6 +19,7 @@ interface CarteNode {
 interface CarteEdge {
  source: string
  target: string
+  central?: boolean  // V1.3-D : edges au noeud central (tuning force-link)
 }

 interface CarteData {