Merge pull request #62 from NGO-Algorithm-Audit/feature/tooltip-tweaks

Feature/tooltip tweaks

Author: devhelpr

src/components/TooltipWrapper.tsx

@@ -1,4 +1,3 @@
-import { InfoIcon } from 'lucide-react';
 import {
     Tooltip,
     TooltipContent,
@@ -9,30 +8,26 @@ import { MarkdownWithTooltips } from './MarkdownWithTooltips';
 
 interface TooltipWrapperProps {
     tooltipContent: string;
+    children: React.ReactNode;
     textBefore?: string;
     textAfter?: string;
-    children: React.ReactNode;
 }
 
 export function TooltipWrapper({
     tooltipContent,
+    children,
     textBefore,
     textAfter,
-    children,
 }: TooltipWrapperProps) {
     return (
-        <div>
+        <span>
             {textBefore}
-            {children}
-
             <TooltipProvider>
                 <Tooltip>
-                    <TooltipTrigger
-                        onClick={event => {
-                            event.preventDefault();
-                        }}
-                    >
-                        <InfoIcon className="size-3.5 ml-1" />
+                    <TooltipTrigger asChild>
+                        <span className="border-b-2 border-dashed border-gray-600 cursor-help">
+                            {children}
+                        </span>
                     </TooltipTrigger>
                     <TooltipContent className="tooltip-content max-w-[400px] p-2">
                         <MarkdownWithTooltips className="text-gray-800 markdown">
@@ -42,6 +37,6 @@ export function TooltipWrapper({
                 </Tooltip>
             </TooltipProvider>
             {textAfter}
-        </div>
+        </span>
     );
 }

src/components/remark-info-tooltip.tsx

@@ -14,6 +14,8 @@ interface ParentNode extends Node {
 interface CustomElementData extends ElementData {
     hProperties?: {
         tooltip?: string;
+        textBefore?: string;
+        textAfter?: string;
     };
 }
 
@@ -28,59 +30,77 @@ export function remarkInfoTooltip() {
                 );
 
                 if (matches) {
+                    let lastIndex = 0;
+                    const newChildren: Node[] = [];
+
                     matches.forEach(match => {
                         const tooltipMatch = match.match(
                             /\{tooltip:([^}]+)\}(.*?)\{\/tooltip\}/
                         );
                         if (tooltipMatch) {
                             const [, tooltipContent, text] = tooltipMatch;
-                            const index = node.value.indexOf(match);
-                            if (index !== -1) {
-                                // Create a new element node
-                                const elementNode: Element = {
-                                    type: 'element',
-                                    tagName: 'div',
-                                    properties: {
+                            const index = node.value.indexOf(match, lastIndex);
+
+                            // Add text before the tooltip
+                            const textBefore = node.value.slice(
+                                lastIndex,
+                                index
+                            );
+                            if (textBefore) {
+                                const textNode: TextNode = {
+                                    type: 'text',
+                                    value: textBefore,
+                                };
+                                newChildren.push(textNode);
+                            }
+
+                            // Create a new element node for the tooltip
+                            const elementNode: Element = {
+                                type: 'element',
+                                tagName: 'span',
+                                properties: {
+                                    tooltip: tooltipContent,
+                                },
+                                data: {
+                                    hProperties: {
                                         tooltip: tooltipContent,
-                                        // textBefore: node.value.slice(0, index),
-                                        // textAfter: node.value.slice(
-                                        //     index + match.length
-                                        // ),
                                     },
-                                    data: {
-                                        hProperties: {
-                                            tooltip: tooltipContent,
-                                            textBefore: node.value.slice(
-                                                0,
-                                                index
-                                            ),
-                                            textAfter: node.value.slice(
-                                                index + match.length
-                                            ),
-                                        },
-                                    } as CustomElementData,
-                                    children: [
-                                        {
-                                            type: 'text',
-                                            value: text,
-                                        },
-                                    ],
-                                };
+                                } as CustomElementData,
+                                children: [
+                                    {
+                                        type: 'text',
+                                        value: text,
+                                    } as TextNode,
+                                ],
+                            };
+                            newChildren.push(elementNode);
 
-                                // Replace the text node with the element node
-                                if (ancestors.length > 0) {
-                                    const parent =
-                                        ancestors[ancestors.length - 1];
-                                    const nodeIndex =
-                                        parent.children.indexOf(node);
-                                    if (nodeIndex !== -1) {
-                                        parent.children[nodeIndex] =
-                                            elementNode;
-                                    }
-                                }
-                            }
+                            lastIndex = index + match.length;
                         }
                     });
+
+                    // Add any remaining text after the last tooltip
+                    const remainingText = node.value.slice(lastIndex);
+                    if (remainingText) {
+                        const textNode: TextNode = {
+                            type: 'text',
+                            value: remainingText,
+                        };
+                        newChildren.push(textNode);
+                    }
+
+                    // Replace the text node with the new children
+                    if (ancestors.length > 0) {
+                        const parent = ancestors[ancestors.length - 1];
+                        const nodeIndex = parent.children.indexOf(node);
+                        if (nodeIndex !== -1) {
+                            parent.children.splice(
+                                nodeIndex,
+                                1,
+                                ...newChildren
+                            );
+                        }
+                    }
                 }
             }
         );

src/locales/en.ts

@@ -159,27 +159,23 @@ export const en = {
             'The figures below display the differences in value frequency for a combination of variables. For comparing two categorical variables, bar charts are plotted. For comparing a numerical and a categorical variables, a so called [violin plot](https://en.wikipedia.org/wiki/Violin_plot) is shown. For comparing two numercial variables, a [LOESS plot](https://en.wikipedia.org/wiki/Local_regression) is created. For all plots holds: the synthetic data is of high quality when the shape of the distributions in the synthetic data equal the distributions in the real data.',
         moreInfo:
             '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)',
-        missingData: `For Missing At Random (MAR) and Missing Not At Random (MNAR) data, 
-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}.`,
-        missingDataTooltip: `MCAR, MAR, and MNAR are terms used to describe different mechanisms of missing data:
-
-1. **MCAR (Missing Completely At Random)**:
-- The probability of data being missing is completely independent of both observed and unobserved data. 
-- There is no systematic pattern to the missingness.
-- Example: A survey respondent accidentally skips a question due to a printing error.
-- Recommendation: remove missing data.
-
-2. **MAR (Missing At Random)**:
+        missingData: `For {tooltip:syntheticData.missingDataMARTooltip}Missing At Random (MAR){/tooltip} and {tooltip:syntheticData.missingDataMNARTooltip}Missing Not At Random (MNAR){/tooltip} data, 
+we recommend to impute the missing data. For {tooltip:syntheticData.missingDataMCARTooltip}Missing Completely At Random (MCAR){/tooltip}, we recommend to remove the missing data.`,
+        missingDataMARTooltip: `**MAR (Missing At Random)**:
 - The probability of data being missing is related to the observed data but not the missing data itself.
 - The missingness can be predicted by other variables in the dataset.
 - Example: Students' test scores are missing, but the missingness is related to their attendance records.
-- Recommendation: impute missing data.
-
-3. **MNAR (Missing Not At Random)**:
+- Recommendation: impute missing data.`,
+        missingDataMNARTooltip: `**MNAR (Missing Not At Random)**:
 - The probability of data being missing is related to the missing data itself. 
 - There is a systematic pattern to the missingness that is related to the unobserved data.
 - 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.
 - Recommendation: impute missing data.`,
+        missingDataMCARTooltip: `**MCAR (Missing Completely At Random)**:
+- The probability of data being missing is completely independent of both observed and unobserved data. 
+- There is no systematic pattern to the missingness.
+- Example: A survey respondent accidentally skips a question due to a printing error.
+- Recommendation: remove missing data.`,
     },
 
     biasAnalysis: {