From e330ee02581ed4c52ddb889dfbf44770cd1a6737 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 30 Nov 2023 12:06:59 +0100
Subject: [PATCH] refactor: display the number of spectra in the corresponding
 panel

close #2762
---
 .../panels/SpectrumsPanel/SpectraPanelHeader.tsx   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/component/panels/SpectrumsPanel/SpectraPanelHeader.tsx b/src/component/panels/SpectrumsPanel/SpectraPanelHeader.tsx
index f00e17236..d16b728f2 100644
--- a/src/component/panels/SpectrumsPanel/SpectraPanelHeader.tsx
+++ b/src/component/panels/SpectrumsPanel/SpectraPanelHeader.tsx
@@ -17,7 +17,9 @@ import { useActiveSpectra } from '../../hooks/useActiveSpectra';
 import useSpectrum from '../../hooks/useSpectrum';
 import { DisplayerMode } from '../../reducer/Reducer';
 import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
-import DefaultPanelHeader from '../header/DefaultPanelHeader';
+import DefaultPanelHeader, {
+  createFilterLabel,
+} from '../header/DefaultPanelHeader';
 import { SpectraAutomaticPickingButton } from '../header/SpectraAutomaticPickingButton';
 
 function getMissingProjection(SpectrumsData, activeTab) {
@@ -56,8 +58,6 @@ function SpectraPanelHeaderInner({
   const alert = useAlert();
   const dispatch = useDispatch();
 
-  const spectra = getSpectraByNucleus(activeTab, data);
-
   const handleDelete = useCallback(() => {
     modal.showConfirmDialog({
       message: (
@@ -119,13 +119,14 @@ function SpectraPanelHeaderInner({
       payload: {},
     });
   }
-
   const hasActiveSpectra = activeSpectra && activeSpectra?.length > 0;
+  const spectraLengthPerTab = getSpectraByNucleus(activeTab, data)?.length;
 
   return (
     <DefaultPanelHeader
       onDelete={handleDelete}
-      counter={spectra?.length}
+      counter={data?.length}
+      counterLabel={createFilterLabel(data?.length, spectraLengthPerTab)}
       deleteToolTip="Delete selected spectra"
       disableDelete={!hasActiveSpectra}
       showSettingButton
@@ -156,7 +157,7 @@ function SpectraPanelHeaderInner({
           <FaCreativeCommonsSamplingPlus />
         </Button.BarButton>
       )}
-      {displayerMode === '1D' && spectra.length > 1 && (
+      {displayerMode === '1D' && spectraLengthPerTab > 1 && (
         <>
           <Button.BarButton
             tooltipOrientation="horizontal"
@@ -200,6 +201,7 @@ export default function SpectrumsTabs({
   } = useChartData();
   const spectrum = useSpectrum() as Spectrum2D;
   const activeSpectra = useActiveSpectra();
+
   return (
     <MemoizedSpectraPanelHeader
       {...{