sdg download as csv

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -592,9 +592,9 @@ def run():
     print("Original Data (first 5 rows):", real_data.head())
     print("Synthetic Data (first 5 rows):", synthetic_data.head())
 
+    # Store synthetic data for export
     setOutputData("syntheticData", synthetic_data.to_json(orient='records'))
 
-
     results = run_diagnostic(real_data, synthetic_data, target_column='gpa')  
     print('Results:', results)
     setResult(json.dumps(

src/lib/utils.ts

@@ -4,3 +4,35 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
+
+export function exportToCSV(data: any[], filename: string) {
+    // Convert data to CSV format
+    const csvContent = data.map(row => {
+        return Object.values(row)
+            .map(value => {
+                // Handle special characters and wrap in quotes if needed
+                const stringValue = String(value);
+                return stringValue.includes(',') ||
+                    stringValue.includes('"') ||
+                    stringValue.includes('\n')
+                    ? `"${stringValue.replace(/"/g, '""')}"`
+                    : stringValue;
+            })
+            .join(',');
+    });
+
+    // Add headers
+    const headers = Object.keys(data[0]).join(',');
+    const csvString = [headers, ...csvContent].join('\n');
+
+    // Create and trigger download
+    const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', `${filename}.csv`);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}

src/locales/en.json

@@ -59,6 +59,7 @@
     "syntheticData": {
         "exportToPDF": "Download evaluation report as pdf",
         "exportToJSON": "Download synthetic data as JSON",
+        "exportToCSV": "Download synthetic data as CSV",
         "form": {
             "errors": {
                 "csvRequired": "Please upload a CSV file.",

src/locales/nl.json

@@ -16,6 +16,7 @@
     "biasSettings": {
         "exportToPDF": "Download bias detection rapport als pdf",
         "exportToJSON": "Export clusters als JSON",
+
         "form": {
             "fieldsets": {
                 "data": {
@@ -58,6 +59,7 @@
     "syntheticData": {
         "exportToPDF": "Download evulatie rapport als pdf",
         "exportToJSON": "Download synthetische data als JSON",
+        "exportToCSV": "Download synthetische data als CSV",
         "form": {
             "errors": {
                 "csvRequired": "Upload een CSV-bestand.",

src/routes/SyntheticData.tsx

@@ -20,6 +20,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { downloadFile } from '@/lib/download-file';
 import { SyntheticDataParameters } from '@/components/synthetic-data-interfaces/SyntheticDataParameters';
+import { exportToCSV } from '@/lib/utils';
 
 const PAGE_STYLE = `
     @page {
@@ -132,6 +133,12 @@ export default function SyntheticDataGeneration() {
         });
     };
 
+    const handleExport = (syntheticData: object[]) => {
+        if (syntheticData.length > 0) {
+            exportToCSV(syntheticData, 'synthetic_data');
+        }
+    };
+
     return (
         <main ref={contentRef} className="gap-4 p-4 flex flex-col">
             {!lang && <LanguageSwitcher />}
@@ -172,25 +179,38 @@ export default function SyntheticDataGeneration() {
                                     {t('syntheticData.exportToPDF')}
                                 </DropdownMenuItem>
                                 {clusterInfo && (
-                                    <DropdownMenuItem
-                                        onClick={() => {
-                                            downloadFile(
-                                                JSON.stringify(
-                                                    {
-                                                        fileName: data.fileName,
-                                                        ...clusterInfo,
-                                                    },
-                                                    null,
-                                                    2
-                                                ),
-                                                `${data.fileName.replace('.csv', '') || 'cluster-info'}-${clusterInfo.date.toISOString()}.json`,
-                                                'application/json'
-                                            );
-                                        }}
-                                    >
-                                        <Share className="size-3.5 mr-2" />
-                                        {t('syntheticData.exportToJSON')}
-                                    </DropdownMenuItem>
+                                    <>
+                                        <DropdownMenuItem
+                                            onClick={() => {
+                                                downloadFile(
+                                                    JSON.stringify(
+                                                        {
+                                                            fileName:
+                                                                data.fileName,
+                                                            ...clusterInfo,
+                                                        },
+                                                        null,
+                                                        2
+                                                    ),
+                                                    `${data.fileName.replace('.csv', '') || 'cluster-info'}-${clusterInfo.date.toISOString()}.json`,
+                                                    'application/json'
+                                                );
+                                            }}
+                                        >
+                                            <Share className="size-3.5 mr-2" />
+                                            {t('syntheticData.exportToJSON')}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            onClick={() => {
+                                                handleExport(
+                                                    clusterInfo.syntheticData as object[]
+                                                );
+                                            }}
+                                        >
+                                            <Share className="size-3.5 mr-2" />
+                                            {t('syntheticData.exportToCSV')}
+                                        </DropdownMenuItem>
+                                    </>
                                 )}
                             </DropdownMenuContent>
                         </DropdownMenu>