glisser

app/utils/highlightEntities.tsx

@@ -108,29 +108,11 @@ export const highlightEntities = (
     element: ReactNode;
   }> = [];
 
-  // Si on a des mappings, on les utilise pour créer un mapping des valeurs anonymisées
-  const anonymizedValueMap = new Map<
-    string,
-    { label: string; className: string }
-  >();
-
-  if (entityMappings) {
-    entityMappings.forEach((mapping) => {
-      // Trouver le pattern correspondant au type d'entité
-      const pattern = patterns.find((p) => p.label === mapping.entityType);
-      if (pattern) {
-        anonymizedValueMap.set(mapping.anonymizedValue, {
-          label: mapping.anonymizedValue,
-          className: pattern.className,
-        });
-      }
-    });
-  }
-
   // Trouver toutes les correspondances
   patterns.forEach((pattern, patternIndex) => {
     const regex = new RegExp(pattern.regex.source, pattern.regex.flags);
     let match;
+    let matchCount = 0; // Compteur pour ce type d'entité
 
     while ((match = regex.exec(text)) !== null) {
       const start = match.index;
@@ -143,36 +125,31 @@ export const highlightEntities = (
       );
 
       if (!hasOverlap) {
-        // Chercher si on a un mapping pour cette entité
+        matchCount++; // Incrémenter le compteur pour ce type
         let displayLabel = pattern.label;
-        const displayClass = pattern.className; // Changé de 'let' à 'const'
+        const displayClass = pattern.className;
 
         if (entityMappings) {
-          // Compter les occurrences précédentes du même type pour déterminer le numéro
-          const entityType = pattern.label;
-          const previousMatches = replacements.filter((r) => {
-            // Correction du type 'any' en utilisant une interface plus spécifique
-            const element = r.element as React.ReactElement<{
-              className?: string;
-            }>;
-            const prevPattern = patterns.find(
-              (p) =>
-                p.className ===
-                element?.props?.className?.split(" ")[0] +
-                  " " +
-                  element?.props?.className?.split(" ")[1]
-            );
-            return prevPattern?.label === entityType;
-          }).length;
-
+          // Chercher le mapping correspondant à cette position et ce type
           const matchingMapping = entityMappings.find(
-            (mapping) => mapping.entityType === entityType
+            (mapping) => mapping.entityType === pattern.label
           );
 
           if (matchingMapping) {
-            // Utiliser le compteur pour déterminer le bon numéro avec des crochets
-            const entityCount = previousMatches + 1;
-            displayLabel = `${entityType} [${entityCount}]`;
+            // Utiliser directement la valeur anonymisée du mapping
+            // qui correspond à cette occurrence (basée sur l'ordre d'apparition)
+            const entityType = pattern.label;
+            const mappingsOfThisType = entityMappings.filter(
+              (m) => m.entityType === entityType
+            );
+            
+            // Prendre le mapping correspondant à cette occurrence
+            if (mappingsOfThisType[matchCount - 1]) {
+              displayLabel = mappingsOfThisType[matchCount - 1].anonymizedValue;
+            } else {
+              // Fallback si pas de mapping trouvé
+              displayLabel = `${entityType} [${matchCount}]`;
+            }
           }
         }