Skip to content

Commit a6cde65

Browse files
authored
Merge pull request #39 from NGO-Algorithm-Audit/feature/tooltip-method
tooltip after method radio-button label , change section 2, default C…
2 parents 9b8b28d + c9d0696 commit a6cde65

File tree

4 files changed

+41
-10
lines changed

4 files changed

+41
-10
lines changed

src/assets/synthetic-data.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -250,11 +250,11 @@ def run():
250250
# {'reportType': 'correlationRealData'},
251251
{
252252
'reportType': 'heading',
253-
'headingKey': 'syntheticData.cartModelTitle'
253+
'headingKey': 'syntheticData.cartModelTitle' if sdgMethod == 'cart' else 'syntheticData.gaussianCopulaModelTitle'
254254
},
255255
{
256256
'reportType': 'text',
257-
'textKey': 'syntheticData.cartModelDescription'
257+
'textKey': 'syntheticData.cartModelDescription' if sdgMethod == 'cart' else 'syntheticData.gaussianCopulaModelDescription'
258258
},
259259
{
260260
'reportType': 'heading',

src/components/SyntheticDataSettings.tsx

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import CSVReader, { csvReader } from './CSVReader';
22
import { useEffect, useState } from 'react';
33
import { Button } from './ui/button';
4-
import { ArrowDown, ArrowRight } from 'lucide-react';
4+
import { ArrowDown, ArrowRight, InfoIcon } from 'lucide-react';
55
import { z } from 'zod';
66
import { useForm } from 'react-hook-form';
77
import { zodResolver } from '@hookform/resolvers/zod';
@@ -13,6 +13,13 @@ import { RadioGroup, RadioGroupItem } from './ui/radio-group';
1313
import { Slider } from './ui/slider';
1414
import { Label } from './ui/label';
1515
import { SyntheticDataParameters } from './synthetic-data-interfaces/SyntheticDataParameters';
16+
import {
17+
Tooltip,
18+
TooltipProvider,
19+
TooltipTrigger,
20+
TooltipContent,
21+
} from './ui/tooltip';
22+
import Markdown from 'react-markdown';
1623

1724
const createFormSchema = (t: (key: string) => string) =>
1825
z.object({
@@ -48,7 +55,7 @@ export default function SyntheticDataSettings({
4855
const form = useForm<z.infer<typeof FormSchema>>({
4956
resolver: zodResolver(FormSchema),
5057
defaultValues: {
51-
sdgMethod: 'gc',
58+
sdgMethod: 'cart',
5259
},
5360
});
5461
const [columnsCountError, setColumnsCountError] = useState(false);
@@ -144,10 +151,30 @@ export default function SyntheticDataSettings({
144151
</div>
145152

146153
<div className="flex flex-col gap-3">
147-
<label className="text-sm font-medium">
154+
<label className="text-sm font-medium flex flex-row items-center gap-1">
148155
{t(
149156
'syntheticData.form.fieldset.sdgMethod.title'
150157
)}
158+
<TooltipProvider>
159+
<Tooltip delayDuration={250}>
160+
<TooltipTrigger
161+
onClick={event => {
162+
event.preventDefault();
163+
}}
164+
>
165+
<InfoIcon className="size-3.5 hidden xl:flex" />
166+
</TooltipTrigger>
167+
<TooltipContent>
168+
<div className="whitespace-pre-wrap max-w-full w-[400px] p-2">
169+
<Markdown className="-mt-2 text-gray-800 markdown">
170+
{t(
171+
'syntheticData.form.fieldset.sdgMethod.tooltip'
172+
)}
173+
</Markdown>
174+
</div>
175+
</TooltipContent>
176+
</Tooltip>
177+
</TooltipProvider>
151178
</label>
152179
<FormField
153180
control={form.control}

src/locales/en.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@
7575
"sdgMethod": {
7676
"title": "Method",
7777
"cart": "CART",
78-
"gc": "Gaussian Copula"
78+
"gc": "Gaussian Copula",
79+
"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"
7980
},
8081
"samples": "Number of samples"
8182
},
@@ -102,7 +103,8 @@
102103
},
103104
"columnsInDataset": "1. Data types detection",
104105
"_explanatoryDataAnalysisTitle": "2. Explanatory data analysis",
105-
"cartModelTitle": "2. CART model",
106+
"cartModelTitle": "2. Method: CART model",
107+
"gaussianCopulaModelTitle": "2. Method: Gaussian Copula model",
106108
"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.",
107109
"evaluationOfGeneratedDataTitle": "3. Evaluation of generated data",
108110
"outputDataTitle": "4. Generated synthetic data",
@@ -114,7 +116,7 @@
114116

115117
"biasAnalysis": {
116118
"demo": {
117-
"heading": "Information about demo dataset",
119+
"heading": "Information about demo dataset",
118120
"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&nbsp;&nbsp;\n\n In this example, we will examine what type of tweets are more/less often classified by misinformation detection algorithm as fake news."
119121
},
120122
"parameters": {

src/locales/nl.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@
7575
"sdgMethod": {
7676
"title": "Methode",
7777
"cart": "CART",
78-
"gc": "Gaussian Copula"
78+
"gc": "Gaussian Copula",
79+
"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."
7980
},
8081
"samples": "Aantal samples"
8182
},
@@ -103,7 +104,8 @@
103104
},
104105
"columnsInDataset": "1. Detectie van datatypes",
105106
"_explanatoryDataAnalysisTitle": "2. Explanatory data analyse",
106-
"cartModelTitle": "2. CART model",
107+
"cartModelTitle": "2. Methode: CART model",
108+
"gaussianCopulaModelTitle": "2. Methode: Gaussian Copula model",
107109
"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.",
108110
"evaluationOfGeneratedDataTitle": "3. Evaluatie van gegenereerde data",
109111
"outputDataTitle": "4. Output data",

0 commit comments

Comments
 (0)