Make the sequence count text building nicer

loculus-project · Oct 2, 2024 · 763da9d · 763da9d
1 parent 4aea284
commit 763da9d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -52,13 +52,22 @@ interface QueryState {
     [key: string]: string;
 }
 
-const buildSequenceCountText = (totalSequences: number | undefined, oldCount: number | null, initialCount: number) => {
+const buildSequenceCountText = (
+    totalSequences: number | undefined,
+    oldCount: number | null,
+    initialCount: number,
+    selectedCount: 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}`;
+    const formattedSelectedCount = formatNumberWithDefaultLocale(selectedCount);
+
+    const selectedSeqsText = selectedCount > 0 ? `, ${formattedSelectedCount} selected` : '';
+
+    return `Search returned ${formattedCount} sequence${pluralSuffix}${selectedSeqsText}`;
 };
 
 export const InnerSearchFullUI = ({
@@ -315,8 +324,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'>
-                            {buildSequenceCountText(totalSequences, oldCount, initialCount)}
-                            {selectedSeqs.size > 0 && <span>, {selectedSeqs.size} selected</span>}
+                            {buildSequenceCountText(totalSequences, oldCount, initialCount, selectedSeqs.size)}
                             {detailsHook.isLoading ||
                             aggregatedHook.isLoading ||
                             !firstClientSideLoadOfCountCompleted ||

diff --git a/website/src/components/SearchPage/Table.tsx b/website/src/components/SearchPage/Table.tsx
@@ -5,8 +5,8 @@ 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 MaterialSymbolsClose from '~icons/material-symbols/close';
 import { formatNumberWithDefaultLocale } from '../../utils/formatNumber.tsx';
+import MaterialSymbolsClose from '~icons/material-symbols/close';
 import MdiTriangle from '~icons/mdi/triangle';
 import MdiTriangleDown from '~icons/mdi/triangle-down';