Merge pull request #23 from NGO-Algorithm-Audit/feature/charts-in-accordeon-and-content

Feature/charts in accordeon and content

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -129,12 +129,14 @@ def run():
             {'type': 'heading', 'data': sdgMethod}
     ))
     if isDemo:
-        setResult(json.dumps(
-            {'type': 'heading', 'data': '''Demo'''}
-        ))
-        setResult(json.dumps(
-            {'type': 'text', 'data': '''A demo dataset is loaded below. We will now generate synthetic data on the columns: 'sex', 'race1', 'ugpa', 'bar'. We will be using the Gaussian Copula method and evaluate the distribution and correlation differences between the real and synthetic data.'''}
-        ))
+        setResult(json.dumps({
+            'type': 'heading',
+            'headingKey': 'syntheticData.demo.heading'
+        }))
+        setResult(json.dumps({
+            'type': 'text',
+            'key': 'syntheticData.demo.description'
+        }))
 
     setResult(json.dumps(
         {'type': 'data-set-preview', 'data': ''}
@@ -147,6 +149,27 @@ def run():
     dtypes_dict['sex'] = 'category'
     real_data['sex'] = real_data['sex'].map({1: 'male', 2: 'female'})
 
+    setResult(json.dumps({
+        'type': 'heading',
+        'headingKey': 'syntheticData.columnsInDataset'
+    }))
+    dataInfo = []
+    for column in real_data.columns:
+        dataInfo.append({
+            'key': column, 
+            'value': dtypes_dict[column]    
+        })
+
+    setResult(json.dumps({
+        'type': 'list',
+        'list': dataInfo
+    }))
+        
+    setResult(json.dumps({
+        'type': 'text',
+        'key': 'syntheticData.columnsInDatasetInfo'
+    }))
+
     cloned_real_data = real_data.copy()
     label_encoders = {}
     for column in real_data.select_dtypes(include=['object']).columns:
@@ -215,9 +238,24 @@ def run():
     # combined_data_encoded = pd.concat((df_encoded.assign(realOrSynthetic='real_encoded'), synth_df.assign(realOrSynthetic='synthetic')), keys=['real_encoded','synthetic'], names=['Data'])
     
     # setResult(json.dumps({'type': 'distribution', 'real': real_data.to_json(orient="records"), 'synthetic': synthetic_data.to_json(orient="records"), 'dataTypes': json.dumps(dtypes_dict), 'combined_data' : combined_data.to_json(orient="records")}))
-    setResult(json.dumps({'type': 'distribution', 'real': cloned_real_data.to_json(orient="records"), 'synthetic': synth_df_decoded.to_json(orient="records"), 'dataTypes': json.dumps(dtypes_dict), 'combined_data' : combined_data.to_json(orient="records")}))
-
-    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': 'distribution',
+        'real': cloned_real_data.to_json(orient="records"),
+        'synthetic': synth_df_decoded.to_json(orient="records"),
+        'dataTypes': json.dumps(dtypes_dict),
+        'combined_data' : combined_data.to_json(orient="records"),
+        'realCorrelations': real_data.corr().to_json(orient="records"),
+        'syntheticCorrelations': synthetic_data.corr().to_json(orient="records"),
+        'reports' : [
+            'univariate', 'distribution', 'correlation'
+        ]
+    }))
+
+    # setResult(json.dumps({
+    #     'type': 'heatmap',
+    #     'real': real_data.corr().to_json(orient="records"),
+    #     'synthetic': synthetic_data.corr().to_json(orient="records")
+    # }))
 
     return 
     

src/components/componentMapper.tsx

@@ -105,7 +105,7 @@ const CountBarChart = ({ column, realData }: CountBarChartProps) => {
             .attr('text-anchor', 'middle')
             .style('font-size', '12px')
             .style('font-weight', 'bold')
-            .text(`${t('distribution.countFor')} ${column}`);
+            .text(`${t('distribution.distributionFor')} ${column}`);
     }, [containerWidth, column, realData]);
 
     useEffect(() => {

src/components/graphs/CountBarChart.tsx

@@ -58,7 +58,7 @@ AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 export interface AccordionProps {
     title: string;
-    content: string;
+    content: React.ReactNode;
 }
 
 export const Accordion = (props: AccordionProps) => (
@@ -68,17 +68,25 @@ export const Accordion = (props: AccordionProps) => (
                 <AccordionItem value="item-1">
                     <AccordionTrigger>{props.title}</AccordionTrigger>
                     <AccordionContent>
-                        <Markdown className="mt-2 text-gray-800 markdown px-3 whitespace-pre-wrap">
-                            {props.content}
-                        </Markdown>
+                        {typeof props.content === 'string' ? (
+                            <Markdown className="mt-2 text-gray-800 markdown px-3 whitespace-pre-wrap">
+                                {props.content}
+                            </Markdown>
+                        ) : (
+                            props.content
+                        )}
                     </AccordionContent>
                 </AccordionItem>
             </AccordionPrimitive.Root>
         </div>
         <div className="hidden showonprint">
-            <Markdown className="text-gray-800 markdown">
-                {props.content}
-            </Markdown>
+            {typeof props.content === 'string' ? (
+                <Markdown className="text-gray-800 markdown">
+                    {props.content}
+                </Markdown>
+            ) : (
+                props.content
+            )}
         </div>
     </>
 );

src/components/ui/accordion.tsx

@@ -2,8 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+.content-list,
 .markdown {
     p a {
         @apply text-blue-500 underline;
     }
+
+    ul {
+        @apply list-disc list-inside;
+    }
 }

src/index.css

@@ -57,6 +57,10 @@
         }
     },
     "syntheticData": {
+        "demo": {
+            "heading": "Information about demo dataset",
+            "description": "**UI text** A subset of the [Law School Admission Bar*](https://www.kaggle.com/datasets/danofer/law-school-admissions-bar-passage) dataset is used as a demo. Synthetic data will be generated for the following columns:\n  \n  \n- sex: student gender, i.e. 1 (male), 2 (female)\n- race1: race, i.e. asian, black, hispanic, white, other\n- ugpa: The student's undergraduate GPA, continous variable;\n- bar: Ground truth label indicating whether or not the student passed the bar, i.e. passed 1st time, passed 2nd time, failed, non-graduated\n  \n  \n\nThe CART method will be used  evaluate the distribution and correlation differences between the real and synthetic data.\n  \n  \n\n*The original paper can be found [here](https://files.eric.ed.gov/fulltext/ED469370.pdf)."
+        },
         "exportToPDF": "Download evaluation report as PDF",
         "exportToJSON": "Download synthetic data as JSON",
         "exportToCSV": "Download synthetic data as CSV",
@@ -84,8 +88,14 @@
         "demoCard": {
             "title": "Try it out!",
             "description": "Do you not have a dataset at hand? No worries use our demo data set."
-        }
+        },
+        "columnsInDataset": "Detected column data-types in dataset",
+        "columnsInDatasetInfo": "If detected data types are incorrect, please change this locally in the dataset before uploading it again.",
+        "univariateCharts": "Univariate distributions of the uploaded dataset",
+        "synthVsReal": "Synthetic vs Real data",
+        "heatmapCorrelation": "Heatmap correlation"
     },
+
     "biasAnalysis": {
         "demo": {
             "heading": "Information about demo dataset",

src/locales/en.json

@@ -57,6 +57,10 @@
         }
     },
     "syntheticData": {
+        "demo": {
+            "heading": "Informatie over demodataset",
+            "description": "**UI-tekst** Een subset van de [Law School Admission Bar*](https://www.kaggle.com/datasets/danofer/law-school-admissions-bar-passage) dataset wordt gebruikt als demo. Er zullen synthetische gegevens worden gegenereerd voor de volgende kolommen:\n  \n  \n\n- sex: geslacht van de student, d.w.z. 1 (man), 2 (vrouw)\n- race1: etniciteit, d.w.z. aziatisch, zwart, hispanic, wit, anders\n- ugpa: Het GPA van de student tijdens de undergraduate-opleiding, continue variabele;\n- bar: Waarheidslabel dat aangeeft of de student is geslaagd voor de bar, d.w.z. geslaagd 1e keer, geslaagd 2e keer, gezakt, niet-afgestudeerd\n  \n  \n\nDe CART-methode zal worden gebruikt om de verschillen in distributie en correlatie tussen de echte en synthetische gegevens te evalueren.\n  \n  \n\n*Het oorspronkelijke artikel is [hier](https://files.eric.ed.gov/fulltext/ED469370.pdf) te vinden."
+        },
         "exportToPDF": "Download evulatie rapport als PDF",
         "exportToJSON": "Download synthetische data als JSON",
         "exportToCSV": "Download synthetische data als CSV",
@@ -84,7 +88,12 @@
         "demoCard": {
             "title": "Probeer het uit!",
             "description": "Heeft u geen dataset bij de hand? Geen zorgen, gebruik onze demodataset."
-        }
+        },
+        "columnsInDataset": "Gedetecteerde kolom data-types in de dataset",
+        "columnsInDatasetInfo": "Als de gedetecteerd data types niet correct zijn, pas dit dan lokaal aan in de dataset voordat u deze opnieuw uploadt.",
+        "univariateCharts": "Univariate distributies van de geuploade dataset",
+        "synthVsReal": "Synthetic vs Real data",
+        "heatmapCorrelation": "Heatmap correlatie"
     },
     "biasAnalysis": {
         "demo": {