From 763da9d827f687c6b3850452ffd59676c1fdd207 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Wed, 2 Oct 2024 17:43:49 +0100
Subject: [PATCH] Make the sequence count text building nicer

---
 .../src/components/SearchPage/SearchFullUI.tsx   | 16 ++++++++++++----
 website/src/components/SearchPage/Table.tsx      |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
index ca361e3c3..ae37c86a9 100644
--- 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
index 0bfcdccc6..dc80b3050 100644
--- 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';