Refactor number formatting

loculus-project · Oct 2, 2024 · 08fe1be · 08fe1be
1 parent 5834b93
commit 08fe1be
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 17 deletions.
diff --git a/website/src/components/IndexPage/OrganismCard.astro b/website/src/components/IndexPage/OrganismCard.astro
@@ -1,7 +1,7 @@
 ---
 import type { OrganismStatistics } from './getOrganismStatistics';
 import { routes } from '../../routes/routes';
-import { DEFAULT_LOCALE } from '../../settings';
+import { formatNumberWithDefaultLocale } from '../../utils/formatNumber';
 
 interface Props {
     key: string;
@@ -13,7 +13,6 @@ interface Props {
 
 const { key, image, displayName, organismStatistics, numberDaysAgoStatistics } = Astro.props;
 
-const formatNumber = (num: number) => new Intl.NumberFormat(DEFAULT_LOCALE).format(num);
 ---
 
 <a
@@ -23,8 +22,8 @@ const formatNumber = (num: number) => new Intl.NumberFormat(DEFAULT_LOCALE).form
     {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
@@ -12,7 +12,7 @@ import { Table, type TableSequenceData } from './Table';
 import useQueryAsState from './useQueryAsState.js';
 import { getLapisUrl } from '../../config.ts';
 import { lapisClientHooks } from '../../services/serviceHooks.ts';
-import { DEFAULT_LOCALE, pageSize } from '../../settings';
+import { pageSize } from '../../settings';
 import type { Group } from '../../types/backend.ts';
 import {
     type MetadataFilter,
@@ -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,16 @@ interface QueryState {
     [key: string]: string;
 }
 
+// Helper function at the top of the file
+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 +314,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(DEFAULT_LOCALE)
-                                : oldCount !== null
-                                  ? oldCount.toLocaleString(DEFAULT_LOCALE)
-                                  : initialCount.toLocaleString(DEFAULT_LOCALE)}{' '}
-                            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
@@ -3,9 +3,9 @@ import type { FC, ReactElement } from 'react';
 import { Tooltip } from 'react-tooltip';
 
 import { routes } from '../../routes/routes.ts';
-import { DEFAULT_LOCALE } from '../../settings.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';
 
@@ -20,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(DEFAULT_LOCALE);
+        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
@@ -4,8 +4,8 @@ import { useEffect, useMemo, useState, useRef, forwardRef } from 'react';
 import { TextField } from './TextField.tsx';
 import { getClientLogger } from '../../../clientLogger.ts';
 import { lapisClientHooks } from '../../../services/serviceHooks.ts';
-import { DEFAULT_LOCALE } from '../../../settings.ts';
 import { type GroupedMetadataFilter, type MetadataFilter, type SetAFieldValue } from '../../../types/config.ts';
+import { formatNumberWithDefaultLocale } from '../../../utils/formatNumber.tsx';
 
 type AutoCompleteFieldProps = {
     field: MetadataFilter | GroupedMetadataFilter;
@@ -158,7 +158,7 @@ export const AutoCompleteField = ({
                                             {option.option}
                                         </span>
                                         <span className='inline-block ml-1'>
-                                            ({option.count.toLocaleString(DEFAULT_LOCALE)})
+                                            ({formatNumberWithDefaultLocale(option.count)})
                                         </span>
                                         {selected && (
                                             <span

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);