Feature/f 60 implement data sources page

src/app/about/layout.tsx

@@ -10,7 +10,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
       <Topbar />
-      <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 about-page">{children}</main>
+      <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content">{children}</main>
     </div>
   );
 }

src/app/about/page.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import AboutText from '@/components/About/AboutText';
-import ExternalLink from '@/components/About/ExternalLink';
 import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
+import StyledLink from '@/components/About/StyledLink';
 import Accordion from '@/components/Accordions/Accordion';
 import generalFaqItems from '@/domain/constant/about/generalFaqItems';
 import predictionFaqItems from '@/domain/constant/about/predictionFaqItems';
@@ -30,13 +30,13 @@ function Page() {
         <p>
           For first-level administrative areas where daily updated survey data is not available, the prevalence of
           people with poor or borderline{' '}
-          <ExternalLink href="https://documents.wfp.org/stellent/groups/public/documents/manual_guide_proced/wfp197216.pdf">
+          <StyledLink href="https://documents.wfp.org/stellent/groups/public/documents/manual_guide_proced/wfp197216.pdf">
             food consumption (FCS)
-          </ExternalLink>{' '}
+          </StyledLink>{' '}
           and the prevalence of people with{' '}
-          <ExternalLink href="https://documents.wfp.org/stellent/groups/public/documents/manual_guide_proced/wfp211058.pdf">
+          <StyledLink href="https://documents.wfp.org/stellent/groups/public/documents/manual_guide_proced/wfp211058.pdf">
             reduced coping strategy index (rCSI)
-          </ExternalLink>{' '}
+          </StyledLink>{' '}
           ≥ 19 is estimated with a predictive model.
         </p>
         <Accordion items={predictionFaqItems} />

src/app/data_sources/layout.tsx

@@ -0,0 +1,16 @@
+import { Metadata } from 'next';
+
+import { Topbar } from '@/components/Topbar/Topbar';
+
+export const metadata: Metadata = {
+  title: 'About',
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <Topbar />
+      <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content">{children}</main>
+    </div>
+  );
+}

src/app/data_sources/page.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
+import StyledLink from '@/components/About/StyledLink';
+import CustomAccordion from '@/components/Accordions/Accordion';
+import dataSourceAccordionItems from '@/domain/constant/dataSourceTables/dataSourceAccordionItems';
+
+function Page() {
+  return (
+    <section>
+      <h1>Data Sources</h1>
+      <p>
+        <b>
+          This section includes all indicators and data sources displayed on <HungerMapLiveSuperscript /> (global and
+          country pages).
+        </b>{' '}
+        Additional sources used as input variables for the predictive model but not for display purposes are listed on
+        the{' '}
+        <StyledLink href="/about" isInternal>
+          About page
+        </StyledLink>
+        .
+      </p>
+      <CustomAccordion items={dataSourceAccordionItems} />
+    </section>
+  );
+}
+
+export default Page;

src/components/About/AboutText.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import ExternalLink from '@/components/About/ExternalLink';
 import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
+import StyledLink from '@/components/About/StyledLink';
 
 export function AboutText() {
   return (
@@ -23,12 +23,11 @@ export function AboutText() {
       </p>
       <p>
         The platform covers 94 countries, including countries where WFP has operations as well as most{' '}
-        <ExternalLink href="https://datahelpdesk.worldbank.org/knowledgebase/articles/906519-world-bank-country-and-lending-groups">
+        <StyledLink href="https://datahelpdesk.worldbank.org/knowledgebase/articles/906519-world-bank-country-and-lending-groups">
           lower and lower-middle income countries
-        </ExternalLink>{' '}
+        </StyledLink>{' '}
         (as classified by the World Bank). For any questions, comments, or if you would like further information, please
-        get in touch by sending an email to <ExternalLink href="mailto:[email protected]">[email protected]</ExternalLink>
-        .
+        get in touch by sending an email to <StyledLink href="mailto:[email protected]">[email protected]</StyledLink>.
       </p>
     </>
   );

src/components/About/StyledLink.tsx

@@ -0,0 +1,23 @@
+import { Link } from '@nextui-org/link';
+import clsx from 'clsx';
+import React, { ReactNode } from 'react';
+
+function StyledLink({
+  href,
+  children,
+  className = '',
+  isInternal = false,
+}: {
+  href: string;
+  children: ReactNode;
+  className?: string;
+  isInternal?: boolean;
+}) {
+  return (
+    <Link isExternal={!isInternal} size="lg" underline="hover" href={href} className={clsx('inline', className)}>
+      {children}
+    </Link>
+  );
+}
+
+export default StyledLink;

src/components/Tooltip/Abbreviation.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Tooltip } from '@/components/Tooltip/Tooltip';
+import abbreviations from '@/domain/constant/abbreviations';
+
+function Abbreviation({ abbreviation }: { abbreviation: keyof typeof abbreviations }) {
+  if (!abbreviations[abbreviation]) {
+    return <span>{abbreviation}</span>;
+  }
+
+  return (
+    <Tooltip text={abbreviations[abbreviation]}>
+      <div className="inline cursor-help whitespace-nowrap">
+        <span className="underline decoration-dotted decoration-2">{abbreviation}</span>
+        <img src="/Images/InfoIcon.svg" alt="info icon" className="w-3 h-6 inline pb-3" />
+      </div>
+    </Tooltip>
+  );
+}
+
+export default Abbreviation;

src/components/Tooltip/Tooltip.tsx

@@ -40,7 +40,7 @@ export function Tooltip({ children, title, text, warning }: TooltipProps) {
       radius={RADIUS}
       shadow={SHADOW}
     >
-      {Array.isArray(children) ? <> {...children} </> : children}
+      {Array.isArray(children) ? <div> {...children} </div> : children}
     </NextUITooltip>
   );
 }

src/domain/constant/PageLinks.ts

@@ -1,7 +1,7 @@
 export const pageLinks = [
   { href: '/', label: 'Home' },
   { href: '/about', label: 'About' },
-  { href: '/glossary', label: 'Glossary' },
+  { href: '/data_sources', label: 'Data Sources' },
   { href: '/methodology', label: 'Methodology' },
   { href: '/disclaimer', label: 'Disclaimer' },
 ];

src/domain/constant/abbreviations.ts

@@ -0,0 +1,9 @@
+const abbreviations = {
+  CFSVA: 'Comprehensive Food Security and Vulnerability Analysis',
+  EFSA: 'Emergency Food Security Assessment',
+  mVAM: 'mobile Vulnerability Analysis and Mapping',
+  VAM: 'Vulnerability Analysis and Mapping',
+  WFP: 'World Food Programme',
+};
+
+export default abbreviations;

src/domain/constant/about/accuracyTableContents.tsx

@@ -1,4 +1,4 @@
-import ExternalLink from '@/components/About/ExternalLink';
+import StyledLink from '@/components/About/StyledLink';
 import { GroupedTableColumns, GroupedTableData } from '@/domain/props/GroupedTableProps';
 
 export const accuracyTableColumns = [
@@ -8,15 +8,15 @@ export const accuracyTableColumns = [
   { columnId: 'rCSI', label: 'rCSI' },
 ] as GroupedTableColumns;
 
-export const accuracyTableData = [
+export const accuracyTableContents = [
   {
     groupKey: '1',
     groupName: (
       <>
         {' '}
-        <ExternalLink href="https://en.wikipedia.org/wiki/Coefficient_of_determination" className="text-sm">
+        <StyledLink href="https://en.wikipedia.org/wiki/Coefficient_of_determination" className="text-sm">
           Coefficient of determination (R²)
-        </ExternalLink>{' '}
+        </StyledLink>{' '}
         (higher is better)
       </>
     ),
@@ -29,9 +29,9 @@ export const accuracyTableData = [
     groupKey: '2',
     groupName: (
       <span className="text-small">
-        <ExternalLink href="https://en.wikipedia.org/wiki/Mean_absolute_error" className="text-sm">
+        <StyledLink href="https://en.wikipedia.org/wiki/Mean_absolute_error" className="text-sm">
           Mean Absolute Error
-        </ExternalLink>{' '}
+        </StyledLink>{' '}
         (lower is better)
       </span>
     ),

src/domain/constant/about/generalFaqItems.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import ExternalLink from '@/components/About/ExternalLink';
 import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
+import StyledLink from '@/components/About/StyledLink';
 import { AccordionItemProps } from '@/domain/entities/accordions/Accordions';
 
 const generalFaqItems: AccordionItemProps[] = [
@@ -25,9 +25,9 @@ const generalFaqItems: AccordionItemProps[] = [
         <p>
           More so, in areas where we do not have data on the prevalence of people with insufficient food intake - and
           are therefore not clickable - we use the{' '}
-          <ExternalLink href="https://www.sciencedirect.com/science/article/abs/pii/S0305750X19303572">
+          <StyledLink href="https://www.sciencedirect.com/science/article/abs/pii/S0305750X19303572">
             Proteus index
-          </ExternalLink>
+          </StyledLink>
           , which measures food security in 185 countries over 28 years and is published annually.
         </p>
       </>

src/domain/constant/about/predictionFaqItems.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import ExternalLink from '@/components/About/ExternalLink';
+import StyledLink from '@/components/About/StyledLink';
 import GroupedTable from '@/components/GroupedTable/GroupedTable';
-import { accuracyTableColumns, accuracyTableData } from '@/domain/constant/about/accuracyTableContents';
+import { accuracyTableColumns, accuracyTableContents } from '@/domain/constant/about/accuracyTableContents';
 import { AccordionItemProps } from '@/domain/entities/accordions/Accordions';
 
 const generalQuestionItems: AccordionItemProps[] = [
@@ -18,19 +18,22 @@ const generalQuestionItems: AccordionItemProps[] = [
           data point is also included as input variable.
         </p>
         <p>
-          More details are listed in the <b>Data sources page</b>. Additional sources used only for the model but not
-          for display purposes are:
+          More details are listed in the{' '}
+          <StyledLink href="/data_sources" isInternal>
+            Data sources page
+          </StyledLink>
+          . Additional sources used only for the model but not for display purposes are:
         </p>
         <ul>
           <li>
-            <ExternalLink href="https://sedac.ciesin.columbia.edu/data/set/gpw-v4-population-count-rev11">
+            <StyledLink href="https://sedac.ciesin.columbia.edu/data/set/gpw-v4-population-count-rev11">
               Gridded Population of the World, Version 4 (GPWv4): Population Count, Revision 11
-            </ExternalLink>
+            </StyledLink>
           </li>
           <li>
-            <ExternalLink href="https://documents.wfp.org/stellent/groups/public/documents/manual_guide_proced/wfp264186.pdf">
+            <StyledLink href="https://documents.wfp.org/stellent/groups/public/documents/manual_guide_proced/wfp264186.pdf">
               WFP’s Alert for Price Spikes (ALPS) indicator
-            </ExternalLink>
+            </StyledLink>
           </li>
         </ul>
       </>
@@ -40,9 +43,9 @@ const generalQuestionItems: AccordionItemProps[] = [
     title: 'Which algorithm is being used for training?',
     content: (
       <p>
-        The predictive models are trained using <ExternalLink href="https://xgboost.ai/">XGBoost</ExternalLink> – a
-        machine learning technique producing predictive models in the of an ensemble of regression trees. The model
-        parameters were optimized by a cross-validated grid-search.
+        The predictive models are trained using <StyledLink href="https://xgboost.ai/">XGBoost</StyledLink> – a machine
+        learning technique producing predictive models in the of an ensemble of regression trees. The model parameters
+        were optimized by a cross-validated grid-search.
       </p>
     ),
   },
@@ -57,7 +60,7 @@ const generalQuestionItems: AccordionItemProps[] = [
         </p>
         <GroupedTable
           columns={accuracyTableColumns}
-          data={accuracyTableData}
+          data={accuracyTableContents}
           ariaLabel="Performance measures of the prediction algorithms"
         />
       </>