diff --git a/ui/src/pages/index.tsx b/ui/src/pages/index.tsx index 69807b9c9..71facccc1 100644 --- a/ui/src/pages/index.tsx +++ b/ui/src/pages/index.tsx @@ -6,7 +6,7 @@ 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; @@ -14,12 +14,12 @@ interface HomePageProps { query: Params; } -const HomePage: React.FC = ({ count, facets, query }) => { +const HomePage: React.FC = ({ 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 = [ diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css index 3cca973a5..83acc5a8a 100644 --- a/ui/src/styles/globals.css +++ b/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; } } diff --git a/ui/src/utils/data.ts b/ui/src/utils/data.ts new file mode 100644 index 000000000..e015e0981 --- /dev/null +++ b/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", +] diff --git a/ui/src/utils/utils.tsx b/ui/src/utils/utils.tsx index dfd2ee391..bdfb1cfc4 100644 --- a/ui/src/utils/utils.tsx +++ b/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

and tags to resolve errors:

cannot appear as a descendant of

and is not a valid tag. - const cleanText = (text: string) => text.replace(/<\/?(p|italic|sup|i|inf)>/g, "") ?? ""; +// strip

and tags to resolve errors:

cannot appear as a descendant of

and is not a valid tag. +const cleanText = (text: string) => text.replace(/<\/?(p|italic|sup|i|inf)>/g, "") ?? ""; + +const renderComplexSytnax = (abstract: string) => { + if (abstract.includes(" { - if (abstract.includes(" 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 };