Skip to content

Commit d509a6d

Browse files
devhelprdevhelpr
authored
Merge pull request #70 from NGO-Algorithm-Audit/feature/bias-detection-tooltips
Feature/bias detection tooltips
2 parents 147c089 + 5841bcc commit d509a6d

File tree

3 files changed

+66
-6
lines changed

3 files changed

+66
-6
lines changed

‎src/components/BiasSettings.tsx‎

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
1111
import CSVReader, { csvReader } from './CSVReader';
1212
import { useEffect, useState } from 'react';
1313
import { Button } from './ui/button';
14-
import { ArrowDown, ArrowRight } from 'lucide-react';
14+
import { ArrowDown, ArrowRight, InfoIcon } from 'lucide-react';
1515
import { z } from 'zod';
1616
import { useForm } from 'react-hook-form';
1717
import { zodResolver } from '@hookform/resolvers/zod';
@@ -20,6 +20,13 @@ import { Card, CardDescription, CardHeader, CardTitle } from './ui/card';
2020
import Papa from 'papaparse';
2121
import { BiasDetectionParameters } from './bias-detection-interfaces/BiasDetectionParameters';
2222
import { useTranslation } from 'react-i18next';
23+
import {
24+
Tooltip,
25+
TooltipProvider,
26+
TooltipTrigger,
27+
TooltipContent,
28+
} from './ui/touch-tooltip';
29+
import Markdown from 'react-markdown';
2330

2431
const FormSchema = z.object({
2532
file: z.string({
@@ -250,11 +257,34 @@ export default function BiasSettings({
250257
{t('biasSettings.form.fieldsets.parameters.title')}
251258
</legend>
252259
<div className="grid gap-3">
253-
<Label htmlFor="iterations">
260+
<Label
261+
htmlFor="iterations"
262+
className="flex flex-row items-center gap-1"
263+
>
254264
{t(
255265
'biasSettings.form.fieldsets.parameters.iterations'
256266
)}{' '}
257267
({iter})
268+
<TooltipProvider>
269+
<Tooltip>
270+
<TooltipTrigger
271+
onClick={event => {
272+
event.preventDefault();
273+
}}
274+
>
275+
<InfoIcon className="size-3.5" />
276+
</TooltipTrigger>
277+
<TooltipContent>
278+
<div className="whitespace-pre-wrap max-w-full w-[400px] p-2">
279+
<Markdown className="-mt-2 text-gray-800 markdown">
280+
{t(
281+
'biasSettings.form.fieldsets.parameters.iterationsTooltip'
282+
)}
283+
</Markdown>
284+
</div>
285+
</TooltipContent>
286+
</Tooltip>
287+
</TooltipProvider>
258288
</Label>
259289
<Slider
260290
id="iterations"
@@ -266,11 +296,34 @@ export default function BiasSettings({
266296
/>
267297
</div>
268298
<div className="grid gap-3">
269-
<Label htmlFor="min-cluster-size">
299+
<Label
300+
htmlFor="min-cluster-size"
301+
className="flex flex-row items-center gap-1"
302+
>
270303
{t(
271304
'biasSettings.form.fieldsets.parameters.minClusterSize'
272305
)}{' '}
273306
({clusters})
307+
<TooltipProvider>
308+
<Tooltip>
309+
<TooltipTrigger
310+
onClick={event => {
311+
event.preventDefault();
312+
}}
313+
>
314+
<InfoIcon className="size-3.5" />
315+
</TooltipTrigger>
316+
<TooltipContent>
317+
<div className="whitespace-pre-wrap max-w-full w-[400px] p-2">
318+
<Markdown className="-mt-2 text-gray-800 markdown">
319+
{t(
320+
'biasSettings.form.fieldsets.parameters.minClusterSizeTooltip'
321+
)}
322+
</Markdown>
323+
</div>
324+
</TooltipContent>
325+
</Tooltip>
326+
</TooltipProvider>
274327
</Label>
275328
<Slider
276329
id="min-cluster-size"

‎src/locales/en.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export const en = {
33
'Bienvenue à React et react-i18next',
44
shareButton: 'Share',
55
exportButton: 'Export to .json',
6-
getStarted: "Fill in the form to begin.",
6+
getStarted: 'Fill in the form to begin.',
77
fileUploadError: 'Please upload a valid csv file.',
88
removeButton: 'Remove',
99
dropzoneLabel:
@@ -38,6 +38,10 @@ export const en = {
3838
lower: 'Lower value of bias metric is better, e.g., error rate',
3939
higher: 'Higher value of bias metric is better, e.g., accuracy',
4040
},
41+
iterationsTooltip:
42+
'Number of times the dataset is split in smaller clusters until the minimal cluster size is reached',
43+
minClusterSizeTooltip:
44+
'The minimum number of samples per cluster. By default set to 10% of the number of rows in the attached dataset.',
4145
},
4246
},
4347
errors: {

‎src/locales/nl.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ export const nl = {
3737
lower: 'Lagere waarde van gelijkheidsmetriek is beter, bijv. foutpercentage',
3838
higher: 'Hogere waarde van gelijkheidsmetriek is beter, bijv. nauwkeurigheid',
3939
},
40+
iterationsTooltip:
41+
'Aantal keren dat de dataset wordt opgesplitst in kleinere clusters totdat de minimale clustergrootte is bereikt.',
42+
minClusterSizeTooltip:
43+
'Het minimale aantal datapunten per cluster. Standaard ingesteld op 10% van het aantal rijen in de bijgevoegde dataset.',
4044
},
4145
},
4246
errors: {
@@ -58,8 +62,7 @@ export const nl = {
5862
},
5963
demoCard: {
6064
title: 'Probeer het uit!',
61-
description:
62-
'Geen dataset bij de hand? Gebruik onze demoset.',
65+
description: 'Geen dataset bij de hand? Gebruik onze demoset.',
6366
},
6467
},
6568
syntheticData: {

0 commit comments

Comments
 (0)