Skip to content

Commit 6e90b37

Browse files
devhelprdevhelpr
authored
Merge pull request #60 from NGO-Algorithm-Audit/feature/tweaks-markdown-and-fixes
Enhance tooltip and layout functionality in DistributionReport and Ma…
2 parents 44beacb + d54d1b4 commit 6e90b37

File tree

7 files changed

+73
-19
lines changed

7 files changed

+73
-19
lines changed

‎src/components/DistributionReport.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export const DistributionReport = (
138138
<Accordion
139139
title={t(report.titleKey)}
140140
content={
141-
<div>
141+
<div className="pt-[20px];">
142142
<p>&nbsp;</p>
143143
{preContent.map(
144144
(content, index) => {
@@ -382,7 +382,11 @@ export const DistributionReport = (
382382
title={t(
383383
'syntheticData.bivariateDistributionRealData'
384384
)}
385-
content={<div>{charts}</div>}
385+
content={
386+
<div className="pt-[20px]">
387+
{charts}
388+
</div>
389+
}
386390
/>
387391
</div>
388392
);
@@ -534,7 +538,7 @@ export const DistributionReport = (
534538
'syntheticData.bivariateDistributionSyntheticData'
535539
)}
536540
content={
537-
<div>
541+
<div className="pt-[20px]">
538542
<MarkdownWithTooltips className="py-4 markdown">
539543
{t(
540544
'syntheticData.bivariateText',

‎src/components/MarkdownWithTooltips.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,18 @@ export function MarkdownWithTooltips({
3131
components={{
3232
// @ts-expect-error - TooltipWrapper is a custom component
3333
TooltipWrapper,
34-
span: ({ node, children, ...props }) => {
34+
div: ({ node, children, ...props }) => {
3535
const element = node as CustomElement;
3636
const tooltipContent = element.data?.hProperties?.tooltip;
3737
if (tooltipContent) {
3838
return (
39-
<TooltipWrapper
40-
tooltipContent={tooltipContent}
41-
children={children}
42-
/>
39+
<>
40+
<span {...props}>{children}</span>
41+
<TooltipWrapper
42+
tooltipContent={tooltipContent}
43+
children={children}
44+
/>
45+
</>
4346
);
4447
}
4548
return <span {...props}>{children}</span>;

‎src/components/TooltipWrapper.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,22 @@ import { MarkdownWithTooltips } from './MarkdownWithTooltips';
99

1010
interface TooltipWrapperProps {
1111
tooltipContent: string;
12+
textBefore?: string;
13+
textAfter?: string;
1214
children: React.ReactNode;
1315
}
1416

1517
export function TooltipWrapper({
1618
tooltipContent,
19+
textBefore,
20+
textAfter,
1721
children,
1822
}: TooltipWrapperProps) {
1923
return (
20-
<span className="inline-flex items-center">
24+
<div>
25+
{textBefore}
2126
{children}
27+
2228
<TooltipProvider>
2329
<Tooltip>
2430
<TooltipTrigger
@@ -27,15 +33,15 @@ export function TooltipWrapper({
2733
}}
2834
>
2935
<InfoIcon className="size-3.5 ml-1" />
30-
</TooltipTrigger>{' '}
31-
&nbsp;
36+
</TooltipTrigger>
3237
<TooltipContent className="tooltip-content max-w-[400px] p-2">
3338
<MarkdownWithTooltips className="text-gray-800 markdown">
3439
{tooltipContent}
3540
</MarkdownWithTooltips>
3641
</TooltipContent>
3742
</Tooltip>
3843
</TooltipProvider>
39-
</span>
44+
{textAfter}
45+
</div>
4046
);
4147
}

‎src/components/rehype-info-tooltip.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { t } from 'i18next';
66
interface CustomElementData extends ElementData {
77
properties?: {
88
tooltip?: string;
9+
textBefore?: string;
10+
textAfter?: string;
911
};
1012
}
1113

@@ -23,6 +25,16 @@ export function rehypeInfoTooltip() {
2325
tagName: 'TooltipWrapper',
2426
properties: {
2527
tooltipContent: t(node.properties.tooltip as string),
28+
textBefore: node.properties.textBefore,
29+
textAfter: node.properties.textAfter,
30+
children: node.children
31+
.map(child => {
32+
if (child.type === 'text') {
33+
return child.value;
34+
}
35+
return child;
36+
})
37+
.join(''),
2638
},
2739
children: node.children,
2840
};

‎src/components/remark-info-tooltip.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,24 @@ export function remarkInfoTooltip() {
3939
// Create a new element node
4040
const elementNode: Element = {
4141
type: 'element',
42-
tagName: 'span',
43-
properties: {},
42+
tagName: 'div',
43+
properties: {
44+
tooltip: tooltipContent,
45+
// textBefore: node.value.slice(0, index),
46+
// textAfter: node.value.slice(
47+
// index + match.length
48+
// ),
49+
},
4450
data: {
4551
hProperties: {
4652
tooltip: tooltipContent,
53+
textBefore: node.value.slice(
54+
0,
55+
index
56+
),
57+
textAfter: node.value.slice(
58+
index + match.length
59+
),
4760
},
4861
} as CustomElementData,
4962
children: [

‎src/index.css‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,34 @@
44

55
.content-list,
66
.markdown {
7+
font-size: 16px;
8+
line-height: 1.5;
9+
710
p a,
811
li a {
912
@apply text-blue-500 underline;
1013
}
1114

1215
ul {
13-
@apply pl-[20px] list-disc;
16+
@apply pl-[25px] list-disc;
17+
}
18+
19+
ol {
20+
@apply pl-[25px] list-decimal;
21+
}
22+
23+
ul,
24+
ol {
25+
@apply mb-3;
1426
}
1527

1628
p {
1729
@apply mb-3;
1830
}
31+
32+
p:has(> div) {
33+
display: contents;
34+
}
1935
}
2036

2137
.tooltip-content {

‎src/locales/en.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,22 +160,22 @@ export const en = {
160160
moreInfo:
161161
'Do you want to learn more about synthetic data?\n \n \n \n- [python-synthpop on Github](https://github.com/NGO-Algorithm-Audit/python-synthpop)\n- [local-first web app on Github](https://github.com/NGO-Algorithm-Audit/local-first-web-tool/tree/main)\n- [Synthetic Data: what, why and how?](https://royalsociety.org/-/media/policy/projects/privacy-enhancing-technologies/Synthetic_Data_Survey-24.pdf)\n- [Knowledge Network Synthetic Data](https://online.rijksinnovatiecommunity.nl/groups/399-kennisnetwerk-synthetischedata/welcome) (for Dutch public organizations)\n- [Synthetic data portal of Dutch Executive Agency for Education](https://duo.nl/open_onderwijsdata/footer/synthetische-data.jsp) (DUO)\n- [CART: synthpop resources](https://synthpop.org.uk/resources.html)\n- [Gaussian Copula - Synthetic Data Vault](https://docs.sdv.dev/sdv)',
162162
missingData: `For Missing At Random (MAR) and Missing Not At Random (MNAR) data,
163-
we recommend to impute the missing data. For Missing Completely At Random (MCAR), we recommend to remove the missing data. See the info box for more information. {tooltip:syntheticData.missingDataTooltip}More info about MCAR, MAR, and MNAR{/tooltip}`,
163+
we recommend to impute the missing data. For Missing Completely At Random (MCAR), we recommend to remove the missing data. {tooltip:syntheticData.missingDataTooltip}See the info box for more information{/tooltip}.`,
164164
missingDataTooltip: `MCAR, MAR, and MNAR are terms used to describe different mechanisms of missing data:
165165
166-
**1. MCAR (Missing Completely At Random)**:
166+
1. **MCAR (Missing Completely At Random)**:
167167
- The probability of data being missing is completely independent of both observed and unobserved data.
168168
- There is no systematic pattern to the missingness.
169169
- Example: A survey respondent accidentally skips a question due to a printing error.
170170
- Recommendation: remove missing data.
171171
172-
**2. MAR (Missing At Random)**:
172+
2. **MAR (Missing At Random)**:
173173
- The probability of data being missing is related to the observed data but not the missing data itself.
174174
- The missingness can be predicted by other variables in the dataset.
175175
- Example: Students' test scores are missing, but the missingness is related to their attendance records.
176176
- Recommendation: impute missing data.
177177
178-
**3. MNAR (Missing Not At Random)**:
178+
3. **MNAR (Missing Not At Random)**:
179179
- The probability of data being missing is related to the missing data itself.
180180
- There is a systematic pattern to the missingness that is related to the unobserved data.
181181
- Example: Patients with more severe symptoms are less likely to report their symptoms, leading to missing data that is related to the severity of the symptoms.

0 commit comments

Comments
 (0)