feat(insights): fix DBSCAN, Persian embeddings crash, D3 physics layouts, and D3 node not found runtime error

memento-note/components/network-graph.tsx

@@ -3,69 +3,25 @@
 import { useEffect, useRef } from 'react'
 import * as d3 from 'd3'
 
-// Force to group nodes by cluster
-function forceCluster() {
-  let nodes: any[] = []
-  let clusters: Map<string | number, { x: number; y: number }> = new Map()
-
-  function force(alpha: number) {
-    // Calculate cluster centers
-    clusters.clear()
-    for (const node of nodes) {
-      const clusterId = node.clusterId
-      if (!clusters.has(clusterId)) {
-        clusters.set(clusterId, { x: 0, y: 0, count: 0 })
-      }
-      const center = clusters.get(clusterId)!
-      center.x += node.x
-      center.y += node.y
-      center.count = (center.count || 0) + 1
-    }
-
-    // Average positions
-    for (const [clusterId, center] of clusters.entries()) {
-      center.x /= center.count || 1
-      center.y /= center.count || 1
-    }
-
-    // Move nodes toward their cluster center
-    for (const node of nodes) {
-      const clusterCenter = clusters.get(node.clusterId)
-      if (clusterCenter && clusterCenter.count > 1) {
-        const targetX = clusterCenter.x
-        const targetY = clusterCenter.y
-        node.vx += (targetX - node.x) * alpha * 0.3
-        node.vy += (targetY - node.y) * alpha * 0.3
-      }
-    }
-  }
-
-  force.initialize = function(newNodes: any[]) {
-    nodes = newNodes
-    return force
-  }
-
-  return force
-}
-
 interface Note {
   id: string
   title: string | null
   clusterId?: string | number
+  isCentral?: boolean
 }
 
 interface NoteCluster {
   id: string | number
-  name: string
+  name?: string
   noteIds: string[]
-  color: string
+  color?: string
 }
 
 interface BridgeNote {
   noteId: string
   bridgeScore: number
   clustersConnected?: (string | number)[]
-  connectedClusterIds?: (string | number)[]
+  clusterNames?: string[]
 }
 
 interface NetworkGraphProps {
@@ -73,13 +29,17 @@ interface NetworkGraphProps {
   clusters: NoteCluster[]
   bridgeNotes: BridgeNote[]
   onNoteSelect: (id: string) => void
+  selectedClusterId?: string | null
+  onClusterSelect?: (id: string | null) => void
 }
 
 export function NetworkGraph({
   notes,
   clusters,
   bridgeNotes,
-  onNoteSelect
+  onNoteSelect,
+  selectedClusterId = null,
+  onClusterSelect
 }: NetworkGraphProps) {
   const svgRef = useRef<SVGSVGElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -103,8 +63,10 @@ export function NetworkGraph({
 
     svg.call(zoom as any)
 
-    // Filter notes with cluster assignments (properly check for undefined/null)
-    const visibleNotes = notes.filter(n => n.clusterId !== undefined && n.clusterId !== null)
+    // Filter notes with cluster assignments
+    const visibleNotes = notes.filter(n => n.clusterId !== undefined && n.clusterId !== null && String(n.clusterId) !== '-1')
+
+    if (visibleNotes.length === 0) return
 
     interface D3Node extends d3.SimulationNodeDatum {
       id: string
@@ -112,6 +74,7 @@ export function NetworkGraph({
       clusterId: string | number
       color: string
       isBridge: boolean
+      isCentral: boolean
       radius: number
     }
 
@@ -119,80 +82,189 @@ export function NetworkGraph({
       source: string
       target: string
       strength: number
+      type?: 'inner' | 'bridge'
     }
 
     const bridgeSet = new Set(bridgeNotes.map(b => b.noteId))
 
+    // 1. Initialisation des nœuds avec rôles et diamètres distincts
     const nodes: D3Node[] = visibleNotes.map(n => {
-      const cluster = clusters.find(c => c.id === String(n.clusterId))
+      const cluster = clusters.find(c => String(c.id) === String(n.clusterId))
       const isBridge = bridgeSet.has(n.id)
+      const isCentral = !!n.isCentral
+      
+      // Hiérarchie de tailles premium
+      let radius = 6
+      if (isCentral) radius = 13
+      else if (isBridge) radius = 10
+
       return {
         id: n.id,
         title: n.title,
         clusterId: n.clusterId!,
         color: cluster?.color || '#cbd5e1',
         isBridge,
-        radius: isBridge ? 12 : 8
+        isCentral,
+        radius
       }
     })
 
-    const links: D3Link[] = []
-    // Connect notes within the same cluster
-    for (let i = 0; i < visibleNotes.length; i++) {
-      for (let j = i + 1; j < visibleNotes.length; j++) {
-        const ni = visibleNotes[i]
-        const nj = visibleNotes[j]
-
-        if (ni.clusterId === nj.clusterId) {
-          links.push({ source: ni.id, target: nj.id, strength: 0.5 })
-        }
+    // Groupement des nœuds par cluster
+    const clusterGroups = new Map<string | number, D3Node[]>()
+    nodes.forEach(node => {
+      const cid = node.clusterId
+      if (!clusterGroups.has(cid)) {
+        clusterGroups.set(cid, [])
       }
-    }
+      clusterGroups.get(cid)!.push(node)
+    })
 
+    const links: D3Link[] = []
+
+    // 2. Création de la structure en étoile (Star-Network) par cluster
+    clusterGroups.forEach((groupNodes, cid) => {
+      if (groupNodes.length <= 1) return
+
+      // Trouver le nœud central existant, ou en désigner un par défaut (le premier)
+      let hub = groupNodes.find(n => n.isCentral)
+      if (!hub) {
+        hub = groupNodes[0]
+        hub.isCentral = true
+        hub.radius = 13 // Augmenter sa taille pour la hiérarchie visuelle
+      }
+
+      // Relier chaque feuille du cluster UNIQUEMENT à son nœud central (Hub)
+      groupNodes.forEach(node => {
+        if (node.id !== hub!.id) {
+          links.push({
+            source: node.id,
+            target: hub!.id,
+            strength: 0.5,
+            type: 'inner'
+          })
+        }
+      })
+    })
+
+    // 3. Liaison de ponts dorées reliant les nœuds centraux (Hubs) (Garde-fou D3 contre les nœuds manquants)
+    const nodeSet = new Set(nodes.map(n => n.id))
+
+    bridgeNotes.forEach(b => {
+      if (!b.clustersConnected) return
+      if (!nodeSet.has(b.noteId)) return // Évite d'ajouter un lien si la note-pont n'est pas dans les nœuds affichés
+
+      b.clustersConnected.forEach(cid => {
+        const targetNodes = clusterGroups.get(cid) || []
+        if (targetNodes.length > 0) {
+          const targetHub = targetNodes.find(n => n.isCentral) || targetNodes[0]
+          if (nodeSet.has(targetHub.id)) {
+            links.push({
+              source: b.noteId,
+              target: targetHub.id,
+              strength: 0.15,
+              type: 'bridge'
+            })
+          }
+        }
+      })
+    })
+
+    // 4. Pré-positionnement géométrique des Hubs en cercle pour éviter toute superposition initiale
+    const uniqueClusterIds = Array.from(clusterGroups.keys())
+    const numClusters = uniqueClusterIds.length
+    const radiusCircle = Math.min(width, height) * 0.28 // Rayon de répartition
+
+    uniqueClusterIds.forEach((cid, index) => {
+      const angle = (index * 2 * Math.PI) / numClusters
+      const hubX = width / 2 + radiusCircle * Math.cos(angle)
+      const hubY = height / 2 + radiusCircle * Math.sin(angle)
+
+      const groupNodes = clusterGroups.get(cid) || []
+      const hub = groupNodes.find(n => n.isCentral) || groupNodes[0]
+
+      if (hub) {
+        hub.x = hubX
+        hub.y = hubY
+      }
+
+      // Positionner les feuilles autour de leur propre hub
+      groupNodes.forEach(node => {
+        if (node.id !== hub?.id) {
+          const leafAngle = Math.random() * 2 * Math.PI
+          const leafDist = 25 + Math.random() * 20
+          node.x = hubX + leafDist * Math.cos(leafAngle)
+          node.y = hubY + leafDist * Math.sin(leafAngle)
+        }
+      })
+    })
+
+    // D3 simulation — Paramètres de physique ultra-stables, centrés et étalés comme des galaxies
     const simulation = d3.forceSimulation<D3Node>(nodes)
-      .force('link', d3.forceLink<D3Node, D3Link>(links).id(d => d.id).distance(50))
-      .force('charge', d3.forceManyBody().strength(-300))
+      .force('link', d3.forceLink<D3Node, D3Link>(links).id(d => d.id).distance(d => d.type === 'bridge' ? 140 : 35)) // Feuilles proches du Hub (35px) pour des constellations compactes et lisibles
+      .force('charge', d3.forceManyBody().strength(d => (d as D3Node).isCentral ? -500 : -80)) // Répulsion équilibrée pour éviter de projeter les Hubs contre les bords de l'écran
       .force('center', d3.forceCenter(width / 2, height / 2))
-      .force('collision', d3.forceCollide<D3Node>().radius(d => d.radius + 15))
-      .force('cluster', forceCluster())
+      .force('x', d3.forceX(width / 2).strength(0.12)) // Recentrage X renforcé pour l'équilibre central
+      .force('y', d3.forceY(height / 2).strength(0.12)) // Recentrage Y renforcé
+      .force('collision', d3.forceCollide<D3Node>().radius(d => d.radius + 14)) // Collision ajustée pour préserver la compacité
 
-    // Links
+
+    // Liens avec couleur et opacité contextuelle
     const link = g.append('g')
       .selectAll('line')
       .data(links)
       .enter()
       .append('line')
-      .attr('stroke', '#e2e8f0')
-      .attr('stroke-opacity', 0.6)
-      .attr('stroke-width', 1)
+      .attr('stroke', (d: any) => d.type === 'bridge' ? '#E2B13C' : '#cbd5e1')
+      .attr('stroke-dasharray', (d: any) => d.type === 'bridge' ? '4,4' : 'none')
+      .attr('stroke-opacity', (d: any) => {
+        if (d.type === 'bridge') return selectedClusterId ? 0.15 : 0.6
+        if (!selectedClusterId) return 0.4
+        const sId = typeof d.source === 'string' ? d.source : (d.source as any).id
+        const tId = typeof d.target === 'string' ? d.target : (d.target as any).id
+        const sourceNode = nodes.find(n => n.id === sId)
+        const targetNode = nodes.find(n => n.id === tId)
+        const sCluster = String(sourceNode?.clusterId)
+        const tCluster = String(targetNode?.clusterId)
+        return sCluster === selectedClusterId && tCluster === selectedClusterId ? 0.7 : 0.04
+      })
+      .attr('stroke-width', (d: any) => d.type === 'bridge' ? 1.5 : 1)
 
-    // Nodes
+    // Nœuds avec opacité focus
     const node = g.append('g')
       .selectAll('.node')
       .data(nodes)
       .enter()
       .append('g')
       .attr('class', 'node cursor-pointer')
+      .attr('opacity', d => {
+        if (!selectedClusterId) return 1
+        return String(d.clusterId) === selectedClusterId ? 1 : 0.15
+      })
       .on('click', (event, d) => onNoteSelect(d.id))
       .call(d3.drag<SVGGElement, D3Node>()
         .on('start', dragstarted)
         .on('drag', dragged)
         .on('end', dragended) as any)
 
+    // Cercles avec tailles hiérarchiques et halos
     node.append('circle')
       .attr('r', d => d.radius)
       .attr('fill', d => d.color)
-      .attr('stroke', d => d.isBridge ? '#D4AF37' : '#fff')
-      .attr('stroke-width', d => d.isBridge ? 3 : 2)
-      .style('filter', d => d.isBridge ? 'drop-shadow(0 0 4px rgba(212, 175, 55, 0.4))' : 'none')
+      .attr('stroke', d => d.isCentral ? 'rgba(255,255,255,0.9)' : d.isBridge ? '#D4AF37' : '#fff')
+      .attr('stroke-width', d => d.isCentral ? 3 : d.isBridge ? 2.5 : 1.5)
+      .style('filter', d => d.isBridge ? 'drop-shadow(0 0 6px rgba(212, 175, 55, 0.5))' : 'none')
 
+    // Labels de textes ultra-lisibles claire/sombre sans chevauchement
     node.append('text')
-      .attr('dy', d => d.radius + 14)
+      .attr('dy', d => d.radius + 13)
       .attr('text-anchor', 'middle')
-      .attr('class', 'text-[10px] fill-concrete dark:fill-concrete/60 font-medium pointer-events-none')
+      .attr('font-size', d => d.isCentral ? '10px' : '9px')
+      .attr('font-weight', d => d.isCentral ? '700' : '500')
+      .attr('fill', '#4b5563')
+      .attr('class', 'dark:fill-zinc-300 font-sans pointer-events-none')
       .text(d => {
-        const title = d.title || 'Untitled'
-        return title.length > 20 ? title.substring(0, 20) + '...' : title
+        const title = d.title || 'Sans titre'
+        return title.length > 20 ? title.substring(0, 18) + '...' : title
       })
 
     simulation.on('tick', () => {
@@ -203,9 +275,46 @@ export function NetworkGraph({
         .attr('y2', d => (d.target as any).y)
 
       node
-        .attr('transform', d => `translate(${d.x},${d.y})`)
+        .attr('transform', d => {
+          // Bounding box rigide : maintient à 100% les clusters sur l'écran
+          const padding = 35
+          d.x = Math.max(padding, Math.min(width - padding, d.x || width / 2))
+          d.y = Math.max(padding, Math.min(height - padding, d.y || height / 2))
+          return `translate(${d.x},${d.y})`
+        })
     })
 
+    // Zoom automatique sur le cluster sélectionné (800ms)
+    if (selectedClusterId && width && height) {
+      const clusterNodes = nodes.filter(n => String(n.clusterId) === selectedClusterId)
+      if (clusterNodes.length > 0) {
+        // Avancer la simulation pour obtenir des coordonnées stabilisées
+        for (let i = 0; i < 60; ++i) simulation.tick()
+
+        const xCoords = clusterNodes.map(cn => cn.x).filter((x): x is number => x !== undefined)
+        const yCoords = clusterNodes.map(cn => cn.y).filter((y): y is number => y !== undefined)
+
+        if (xCoords.length > 0 && yCoords.length > 0) {
+          const avgX = d3.mean(xCoords) || width / 2
+          const avgY = d3.mean(yCoords) || height / 2
+
+          svg.transition()
+            .duration(800)
+            .call(
+              zoom.transform,
+              d3.zoomIdentity
+                .translate(width / 2, height / 2)
+                .scale(1.3)
+                .translate(-avgX, -avgY)
+            )
+        }
+      }
+    } else if (!selectedClusterId) {
+      svg.transition()
+        .duration(800)
+        .call(zoom.transform, d3.zoomIdentity)
+    }
+
     function dragstarted(event: any, d: D3Node) {
       if (!event.active) simulation.alphaTarget(0.3).restart()
       d.fx = d.x
@@ -226,17 +335,37 @@ export function NetworkGraph({
     return () => {
       simulation.stop()
     }
-  }, [notes, clusters, bridgeNotes, onNoteSelect])
+  }, [notes, clusters, bridgeNotes, onNoteSelect, selectedClusterId])
 
   return (
     <div ref={containerRef} className="w-full h-full bg-paper dark:bg-[#121212] rounded-3xl overflow-hidden border border-border/40 relative">
-      <div className="absolute top-6 left-6 z-10 flex flex-wrap gap-3 max-w-[300px]">
-        {clusters.map(c => (
-          <div key={c.id} className="flex items-center gap-1.5 px-2 py-1 bg-white/80 dark:bg-white/5 backdrop-blur-sm border border-border rounded-full shadow-sm">
-            <div className="w-2 h-2 rounded-full" style={{ backgroundColor: c.color }} />
-            <span className="text-[9px] font-bold uppercase tracking-widest text-concrete whitespace-nowrap">{c.name}</span>
-          </div>
-        ))}
+      {/* Pastilles de cluster — cliquables pour activer le focus */}
+      <div className="absolute top-6 left-6 z-10 flex flex-wrap gap-2 max-w-[90%]">
+        {clusters.map(c => {
+          const isSelected = String(c.id) === selectedClusterId
+          return (
+            <button
+              key={c.id}
+              onClick={() => onClusterSelect?.(isSelected ? null : String(c.id))}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full border shadow-sm transition-all text-[9px] font-bold uppercase tracking-wider ${
+                isSelected
+                  ? 'bg-ink text-white dark:bg-white dark:text-black border-ink dark:border-white scale-105 shadow-md'
+                  : 'bg-white/90 dark:bg-black/80 text-concrete hover:text-ink hover:border-concrete/40 border-border'
+              }`}
+            >
+              <div className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c.color }} />
+              <span>{c.name ?? String(c.id)}</span>
+            </button>
+          )
+        })}
+        {selectedClusterId && (
+          <button
+            onClick={() => onClusterSelect?.(null)}
+            className="px-3 py-1.5 rounded-full border border-rose-200 bg-rose-50 dark:bg-rose-950/20 dark:border-rose-900/40 text-rose-500 text-[9px] font-bold uppercase tracking-wider hover:bg-rose-100 dark:hover:bg-rose-950/30 transition-all shadow-sm"
+          >
+            Réinitialiser focus
+          </button>
+        )}
       </div>
       <svg ref={svgRef} className="w-full h-full" />
     </div>