Skip to content

Commit 13d990d

Browse files
devhelprdevhelpr
authored
Merge pull request #65 from NGO-Algorithm-Audit/feature/text-tweaks
Feature/text tweaks
2 parents c60eeef + bc25791 commit 13d990d

File tree

5 files changed

+134
-24
lines changed

5 files changed

+134
-24
lines changed

‎src/assets/synthetic-data.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -349,19 +349,25 @@ def run():
349349
'reportType': 'heading',
350350
'headingKey': 'syntheticData.evaluationOfGeneratedDataTitle'
351351
},
352+
{
353+
'reportType': 'heading2',
354+
'headingKey': 'syntheticData.distributionsTitle'
355+
},
352356
{'reportType': 'univariateDistributionSyntheticData'},
357+
{'reportType': 'bivariateDistributionSyntheticData'},
353358
{
354-
'reportType': 'heading',
359+
'reportType': 'heading2',
355360
'headingKey': 'syntheticData.diagnosticsReportTitle'
356361
},
357362
{
358363
'reportType': 'table',
359364
'titleKey': 'syntheticData.diagnosticsTitle',
360365
'showIndex' : False,
361-
'data': report_df.to_json(orient="records"),
362-
'postContent': [{
363-
'contentType' : 'correlationSyntheticData'
364-
}]
366+
'data': report_df.to_json(orient="records"),
367+
},
368+
{
369+
'reportType': 'correlationSyntheticData',
370+
'titleKey': 'syntheticData.correlationMatrixTitle',
365371
},
366372
{
367373
'reportType': 'table',
@@ -374,13 +380,7 @@ def run():
374380
'titleKey': 'syntheticData.disclosureProtectionTitle',
375381
'showIndex' : False,
376382
'data': dp_report_df.to_json(orient="records"),
377-
},
378-
{
379-
'reportType': 'heading',
380-
'headingKey': 'syntheticData.bivariateDistributionSyntheticDataTitle'
381-
},
382-
{'reportType': 'bivariateDistributionSyntheticData'},
383-
383+
}
384384
]
385385
}))
386386

‎src/components/DistributionReport.tsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,16 @@ export const DistributionReport = (
108108
</h5>
109109
);
110110
}
111+
if (report.reportType === 'heading2' && report.headingKey) {
112+
return (
113+
<h6
114+
key={indexReport}
115+
className="text-gray-800 font-semibold mb-4"
116+
>
117+
{t(report.headingKey, report.params)}
118+
</h6>
119+
);
120+
}
111121
if (report.reportType === 'text' && report.textKey) {
112122
return (
113123
<MarkdownWithTooltips
@@ -239,6 +249,104 @@ export const DistributionReport = (
239249
</div>
240250
);
241251
}
252+
253+
if (report.reportType === 'correlationSyntheticData') {
254+
if (!report.titleKey) {
255+
return null;
256+
}
257+
const preContent: additionalContent = report.preContent
258+
? JSON.parse(report.preContent)
259+
: [];
260+
const postContent: additionalContent =
261+
(report.postContent as unknown as additionalContent) ??
262+
[];
263+
264+
return (
265+
<div key={indexReport} className="mb-4">
266+
<Accordion
267+
title={t(report.titleKey)}
268+
content={
269+
<div className="pt-[20px];">
270+
<p>&nbsp;</p>
271+
{preContent.map(
272+
(content, index) => {
273+
if (
274+
content.contentType ===
275+
'text'
276+
) {
277+
return (
278+
<MarkdownWithTooltips
279+
key={index}
280+
className="-mt-2 text-gray-800 markdown"
281+
>
282+
{t(
283+
content.textKey ??
284+
'',
285+
content.params
286+
)}
287+
</MarkdownWithTooltips>
288+
);
289+
}
290+
}
291+
)}
292+
293+
<div
294+
key={`index`}
295+
className="grid lg:grid-cols-[50%_50%] grid-cols-[100%]"
296+
>
297+
<div className="col-[1] lg:col-[1]">
298+
<CorrelationMatrix
299+
title={t(
300+
'heatmap.realdata'
301+
)}
302+
heatmapData={createHeatmapdata(
303+
distributionReportProps.realCorrelations
304+
)}
305+
showLegend={false}
306+
/>
307+
</div>
308+
<div className="col-[1] lg:col-[2]">
309+
<CorrelationMatrix
310+
title={t(
311+
'heatmap.synthData'
312+
)}
313+
heatmapData={createHeatmapdata(
314+
distributionReportProps.synthDataCorrelations
315+
)}
316+
showLegend={true}
317+
/>
318+
</div>
319+
</div>
320+
321+
{report.postContent &&
322+
postContent.map(
323+
(content, index) => {
324+
if (
325+
content.contentType ===
326+
'text'
327+
) {
328+
return (
329+
<MarkdownWithTooltips
330+
key={index}
331+
className="-mt-2 text-gray-800 markdown"
332+
>
333+
{t(
334+
content.textKey ??
335+
'',
336+
content.params
337+
)}
338+
</MarkdownWithTooltips>
339+
);
340+
}
341+
}
342+
)}
343+
</div>
344+
}
345+
/>
346+
</div>
347+
);
348+
}
349+
242350
if (
243351
report.reportType === 'univariateDistributionRealData'
244352
) {

‎src/components/TooltipWrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export function TooltipWrapper({
2222
return (
2323
<span>
2424
{textBefore}
25-
<TooltipProvider>
25+
<TooltipProvider delayDuration={0}>
2626
<Tooltip>
2727
<TooltipTrigger asChild>
2828
<span className="border-b-2 border-dashed border-gray-600 cursor-help">

‎src/locales/en.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export const en = {
111111
'By default, the CART method is used to generate synthetic data. CART generally produces higher quality synthetic data, but might not work well on datasets with categorical variables with 20+ categories. Use Gaussian Copula in those cases.',
112112
},
113113
nanTreatment: {
114-
title: 'NaN Values Treatment',
114+
title: 'NaN values treatment',
115115
drop: 'Drop rows with NaN values',
116116
impute: 'Impute NaN values',
117117
tooltip:
@@ -151,13 +151,14 @@ export const en = {
151151
cartModelDescription:
152152
'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.',
153153
evaluationOfGeneratedDataTitle: '4. Evaluation of generated data',
154-
diagnosticsReportTitle: '5. Diagnostic Report',
154+
distributionsTitle: '4.1 Distributions',
155+
diagnosticsReportTitle: '4.2. Diagnostic Report',
155156
diagnosticsTitle: 'Diagnostic Results',
157+
correlationMatrixTitle: 'Correlation matrix',
156158
efficacyMetricsTitle: 'Efficacy metrics',
157-
disclosureProtectionTitle: 'Disclosure protection',
158-
bivariateDistributionSyntheticDataTitle: '6. Bivariate distributions',
159-
outputDataTitle: '7. Generated synthetic data',
160-
moreInfoTitle: '8. More information',
159+
disclosureProtectionTitle: 'Privacy metrics',
160+
outputDataTitle: '5. Generated synthetic data',
161+
moreInfoTitle: '6. More information',
161162
correlationDifference:
162163
'Correlation difference: {{correlationDifference}}',
163164
univariateText:

‎src/locales/nl.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,14 @@ export const nl = {
156156
cartModelDescription:
157157
'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.',
158158
evaluationOfGeneratedDataTitle: '4. Evaluatie van gegenereerde data',
159-
diagnosticsReportTitle: '6. Diagnostisch rapport',
159+
distributionsTitle: '4.1 Distributie',
160+
diagnosticsReportTitle: '4.2. Diagnostisch rapport',
160161
diagnosticsTitle: 'Diagnostische Resultaten',
162+
correlationMatrixTitle: 'Correlatie matrix',
161163
efficacyMetricsTitle: 'Doeltreffendheid metrieken',
162-
disclosureProtectionTitle: 'Disclosure protection',
163-
bivariateDistributionSyntheticDataTitle: '6. Bivariate distributies',
164-
outputDataTitle: '7. Output data',
165-
moreInfoTitle: '8. Meer informatie',
164+
disclosureProtectionTitle: 'Privacy metrieken',
165+
outputDataTitle: '5. Output data',
166+
moreInfoTitle: '6. Meer informatie',
166167
correlationDifference: 'Correlatie verschil: {{correlationDifference}}',
167168
moreInfo:
168169
'&nbsp;&nbsp;\n \n \n \nWil je meer weten over synthetische data?\n \n \n \n- [python-synthpop op Github](https://github.com/NGO-Algorithm-Audit/python-synthpop)\n- [local-first web app op Github](https://github.com/NGO-Algorithm-Audit/local-first-web-tool/tree/main)\n- [Synthetische Data: wat, waarom en hoe?](https://royalsociety.org/-/media/policy/projects/privacy-enhancing-technologies/Synthetic_Data_Survey-24.pdf)\n- [Kennis Netwerk Synthetische Data](https://online.rijksinnovatiecommunity.nl/groups/399-kennisnetwerk-synthetischedata/welcome) (for Dutch public organizations)\n- [Synthetische data portaal van DUO](https://duo.nl/open_onderwijsdata/footer/synthetische-data.jsp)\n- [CART: synthpop resources](https://synthpop.org.uk/resources.html)\n- [Gaussian Copula - Synthetic Data Vault](https://docs.sdv.dev/sdv)',

0 commit comments

Comments
 (0)