new interactive

app/components/hooks/useContextMenu.ts

@@ -66,11 +66,13 @@ export const useContextMenu = ({
     const removedMappings: EntityMapping[] = [];
 
     // Détecter les changements
-    const previousMap = new Map(previousMappingsRef.current.map(m => [m.text, m]));
-    const currentMap = new Map(entityMappings.map(m => [m.text, m]));
+    const previousMap = new Map(
+      previousMappingsRef.current.map((m) => [m.text, m])
+    );
+    const currentMap = new Map(entityMappings.map((m) => [m.text, m]));
 
     // Nouveaux mappings
-    entityMappings.forEach(mapping => {
+    entityMappings.forEach((mapping) => {
       if (!previousMap.has(mapping.text)) {
         newMappings.push(mapping);
       } else {
@@ -82,7 +84,7 @@ export const useContextMenu = ({
     });
 
     // Mappings supprimés
-    previousMappingsRef.current.forEach(mapping => {
+    previousMappingsRef.current.forEach((mapping) => {
       if (!currentMap.has(mapping.text)) {
         removedMappings.push(mapping);
       }
@@ -91,7 +93,7 @@ export const useContextMenu = ({
     // Logger seulement les changements
     if (newMappings.length > 0) {
       console.log("🆕 Nouveaux mappings détectés:", newMappings.length);
-      newMappings.forEach(mapping => {
+      newMappings.forEach((mapping) => {
         console.log("📋 Nouveau mapping:", {
           text: mapping.text,
           displayName: mapping.displayName,
@@ -102,7 +104,7 @@ export const useContextMenu = ({
 
     if (changedMappings.length > 0) {
       console.log("🔄 Mappings modifiés:", changedMappings.length);
-      changedMappings.forEach(mapping => {
+      changedMappings.forEach((mapping) => {
         console.log("📝 Mapping modifié:", {
           text: mapping.text,
           displayName: mapping.displayName,
@@ -113,7 +115,7 @@ export const useContextMenu = ({
 
     if (removedMappings.length > 0) {
       console.log("🗑️ Mappings supprimés:", removedMappings.length);
-      removedMappings.forEach(mapping => {
+      removedMappings.forEach((mapping) => {
         console.log("❌ Mapping supprimé:", {
           text: mapping.text,
           displayName: mapping.displayName,
@@ -126,23 +128,22 @@ export const useContextMenu = ({
       if (
         mapping.displayName &&
         typeof mapping.displayName === "string" &&
-        mapping.displayName.startsWith("[") &&
-        mapping.displayName.endsWith("]") &&
-        mapping.displayName.length > 2
+        mapping.displayName.trim().length > 0
       ) {
+        // Accepter tous les displayName non vides, pas seulement ceux avec crochets
         uniqueLabels.add(mapping.displayName);
       }
     });
 
     const result = Array.from(uniqueLabels).sort();
-    
+
     // Logger seulement si les labels ont changé
     const previousLabels = previousLabelsRef.current;
     if (JSON.stringify(previousLabels) !== JSON.stringify(result)) {
       console.log("🎯 Labels mis à jour:", {
-        ajoutés: result.filter(l => !previousLabels.includes(l)),
-        supprimés: previousLabels.filter(l => !result.includes(l)),
-        total: result.length
+        ajoutés: result.filter((l) => !previousLabels.includes(l)),
+        supprimés: previousLabels.filter((l) => !result.includes(l)),
+        total: result.length,
       });
     }
 
@@ -168,7 +169,7 @@ export const useContextMenu = ({
       const sortedIndices = selectedIndices.sort((a, b) => a - b);
       const firstWord = words[sortedIndices[0]];
       const lastWord = words[sortedIndices[sortedIndices.length - 1]];
-      
+
       const wordStart = firstWord?.start;
       const wordEnd = lastWord?.end;
 
@@ -185,7 +186,7 @@ export const useContextMenu = ({
         entityType,
         applyToAll,
         wordIndices: selectedIndices,
-        positions: { start: wordStart, end: wordEnd }
+        positions: { start: wordStart, end: wordEnd },
       });
 
       onUpdateMapping(
@@ -214,11 +215,11 @@ export const useContextMenu = ({
   const applyColorDirectly = useCallback(
     (color: string, colorName: string, applyToAll?: boolean) => {
       if (!contextMenu.selectedText) return;
-
+  
       const existingMapping = entityMappings.find(
         (mapping) => mapping.text === contextMenu.selectedText
       );
-
+  
       console.log("🎨 Application de couleur:", {
         text: contextMenu.selectedText,
         color,
@@ -226,8 +227,9 @@ export const useContextMenu = ({
         applyToAll,
         existingMapping: !!existingMapping,
       });
-
+  
       if (existingMapping) {
+        // MODIFICATION : Appliquer directement la couleur pour un label existant
         onUpdateMapping(
           contextMenu.selectedText,
           existingMapping.displayName || existingMapping.entity_type,
@@ -235,18 +237,30 @@ export const useContextMenu = ({
           applyToAll,
           color
         );
+        setSelectedWords(new Set());
+        closeContextMenu();
       } else {
+        // CRÉATION : Créer un nouveau label avec la couleur
+        // Utiliser le texte sélectionné comme nom de label par défaut
+        const defaultLabel = contextMenu.selectedText.toUpperCase();
+        
+        console.log("🆕 Création d'un nouveau label avec couleur:", {
+          text: contextMenu.selectedText,
+          label: defaultLabel,
+          color,
+          applyToAll
+        });
+        
         onUpdateMapping(
           contextMenu.selectedText,
-          "CUSTOM_LABEL",
-          "CUSTOM_LABEL",
+          defaultLabel,
+          defaultLabel,
           applyToAll,
           color
         );
+        setSelectedWords(new Set());
+        closeContextMenu();
       }
-
-      setSelectedWords(new Set());
-      closeContextMenu();
     },
     [
       contextMenu.selectedText,