Add IconInfoTooltip component and integrate tooltips in BiasSettings form fields

- Introduced IconInfoTooltip for displaying contextual information.
- Updated BiasSettings to include tooltips for dataset and performance interpretation fields.
- Added English and Dutch translations for tooltip texts.

Author: devhelpr

src/components/BiasSettings.tsx

@@ -27,6 +27,7 @@ import {
     TooltipContent,
 } from './ui/touch-tooltip';
 import Markdown from 'react-markdown';
+import { IconInfoTooltip } from './ui/info-icon-tooltip';
 
 const FormSchema = z.object({
     file: z.string({
@@ -165,8 +166,14 @@ export default function BiasSettings({
                             {t('biasSettings.form.fieldsets.data.title')}
                         </legend>
                         <div className="relative grid gap-3 select-none">
-                            <div className="absolute -top-[10px] leading-0 left-4 px-1 bg-white text-sm font-medium">
+                            <div className="flex flex-row items-center gap-1 absolute -top-[10px] leading-0 left-4 px-1 bg-white text-sm font-medium">
                                 {t('biasSettings.form.fieldsets.data.dataSet')}
+
+                                <IconInfoTooltip
+                                    tooltipText={t(
+                                        'biasSettings.form.fieldsets.data.dataSetTooltip'
+                                    )}
+                                />
                             </div>
                             <FormField
                                 control={form.control}
@@ -342,10 +349,15 @@ export default function BiasSettings({
                             />
                         </div>
                         <div className="flex flex-col gap-3">
-                            <label className="text-sm font-medium">
+                            <label className="flex flex-row gap-1 items-center text-sm font-medium">
                                 {t(
                                     'biasSettings.form.fieldsets.parameters.performanceInterpretation.title'
                                 )}
+                                <IconInfoTooltip
+                                    tooltipText={t(
+                                        'biasSettings.form.fieldsets.parameters.performanceInterpretation.tooltip'
+                                    )}
+                                />
                             </label>
                             <FormField
                                 control={form.control}

src/components/ui/info-icon-tooltip.tsx

@@ -0,0 +1,31 @@
+import { InfoIcon } from 'lucide-react';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from './touch-tooltip';
+import Markdown from 'react-markdown';
+
+export const IconInfoTooltip = ({ tooltipText }: { tooltipText: string }) => {
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger
+                    onClick={event => {
+                        event.preventDefault();
+                    }}
+                >
+                    <InfoIcon className="size-3.5" />
+                </TooltipTrigger>
+                <TooltipContent>
+                    <div className="whitespace-pre-wrap max-w-full w-[400px] p-2">
+                        <Markdown className="-mt-2 text-gray-800 markdown">
+                            {tooltipText}
+                        </Markdown>
+                    </div>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+};

src/locales/en.ts

@@ -28,6 +28,7 @@ export const en = {
                 data: {
                     title: 'Data',
                     dataSet: 'Dataset',
+                    dataSetTooltip: `Your data should be prepared as follows: ...`,
                     performanceMetric: 'Bias metric',
                 },
                 parameters: {
@@ -38,6 +39,7 @@ export const en = {
                         title: 'Bias metric interpretation',
                         lower: 'Lower value of bias metric is better, e.g., error rate',
                         higher: 'Higher value of bias metric is better, e.g., accuracy',
+                        tooltip: 'Clustering will be based on the bias metrics',
                     },
                     iterationsTooltip:
                         'Number of times the dataset is split in smaller clusters until the minimal cluster size is reached',

src/locales/nl.ts

@@ -26,6 +26,7 @@ export const nl = {
                 data: {
                     title: 'Data',
                     dataSet: 'Dataset',
+                    dataSetTooltip: `Data wordt als volgt behandeld: ...`,
                     performanceMetric: 'Gelijkheidsmetriek',
                 },
                 parameters: {
@@ -36,6 +37,8 @@ export const nl = {
                         title: 'Interpretatie van gelijkheidsmetriek',
                         lower: 'Lagere waarde van gelijkheidsmetriek is beter, bijv. foutpercentage',
                         higher: 'Hogere waarde van gelijkheidsmetriek is beter, bijv. nauwkeurigheid',
+                        tooltip:
+                            'Clustering is gebaseerd op de gelijkheidsmetriek.',
                     },
                     iterationsTooltip:
                         'Aantal keren dat de dataset wordt opgesplitst in kleinere clusters totdat de minimale clustergrootte is bereikt.',