From 89c31c5c31d2a173f244cc495ee40c5d625e3368 Mon Sep 17 00:00:00 2001 From: cemal Date: Wed, 14 Feb 2024 11:20:37 +0100 Subject: [PATCH] Added Venn Diagram to the compare page --- src/main/kotlin/main/Compare.kt | 102 ++++++++++++++++++++++++++++---- src/main/kotlin/main/Main.kt | 6 +- 2 files changed, 92 insertions(+), 16 deletions(-) diff --git a/src/main/kotlin/main/Compare.kt b/src/main/kotlin/main/Compare.kt index 5627f90..66b6000 100644 --- a/src/main/kotlin/main/Compare.kt +++ b/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)) - - commonWordsTable(glossaryWords, codeWords) + val glossaryWordsSet = glossaryWords.map { it.name }.toSet() Spacer(modifier = Modifier.height(16.dp)) - // Légende - Row( - 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") + // Show the table and legend only if showTableAndLegend is true + if (showTableAndLegend.value) { + commonWordsTable(glossaryWords, codeWords) + + Spacer(modifier = Modifier.height(16.dp)) + + // Légende + Row( + 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() 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 ) { 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, codeWords: List, glossaryCodeWords: List) { + 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() + } + } +} + + + diff --git a/src/main/kotlin/main/Main.kt b/src/main/kotlin/main/Main.kt index 0829981..1de9d3b 100644 --- a/src/main/kotlin/main/Main.kt +++ b/src/main/kotlin/main/Main.kt @@ -102,11 +102,10 @@ fun app() { } "compareGlossary" -> { - var selectedGlossary by remember { mutableStateOf(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"