refactor: Enhance LCMS state management and improve threshold value handling in Threshold component

Author: Nicolass67

src/app.js

@@ -22,6 +22,8 @@ const store = compose(
   applyMiddleware(...middlewares),
 )(createStore)(reducers);
 
+FN.setLcmsStateGetter(() => store.getState().hplcMs);
+
 try {
   sagaMiddleware.run(sagas);
 } catch (error) {

src/components/cmd_bar/r03_threshold.js

@@ -15,6 +15,7 @@ import HowToRegOutlinedIcon from '@mui/icons-material/HowToRegOutlined';
 import RefreshOutlinedIcon from '@mui/icons-material/RefreshOutlined';
 
 import Cfg from '../../helpers/cfg';
+import Format from '../../helpers/format';
 import {
   updateThresholdValue, resetThresholdValue, toggleThresholdIsEdit,
 } from '../../actions/threshold';
@@ -89,10 +90,18 @@ const restoreTp = (hasEdit, isEdit) => (
 
 const Threshold = ({
   classes, feature, hasEdit,
-  hideThresSt, thresValSt, isEditSt, curveSt, hplcMsSt,
+  hideThresSt, thresValSt, isEditSt, curveSt, hplcMsSt, layoutSt,
   updateThresholdValueAct, resetThresholdValueAct, toggleThresholdIsEditAct,
 }) => {
-  const thresVal = thresValSt || (feature ? feature.thresRef : hplcMsSt.threshold.value);
+  const isLcMs = Format.isLCMsLayout(layoutSt);
+  let thresVal;
+  if (isLcMs) {
+    thresVal = hplcMsSt?.threshold?.value != null
+      ? hplcMsSt.threshold.value
+      : (feature?.thresRef ?? thresValSt ?? 5);
+  } else {
+    thresVal = thresValSt || (feature ? feature.thresRef : hplcMsSt?.threshold?.value);
+  }
 
   return (
     <span className={classes.groupRight}>
@@ -144,6 +153,7 @@ const mapStateToProps = (state, props) => ( // eslint-disable-line
     thresValSt: parseFloat(state.threshold.list[state.curve.curveIdx].value) || 0,
     curveSt: state.curve,
     hplcMsSt: state.hplcMs,
+    layoutSt: state.layout,
   }
 );
 
@@ -167,6 +177,11 @@ Threshold.propTypes = {
   resetThresholdValueAct: PropTypes.func.isRequired,
   toggleThresholdIsEditAct: PropTypes.func.isRequired,
   hplcMsSt: PropTypes.object.isRequired,
+  layoutSt: PropTypes.string,
+};
+
+Threshold.defaultProps = {
+  layoutSt: undefined,
 };
 
 export default connect(

src/components/cmd_bar/r05_submit_btn.js

@@ -15,7 +15,12 @@ import {
   Convert2Scan, Convert2Thres,
 } from '../../helpers/chem';
 import { MuButton, commonStyle } from './common';
-import { extractPeaksEdit, formatLcmsPeaksForBackend, formatLcmsIntegralsForBackend } from '../../helpers/extractPeaksEdit';
+import {
+  extractPeaksEdit,
+  formatLcmsPeaksForBackend,
+  formatLcmsIntegralsForBackend,
+  getLcmsMzPageData,
+} from '../../helpers/extractPeaksEdit';
 import Format from '../../helpers/format';
 
 const styles = () => (
@@ -29,7 +34,10 @@ const getAxesSelection = (axesUnitsSt, curveIdx) => {
   const axes = axesUnitsSt?.axes;
   if (!Array.isArray(axes) || axes.length === 0) return { xUnit: '', yUnit: '' };
   const idx = Number.isFinite(curveIdx) ? curveIdx : 0;
-  return axes[idx] || axes[0] || { xUnit: '', yUnit: '' };
+  return axes[idx] || axes[0] || {
+    xUnit: '',
+    yUnit: '',
+  };
 };
 
 const resolveAxisLabels = (xLabel, yLabel, axesUnitsSt, curveIdx) => {
@@ -178,7 +186,11 @@ const onClickCb = (
 ) => (
   () => {
     const defaultCurves = feature ? [{ feature }] : [];
-    const curves = Array.isArray(curveList) && curveList.length > 0 ? curveList : defaultCurves;
+    let curves = Array.isArray(curveList) && curveList.length > 0 ? curveList : defaultCurves;
+    if (layoutSt === 'LC/MS') {
+      curves = curves.filter((c) => c.lcmsKind === 'uvvis');
+      if (curves.length === 0) curves = defaultCurves;
+    }
     const fallbackIdx = Number.isFinite(curveSt?.curveIdx) ? curveSt.curveIdx : 0;
     const indicesToSend = curves.length > 0
       ? curves.map((_, index) => index)
@@ -216,6 +228,7 @@ const onClickCb = (
       payload.lcms_peaks_text = Format.formatedLCMS(hplcMsSt, isAscend, decimalSt);
       payload.lcms_uvvis_wavelength = hplcMsSt?.uvvis?.selectedWaveLength ?? null;
       payload.lcms_mz_page = hplcMsSt?.tic?.currentPageValue ?? null;
+      payload.lcms_mz_page_data = getLcmsMzPageData(hplcMsSt);
     }
     if (Number.isFinite(curveSt?.curveIdx)) {
       payload.curveSt = { curveIdx: curveSt.curveIdx };

src/helpers/compass.js

@@ -1,5 +1,6 @@
 import Format from './format';
 import { Convert2DValue } from './chem';
+import { LIST_UI_SWEEP_TYPE } from '../constants/list_ui';
 
 const d3 = require('d3');
 
@@ -122,6 +123,9 @@ const MouseMove = (event, focus) => {
 const ClickCompass = (event, focus) => {
   event.stopPropagation();
   event.preventDefault();
+  const isPeakGroupSelect = focus.uiSt?.sweepType === LIST_UI_SWEEP_TYPE.PEAK_GROUP_SELECT;
+  const isMsGraph = focus.graphIndex === 2;
+  if (isPeakGroupSelect && isMsGraph) return;
   const { xt, yt } = TfRescale(focus);
   let pt = fetchPt(event, focus, xt);
   const { layout, cyclicvoltaSt, jcampIdx } = focus;

src/helpers/extractEntityLCMS.js

@@ -44,8 +44,12 @@ export function getLcMsInfo(entity = {}) {
 
   const categories = collectCategories(entity);
   const normalizedCategories = categories.map(String).map((category) => category.toUpperCase());
-  const hasNeg = normalizedCategories.some((category) => category.includes('NEGATIVE'));
-  const hasPos = normalizedCategories.some((category) => category.includes('POSITIVE'));
+  const hasNeg = normalizedCategories.some(
+    (category) => category.includes('NEGATIVE') || category.startsWith('NEGATIV'),
+  );
+  const hasPos = normalizedCategories.some(
+    (category) => category.includes('POSITIVE') || category.startsWith('POSITIV'),
+  );
   let polarity = 'neutral';
   if (hasNeg) {
     polarity = 'negative';

src/helpers/extractPeaksEdit.js

@@ -53,6 +53,24 @@ function formatLcmsIntegralsForBackend(hplcMsSt) {
   return allIntegrals;
 }
 
+function getLcmsMzPageData(hplcMsSt) {
+  const tic = hplcMsSt?.tic;
+  const ms = hplcMsSt?.ms;
+  if (!tic || !ms) return null;
+  const polarity = tic.polarity || 'positive';
+  let polarityKey = 'neutral';
+  if (polarity === 'negative') polarityKey = 'negative';
+  else if (polarity === 'positive') polarityKey = 'positive';
+  const ticDataX = tic[polarityKey]?.data?.x;
+  if (!Array.isArray(ticDataX) || !Number.isFinite(tic.currentPageValue)) return null;
+  const currentIndex = ticDataX.findIndex(
+    (x) => Math.abs(x - tic.currentPageValue) < 1e-6,
+  );
+  if (currentIndex < 0) return null;
+  const peaks = ms[polarityKey]?.peaks?.[currentIndex];
+  return Array.isArray(peaks) ? peaks : null;
+}
+
 function extractPeaksEdit(hplcMsSt) {
   if (!hplcMsSt || !hplcMsSt.uvvis || !hplcMsSt.uvvis.spectraList) return [];
   return hplcMsSt.uvvis.spectraList.flatMap((spectrum) => spectrum.peaks || []);
@@ -92,4 +110,4 @@ const extractAreaUnderCurve = (allIntegrationSt, presentIntegrationSt, layoutSt)
   return null;
 };
 
-export { extractPeaksEdit, extractAreaUnderCurve, extractAutoPeaks, formatLcmsPeaksForBackend, formatLcmsIntegralsForBackend }; // eslint-disable-line
+export { extractPeaksEdit, extractAreaUnderCurve, extractAutoPeaks, formatLcmsPeaksForBackend, formatLcmsIntegralsForBackend, getLcmsMzPageData }; // eslint-disable-line

src/helpers/format.js

@@ -5,6 +5,11 @@ import { ToXY, IsSame } from './converter';
 import { LIST_LAYOUT } from '../constants/list_layout';
 import { calcMpyCenter } from './multiplicity_calc';
 
+let lcmsStateGetter = null;
+function getLcmsState() {
+  return typeof lcmsStateGetter === 'function' ? lcmsStateGetter() : undefined;
+}
+
 const spectraDigit = (layout) => {
   switch (layout) {
     case LIST_LAYOUT.IR:
@@ -199,7 +204,7 @@ const formatedLCMS = (hplcMsSt, isAscend, decimal) => {
     if (currentIndex >= 0 && ms[polarityKey].peaks[currentIndex]) {
       const peaks = ms[polarityKey].peaks[currentIndex];
       const maxIntensity = Math.max(...peaks.map((p) => p.y)) || 1;
-      const thresholdValue = threshold?.value ?? 5;
+      const thresholdValue = (threshold?.value != null) ? threshold.value : 5;
 
       const filtered = peaks.filter(
         (peak) => (peak.y / maxIntensity) * 100 >= thresholdValue,
@@ -461,7 +466,8 @@ const peaksBody = ({
   const maxY = Math.max(...ordered.map((o) => o.y));
 
   if (layout === LIST_LAYOUT.LC_MS) {
-    return formatedLCMS(hplcMsSt, isAscend, decimal);
+    const lcmsState = hplcMsSt ?? getLcmsState();
+    return formatedLCMS(lcmsState, isAscend, decimal);
   }
   if (layout === LIST_LAYOUT.MS) {
     return formatedMS(ordered, maxY, decimal, isAscend);
@@ -687,6 +693,10 @@ const inlineNotation = (layout, data, sampleName = '') => {
 };
 
 const Format = {
+  setLcmsStateGetter(getter) {
+    lcmsStateGetter = getter;
+  },
+  getLcmsState,
   toPeakStr,
   extractUvvisLcmsPeaks,
   buildData,