fix(website): fix locales for toLocaleString (#2932)

* fix locales for toLocaleString * Factor our locale string to constant defined in settings * Refactor number formatting --------- Co-authored-by: Loculus bot <[email protected]> Co-authored-by: Cornelius Roemer <[email protected]>
loculus-project · Oct 2, 2024 · 35bb851 · 35bb851
1 parent 7eeddb8
commit 35bb851
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 14 deletions.
diff --git a/website/src/components/IndexPage/OrganismCard.astro b/website/src/components/IndexPage/OrganismCard.astro
@@ -1,6 +1,7 @@
 ---
 import type { OrganismStatistics } from './getOrganismStatistics';
 import { routes } from '../../routes/routes';
+import { formatNumberWithDefaultLocale } from '../../utils/formatNumber';
 
 interface Props {
     key: string;
@@ -11,8 +12,6 @@ interface Props {
 }
 
 const { key, image, displayName, organismStatistics, numberDaysAgoStatistics } = Astro.props;
-
-const formatNumber = (num: number) => new Intl.NumberFormat('en-US').format(num);
 ---
 
 <a
@@ -22,8 +21,9 @@ const formatNumber = (num: number) => new Intl.NumberFormat('en-US').format(num)
     {image !== undefined && <img src={image} class='h-32 mx-auto mb-4' alt={displayName} />}
     <h3 class='font-semibold'>{displayName}</h3>
     <p class='text-sm'>
-        {formatNumber(organismStatistics.totalSequences)} sequences<br />
-        (+{formatNumber(organismStatistics.recentSequences)} in last {numberDaysAgoStatistics} days)<br />
+        {formatNumberWithDefaultLocale(organismStatistics.totalSequences)} sequences<br />
+        (+{formatNumberWithDefaultLocale(organismStatistics.recentSequences)} in last {numberDaysAgoStatistics} days)<br
+        />
         <span class='hidden'
             >{
                 organismStatistics.lastUpdatedAt && <>Last updated {organismStatistics.lastUpdatedAt.toRelative()}</>

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -24,6 +24,7 @@ import {
 import { type OrderBy } from '../../types/lapis.ts';
 import type { ReferenceGenomesSequenceNames } from '../../types/referencesGenomes.ts';
 import type { ClientConfig } from '../../types/runtimeConfig.ts';
+import { formatNumberWithDefaultLocale } from '../../utils/formatNumber.tsx';
 import {
     getFieldValuesFromQuery,
     getColumnVisibilitiesFromQuery,
@@ -51,6 +52,15 @@ interface QueryState {
     [key: string]: string;
 }
 
+const buildSequenceCountText = (totalSequences: number | undefined, oldCount: number | null, initialCount: number) => {
+    const sequenceCount = totalSequences !== undefined ? totalSequences : oldCount !== null ? oldCount : initialCount;
+
+    const formattedCount = formatNumberWithDefaultLocale(sequenceCount);
+    const pluralSuffix = sequenceCount === 1 ? '' : 's';
+
+    return `Search returned ${formattedCount} sequence${pluralSuffix}`;
+};
+
 export const InnerSearchFullUI = ({
     accessToken,
     referenceGenomesSequenceNames,
@@ -303,14 +313,7 @@ export const InnerSearchFullUI = ({
                 >
                     <div className='text-sm text-gray-800 mb-6 justify-between flex md:px-6 items-baseline'>
                         <div className='mt-auto'>
-                            Search returned{' '}
-                            {totalSequences !== undefined
-                                ? totalSequences.toLocaleString()
-                                : oldCount !== null
-                                  ? oldCount.toLocaleString()
-                                  : initialCount.toLocaleString()}{' '}
-                            sequence
-                            {totalSequences === 1 ? '' : 's'}
+                            {buildSequenceCountText(totalSequences, oldCount, initialCount)}
                             {detailsHook.isLoading ||
                             aggregatedHook.isLoading ||
                             !firstClientSideLoadOfCountCompleted ||

diff --git a/website/src/components/SearchPage/Table.tsx b/website/src/components/SearchPage/Table.tsx
@@ -5,6 +5,7 @@ import { Tooltip } from 'react-tooltip';
 import { routes } from '../../routes/routes.ts';
 import type { Schema } from '../../types/config.ts';
 import type { Metadatum, OrderBy } from '../../types/lapis.ts';
+import { formatNumberWithDefaultLocale } from '../../utils/formatNumber.tsx';
 import MdiTriangle from '~icons/mdi/triangle';
 import MdiTriangleDown from '~icons/mdi/triangle-down';
 
@@ -19,7 +20,7 @@ function formatField(value: any, maxLength: number, type: string): string {
         if (type === 'timestamp') {
             return new Date(value * 1000).toISOString().slice(0, 10);
         }
-        return value.toLocaleString('en-US');
+        return formatNumberWithDefaultLocale(value);
     } else if (typeof value === 'boolean') {
         return value ? 'True' : 'False';
     } else {

diff --git a/website/src/components/SearchPage/fields/AutoCompleteField.tsx b/website/src/components/SearchPage/fields/AutoCompleteField.tsx
@@ -5,6 +5,7 @@ import { TextField } from './TextField.tsx';
 import { getClientLogger } from '../../../clientLogger.ts';
 import { lapisClientHooks } from '../../../services/serviceHooks.ts';
 import { type GroupedMetadataFilter, type MetadataFilter, type SetAFieldValue } from '../../../types/config.ts';
+import { formatNumberWithDefaultLocale } from '../../../utils/formatNumber.tsx';
 
 type AutoCompleteFieldProps = {
     field: MetadataFilter | GroupedMetadataFilter;
@@ -156,7 +157,9 @@ export const AutoCompleteField = ({
                                         <span className={`inline-block ${selected ? 'font-medium' : 'font-normal'}`}>
                                             {option.option}
                                         </span>
-                                        <span className='inline-block ml-1'>({option.count.toLocaleString()})</span>
+                                        <span className='inline-block ml-1'>
+                                            ({formatNumberWithDefaultLocale(option.count)})
+                                        </span>
                                         {selected && (
                                             <span
                                                 className={`absolute inset-y-0 left-0 flex items-center pl-3 ${

diff --git a/website/src/settings.ts b/website/src/settings.ts
@@ -14,3 +14,5 @@ export const DATA_USE_TERMS_FIELD = 'dataUseTerms';
 export const VERSION_COMMENT_FIELD = 'versionComment';
 
 export const metadataDefaultDownloadDataFormat = 'tsv';
+
+export const DEFAULT_LOCALE = 'en-US';
diff --git a/website/src/utils/formatNumber.tsx b/website/src/utils/formatNumber.tsx
@@ -0,0 +1,3 @@
+import { DEFAULT_LOCALE } from '../settings';
+
+export const formatNumberWithDefaultLocale = (num: number) => new Intl.NumberFormat(DEFAULT_LOCALE).format(num);