interface interactive

app/components/hooks/useColorMapping.ts

@@ -0,0 +1,61 @@
+import { useCallback, useMemo } from "react";
+import { EntityMapping } from "@/app/config/entityLabels";
+import {
+  COLOR_PALETTE,
+  generateColorFromName,
+  type ColorOption,
+} from "../../config/colorPalette";
+
+export const useColorMapping = (entityMappings: EntityMapping[]) => {
+  const colorOptions: ColorOption[] = COLOR_PALETTE;
+
+  const tailwindToHex = useMemo(() => {
+    const mapping: Record<string, string> = {};
+    COLOR_PALETTE.forEach((color) => {
+      mapping[color.bgClass] = color.value;
+    });
+    return mapping;
+  }, []);
+
+  // CORRECTION: Fonction qui prend un texte et retourne la couleur
+  const getCurrentColor = useCallback(
+    (selectedText: string): string => {
+      if (!selectedText || !entityMappings) {
+        return COLOR_PALETTE[0].value;
+      }
+
+      // Chercher le mapping correspondant au texte sélectionné
+      const mapping = entityMappings.find((m) => m.text === selectedText);
+
+      if (mapping?.customColor) {
+        return mapping.customColor;
+      }
+
+      if (mapping?.displayName) {
+        return generateColorFromName(mapping.displayName).value;
+      }
+
+      if (mapping?.entity_type) {
+        return generateColorFromName(mapping.entity_type).value;
+      }
+
+      // Générer une couleur basée sur le texte
+      return generateColorFromName(selectedText).value;
+    },
+    [entityMappings]
+  );
+
+  const getColorByText = useCallback(
+    (selectedText: string) => {
+      return getCurrentColor(selectedText);
+    },
+    [getCurrentColor]
+  );
+
+  return {
+    colorOptions,
+    tailwindToHex,
+    getCurrentColor,
+    getColorByText,
+  };
+};

app/components/hooks/useContextMenu.ts

@@ -0,0 +1,207 @@
+import { useState, useCallback, useEffect } from "react";
+import { EntityMapping } from "@/app/config/entityLabels";
+import { Word } from "./useTextParsing"; // AJOUTER cet import
+
+interface ContextMenuState {
+  visible: boolean;
+  x: number;
+  y: number;
+  selectedText: string;
+  wordIndices: number[];
+}
+
+interface UseContextMenuProps {
+  entityMappings: EntityMapping[];
+  words: Word[]; // Maintenant le type Word est reconnu
+  onUpdateMapping: (
+    originalValue: string,
+    newLabel: string,
+    entityType: string,
+    applyToAll?: boolean,
+    customColor?: string,
+    wordStart?: number,
+    wordEnd?: number
+  ) => void;
+  onRemoveMapping?: (originalValue: string, applyToAll?: boolean) => void;
+  getCurrentColor: (selectedText: string) => string;
+  setSelectedWords: (words: Set<number>) => void;
+}
+
+export const useContextMenu = ({
+  entityMappings,
+  words, // Paramètre ajouté
+  onUpdateMapping,
+  onRemoveMapping,
+  getCurrentColor,
+  setSelectedWords,
+}: UseContextMenuProps) => {
+  const [contextMenu, setContextMenu] = useState<ContextMenuState>({
+    visible: false,
+    x: 0,
+    y: 0,
+    selectedText: "",
+    wordIndices: [],
+  });
+
+  const closeContextMenu = useCallback(() => {
+    setContextMenu((prev) => ({ ...prev, visible: false }));
+  }, []);
+
+  const showContextMenu = useCallback(
+    (menuData: Omit<ContextMenuState, "visible">) => {
+      setContextMenu({ ...menuData, visible: true });
+    },
+    []
+  );
+
+  const getExistingLabels = useCallback(() => {
+    const uniqueLabels = new Set<string>();
+    entityMappings.forEach((mapping) => {
+      uniqueLabels.add(mapping.displayName || mapping.entity_type); // Utiliser displayName
+    });
+    return Array.from(uniqueLabels).sort();
+  }, [entityMappings]);
+
+  // CORRECTION: Accepter displayName comme premier paramètre
+  const applyLabel = useCallback(
+    (displayName: string, applyToAll?: boolean) => {
+      if (!contextMenu.selectedText) return;
+
+      const originalText = contextMenu.selectedText;
+      const firstWordIndex = contextMenu.wordIndices[0];
+
+      // Calculer les vraies coordonnées start/end du mot cliqué
+      const clickedWord = words[firstWordIndex];
+      const wordStart = clickedWord?.start;
+      const wordEnd = clickedWord?.end;
+
+      const existingMapping = entityMappings.find(
+        (m) => m.text === originalText
+      );
+      const entityType =
+        existingMapping?.entity_type ||
+        displayName.replace(/[\[\]]/g, "").toUpperCase();
+
+      onUpdateMapping(
+        originalText,
+        displayName,
+        entityType,
+        applyToAll,
+        undefined, // customColor
+        wordStart, // vraies coordonnées start
+        wordEnd // vraies coordonnées end
+      );
+
+      setSelectedWords(new Set());
+      closeContextMenu();
+    },
+    [
+      contextMenu,
+      words, // NOUVEAU
+      entityMappings,
+      onUpdateMapping,
+      closeContextMenu,
+      setSelectedWords,
+    ]
+  );
+
+  // CORRECTION: Accepter applyToAll comme paramètre
+  const applyColorDirectly = useCallback(
+    (color: string, colorName: string, applyToAll?: boolean) => {
+      if (!contextMenu.selectedText) return;
+
+      const existingMapping = entityMappings.find(
+        (mapping) => mapping.text === contextMenu.selectedText
+      );
+
+      console.log("useContextMenu - applyColorDirectly:", {
+        color,
+        colorName,
+        applyToAll,
+        existingMapping,
+      });
+
+      if (existingMapping) {
+        onUpdateMapping(
+          contextMenu.selectedText,
+          existingMapping.displayName || existingMapping.entity_type, // Utiliser displayName
+          existingMapping.entity_type,
+          applyToAll,
+          color
+        );
+      } else {
+        onUpdateMapping(
+          contextMenu.selectedText,
+          "CUSTOM_LABEL",
+          "CUSTOM_LABEL",
+          applyToAll,
+          color
+        );
+      }
+
+      setSelectedWords(new Set());
+      closeContextMenu();
+    },
+    [
+      contextMenu.selectedText,
+      entityMappings, // Ajouter cette dépendance
+      onUpdateMapping,
+      closeContextMenu,
+      setSelectedWords,
+    ]
+  );
+
+  // CORRECTION: Accepter applyToAll comme paramètre
+  const removeLabel = useCallback(
+    (applyToAll?: boolean) => {
+      if (!contextMenu.selectedText || !onRemoveMapping) return;
+
+      console.log("useContextMenu - removeLabel:", {
+        selectedText: contextMenu.selectedText,
+        applyToAll,
+      });
+
+      onRemoveMapping(contextMenu.selectedText, applyToAll);
+      setSelectedWords(new Set());
+      closeContextMenu();
+    },
+    [
+      contextMenu.selectedText,
+      onRemoveMapping,
+      closeContextMenu,
+      setSelectedWords,
+    ]
+  );
+
+  // Gestion des clics en dehors du menu
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (contextMenu.visible) {
+        const target = event.target as Element;
+        const contextMenuElement = document.querySelector(
+          "[data-context-menu]"
+        );
+
+        if (contextMenuElement && !contextMenuElement.contains(target)) {
+          setTimeout(() => {
+            closeContextMenu();
+          }, 0);
+        }
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [contextMenu.visible, closeContextMenu]);
+
+  return {
+    contextMenu,
+    showContextMenu,
+    closeContextMenu,
+    applyLabel,
+    applyColorDirectly,
+    removeLabel,
+    getExistingLabels,
+    getCurrentColor,
+  };
+};

app/components/hooks/useTextParsing.ts

@@ -0,0 +1,98 @@
+import { useMemo } from "react";
+import { EntityMapping } from "@/app/config/entityLabels";
+
+export interface Word {
+  text: string;
+  displayText: string;
+  start: number;
+  end: number;
+  isEntity: boolean;
+  entityType?: string;
+  entityIndex?: number;
+  mapping?: EntityMapping;
+}
+
+export const useTextParsing = (
+  text: string,
+  entityMappings: EntityMapping[]
+) => {
+  const words = useMemo((): Word[] => {
+    const segments: Word[] = [];
+    let currentIndex = 0;
+
+    const sortedMappings = [...entityMappings].sort(
+      (a, b) => a.start - b.start // CORRECTION: utiliser 'start' au lieu de 'startIndex'
+    );
+
+    sortedMappings.forEach((mapping, mappingIndex) => {
+      if (currentIndex < mapping.start) {
+        // CORRECTION: utiliser 'start'
+        const beforeText = text.slice(currentIndex, mapping.start);
+        const beforeWords = beforeText.split(/\s+/).filter(Boolean);
+
+        beforeWords.forEach((word) => {
+          const wordStart = text.indexOf(word, currentIndex);
+          const wordEnd = wordStart + word.length;
+
+          segments.push({
+            text: word,
+            displayText: word,
+            start: wordStart,
+            end: wordEnd,
+            isEntity: false,
+          });
+
+          currentIndex = wordEnd;
+        });
+      }
+
+      // Utiliser displayName au lieu de entity_type
+      // Ligne 45 - Ajouter du debug
+      console.log("useTextParsing - mapping:", {
+        text: mapping.text,
+        displayName: mapping.displayName,
+        entity_type: mapping.entity_type,
+      });
+
+      const anonymizedText =
+        mapping.displayName || `[${mapping.entity_type.toUpperCase()}]`;
+
+      segments.push({
+        text: mapping.text,
+        displayText: anonymizedText,
+        start: mapping.start,
+        end: mapping.end,
+        isEntity: true,
+        entityType: mapping.entity_type,
+        entityIndex: mappingIndex,
+        mapping: mapping,
+      });
+
+      currentIndex = mapping.end; // CORRECTION: utiliser 'end'
+    });
+
+    if (currentIndex < text.length) {
+      const remainingText = text.slice(currentIndex);
+      const remainingWords = remainingText.split(/\s+/).filter(Boolean);
+
+      remainingWords.forEach((word) => {
+        const wordStart = text.indexOf(word, currentIndex);
+        const wordEnd = wordStart + word.length;
+
+        segments.push({
+          text: word,
+          displayText: word,
+          start: wordStart,
+          end: wordEnd,
+          isEntity: false,
+        });
+
+        currentIndex = wordEnd;
+      });
+    }
+
+    return segments;
+  }, [text, entityMappings]);
+
+  return { words };
+};