Merge pull request #39 from NGO-Algorithm-Audit/feature/tooltip-method

tooltip after method radio-button label , change section 2, default C…

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -250,11 +250,11 @@ def run():
             # {'reportType': 'correlationRealData'},
             {
                 'reportType': 'heading',
-                'headingKey': 'syntheticData.cartModelTitle'
+                'headingKey': 'syntheticData.cartModelTitle' if sdgMethod == 'cart' else 'syntheticData.gaussianCopulaModelTitle'
             },
              {
                 'reportType': 'text',
-                'textKey': 'syntheticData.cartModelDescription'
+                'textKey': 'syntheticData.cartModelDescription' if sdgMethod == 'cart' else 'syntheticData.gaussianCopulaModelDescription'
             },
             {
                 'reportType': 'heading',

src/components/SyntheticDataSettings.tsx

@@ -1,7 +1,7 @@
 import CSVReader, { csvReader } from './CSVReader';
 import { useEffect, useState } from 'react';
 import { Button } from './ui/button';
-import { ArrowDown, ArrowRight } from 'lucide-react';
+import { ArrowDown, ArrowRight, InfoIcon } from 'lucide-react';
 import { z } from 'zod';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -13,6 +13,13 @@ import { RadioGroup, RadioGroupItem } from './ui/radio-group';
 import { Slider } from './ui/slider';
 import { Label } from './ui/label';
 import { SyntheticDataParameters } from './synthetic-data-interfaces/SyntheticDataParameters';
+import {
+    Tooltip,
+    TooltipProvider,
+    TooltipTrigger,
+    TooltipContent,
+} from './ui/tooltip';
+import Markdown from 'react-markdown';
 
 const createFormSchema = (t: (key: string) => string) =>
     z.object({
@@ -48,7 +55,7 @@ export default function SyntheticDataSettings({
     const form = useForm<z.infer<typeof FormSchema>>({
         resolver: zodResolver(FormSchema),
         defaultValues: {
-            sdgMethod: 'gc',
+            sdgMethod: 'cart',
         },
     });
     const [columnsCountError, setColumnsCountError] = useState(false);
@@ -144,10 +151,30 @@ export default function SyntheticDataSettings({
                         </div>
 
                         <div className="flex flex-col gap-3">
-                            <label className="text-sm font-medium">
+                            <label className="text-sm font-medium flex flex-row items-center gap-1">
                                 {t(
                                     'syntheticData.form.fieldset.sdgMethod.title'
                                 )}
+                                <TooltipProvider>
+                                    <Tooltip delayDuration={250}>
+                                        <TooltipTrigger
+                                            onClick={event => {
+                                                event.preventDefault();
+                                            }}
+                                        >
+                                            <InfoIcon className="size-3.5 hidden xl:flex" />
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            <div className="whitespace-pre-wrap max-w-full w-[400px] p-2">
+                                                <Markdown className="-mt-2 text-gray-800 markdown">
+                                                    {t(
+                                                        'syntheticData.form.fieldset.sdgMethod.tooltip'
+                                                    )}
+                                                </Markdown>
+                                            </div>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
                             </label>
                             <FormField
                                 control={form.control}

src/locales/en.json

@@ -75,7 +75,8 @@
                 "sdgMethod": {
                     "title": "Method",
                     "cart": "CART",
-                    "gc": "Gaussian Copula"
+                    "gc": "Gaussian Copula",
+                    "tooltip": "The CART method is used to generate the synthetic data.\n  \n  \n  \nCART generally produces higher quality synthetic datasets, but might not work well on datasets with categorical variables with 20+ categories.\n  \n  \n  \nsUse Gaussian Copula in those cases"
                 },
                 "samples": "Number of samples"
             },
@@ -102,7 +103,8 @@
         },
         "columnsInDataset": "1. Data types detection",
         "_explanatoryDataAnalysisTitle": "2. Explanatory data analysis",
-        "cartModelTitle": "2. CART model",
+        "cartModelTitle": "2. Method: CART model",
+        "gaussianCopulaModelTitle": "2. Method: Gaussian Copula model",
         "cartModelDescription": "The CART (Classification and Regression Trees) method generates synthetic data by learning patterns from real data through a decision tree that splits data into homogeneous groups based on feature values. It predicts averages for numerical data and assigns the most common category for categorical data, using these predictions to create new synthetic points.",
         "evaluationOfGeneratedDataTitle": "3. Evaluation of generated data",
         "outputDataTitle": "4. Generated synthetic data",
@@ -114,7 +116,7 @@
 
     "biasAnalysis": {
         "demo": {
-            "heading": "Information about demo dataset", 
+            "heading": "Information about demo dataset",
             "description": "As a demo, the [Twitter15](https://www.dropbox.com/scl/fi/flgahafqckxtup2s9eez8/rumdetect2017.zip?dl=0&e=1&file_subpath=%2Frumor_detection_acl2017%2Ftwitter15&rlkey=b7v86v3q1dpvcutxqk0xi7oej) dataset is loaded below. The dataset contains features of tweets and the prediction of a BERT-based misinformation classifier whether the tweet is fake news or not. False positive classifications are marked as FP. The FP column indicates that a tweet is falsy accused by the misinformation detection algorithm to be fake news. The FP metric will be used as a performance metric to measure bias is this use case.\n  \n  \n\n In this example, we will examine what type of tweets are more/less often classified by misinformation detection algorithm as fake news."
         },
         "parameters": {

src/locales/nl.json

@@ -75,7 +75,8 @@
                 "sdgMethod": {
                     "title": "Methode",
                     "cart": "CART",
-                    "gc": "Gaussian Copula"
+                    "gc": "Gaussian Copula",
+                    "tooltip": "De CART-methode wordt gebruikt om de synthetische gegevens te genereren.\n  \n  \n  \nCART levert over het algemeen synthetische datasets van hogere kwaliteit op, maar werkt mogelijk niet goed bij datasets met categorische variabelen met meer dan 20 categorieën.\n  \n  \n  \nGebruik in die gevallen de Gaussian Copula."
                 },
                 "samples": "Aantal samples"
             },
@@ -103,7 +104,8 @@
         },
         "columnsInDataset": "1. Detectie van datatypes",
         "_explanatoryDataAnalysisTitle": "2. Explanatory data analyse",
-        "cartModelTitle": "2. CART model",
+        "cartModelTitle": "2. Methode: CART model",
+        "gaussianCopulaModelTitle": "2. Methode: Gaussian Copula model",
         "cartModelDescription": "De CART-methode (Classification and Regression Trees) genereert synthetische data door patronen uit echte data te leren via een beslisboom die de data opdeelt in homogene groepen op basis van kenmerkwaarden. Voor numerieke data voorspelt de methode gemiddelden, en voor categorische data wijst het de meest voorkomende categorie toe. Deze voorspellingen worden vervolgens gebruikt om nieuwe synthetische gegevenspunten te creëren.",
         "evaluationOfGeneratedDataTitle": "3. Evaluatie van gegenereerde data",
         "outputDataTitle": "4. Output data",