MS: show relative intensity with m/z on hover

src/components/d3_rect/rect_focus.js

@@ -130,6 +130,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);
@@ -154,7 +155,7 @@ class RectFocus {
         d3.select(`#bpt${Math.round(1000 * d.x)}`)
           .style('fill', 'blue');
         const tipParams = {
-          d, layout: this.layout, xDigits: this.decimal,
+          d, layout: this.layout, msMaxY, xDigits: this.decimal,
         };
         this.tip.show(tipParams, event.target);
       })
@@ -164,7 +165,7 @@ class RectFocus {
         d3.select(`#bpt${Math.round(1000 * d.x)}`)
           .style('fill', 'red');
         const tipParams = {
-          d, layout: this.layout, xDigits: this.decimal,
+          d, layout: this.layout, msMaxY, xDigits: this.decimal,
         };
         this.tip.hide(tipParams, event.target);
       });

src/helpers/compass.js

@@ -102,13 +102,20 @@ 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;
+        const xPrecision = Format.clampDecimalPlaces(focus.decimal);
+        focus.root.select('.cursor-txt')
+          .attr('transform', `translate(${tx},${10})`)
+          .text(`${pt.x.toFixed(xPrecision)} (${rel})`);
+        focus.root.select('.cursor-txt-hz')
+          .text('');
       } else {
-        const xPrecision = Format.isMsLayout(layout)
-          ? Format.clampDecimalPlaces(focus.decimal)
-          : 3;
         focus.root.select('.cursor-txt')
           .attr('transform', `translate(${tx},${10})`)
-          .text(pt.x.toFixed(xPrecision));
+          .text(pt.x.toFixed(3));
         if (freq) {
           focus.root.select('.cursor-txt-hz')
             .attr('transform', `translate(${tx},${20})`)

src/helpers/init.js

@@ -57,12 +57,32 @@ const tpDiv = (d, digits, yFactor = 1) => (
   `
 );
 
+const msPeakTpDiv = (d, relInt, digits) => (
+  `
+  <div
+    class="peak-tp"
+    style="${tpStyle()}"
+  >
+    <span>${FN.fixDigit(d.x, digits)} (${relInt})</span>
+  <div>
+  `
+);
+
+const resolveDigits = (layout, xDigits) => (
+  xDigits != null && xDigits !== ''
+    ? FN.clampDecimalPlaces(xDigits, FN.spectraDigit(layout))
+    : FN.spectraDigit(layout)
+);
+
 const peakTipHtml = ({
-  d, layout, yFactor, xDigits,
+  d, layout, yFactor, xDigits, msMaxY,
 }) => {
-  const digits = xDigits != null && xDigits !== ''
-    ? FN.clampDecimalPlaces(xDigits, FN.spectraDigit(layout))
-    : FN.spectraDigit(layout);
+  const digits = resolveDigits(layout, xDigits);
+  if (FN.isMsLayout(layout) && msMaxY > 0) {
+    const relPct = (100 * d.y) / msMaxY;
+    const rel = parseInt(relPct, 10);
+    return msPeakTpDiv(d, rel, digits);
+  }
   return tpDiv(d, digits, yFactor || 1);
 };