add samples slider

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -44,6 +44,7 @@ from js import setResult
 from js import dataType
 from js import isDemo
 from js import sdgMethod
+from js import samples
 
 INIT_STEP = 'init'
 PROCESSOR_STEP = 'processor'
@@ -577,15 +578,15 @@ def run():
         spop = Synthpop(method='cart')
 
         spop.fit(real_data, dtypes=dtypes_dict)
-        synthetic_data = spop.generate(k=1000)
+        synthetic_data = spop.generate(k=samples)
 
     if (sdgMethod == 'gc'):
         # Initialize synthesizer and fit it to the data
         synthesizer = GaussianCopulaSynthesizer()
         synthesizer.fit(real_data)
 
         # Generate synthetic data
-        synthetic_data = synthesizer.sample(1000)
+        synthetic_data = synthesizer.sample(samples)
 
     # Output some results
     print("Original Data (first 5 rows):", real_data.head())

src/components/SyntheticDataSettings.tsx

@@ -11,6 +11,8 @@ 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';
 
 const createFormSchema = (t: (key: string) => string) =>
     z.object({
@@ -42,6 +44,8 @@ export default function BiasSettings({
             sdgMethod: 'gc',
         },
     });
+
+    const [outputSamples, setOutputSamples] = useState([1000]);
     const [dataKey, setDataKey] = useState<string>(new Date().toISOString());
     const [data, setData] = useState<{
         data: Record<string, string>[];
@@ -84,6 +88,7 @@ export default function BiasSettings({
             dataType: 'numeric',
             isDemo: false,
             sdgMethod: data.sdgMethod,
+            samples: outputSamples[0],
         });
     };
 
@@ -148,6 +153,21 @@ export default function BiasSettings({
                                 )}
                             />
                         </div>
+
+                        <div className="grid gap-3">
+                            <Label htmlFor="samples">
+                                {t('syntheticData.form.fieldset.samples')} (
+                                {outputSamples})
+                            </Label>
+                            <Slider
+                                id="samples"
+                                defaultValue={outputSamples}
+                                max={5000}
+                                step={10}
+                                onValueChange={value => setOutputSamples(value)}
+                                className="cursor-pointer"
+                            />
+                        </div>
                     </fieldset>
 
                     <div className="flex flex-row ml-auto gap-2">

src/components/synthetic-data-interfaces/BiasDetectionParameters.ts

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

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

@@ -2,4 +2,5 @@ export interface SyntheticDataInfo {
     dataType: string;
     isDemo: boolean;
     sdgMethod: string;
+    samples: number;
 }

src/locales/en.json

@@ -63,7 +63,8 @@
                     "title": "Method",
                     "cart": "cart",
                     "gc": "Gaussian Copula"
-                }
+                },
+                "samples": "Number of samples"
             },
             "actions": {
                 "tryItOut": "Try it out",

src/locales/nl.json

@@ -63,7 +63,8 @@
                     "title": "Methode",
                     "cart": "cart",
                     "gc": "Gaussian Copula"
-                }
+                },
+                "samples": "Aantal samples"
             },
             "actions": {
                 "tryItOut": "Uitproberen",

src/routes/SyntheticData.tsx

@@ -65,6 +65,7 @@ export default function SyntheticDataGeneration() {
         dataType: 'numeric',
         isDemo: false,
         sdgMethod: 'gc',
+        samples: 1000,
     });
 
     const onFileLoad: csvReader['onChange'] = (
@@ -89,14 +90,20 @@ export default function SyntheticDataGeneration() {
             sendData(data.stringified);
         }
         if (data.demo) {
-            onRun({ dataType: 'numeric', isDemo: true, sdgMethod: 'cart' });
+            onRun({
+                dataType: 'numeric',
+                isDemo: true,
+                sdgMethod: 'cart',
+                samples: 1000,
+            });
         }
     }, [initialised, data]);
 
     const onRun = (props: {
         dataType: string;
         isDemo: boolean;
         sdgMethod: string;
+        samples: number;
     }) => {
         runPython({
             type: 'start',
@@ -105,6 +112,7 @@ export default function SyntheticDataGeneration() {
                     dataType: props.dataType,
                     isDemo: props.isDemo,
                     sdgMethod: props.sdgMethod,
+                    samples: props.samples,
                 },
             },
         });