Added Venn Diagram to the compare page

src/main/kotlin/main/Compare.kt

@@ -13,10 +13,19 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import main.component.dropdownButtonComponent
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.ui.geometry.Rect
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import kotlin.math.max
 
 @Composable
 fun compareResults(
@@ -29,33 +38,69 @@ fun compareResults(
 ) {
     println(glossaryWords)
     val noFileSnackbarVisibleState = remember { mutableStateOf(false) }
+    val scrollState = rememberLazyListState()
+    val showTableAndLegend = remember { mutableStateOf(true) } // State to control the visibility of the table and legend
 
     Column(
         modifier = Modifier.fillMaxSize(),
         verticalArrangement = Arrangement.Top,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
+
         Text(text = "Comparaison glossaire / code", style = MaterialTheme.typography.h3)
 
-        Spacer(modifier = Modifier.height(16.dp))
+        val glossaryWordsSet = glossaryWords.map { it.name }.toSet()
-
-        commonWordsTable(glossaryWords, codeWords)
 
         Spacer(modifier = Modifier.height(16.dp))
 
-        // Légende
+        // Show the table and legend only if showTableAndLegend is true
-        Row(
+        if (showTableAndLegend.value) {
-            modifier = Modifier.fillMaxWidth().padding(16.dp),
+            commonWordsTable(glossaryWords, codeWords)
-            // Espace entre les éléments
+
-            horizontalArrangement = Arrangement.spacedBy(16.dp)
+            Spacer(modifier = Modifier.height(16.dp))
-        ) {
+
-            legendItem(color = customGreenColor, label = "Mot dans le glossaire et dans le code")
+            // Légende
-            legendItem(color = Color.White, label = "Mot seulement dans le glossaire")
+            Row(
-            legendItem(color = customYellowColor, label = "Mot seulement dans le code")
+                modifier = Modifier.fillMaxWidth().padding(16.dp),
+                // Espace entre les éléments
+                horizontalArrangement = Arrangement.spacedBy(16.dp)
+            ) {
+                legendItem(color = customGreenColor, label = "Mot dans le glossaire et dans le code")
+                legendItem(color = Color.White, label = "Mot seulement dans le glossaire")
+                legendItem(color = customYellowColor, label = "Mot seulement dans le code")
+            }
         }
 
+        val intersectionWords = mutableListOf<String>()
 
         Spacer(modifier = Modifier.height(16.dp))
+        println("glossaryWords : $glossaryWordsSet")
+
+        for (word in codeWords) {
+            if (word in glossaryWords.map { it.name }) {
+                intersectionWords.add(word)
+                println("inter : $word")
+            }
+        }
+
+        // Show the Venn diagram only if showTableAndLegend is false
+        if (!showTableAndLegend.value) {
+            IntersectionCircles(
+                glossaryWords.map { it.name },
+                codeWords,
+                intersectionWords
+            )
+        }
+
+        Button(
+            onClick = { showTableAndLegend.value = !showTableAndLegend.value }, // Toggle the value of showTableAndLegend when the button is clicked
+            colors = androidx.compose.material.ButtonDefaults.buttonColors(
+                backgroundColor = customRedColor,
+                contentColor = Color.White
+            )
+        ) {
+            Text(if (showTableAndLegend.value) "Montrer le diagramme de Venn" else "Montrer le tableau") // Change the button text based on the value of showTableAndLegend
+        }
 
         Button(
             onClick = onBackClick,
@@ -95,10 +140,11 @@ fun commonWordsTable(
     codeWords: List<String>
 ) {
     val glossaryWordsSet = glossaryWords.map { it.name }.toSet()
+    println("glossaryWordsSet : $glossaryWordsSet")
 
     Box(
         modifier = Modifier
-            .height(500.dp)
+            .height(450.dp)
     ) {
         val scrollState = rememberLazyListState()
         LazyColumn(
@@ -192,3 +238,33 @@ fun commonWordsDataRow(
         cellContent(if (isCommon) "Oui" else "Non", modifier)
     }
 }
+
+@Composable
+fun IntersectionCircles(glossaryWords: List<String>, codeWords: List<String>, glossaryCodeWords: List<String>) {
+    val intersectionSize = glossaryCodeWords.size.coerceIn(0, 10) / 10f // Normalize to [0, 1]
+
+    val circleRadius = 150f // Fixed radius for both circles
+    val circleDistance = (1 - intersectionSize) * 2 * circleRadius // Distance between the centers of the circles
+
+    Canvas(modifier = Modifier.size(300.dp)) {
+        // Draw glossary circle
+        drawCircle(color = Color(0xFFA1C084), center = Offset(x = size.width / 2 - circleDistance / 2, y = size.height / 2), radius = circleRadius)
+
+        // Draw code circle
+        drawCircle(color = Color(0xFFD9B504), center = Offset(x = size.width / 2 + circleDistance / 2, y = size.height / 2), radius = circleRadius)
+
+        // Draw intersection with clipping
+        drawIntoCanvas { canvas ->
+            val path = Path().apply {
+                addOval(Rect(center = Offset(x = size.width / 2 - circleDistance / 2, y = size.height / 2), radius = circleRadius))
+            }
+            canvas.save()
+            canvas.clipPath(path)
+            drawCircle(color = Color(0xFF6E7271), center = Offset(x = size.width / 2 + circleDistance / 2, y = size.height / 2), radius = circleRadius)
+            canvas.restore()
+        }
+    }
+}
+
+
+

src/main/kotlin/main/Main.kt

@@ -102,11 +102,10 @@ fun app() {
             }
 
             "compareGlossary" -> {
-                var selectedGlossary by remember { mutableStateOf<Glossary?>(null) }
                 glossaryList(
                     glossaries = loadGlossaries(appState.selectedProject!!),
                     onGlossarySelected = { glossary ->
-                        selectedGlossary = glossary
+                        appState.selectedGlossary = glossary
                     },
                     onBackClick = {
                         currentPage.value = "compareProject"
@@ -118,9 +117,10 @@ fun app() {
             }
 
             "compareTable" -> {
+                println("Selected glossary: ${appState.selectedGlossary}")
                 compareResults(
                     languageManager = languageManager,
-                    glossaryWords = selectedGlossary?.jsonFilePath?.let { loadDatasFromFile(it) } ?: emptyList(),
+                    glossaryWords = appState.selectedGlossary?.let { loadDatasFromFile(it.jsonFilePath) } ?: emptyList(),
                     codeWords = mostUsedWordList.keys.toList(),
                     onBackClick = {
                         currentPage.value = "compareGlossary"