From 17013849345724d5a4e4d087f128883bf532d725 Mon Sep 17 00:00:00 2001
From: Nicolass67 <rousseau.nicolas67@gmail.com>
Date: Mon, 13 Apr 2026 09:58:13 +0200
Subject: [PATCH] MS: show relative intensity next to m/z on hover

Cursor label and bar tooltip use base-peak percent.

Made-with: Cursor
---
 src/components/d3_rect/rect_focus.js |  5 +++--
 src/helpers/compass.js               |  9 +++++++++
 src/helpers/init.js                  | 22 +++++++++++++++++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/d3_rect/rect_focus.js b/src/components/d3_rect/rect_focus.js
index 650c3370..197ca1f1 100644
--- a/src/components/d3_rect/rect_focus.js
+++ b/src/components/d3_rect/rect_focus.js
@@ -125,6 +125,7 @@ class RectFocus {
     this.updatePathCall(xt, yt);
 
     const yRef = this.tTrEndPts[0].y;
+    const msMaxY = d3.max(this.data, (row) => row.y) || 0;
 
     const bars = this.bars.selectAll('rect')
       .data(this.data);
@@ -148,7 +149,7 @@ class RectFocus {
           .attr('stroke-opacity', '1.0');
         d3.select(`#bpt${Math.round(1000 * d.x)}`)
           .style('fill', 'blue');
-        const tipParams = { d, layout: this.layout };
+        const tipParams = { d, layout: this.layout, msMaxY };
         this.tip.show(tipParams, event.target);
       })
       .on('mouseout', (event, d) => {
@@ -156,7 +157,7 @@ class RectFocus {
           .attr('stroke-opacity', '1.0');
         d3.select(`#bpt${Math.round(1000 * d.x)}`)
           .style('fill', 'red');
-        const tipParams = { d, layout: this.layout };
+        const tipParams = { d, layout: this.layout, msMaxY };
         this.tip.hide(tipParams, event.target);
       });
   }
diff --git a/src/helpers/compass.js b/src/helpers/compass.js
index 038faaff..c7ac6f7f 100644
--- a/src/helpers/compass.js
+++ b/src/helpers/compass.js
@@ -102,6 +102,15 @@ const MouseMove = (event, focus) => {
         focus.root.select('.cursor-txt')
           .attr('transform', `translate(${tx},${10})`)
           .text(`X: ${pt.x.toFixed(3)}, Y: ${pt.y.toFixed(3)}`);
+      } else if (Format.isMsLayout(layout)) {
+        const maxY = d3.max(focus.data, (row) => row.y) || 0;
+        const relPct = maxY > 0 ? (100 * pt.y) / maxY : 0;
+        const rel = maxY > 0 ? parseInt(relPct, 10) : 0;
+        focus.root.select('.cursor-txt')
+          .attr('transform', `translate(${tx},${10})`)
+          .text(`${pt.x.toFixed(3)} (${rel})`);
+        focus.root.select('.cursor-txt-hz')
+          .text('');
       } else {
         focus.root.select('.cursor-txt')
           .attr('transform', `translate(${tx},${10})`)
diff --git a/src/helpers/init.js b/src/helpers/init.js
index 40095ee3..dea71214 100644
--- a/src/helpers/init.js
+++ b/src/helpers/init.js
@@ -57,11 +57,31 @@ const tpDiv = (d, digits, yFactor = 1) => (
   `
 );
 
+const msPeakTpDiv = (d, relInt) => (
+  `
+  <div
+    class="peak-tp"
+    style="${tpStyle()}"
+  >
+    <span>${d.x.toFixed(3)} (${relInt})</span>
+  <div>
+  `
+);
+
 const InitTip = () => {
   d3.select('.peak-tp').remove();
   const tip = d3Tip()
     .attr('class', 'd3-tip')
-    .html(({ d, layout, yFactor }) => tpDiv(d, FN.spectraDigit(layout), yFactor || 1));
+    .html(({
+      d, layout, yFactor, msMaxY,
+    }) => {
+      if (FN.isMsLayout(layout) && msMaxY > 0) {
+        const relPct = (100 * d.y) / msMaxY;
+        const rel = parseInt(relPct, 10);
+        return msPeakTpDiv(d, rel);
+      }
+      return tpDiv(d, FN.spectraDigit(layout), yFactor || 1);
+    });
   return tip;
 };