From 03b0996fc252f9f10b0c95c28a0f1d86a973ea73 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Fri, 15 May 2026 12:37:15 +0200
Subject: [PATCH] feat: display intensity ratio relative to the maximum
 absolute peak

---
 src/component/1d/FooterBanner.tsx | 22 +++++++++++++++++++---
 src/component/elements/Footer.tsx |  1 +
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/component/1d/FooterBanner.tsx b/src/component/1d/FooterBanner.tsx
index 8cc4eef5a2..6c5430dcb8 100644
--- a/src/component/1d/FooterBanner.tsx
+++ b/src/component/1d/FooterBanner.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import type { ActiveSpectrum, Spectrum1D } from '@zakodium/nmrium-core';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { BsCursor } from 'react-icons/bs';
 import { IoPulseSharp } from 'react-icons/io5';
 
@@ -14,6 +14,7 @@ import { FooterContainer, InfoItem } from '../elements/Footer.js';
 import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
 import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus.js';
 import useSpectrum from '../hooks/useSpectrum.js';
+import { maxAbsoluteValue } from '../utility/maxAbsoluteValue.ts';
 
 import { useInsetOptions } from './inset/InsetProvider.js';
 
@@ -57,6 +58,14 @@ function FooterBannerInner({
   const { startX, endX, step, mouseButton } = useBrushTracker();
   const { scaleX } = useScaleChecked();
 
+  const maxIntensityAbsValue = useMemo(() => {
+    if (spectrum) {
+      const data = get1DDataXY(spectrum);
+      return maxAbsoluteValue(data.y);
+    }
+    return 0;
+  }, [spectrum]);
+
   const format = useFormatNumberByNucleus(activeTab);
   const isInset = useInsetOptions();
 
@@ -92,7 +101,8 @@ function FooterBannerInner({
   }
 
   const isBrushing = step === 'brushing' && mouseButton === 'main';
-
+  const intensity = getYValue(position.x);
+  const ratio = (Math.abs(intensity) / maxIntensityAbsValue) * 100;
   return (
     <FooterContainer>
       <BsCursor />
@@ -164,7 +174,13 @@ function FooterBannerInner({
           <InfoBlock>
             <InfoItem.Label>Intensity: </InfoItem.Label>
             <InfoItem.Value style={{ minWidth: 80 }}>
-              {format(getYValue(position.x))}
+              {format(intensity)}
+            </InfoItem.Value>
+          </InfoBlock>
+          <Separator />
+          <InfoBlock>
+            <InfoItem.Value style={{ minWidth: 80 }}>
+              {ratio.toFixed(2)} %
             </InfoItem.Value>
           </InfoBlock>
         </FlexInfoItem>
diff --git a/src/component/elements/Footer.tsx b/src/component/elements/Footer.tsx
index a7da4540bd..ef321065c3 100644
--- a/src/component/elements/Footer.tsx
+++ b/src/component/elements/Footer.tsx
@@ -27,6 +27,7 @@ interface InfoContainerProps {
 const InfoContainer = styled.div<InfoContainerProps>`
   display: ${({ display = 'inline-block' }) => display};
   margin: 0 10px;
+  font-variant-numeric: tabular-nums;
 
   @container (max-width:${({ hideThreshold = 600 }) => hideThreshold}px) {
     display: ${({ autoHide = false, display = 'inline-block' }) =>