Add data type selection and validation in BiasSettings component; update localization for data type messages

Author: devhelpr

src/components/BiasSettings.tsx

@@ -143,6 +143,25 @@ export default function BiasSettings({
     };
 
     const onSubmit = (data: z.infer<typeof FormSchema>) => {
+        // Check if data type matches the actual data
+        const isNumericData = data.data.every(row => {
+            return !isNaN(parseFloat(row[data.targetColumn]));
+        });
+
+        if (data.dataType === 'numeric' && !isNumericData) {
+            setPerformanceMetricColumnError(
+                t('biasSettings.form.errors.numericDataRequired')
+            );
+            return;
+        }
+
+        if (data.dataType === 'categorical' && isNumericData) {
+            setPerformanceMetricColumnError(
+                t('biasSettings.form.errors.categoricalDataRequired')
+            );
+            return;
+        }
+
         onRun({
             clusterSize: clusters[0],
             iterations: iter[0],
@@ -259,6 +278,55 @@ export default function BiasSettings({
                                 )}
                             />
                         </div>
+                        <div className="grid gap-3">
+                            <FormField
+                                control={form.control}
+                                name="dataType"
+                                disabled={isLoading}
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>
+                                            {t(
+                                                'biasSettings.form.fieldsets.data.dataType'
+                                            )}
+                                        </FormLabel>
+                                        <RadioGroup
+                                            onValueChange={field.onChange}
+                                            defaultValue={field.value}
+                                            key={`${dataKey}_dataType`}
+                                            className="flex flex-col space-y-1"
+                                        >
+                                            <FormItem className="flex items-center space-x-3 space-y-0">
+                                                <FormControl>
+                                                    <RadioGroupItem
+                                                        value="categorical"
+                                                        disabled={isLoading}
+                                                    />
+                                                </FormControl>
+                                                <FormLabel className="font-normal">
+                                                    {t(
+                                                        'biasSettings.form.fieldsets.data.categoricalData'
+                                                    )}
+                                                </FormLabel>
+                                            </FormItem>
+                                            <FormItem className="flex items-center space-x-3 space-y-0">
+                                                <FormControl>
+                                                    <RadioGroupItem
+                                                        value="numeric"
+                                                        disabled={isLoading}
+                                                    />
+                                                </FormControl>
+                                                <FormLabel className="font-normal">
+                                                    {t(
+                                                        'biasSettings.form.fieldsets.data.numericalData'
+                                                    )}
+                                                </FormLabel>
+                                            </FormItem>
+                                        </RadioGroup>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
                     </fieldset>
 
                     <fieldset className="grid gap-6 rounded-lg border p-4">

src/locales/en.ts

@@ -30,6 +30,9 @@ export const en = {
                     dataSet: 'Dataset',
                     dataSetTooltip: `Your data should be prepared as follows: ...`,
                     performanceMetric: 'Bias metric',
+                    dataType: 'Type of data',
+                    categoricalData: 'Categorical data',
+                    numericalData: 'Numerical data',
                 },
                 parameters: {
                     title: 'Parameters',
@@ -55,6 +58,10 @@ export const en = {
                     'No numeric columns found. Please upload a valid dataset.',
                 analysisError: 'Error while analysing',
                 noData: 'No data loaded',
+                numericDataRequired:
+                    'Selected column must contain numerical data for k-means clustering.',
+                categoricalDataRequired:
+                    'Selected column must contain categorical data for k-modes clustering.',
             },
             actions: {
                 tryItOut: 'Demo dataset',

src/locales/nl.ts

@@ -28,6 +28,9 @@ export const nl = {
                     dataSet: 'Dataset',
                     dataSetTooltip: `Data wordt als volgt behandeld: ...`,
                     performanceMetric: 'Gelijkheidsmetriek',
+                    dataType: 'Type data',
+                    categoricalData: 'Categorische data',
+                    numericalData: 'Numerieke data',
                 },
                 parameters: {
                     title: 'Parameters',
@@ -54,6 +57,10 @@ export const nl = {
                     'Geen numerieke kolommen gevonden. Upload een geldige dataset.',
                 analysisError: 'Fout tijdens analyse',
                 noData: 'Geen gegevens geladen',
+                numericDataRequired:
+                    'Geselecteerde kolom moet numerieke data bevatten voor k-means clustering.',
+                categoricalDataRequired:
+                    'Geselecteerde kolom moet categorische data bevatten voor k-modes clustering.',
             },
             actions: {
                 tryItOut: 'Demo dataset',