feat WIP: add threshold for mass spec

ComPlat · Sep 12, 2024 · cf4504f · cf4504f
1 parent ec22b19
commit cf4504f
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 38 deletions.
diff --git a/src/__tests__/fixtures/lc_ms_jcamp_uvvis.js b/src/__tests__/fixtures/lc_ms_jcamp_uvvis.js
@@ -17,7 +17,7 @@ $$ === CHEMSPECTRA SPECTRUM ORIG ===
 ##VAR_TYPE= INDEPENDENT, DEPENDENT, INDEPENDENT
 ##VAR_FORM= AFFN, AFFN, AFFN
 ##VAR_DIM= , , 3
-##UNITS= M/Z, RELATIVE ABUNDANCE, SECONDS
+##UNITS= MINUTES, RELATIVE ABUNDANCE, SECONDS
 ##FIRST= , , 0.009
 ##LAST= , , 5.10098333333333
 ##PAGE=210

diff --git a/src/components/cmd_bar/index.js b/src/components/cmd_bar/index.js
@@ -34,15 +34,22 @@ const styles = () => (
 
 const CmdBar = ({
   classes, feature, hasEdit, forecast, operations, editorOnly, jcampIdx, hideThreshold,
+  hideMainEditTools,
 }) => (
   <div className={classes.card}>
-    <Viewer editorOnly={editorOnly} />
-    <Zoom />
-    <Peak jcampIdx={jcampIdx} feature={feature} />
-    <Pecker jcampIdx={jcampIdx} />
-    <Integration />
-    <Multiplicity />
-    <UndoRedo />
+    {
+      hideMainEditTools ? null : (
+        <>
+          <Viewer editorOnly={editorOnly} />
+          <Zoom />
+          <Peak jcampIdx={jcampIdx} feature={feature} />
+          <Pecker jcampIdx={jcampIdx} />
+          <Integration />
+          <Multiplicity />
+          <UndoRedo />
+        </>
+      )
+    }
     <Submit
       operations={operations}
       feature={feature}
@@ -80,6 +87,7 @@ CmdBar.propTypes = {
   editorOnly: PropTypes.bool.isRequired,
   jcampIdx: PropTypes.any,
   hideThreshold: PropTypes.bool,
+  hideMainEditTools: PropTypes.bool,
 };
 
 export default compose(

diff --git a/src/components/d3_line_rect/index.js b/src/components/d3_line_rect/index.js
@@ -14,7 +14,7 @@ import FindReplaceOutlinedIcon from '@mui/icons-material/FindReplaceOutlined';
 import { MuButton, commonStyle, focusStyle } from '../cmd_bar/common';
 
 import {
-  Topic2Seed, ToThresEndPts,
+  Topic2Seed, ToThresEndPts, convertThresEndPts,
 } from '../../helpers/chem';
 import { resetAll } from '../../actions/manager';
 import {
@@ -36,7 +36,7 @@ import { LIST_ROOT_SVG_GRAPH, LIST_BRUSH_SVG_GRAPH } from '../../constants/list_
 import PeakGroup from '../cmd_bar/08_peak_group';
 
 const W = Math.round(window.innerWidth * 0.90 * 9 / 12); // ROI
-const H = Math.round(window.innerHeight * 0.90 * 0.85 / 3); // ROI
+const H = Math.round(window.innerHeight * 0.90 * 0.8 / 3); // ROI
 
 const styles = () => (
   Object.assign(
@@ -113,6 +113,7 @@ const waveLengthSelect = (classes, hplcMsSt, updateWaveLengthAct) => {
     <FormControl
       className={classNames(classes.fieldDecimal)}
       variant="outlined"
+      style={{ width: '80px' }}
     >
       <InputLabel id="select-decimal-label" className={classNames(classes.selectLabel, 'select-sv-bar-label')}>
         Wavelength
@@ -193,7 +194,7 @@ class ViewerLineRect extends React.Component {
 
   componentDidMount() {
     const {
-      entities, curveSt, seed, cLabel, xLabel, yLabel, feature,
+      entities, curveSt, seed, cLabel, feature,
       tTrEndPts, layoutSt,
       isUiAddIntgSt, isUiNoBrushSt,
       isHidden,
@@ -223,7 +224,7 @@ class ViewerLineRect extends React.Component {
       isUiNoBrushSt: true,
       sweepExtentSt: sweepExtent[0],
     });
-    drawLabel(this.rootKlassLine, null, 'M/Z', 'Intensity');
+    drawLabel(this.rootKlassLine, null, 'Minutes', 'Intensity');
     drawDisplay(this.rootKlassLine, false);
 
     const filterSeed = seed;
@@ -239,7 +240,7 @@ class ViewerLineRect extends React.Component {
       isUiAddIntgSt,
       isUiNoBrushSt,
     });
-    drawLabel(this.rootKlassMulti, cLabel, xLabel, yLabel);
+    drawLabel(this.rootKlassMulti, cLabel, 'Minutes', 'Intensity');
     drawDisplay(this.rootKlassMulti, isHidden);
 
     drawMain(this.rootKlassRect, W, H, LIST_BRUSH_SVG_GRAPH.RECT);
@@ -256,10 +257,10 @@ class ViewerLineRect extends React.Component {
 
   componentDidUpdate(prevProps) {
     const {
-      entities, curveSt, seed, cLabel, xLabel, yLabel,
+      entities, curveSt, seed, cLabel,
       tTrEndPts, layoutSt,
       isUiAddIntgSt, isUiNoBrushSt,
-      isHidden, uiSt,
+      isHidden, uiSt, hplcMsSt,
     } = this.props;
     this.normChange(prevProps);
 
@@ -282,7 +283,7 @@ class ViewerLineRect extends React.Component {
         isUiNoBrushSt: true,
         sweepExtentSt: sweepExtent[0],
       });
-      drawLabel(this.rootKlassLine, null, 'M/Z', 'Intensity');
+      drawLabel(this.rootKlassLine, null, 'Minutes', 'Intensity');
       drawDisplay(this.rootKlassLine, false);
     }
 
@@ -298,12 +299,14 @@ class ViewerLineRect extends React.Component {
       isUiAddIntgSt,
       isUiNoBrushSt,
     });
-    drawLabel(this.rootKlassMulti, cLabel, xLabel, yLabel);
+    drawLabel(this.rootKlassMulti, cLabel, 'Minutes', 'Intensity');
     drawDisplay(this.rootKlassMulti, isHidden);
 
     const subViewFeature = this.extractSubView();
     if (subViewFeature) {
-      const { data, xUnit, pageValue } = subViewFeature;
+      const { threshold } = hplcMsSt;
+      const curTrEndPts = convertThresEndPts(subViewFeature, threshold.value);
+      const { data, pageValue } = subViewFeature;
       const currentData = data[0];
       const { x, y } = currentData;
       const subSeed = x.map((d, index) => {
@@ -313,11 +316,11 @@ class ViewerLineRect extends React.Component {
       this.rectFocus.update({
         filterSeed: subSeed,
         filterPeak: [],
-        tTrEndPts,
+        tTrEndPts: curTrEndPts,
         isUiNoBrushSt: true,
         sweepExtentSt: sweepExtent[2],
       });
-      drawLabel(this.rootKlassRect, `${pageValue} min`, xUnit, 'Intensity');
+      drawLabel(this.rootKlassRect, `${pageValue} min`, 'M/Z', 'Intensity');
       drawDisplay(this.rootKlassRect, false);
     }
   }
@@ -381,22 +384,18 @@ class ViewerLineRect extends React.Component {
         {
           zoomView(classNames, 0, uiSt, zoomInAct)
         }
-        <div style={{ textAlign: 'right' }}>
-          {
-            waveLengthSelect(classes, hplcMsSt, selectWavelengthAct)
-          }
-          <div className={LIST_ROOT_SVG_GRAPH.LINE} />
-        </div>
+        {
+          waveLengthSelect(classes, hplcMsSt, selectWavelengthAct)
+        }
+        <div className={LIST_ROOT_SVG_GRAPH.LINE} />
         <PeakGroup feature={feature} graphIndex={1} />
         {
           zoomView(classes, 1, uiSt, zoomInAct)
         }
-        <div style={{ textAlign: 'right' }}>
-          {
-            ticSelect(classes, hplcMsSt, handleTicChanged)
-          }
-          <div className={LIST_ROOT_SVG_GRAPH.MULTI} />
-        </div>
+        {
+          ticSelect(classes, hplcMsSt, handleTicChanged)
+        }
+        <div className={LIST_ROOT_SVG_GRAPH.MULTI} />
         {
           zoomView(classes, 2, uiSt, zoomInAct)
         }
@@ -439,8 +438,6 @@ ViewerLineRect.propTypes = {
   subEntities: PropTypes.array.isRequired,
   seed: PropTypes.array.isRequired,
   cLabel: PropTypes.string.isRequired,
-  xLabel: PropTypes.string.isRequired,
-  yLabel: PropTypes.string.isRequired,
   layoutSt: PropTypes.string.isRequired,
   feature: PropTypes.object.isRequired,
   tTrEndPts: PropTypes.array.isRequired,

diff --git a/src/components/d3_line_rect/rect_focus.js b/src/components/d3_line_rect/rect_focus.js
@@ -126,8 +126,7 @@ class RectFocus {
     const { xt, yt } = TfRescale(this);
     this.updatePathCall(xt, yt);
 
-    // const yRef = this.tTrEndPts[0].y;
-    const yRef = 0;
+    const yRef = this.tTrEndPts[0].y;
 
     const bars = this.bars.selectAll('rect')
       .data(this.data);
@@ -219,7 +218,7 @@ class RectFocus {
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.drawBar();
-      // this.drawThres();
+      this.drawThres();
       this.drawGrid();
     }
     MountBrush(this, isUiAddIntgSt, isUiNoBrushSt, this.brushClass);
@@ -235,7 +234,7 @@ class RectFocus {
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.drawBar();
-      // this.drawThres();
+      this.drawThres();
       this.drawGrid();
     }
     MountBrush(this, isUiAddIntgSt, isUiNoBrushSt, this.brushClass);

diff --git a/src/components/hplc_viewer.js b/src/components/hplc_viewer.js
@@ -49,6 +49,7 @@ class HPLCViewer extends React.Component { // eslint-disable-line
           operations={operations}
           editorOnly={true}
           hideThreshold={true}
+          hideMainEditTools={true}
         />
         <div className="react-spectrum-editor">
           <Grid container>

diff --git a/src/helpers/chem.js b/src/helpers/chem.js
@@ -761,6 +761,7 @@ const extrFeaturesMs = (jcamp, layout, peakUp) => {
   // }
   // // workaround for legacy design
   const thresRef = (jcamp.info && jcamp.info.$CSTHRESHOLD * 100) || 5;
+  console.log('thresRef', thresRef);
   const base = jcamp.spectra[0];
 
   const features = jcamp.spectra.map((s) => {
@@ -887,4 +888,5 @@ export {
   GetCyclicVoltaRatio, GetCyclicVoltaPeakSeparate,
   Feature2MaxMinPeak, convertTopic, Convert2MaxMinPeak,
   GetCyclicVoltaShiftOffset, GetCyclicVoltaPreviousShift,
+  convertThresEndPts,
 };
diff --git a/src/reducers/reducer_hplc_ms.js b/src/reducers/reducer_hplc_ms.js
@@ -11,6 +11,10 @@ const initialState = {
   tic: {
     isNegative: false,
   },
+  threshold: {
+    isEdit: true,
+    value: false,
+  },
 };
 
 const updateHPLCData = (state, action) => {
@@ -28,8 +32,14 @@ const updateHPLCData = (state, action) => {
       listWaveLength,
       selectedWaveLength: listWaveLength[0],
     });
+    const postiveCurves = payload[3];
+    const { thresRef } = postiveCurves.features[0];
     return Object.assign({}, state, {
       uvvis: newUvvis,
+      threshold: {
+        isEdit: true,
+        value: thresRef,
+      },
     });
   }
   return state;