show error when uploaded contains more then 8 columns

Author: devhelpr

src/components/CSVReader.tsx

@@ -11,7 +11,8 @@ export interface csvReader {
         data: Record<string, string>[],
         stringified: string,
         fileName: string,
-        demo?: boolean
+        demo?: boolean,
+        columnsCount?: number
     ) => void;
 }
 
@@ -30,10 +31,13 @@ export default function CSVReader({ onChange }: csvReader) {
                 dynamicTyping: true,
 
                 complete: function (results) {
+                    const columns = (results?.data as unknown as [][])[0];
                     onChange(
                         results.data as Record<string, string>[],
                         Papa.unparse(results.data),
-                        file.name
+                        file.name,
+                        false,
+                        Object.keys(columns).length
                     );
                 },
                 error: function (error) {

src/components/SyntheticDataSettings.tsx

@@ -29,7 +29,7 @@ interface DemoDataColumns {
     bar: string;
 }
 
-export default function BiasSettings({
+export default function SyntheticDataSettings({
     onRun,
     onDataLoad,
     isLoading,
@@ -51,7 +51,7 @@ export default function BiasSettings({
             sdgMethod: 'gc',
         },
     });
-
+    const [columnsCountError, setColumnsCountError] = useState(false);
     const [outputSamples, setOutputSamples] = useState([1000]);
     const [dataKey, setDataKey] = useState<string>(new Date().toISOString());
     const [data, setData] = useState<{
@@ -63,13 +63,20 @@ export default function BiasSettings({
     const onFileLoad = (
         data: Record<string, string>[],
         stringified: string,
-        fileName: string
+        fileName: string,
+        isDemo?: boolean,
+        columnsCount?: number
     ) => {
         if (stringified.length === 0) {
+            setColumnsCountError(false);
             form.reset();
         } else {
             form.setValue('file', stringified);
+            if (!isDemo && columnsCount && columnsCount > 8) {
+                setColumnsCountError(true);
+            }
         }
+
         setData({ data, stringified, fileName });
         setDataKey(new Date().toISOString());
     };
@@ -89,6 +96,7 @@ export default function BiasSettings({
             ugpa: (row as DemoDataColumns)['ugpa'],
             bar: (row as DemoDataColumns)['bar'],
         }));
+
         onDataLoad(
             demoData as Record<string, string>[],
             Papa.unparse(demoData),
@@ -125,6 +133,15 @@ export default function BiasSettings({
                                 )}
                             />
                         </div>
+                        <div className="flex flex-row gap-2 justify-start">
+                            {columnsCountError && (
+                                <div className="text-red-500">
+                                    {t(
+                                        'syntheticData.form.errors.columnsCountError'
+                                    )}
+                                </div>
+                            )}
+                        </div>
 
                         <div className="flex flex-col gap-3">
                             <label className="text-sm font-medium">
@@ -211,7 +228,7 @@ export default function BiasSettings({
                             type="submit"
                             size="sm"
                             className="gap-1.5"
-                            disabled={isLoading}
+                            disabled={isLoading || columnsCountError}
                         >
                             {!isLoading
                                 ? t('syntheticData.form.actions.runGeneration')

src/locales/en.json

@@ -67,7 +67,8 @@
         "form": {
             "errors": {
                 "csvRequired": "Please upload a csv file.",
-                "analysisError": "Error while analysing"
+                "analysisError": "Error while analysing",
+                "columnsCountError": "File may contain a maximum of 8 columns."
             },
             "fieldset": {
                 "sourceDataset": "Source dataset",

src/locales/nl.json

@@ -67,7 +67,8 @@
         "form": {
             "errors": {
                 "csvRequired": "Upload een csv-bestand.",
-                "analysisError": "Fout tijdens analyse"
+                "analysisError": "Fout tijdens analyse",
+                "columnsCountError": "File mag maximaal 8 kolommen bevatten."
             },
             "fieldset": {
                 "sourceDataset": "Brondataset",