show detected data-types

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -149,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:

src/components/componentMapper.tsx

@@ -103,6 +103,32 @@ export default function ComponentMapper({
                                 title={t(resultItem.title)}
                             />
                         );
+
+                    case 'list':
+                        if (resultItem.list) {
+                            console.log('list', resultItem.list);
+                            const content = resultItem.list.map(
+                                (
+                                    listItem: {
+                                        key: string;
+                                        value: string;
+                                    },
+                                    index: number
+                                ) => (
+                                    <li key={`list-${index}`}>
+                                        <span className="font-bold">{`${listItem.key}`}</span>
+                                        {`: ${listItem.value}`}
+                                    </li>
+                                )
+                            );
+
+                            return (
+                                <div className="content-list">
+                                    <ul key={index}>{content}</ul>
+                                </div>
+                            );
+                        }
+                        return null;
                     case 'accordion':
                         if (resultItem.comparisons) {
                             // Handle translation of comparisons

src/index.css

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+.content-list,
 .markdown {
     p a {
         @apply text-blue-500 underline;

src/locales/en.json

@@ -88,7 +88,9 @@
         "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."
     },
     "biasAnalysis": {
         "demo": {

src/locales/nl.json

@@ -88,7 +88,9 @@
         "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."
     },
     "biasAnalysis": {
         "demo": {