export synthetic data as json and some small refactoring to make it work

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -41,10 +41,10 @@ start = time.time()
 
 from js import data
 from js import setResult
-from js import dataType
 from js import isDemo
 from js import sdgMethod
 from js import samples
+from js import setOutputData
 
 INIT_STEP = 'init'
 PROCESSOR_STEP = 'processor'
@@ -592,6 +592,9 @@ def run():
     print("Original Data (first 5 rows):", real_data.head())
     print("Synthetic Data (first 5 rows):", synthetic_data.head())
 
+    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/components/SyntheticDataSettings.tsx

@@ -8,11 +8,11 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Form, FormControl, FormField, FormItem, FormLabel } from './ui/form';
 import { Card, CardDescription, CardHeader, CardTitle } from './ui/card';
 import Papa from 'papaparse';
-import { SyntheticDataParameters } from './synthetic-data-interfaces/BiasDetectionParameters';
 import { useTranslation } from 'react-i18next';
 import { RadioGroup, RadioGroupItem } from './ui/radio-group';
 import { Slider } from './ui/slider';
 import { Label } from './ui/label';
+import { SyntheticDataParameters } from './synthetic-data-interfaces/SyntheticDataParameters';
 
 const createFormSchema = (t: (key: string) => string) =>
     z.object({
@@ -99,7 +99,6 @@ export default function BiasSettings({
 
     const onSubmit = (data: z.infer<typeof FormSchema>) => {
         onRun({
-            dataType: 'numeric',
             isDemo: false,
             sdgMethod: data.sdgMethod,
             samples: outputSamples[0],

…ta-interfaces/BiasDetectionParameters.ts …ta-interfaces/SyntheticDataParameters.tssrc/components/synthetic-data-interfaces/BiasDetectionParameters.ts renamed to src/components/synthetic-data-interfaces/SyntheticDataParameters.ts src/components/synthetic-data-interfaces/BiasDetectionParameters.ts renamed to src/components/synthetic-data-interfaces/SyntheticDataParameters.ts

@@ -1,5 +1,4 @@
 export interface SyntheticDataParameters {
-    dataType: string;
     isDemo: boolean;
     sdgMethod: string;
     samples: number;

src/components/synthetic-data-interfaces/cluster-export.ts

@@ -1,6 +1,7 @@
 export interface SyntheticDataInfo {
-    dataType: string;
     isDemo: boolean;
     sdgMethod: string;
     samples: number;
+    syntheticData: object;
+    date: Date;
 }

src/components/ui/dropdown-menu.tsx

@@ -45,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
     <DropdownMenuPrimitive.SubContent
         ref={ref}
         className={cn(
-            'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
             className
         )}
         {...props}
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             className={cn(
-                'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+                'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 text-popover-foreground shadow-md',
                 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                 className
             )}

src/routes/SyntheticData.tsx

@@ -17,7 +17,9 @@ import {
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from '@/components/ui/dropdown-menu';
+import { downloadFile } from '@/lib/download-file';
+import { SyntheticDataParameters } from '@/components/synthetic-data-interfaces/SyntheticDataParameters';
 
 const PAGE_STYLE = `
     @page {
@@ -67,8 +69,8 @@ export default function SyntheticDataGeneration() {
         runPython,
         sendData,
         error,
-    } = usePython<SyntheticDataInfo, SyntheticDataInfo>({
-        dataType: 'numeric',
+        clusterInfo,
+    } = usePython<SyntheticDataParameters, SyntheticDataInfo>({
         isDemo: false,
         sdgMethod: 'gc',
         samples: 1000,
@@ -106,7 +108,6 @@ export default function SyntheticDataGeneration() {
         }
         if (data.demo) {
             onRun({
-                dataType: 'numeric',
                 isDemo: true,
                 sdgMethod: 'cart',
                 samples: 1000,
@@ -115,7 +116,6 @@ export default function SyntheticDataGeneration() {
     }, [initialised, data]);
 
     const onRun = (props: {
-        dataType: string;
         isDemo: boolean;
         sdgMethod: string;
         samples: number;
@@ -124,7 +124,6 @@ export default function SyntheticDataGeneration() {
             type: 'start',
             params: {
                 parameters: {
-                    dataType: props.dataType,
                     isDemo: props.isDemo,
                     sdgMethod: props.sdgMethod,
                     samples: props.samples,
@@ -156,19 +155,42 @@ export default function SyntheticDataGeneration() {
                     <div className="ml-auto flex flex-row gap-2 hideonprint">
                         <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                                <Button variant="outline" size="sm" className="p-4 text-sm">
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="p-4 text-sm"
+                                >
                                     {t('downloadButton')}
                                 </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                                <DropdownMenuItem onClick={() => reactToPrintFn()}>
+                                <DropdownMenuItem
+                                    onClick={() => reactToPrintFn()}
+                                >
                                     <Share className="size-3.5 mr-2" />
                                     {t('syntheticData.exportToPDF')}
                                 </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                    <Share className="size-3.5 mr-2" />
-                                    {t('syntheticData.exportToJSON')}
-                                </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>
+                                )}
                             </DropdownMenuContent>
                         </DropdownMenu>
                     </div>