ui: fix partners tab

ui/src/pages/index.tsx

@@ -6,20 +6,20 @@ import { GetServerSideProps } from "next";
 import TabContent from "@/components/home/TabContent";
 import SearchBar from "@/components/shared/SearchBar";
 import { Journal, Country, Facets, Response, Params } from "@/types";
-import { authToken, getApiUrl, getSearchUrl } from "@/utils/utils";
+import { authToken, filterCountries, mapCountryNames, getApiUrl, getSearchUrl } from "@/utils/utils";
 
 interface HomePageProps {
   count: number;
   facets: Facets;
   query: Params;
 }
 
-const HomePage: React.FC<HomePageProps> = ({ count, facets, query }) => {
+const HomePage: React.FC<HomePageProps> = ({ count, facets }) => {
   const journals: Journal[] = facets
     ? facets?._filter_journal?.journal?.buckets
     : [];
   const partners: Country[] = facets
-    ? facets?._filter_country?.country?.buckets
+    ? mapCountryNames(filterCountries(facets?._filter_country?.country?.buckets))
     : [];
 
   const tabItems = [

ui/src/styles/globals.css

@@ -268,6 +268,7 @@ div.MathJax_Display {
     -moz-column-count: 2;
     column-count: 2;
     columns: 2;
+    max-height: 400px;
   }
 }
 
@@ -277,6 +278,7 @@ div.MathJax_Display {
     -moz-column-count: 1;
     column-count: 1;
     columns: 1;
+    max-height: 800px;
   }
 }
 

ui/src/utils/data.ts

@@ -0,0 +1,36 @@
+export const PARTNER_COUNTRIES = [
+  "Australia",
+  "Austria",
+  "Belgium",
+  "Canada",
+  "China",
+  "CERN",
+  "Czechia",
+  "Denmark",
+  "Finland",
+  "France",
+  "Germany",
+  "Greece",
+  "Hong Kong",
+  "Hungary",
+  "Iceland",
+  "Israel",
+  "Italy",
+  "Japan",
+  "JINR",
+  "Korea, Republic of",
+  "Mexico",
+  "Netherlands",
+  "Norway",
+  "Poland",
+  "Portugal",
+  "Slovakia",
+  "South Africa",
+  "Spain",
+  "Sweden",
+  "Switzerland",
+  "Taiwan, Province of China",
+  "Türkiye",
+  "United Kingdom",
+  "United States",
+]

ui/src/utils/utils.tsx

@@ -1,9 +1,11 @@
 import ReactHtmlParser from "react-html-parser";
 
 import { ArticleIdentifier, Params, QueryType, queryTypes } from "@/types";
+import { PARTNER_COUNTRIES } from "./data";
 import { Token } from "../../token";
 
-export const BASE_URL =  process.env.NEXT_API_BASE_URL || 'https://backend.dev.scoap3.org';
+export const BASE_URL =
+  process.env.NEXT_API_BASE_URL || "https://backend.dev.scoap3.org";
 const SEARCH_URL = "/api/search/article";
 
 export const authToken = Token
@@ -22,24 +24,22 @@ const defaultQueryValues = {
 const isValue = (value: any): boolean =>
   value !== undefined && value !== null && value !== "";
 
-  const buildSearchParams = (q: Params): string => {
-    const query = { ...defaultQueryValues, ...q };
+const buildSearchParams = (q: Params): string => {
+  const query = { ...defaultQueryValues, ...q };
 
-    const values = Object.entries(query)
-      .flatMap(([key, value]) => {
-        if (queryTypes.includes(key as QueryType)) {
-          if (Array.isArray(value)) {
-            return value.filter(isValue).map((v) => `${key}=${v}`);
-          } else if (isValue(value)) {
-            return [`${key}=${value}`];
-          }
-        }
-        return [];
-      });
-
-    return values.join("&");
-  };
+  const values = Object.entries(query).flatMap(([key, value]) => {
+    if (queryTypes.includes(key as QueryType)) {
+      if (Array.isArray(value)) {
+        return value.filter(isValue).map((v) => `${key}=${v}`);
+      } else if (isValue(value)) {
+        return [`${key}=${value}`];
+      }
+    }
+    return [];
+  });
 
+  return values.join("&");
+};
 
 const getSearchUrl = (query: Params, local?: boolean) => {
   const searchParams = buildSearchParams(query);
@@ -67,14 +67,37 @@ const resolveIdentifierLink = (identifier: ArticleIdentifier) => {
   }
 };
 
-  // strip <p> and <italic> tags to resolve errors: <p> cannot appear as a descendant of <p> and <italic> is not a valid tag.
-  const cleanText = (text: string) => text.replace(/<\/?(p|italic|sup|i|inf)>/g, "") ?? "";
+// strip <p> and <italic> tags to resolve errors: <p> cannot appear as a descendant of <p> and <italic> is not a valid tag.
+const cleanText = (text: string) => text.replace(/<\/?(p|italic|sup|i|inf)>/g, "") ?? "";
+
+const renderComplexSytnax = (abstract: string) => {
+  if (abstract.includes("<math")) {
+    return abstract;
+  }
+  return ReactHtmlParser(abstract);
+};
 
-  const renderComplexSytnax = (abstract: string) => {
-    if (abstract.includes("<math")) {
-      return abstract;
+function filterCountries(
+  countryObjects: { key: string; doc_count: number }[]
+): { key: string; doc_count: number }[] {
+  return countryObjects.filter(obj => PARTNER_COUNTRIES.includes(obj.key));
+}
+
+function mapCountryNames(
+  countryObjects: { key: string; doc_count: number }[]
+): { key: string; doc_count: number }[] {
+  const correctCountries = countryObjects.map(country => {
+    if (country.key === 'Taiwan, Province of China') {
+      country.key = 'Taiwan';
     }
-    return ReactHtmlParser(abstract);
-  };
+    if (country.key === 'Korea, Republic of') {
+      country.key = 'South Korea';
+    }
+    return country;
+  });
+
+  correctCountries.sort((a, b) => a.key.localeCompare(b.key))
+  return correctCountries;
+}
 
-export { getSearchUrl, getApiUrl, resolveIdentifierLink, cleanText, renderComplexSytnax };
+export { getSearchUrl, getApiUrl, resolveIdentifierLink, cleanText, renderComplexSytnax, filterCountries, mapCountryNames };