Merge pull request #31 from NGO-Algorithm-Audit/feature/quick-wins

accordeon with diagnostic results and text tweaks

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -256,33 +256,22 @@ def run():
             {'reportType': 'univariateDistributionSyntheticData'},
             {'reportType': 'bivariateDistributionSyntheticData'},
             {'reportType': 'correlationSyntheticData'},
-            
+            {            
+                'reportType': 'table',
+                'titleKey': 'syntheticData.diagnosticsTitle',
+                'showIndex' : False,
+                'data': json.dumps([
+                        {
+                            'attribute': key,
+                            'ks_stat': values['ks_stat'],
+                            'p_value': values['p_value']
+                        }
+                        for key, values in results['distribution_results'].items()
+                    ])
+            }
         ]
     }))
 
-    # setResult(json.dumps({
-    #     'type': 'heatmap',
-    #     'real': real_data.corr().to_json(orient="records"),
-    #     'synthetic': synthetic_data.corr().to_json(orient="records")
-    # }))
-
-    setResult(json.dumps(
-        {
-            'type': 'heading', 
-            'headingKey': 'syntheticData.diagnosticsTitle'
-        }
-    ))
-    setResult(json.dumps({'type': 'table', 
-        'showIndex' : False,
-        'data': json.dumps([
-            {
-                'attribute': key,
-                'ks_stat': values['ks_stat'],
-                'p_value': values['p_value']
-            }
-            for key, values in results['distribution_results'].items()
-        ])}))
-
     setResult(json.dumps(
         {
             'type': 'heading', 

src/components/DistributionReport.tsx

@@ -9,12 +9,16 @@ import { Accordion } from './ui/accordion';
 import { createHeatmapdata } from './createHeatmapdata';
 import ViolinChart from './graphs/ViolinChart';
 import GroupBarChart from './graphs/GroupBarChart';
+import SimpleTable from './SimpleTable';
 
 interface DistributionReport {
     reportType: string;
     headingKey?: string;
     textKey?: string;
     params?: Record<string, string | number | boolean>;
+    data?: string;
+    titleKey?: string;
+    showIndex?: boolean;
 }
 export interface DistributionReportProps {
     dataTypes: string;
@@ -60,6 +64,35 @@ export const DistributionReport = (
                             </Markdown>
                         );
                     }
+
+                    if (report.reportType === 'table') {
+                        if (!report.data) {
+                            return null;
+                        }
+                        if (!report.titleKey) {
+                            return null;
+                        }
+
+                        return (
+                            <div key={indexReport} className="mb-4">
+                                <Accordion
+                                    title={t(report.titleKey)}
+                                    content={
+                                        <div>
+                                            <p>&nbsp;</p>
+                                            <SimpleTable
+                                                data={JSON.parse(report.data)}
+                                                title={t(report.titleKey)}
+                                                showIndex={
+                                                    report.showIndex ?? false
+                                                }
+                                            />
+                                        </div>
+                                    }
+                                />
+                            </div>
+                        );
+                    }
                     if (
                         report.reportType === 'univariateDistributionRealData'
                     ) {

src/locales/en.json

@@ -139,8 +139,8 @@
         }
     },
     "heatmap": {
-        "realdata": "Correlation matrix of real data",
-        "syntheticdata": "Absolute difference in correlation matrix, i.e., |real data - synthetic data|"
+        "realdata": "Correlation matrix of attached data",
+        "syntheticdata": "Absolute difference in correlation matrix, i.e., |attached data - synthetic data|"
     },
     "distribution": {
         "distributionFor": "Distribution for",

src/locales/nl.json

@@ -138,8 +138,8 @@
         }
     },
     "heatmap": {
-        "realdata": "Correlatie matrix van echte data",
-        "syntheticdata": "Absoluut verschil in correlation matrix, m.a.w., |echte data - synthetische data|"
+        "realdata": "Correlatie matrix van gekoppelde data",
+        "syntheticdata": "Absoluut verschil in correlation matrix, m.a.w., |gekoppelde data - synthetische data|"
     },
     "distribution": {
         "distributionFor": "Distributie voor",