Skip to content

Commit 5f3f46d

Browse files
devhelprdevhelpr
committed
extend report-list componentmapper component and implement all translations and heading structure for synthetic data
1 parent 19659f8 commit 5f3f46d

File tree

4 files changed

+110
-19
lines changed

4 files changed

+110
-19
lines changed

‎src/assets/synthetic-data.tsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,26 @@ def run():
230230
'realCorrelations': real_data.corr().to_json(orient="records"),
231231
'syntheticCorrelations': synthetic_data.corr().to_json(orient="records"),
232232
'reports' : [
233-
'univariate', 'distribution', 'correlation'
233+
{
234+
'reportType': 'heading',
235+
'headingKey': 'syntheticData.explanatoryDataAnalysisTitle'
236+
},
237+
{'reportType': 'univariate'},
238+
{
239+
'reportType': 'heading',
240+
'headingKey': 'syntheticData.cartModelTitle'
241+
},
242+
{
243+
'reportType': 'text',
244+
'textKey': 'syntheticData.cartModelDescription'
245+
},
246+
{
247+
'reportType': 'heading',
248+
'headingKey': 'syntheticData.evaluationOfGeneratedDataTitle'
249+
},
250+
{'reportType': 'distribution'},
251+
{'reportType': 'correlation'},
252+
234253
]
235254
}))
236255
@@ -241,7 +260,10 @@ def run():
241260
# }))
242261
243262
setResult(json.dumps(
244-
{'type': 'heading', 'data': 'Diagnostic Results:'}
263+
{
264+
'type': 'heading',
265+
'headingKey': 'syntheticData.diagnosticsTitle'
266+
}
245267
))
246268
setResult(json.dumps({'type': 'table',
247269
'showIndex' : False,
@@ -255,12 +277,18 @@ def run():
255277
])}))
256278
257279
setResult(json.dumps(
258-
{'type': 'heading', 'data': 'Correlation difference: ' + str(results['correlation_diff']) }
280+
{
281+
'type': 'heading',
282+
'headingKey': 'syntheticData.correlationDifference',
283+
'params': {
284+
'correlationDifference' : str(results['correlation_diff'])
285+
}
286+
}
259287
))
260288
261289
setResult(json.dumps({
262290
'type': 'heading',
263-
'data': '5. Output data'
291+
'headingKey': 'syntheticData.outputDataTitle'
264292
}))
265293
266294
setResult(json.dumps({

‎src/components/componentMapper.tsx‎

Lines changed: 60 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -169,17 +169,14 @@ export default function ComponentMapper({
169169
);
170170

171171
case 'text':
172-
// Handle text that might need translation
173-
const textContent = resultItem.key
174-
? t(resultItem.key, resultItem.params)
175-
: resultItem.data;
176-
177172
return (
178173
<Markdown
179174
key={index}
180175
className="-mt-2 text-gray-800 markdown"
181176
>
182-
{textContent}
177+
{resultItem.key
178+
? t(resultItem.key, resultItem.params)
179+
: resultItem.data}
183180
</Markdown>
184181
);
185182
case 'histogram': {
@@ -216,10 +213,58 @@ export default function ComponentMapper({
216213
const dataTypes = JSON.parse(resultItem.dataTypes);
217214
console.log('reports', resultItem.reports);
218215
return (
219-
<div key={`distribution-${index}`}>
216+
<div
217+
key={`distribution-${index}`}
218+
className="flex flex-col gap-6"
219+
>
220220
{resultItem.reports.map(
221-
(report: string, indexReport: number) => {
222-
if (report === 'univariate') {
221+
(
222+
report: {
223+
reportType: string;
224+
headingKey?: string;
225+
textKey?: string;
226+
params?: Record<
227+
string,
228+
string | number | boolean
229+
>;
230+
},
231+
indexReport: number
232+
) => {
233+
if (
234+
report.reportType === 'heading' &&
235+
report.headingKey
236+
) {
237+
return (
238+
<h5
239+
key={indexReport}
240+
className="text-gray-800 font-semibold mb-4"
241+
>
242+
{t(
243+
report.headingKey,
244+
report.params
245+
)}
246+
</h5>
247+
);
248+
}
249+
if (
250+
report.reportType === 'text' &&
251+
report.textKey
252+
) {
253+
return (
254+
<Markdown
255+
key={index}
256+
className="-mt-2 text-gray-800 markdown"
257+
>
258+
{t(
259+
report.textKey,
260+
report.params
261+
)}
262+
</Markdown>
263+
);
264+
}
265+
if (
266+
report.reportType === 'univariate'
267+
) {
223268
return (
224269
<div
225270
key={indexReport}
@@ -252,7 +297,9 @@ export default function ComponentMapper({
252297
</div>
253298
);
254299
}
255-
if (report === 'distribution') {
300+
if (
301+
report.reportType === 'distribution'
302+
) {
256303
return (
257304
<Fragment key={indexReport}>
258305
{realData.length === 0 ||
@@ -327,7 +374,9 @@ export default function ComponentMapper({
327374
);
328375
}
329376

330-
if (report === 'correlation') {
377+
if (
378+
report.reportType === 'correlation'
379+
) {
331380
const {
332381
columns: realColumns,
333382
data: convertedData,

‎src/locales/en.json‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,21 @@
8989
"title": "Try it out!",
9090
"description": "Do you not have a dataset at hand? No worries use our demo dataset."
9191
},
92-
"columnsInDataset": "1. Data types detection",
9392
"columnsInDatasetInfo": "If detected data types are incorrect, please change this locally in the dataset before attaching it again.",
9493
"univariateCharts": "Univariate distributions of the attached dataset",
9594
"synthVsReal": "Univariate distributions of synthetic vs real data",
9695
"heatmapCorrelation": "Correlation matrix",
9796
"dataSetPreview": {
9897
"heading": "0. Preview of data"
99-
}
98+
},
99+
"columnsInDataset": "1. Data types detection",
100+
"explanatoryDataAnalysisTitle": "2. Explanatory data analysis",
101+
"cartModelTitle": "3. CART model",
102+
"cartModelDescription": "The CART (Classification and Regression Trees) method generates synthetic data by learning patterns from real data through a decision tree that splits data into homogeneous groups based on feature values. It predicts averages for numerical data and assigns the most common category for categorical data, using these predictions to create new synthetic points.",
103+
"evaluationOfGeneratedDataTitle": "4. Evaluation of generated data",
104+
"outputDataTitle": "5. Output data",
105+
"diagnosticsTitle": "Diagnostic Results:",
106+
"correlationDifference": "Correlation difference: {{correlationDifference}}"
100107
},
101108

102109
"biasAnalysis": {

‎src/locales/nl.json‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,21 @@
8989
"title": "Probeer het uit!",
9090
"description": "Heeft u geen dataset bij de hand? Geen zorgen, gebruik onze demodataset."
9191
},
92-
"columnsInDataset": "1. Detectie van datatypes",
9392
"columnsInDatasetInfo": "Als de gedetecteerd data types niet correct zijn, pas dit dan lokaal aan in de dataset voordat u deze opnieuw aan de app koppelt.",
9493
"univariateCharts": "Univariate distributies van de gekoppelde dataset",
9594
"synthVsReal": "Univariate distributies in synthetische vs originele data",
9695
"heatmapCorrelation": "Correlatiematrix",
9796
"dataSetPreview": {
9897
"heading": "0. Preview van de data"
99-
}
98+
},
99+
"columnsInDataset": "1. Detectie van datatypes",
100+
"explanatoryDataAnalysisTitle": "2. Explanatory data analyse",
101+
"cartModelTitle": "3. CART model",
102+
"cartModelDescription": "De CART-methode (Classification and Regression Trees) genereert synthetische data door patronen uit echte data te leren via een beslisboom die de data opdeelt in homogene groepen op basis van kenmerkwaarden. Voor numerieke data voorspelt de methode gemiddelden, en voor categorische data wijst het de meest voorkomende categorie toe. Deze voorspellingen worden vervolgens gebruikt om nieuwe synthetische gegevenspunten te creëren.",
103+
"evaluationOfGeneratedDataTitle": "4. Evaluatie van gegenereerde data",
104+
"outputDataTitle": "5. Output data",
105+
"diagnosticsTitle": "Diagnostische Resultaten:",
106+
"correlationDifference": "Correlatie verschil: {{correlationDifference}}"
100107
},
101108
"biasAnalysis": {
102109
"demo": {

0 commit comments

Comments
 (0)