Feature/f 230 Comparison Portal | Compare Country Regions

src/app/comparison-portal/layout.tsx

@@ -10,12 +10,12 @@ export const metadata: Metadata = {
     template: `%s - ${siteConfig.name}`,
   },
   description:
-    'Compare real-time global hunger data across different countries and regions. Obtain food insecurity statistics from the WFP Hunger Map Comparison Portal, tailored to various time zones. A valuable resource for humanitarian efforts and research.',
+    'Compare real-time global hunger data across different countries and regions. A valuable resource for humanitarian efforts and research.',
   keywords: siteConfig.keywords,
   openGraph: {
     title: `Comparison Portal - ${siteConfig.name}`,
     description:
-      'Compare real-time global hunger data across different countries and regions. Obtain food insecurity statistics from the WFP Hunger Map Comparison Portal, tailored to various time zones. Essential for humanitarian aid and research.',
+      'Compare real-time global hunger data across different countries and regions. Essential for humanitarian aid and research.',
     url: `${siteConfig.domain}/comparison-portal`,
     images: [
       {
@@ -31,7 +31,7 @@ export const metadata: Metadata = {
     card: 'summary_large_image',
     title: `Comparison Portal - ${siteConfig.name}`,
     description:
-      'Access comparable global hunger data from the WFP Hunger Map Comparison Portal, tailored to different countries and time zones.',
+      'Access comparable global hunger data from the WFP Hunger Map Comparison Portal, tailored to different countries and regions.',
     images: [
       {
         url: '/Images/Comparison-preview.png',

src/app/comparison-portal/loading.tsx

@@ -0,0 +1,12 @@
+import ComparisonAccordionSkeleton from '@/components/ComparisonPortal/ComparisonAccordionSkeleton';
+import SelectionSkeleton from '@/components/ComparisonPortal/CountrySelectSkeleton';
+
+export default function Loading() {
+  return (
+    <>
+      <h1>Comparison Portal</h1>
+      <SelectionSkeleton />
+      <ComparisonAccordionSkeleton nItems={5} />
+    </>
+  );
+}

src/app/comparison-portal/page.tsx

@@ -1,28 +1,15 @@
-import { Suspense } from 'react';
-
-import ComparisonAccordionSkeleton from '@/components/ComparisonPortal/ComparisonAccordionSkeleton';
-import CountryComparison from '@/components/ComparisonPortal/CountryComparison';
-import CountrySelectionSkeleton from '@/components/ComparisonPortal/CountrySelectSkeleton';
+import ComparisonPortal from '@/components/ComparisonPortal/CountryComparison';
 import container from '@/container';
 import { GlobalDataRepository } from '@/domain/repositories/GlobalDataRepository';
 
-export default async function ComparisonPortal() {
+export default async function Page() {
   const globalRepo = container.resolve<GlobalDataRepository>('GlobalDataRepository');
   const countryMapData = await globalRepo.getMapDataForCountries();
   const globalFcsData = await globalRepo.getFcsData();
   return (
-    <div>
+    <>
       <h1>Comparison Portal</h1>
-      <Suspense
-        fallback={
-          <>
-            <CountrySelectionSkeleton />
-            <ComparisonAccordionSkeleton />
-          </>
-        }
-      >
-        <CountryComparison countryMapData={countryMapData} globalFcsData={globalFcsData} />
-      </Suspense>
-    </div>
+      <ComparisonPortal countryMapData={countryMapData} globalFcsData={globalFcsData} />
+    </>
   );
 }

src/components/ComparisonPortal/ComparisonAccordionSkeleton.tsx

@@ -4,14 +4,13 @@ import { v4 as uuid } from 'uuid';
 
 /**
  * A skeleton component for the ComparisonAccordion component.
- * @returns {JSX.Element} The ComparisonAccordionSkeleton component
+ * @param {number} nItems Number of accordion items for the skeleton.
  */
-export default function ComparisonAccordionSkeleton(): JSX.Element {
-  const N_ITEMS = 5;
+export default function ComparisonAccordionSkeleton({ nItems }: { nItems: number }): JSX.Element {
   return (
     <div className="overflow-x-auto rounded-lg shadow-none">
       <div className="flex flex-col gap-2 mb-4">
-        {[...Array(N_ITEMS)].map(() => (
+        {[...Array(nItems)].map(() => (
           <div
             key={uuid()}
             className="rounded-medium last:border-b-0 bg-content1 white:bg-white overflow-hidden shadow-md"

src/components/ComparisonPortal/CountryComparison.tsx

@@ -1,39 +1,75 @@
 'use client';
 
+import { Tab, Tabs } from '@nextui-org/react';
 import { useState } from 'react';
 
-import { useSelectedCountries } from '@/domain/hooks/queryParamsHooks.ts';
-import CountryComparisonProps from '@/domain/props/CountryComparisonProps';
+import RegionComparisonAccordion from '@/components/ComparisonPortal/RegionComparisonAccordion';
+import { useSelectedCountries, useSelectedRegions, useSelectedTab } from '@/domain/hooks/queryParamsHooks.ts';
+import CountryPortalProps from '@/domain/props/CountryComparisonProps';
 
 import CountryComparisonAccordion from './CountryComparisonAccordion';
 import CountrySelection from './CountrySelection';
+import RegionSelection from './RegionSelection';
 
 /**
- * The `CountryComparison` component is the parent component for the country comparison feature.
- * It contains the state for the selected countries and disabled countries, and updates query parameters accordingly using the `useSelectedCountries` hook.
- * @param {CountryComparisonProps} props Props for the CountryComparison component
+ * The `CountryComparison` component is the parent component for the country and region comparison features.
+ * It contains the state for the selected countries, regions as well as the current tab.
+ * As far as needed, those are synchronized with the query parameters using dedicated hooks.
+ *
+ * @param {CountryPortalProps} props Props for the CountryComparison component
  * @param {CountryMapDataWrapper} props.countryMapData Country map data
  * @param {GlobalFcsData} props.globalFcsData National FCS Data of all countries
  * @returns {JSX.Element} The CountryComparison component
  */
-export default function CountryComparison({ countryMapData, globalFcsData }: CountryComparisonProps): JSX.Element {
+export default function ComparisonPortal({ countryMapData, globalFcsData }: CountryPortalProps): JSX.Element {
   const [selectedCountries, setSelectedCountries] = useSelectedCountries(countryMapData);
   const [disabledCountryIds, setDisabledCountryIds] = useState<string[]>([]);
+  const [selectedTab, setSelectedTab] = useSelectedTab();
+  const { selectedRegions, setSelectedRegions, selectedRegionComparisonCountry, setSelectedRegionComparisonCountry } =
+    useSelectedRegions();
 
   return (
-    <div>
-      <CountrySelection
-        countryMapData={countryMapData}
-        globalFcsData={globalFcsData}
-        selectedCountries={selectedCountries}
-        setSelectedCountries={setSelectedCountries}
-        disabledCountryIds={disabledCountryIds}
-      />
-      <CountryComparisonAccordion
-        selectedCountries={selectedCountries}
-        setSelectedCountries={setSelectedCountries}
-        setDisabledCountryIds={setDisabledCountryIds}
-      />
+    <div className="flex w-full flex-col">
+      <Tabs
+        selectedKey={selectedTab}
+        onSelectionChange={(key) => setSelectedTab(key as string)}
+        size="md"
+        variant="underlined"
+        classNames={{
+          base: 'justify-center px-1',
+          cursor: 'w-full',
+        }}
+        fullWidth
+      >
+        <Tab key="country" title="Country Comparison">
+          <CountrySelection
+            countryMapData={countryMapData}
+            globalFcsData={globalFcsData}
+            selectedCountries={selectedCountries}
+            setSelectedCountries={setSelectedCountries}
+            disabledCountryIds={disabledCountryIds}
+          />
+          <CountryComparisonAccordion
+            selectedCountries={selectedCountries}
+            setSelectedCountries={setSelectedCountries}
+            setDisabledCountryIds={setDisabledCountryIds}
+          />
+        </Tab>
+        <Tab key="region" title="Region Comparison">
+          <RegionSelection
+            countryMapData={countryMapData}
+            globalFcsData={globalFcsData}
+            selectedRegionComparisonCountry={selectedRegionComparisonCountry}
+            setSelectedRegionComparisonCountry={setSelectedRegionComparisonCountry}
+            selectedRegions={selectedRegions}
+            setSelectedRegions={setSelectedRegions}
+          />
+          <RegionComparisonAccordion
+            selectedRegionComparisonCountry={selectedRegionComparisonCountry}
+            selectedRegions={selectedRegions}
+          />
+        </Tab>
+      </Tabs>
     </div>
   );
 }

src/components/ComparisonPortal/CountryComparisonAccordion.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useMemo } from 'react';
 
 import ComparisonAccordionSkeleton from '@/components/ComparisonPortal/ComparisonAccordionSkeleton';
@@ -68,7 +66,7 @@ export default function CountryComparisonAccordion({
     return CountryComparisonOperations.getComparisonAccordionItems(chartData, selectedCountryNames, isLoading);
   }, [countryDataList, countryIso3DataList, selectedCountries]);
 
-  if (!accordionItems || (countryDataList.length < 2 && isLoading)) return <ComparisonAccordionSkeleton />;
+  if (!accordionItems || (countryDataList.length < 2 && isLoading)) return <ComparisonAccordionSkeleton nItems={5} />;
 
   if (countryDataList.length < 2) {
     return (

src/components/ComparisonPortal/CountrySelectSkeleton.tsx

@@ -2,12 +2,12 @@ import { Skeleton } from '@nextui-org/skeleton';
 import React from 'react';
 
 /**
- * A skeleton component for the CountrySelection component.
- * @returns {JSX.Element} The CountrySelectionSkeleton component
+ * A skeleton for the Select component.
+ * @returns {JSX.Element}
  */
-export default function CountrySelectionSkeleton(): JSX.Element {
+export default function SelectionSkeleton(): JSX.Element {
   return (
-    <div className="pb-4 space-y-6">
+    <div className="flex-1">
       <div className="group flex flex-col w-full">
         <div className="w-full flex flex-col">
           <Skeleton aria-hidden="true" className="relative px-3 gap-3 w-full shadow-sm h-10 min-h-10 rounded-medium">

src/components/ComparisonPortal/CountrySelection.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Select, SelectItem } from '@nextui-org/react';
 import { useMemo } from 'react';
 
@@ -29,6 +27,7 @@ export default function CountrySelection({
   setSelectedCountries,
   disabledCountryIds,
 }: CountrySelectionProps): JSX.Element {
+  const COUNTRY_LIMIT = 5;
   const selectedKeys = useMemo(
     () => selectedCountries?.map((country) => country.properties.adm0_id.toString()),
     [selectedCountries]
@@ -43,8 +42,7 @@ export default function CountrySelection({
     return availableCountries
       .filter(
         (country) =>
-          // if there are already 5 selected countries, disable the rest
-          selectedCountries.length >= 5 &&
+          selectedCountries.length >= COUNTRY_LIMIT &&
           !selectedCountries.find(
             (selectedCountry) => selectedCountry.properties.adm0_id === country.properties.adm0_id
           )

src/components/ComparisonPortal/NoDataHint.tsx

@@ -5,54 +5,54 @@ import { isContinuousChartData } from '@/domain/entities/charts/ContinuousChartD
 import { NoDataHintProps } from '@/domain/props/NoDataHintProps.ts';
 
 /**
- * Displays an alert when there is one or more selected countries that are not present in the chart.
+ * Displays an alert when there is one or more selected chart categories (i.e. countries or regions) that are not present in the chart.
  * @param {NoDataHintProps} props Props for the NoDataHint component
  * @param {ContinuousChartData | CategoricalChartData} props.chartData Chart data
- * @param {string[]} props.selectedCountryNames Selected country names
+ * @param {string[]} props.requestedChartCategories Selected country names
  * @param {boolean} props.isLoading Whether the data is loading
  * @returns {JSX.Element | null} The NoDataHint component if there is missing data, otherwise null
  */
 export default function NoDataHint({
   chartData,
-  selectedCountryNames,
-  isLoading,
+  requestedChartCategories,
+  isLoading = false,
 }: NoDataHintProps): JSX.Element | null {
-  const [formattedMissingCountryNames, setFormattedMissingCountryNames] = useState<string | null>(null);
+  const [formattedMissingCategories, setFormattedMissingCategories] = useState<string | null>(null);
 
   useEffect(() => {
     if (isLoading) return;
 
-    const countryNamesInChart = isContinuousChartData(chartData)
+    const actualChartCategories = isContinuousChartData(chartData)
       ? chartData.lines.map((line) => line.name)
       : chartData.categories.map((category) => category.name);
-    const missingCountryNames = selectedCountryNames.filter(
-      (countryName) => !countryNamesInChart.includes(countryName)
+    const missingChartCategories = requestedChartCategories.filter(
+      (category) => !actualChartCategories.includes(category)
     );
 
     // if there is no data for at least one country we do not show the warnings
     // cause the chart components will display a "no data available" message
-    if (missingCountryNames.length === selectedCountryNames.length) {
-      setFormattedMissingCountryNames(null);
+    if (missingChartCategories.length === requestedChartCategories.length) {
+      setFormattedMissingCategories(null);
       return;
     }
 
-    switch (missingCountryNames.length) {
+    switch (missingChartCategories.length) {
       case 0:
-        setFormattedMissingCountryNames(null);
+        setFormattedMissingCategories(null);
         break;
       case 1:
-        setFormattedMissingCountryNames(missingCountryNames[0]);
+        setFormattedMissingCategories(missingChartCategories[0]);
         break;
       default:
-        setFormattedMissingCountryNames(
-          `${missingCountryNames.slice(0, -1).join(', ')} and ${missingCountryNames.slice(-1)}`
+        setFormattedMissingCategories(
+          `${missingChartCategories.slice(0, -1).join(', ')} and ${missingChartCategories.slice(-1)}`
         );
     }
-  }, [isLoading, chartData, selectedCountryNames]);
+  }, [isLoading, chartData, requestedChartCategories]);
 
-  return formattedMissingCountryNames ? (
+  return formattedMissingCategories ? (
     <Alert
-      description={`No data for ${formattedMissingCountryNames}.`}
+      description={`No data for ${formattedMissingCategories}.`}
       classNames={{ mainWrapper: 'justify-center', iconWrapper: 'my-0.5' }}
     />
   ) : null;

src/components/ComparisonPortal/RegionComparisonAccordion.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import ComparisonAccordionSkeleton from '@/components/ComparisonPortal/ComparisonAccordionSkeleton';
+import { useRegionDataQuery } from '@/domain/hooks/countryHooks';
+import { RegionComparisonAccordionProps } from '@/domain/props/RegionComparisonAccordionProps';
+import { RegionComparisonOperations } from '@/operations/comparison-portal/RegionComparisonOperations';
+
+import AccordionContainer from '../Accordions/AccordionContainer';
+
+/**
+ * The `CountryComparisonAccordion` component displays comparison accordion for selected regions.
+ * Once a country is selected, it fetches all its regions once using the respective hook.
+ * @param {string[] | 'all'} selectedRegions
+ * @param {string | undefined} selectedRegionComparisonCountry
+ */
+export default function RegionComparisonAccordion({
+  selectedRegions,
+  selectedRegionComparisonCountry,
+}: RegionComparisonAccordionProps) {
+  const { data: regionData, isLoading } = useRegionDataQuery(Number(selectedRegionComparisonCountry));
+
+  // TODO (F-254): Toggle this within the chart options. If the pie chart is selected, switch to false and hide the toggle button.
+  const [showRelativeNumbers] = useState(false);
+
+  const accordionItems = useMemo(() => {
+    if (!regionData) return [];
+    const chartData = RegionComparisonOperations.getChartData(regionData, selectedRegions, showRelativeNumbers);
+    return RegionComparisonOperations.getComparisonAccordionItems(chartData, selectedRegions, regionData.features);
+  }, [regionData, selectedRegions, showRelativeNumbers]);
+
+  if (!accordionItems || isLoading) return <ComparisonAccordionSkeleton nItems={2} />;
+
+  if (selectedRegions.length < 2) {
+    return (
+      <p className="pb-4">
+        Select {selectedRegions.length === 1 ? 'one additional region' : 'two or more regions'} to start a comparison.
+      </p>
+    );
+  }
+
+  return <AccordionContainer multipleSelectionMode loading={isLoading} items={accordionItems} />;
+}