feat WIP: add threshold

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

Hide file tree

Showing 10 changed files with 97 additions and 49 deletions.
diff --git a/dist/components/cmd_bar/index.js b/dist/components/cmd_bar/index.js
@@ -37,18 +37,19 @@ const CmdBar = _ref => {
     operations,
     editorOnly,
     jcampIdx,
-    hideThreshold
+    hideThreshold,
+    hideMainEditTools
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.card
-  }, /*#__PURE__*/_react.default.createElement(_viewer.default, {
+  }, hideMainEditTools ? null : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_viewer.default, {
     editorOnly: editorOnly
   }), /*#__PURE__*/_react.default.createElement(_zoom.default, null), /*#__PURE__*/_react.default.createElement(_peak.default, {
     jcampIdx: jcampIdx,
     feature: feature
   }), /*#__PURE__*/_react.default.createElement(_pecker.default, {
     jcampIdx: jcampIdx
-  }), /*#__PURE__*/_react.default.createElement(_integration.default, null), /*#__PURE__*/_react.default.createElement(_multiplicity.default, null), /*#__PURE__*/_react.default.createElement(_undo_redo.default, null), /*#__PURE__*/_react.default.createElement(_r04_submit.default, {
+  }), /*#__PURE__*/_react.default.createElement(_integration.default, null), /*#__PURE__*/_react.default.createElement(_multiplicity.default, null), /*#__PURE__*/_react.default.createElement(_undo_redo.default, null)), /*#__PURE__*/_react.default.createElement(_r04_submit.default, {
     operations: operations,
     feature: feature,
     forecast: forecast,
@@ -75,6 +76,7 @@ CmdBar.propTypes = {
   operations: _propTypes.default.array.isRequired,
   editorOnly: _propTypes.default.bool.isRequired,
   jcampIdx: _propTypes.default.any,
-  hideThreshold: _propTypes.default.bool
+  hideThreshold: _propTypes.default.bool,
+  hideMainEditTools: _propTypes.default.bool
 };
 var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _withStyles.default)(styles))(CmdBar);
diff --git a/dist/components/cmd_bar/r03_threshold.js b/dist/components/cmd_bar/r03_threshold.js
@@ -91,11 +91,12 @@ const Threshold = _ref => {
     thresValSt,
     isEditSt,
     curveSt,
+    hplcMsSt,
     updateThresholdValueAct,
     resetThresholdValueAct,
     toggleThresholdIsEditAct
   } = _ref;
-  const thresVal = thresValSt || feature.thresRef;
+  const thresVal = thresValSt || (feature ? feature.thresRef : hplcMsSt.threshold.value);
   return /*#__PURE__*/_react.default.createElement("span", {
     className: classes.groupRight
   }, setThreshold(classes, thresVal, updateThresholdValueAct, curveSt), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
@@ -124,7 +125,8 @@ const mapStateToProps = (state, props) => (
   hideThresSt: _cfg.default.hideCmdThres(state.layout),
   isEditSt: state.threshold.list[state.curve.curveIdx].isEdit,
   thresValSt: parseFloat(state.threshold.list[state.curve.curveIdx].value) || 0,
-  curveSt: state.curve
+  curveSt: state.curve,
+  hplcMsSt: state.hplcMs
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   updateThresholdValueAct: _threshold.updateThresholdValue,
@@ -141,6 +143,7 @@ Threshold.propTypes = {
   curveSt: _propTypes.default.object.isRequired,
   updateThresholdValueAct: _propTypes.default.func.isRequired,
   resetThresholdValueAct: _propTypes.default.func.isRequired,
-  toggleThresholdIsEditAct: _propTypes.default.func.isRequired
+  toggleThresholdIsEditAct: _propTypes.default.func.isRequired,
+  hplcMsSt: _propTypes.default.bool.isRequired
 };
 var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(Threshold));
diff --git a/dist/components/d3_line_rect/index.js b/dist/components/d3_line_rect/index.js
@@ -29,12 +29,11 @@ var _draw = require("../common/draw");
 var _list_ui = require("../../constants/list_ui");
 var _list_graph = require("../../constants/list_graph");
 var _peak_group = _interopRequireDefault(require("../cmd_bar/08_peak_group"));
+var _r03_threshold = _interopRequireDefault(require("../cmd_bar/r03_threshold"));
 /* eslint-disable no-mixed-operators, prefer-object-spread, react/function-component-definition */
 
-// import Zoom from '../cmd_bar/02_zoom';
-
 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({}, _common.commonStyle);
 const zoomView = (classes, graphIndex, uiSt, zoomInAct) => {
@@ -98,7 +97,10 @@ const waveLengthSelect = (classes, hplcMsSt, updateWaveLengthAct) => {
   }, d)));
   return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldDecimal),
-    variant: "outlined"
+    variant: "outlined",
+    style: {
+      width: '80px'
+    }
   }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
     id: "select-decimal-label",
     className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
@@ -192,8 +194,6 @@ class ViewerLineRect extends _react.default.Component {
       curveSt,
       seed,
       cLabel,
-      xLabel,
-      yLabel,
       feature,
       tTrEndPts,
       layoutSt,
@@ -237,7 +237,7 @@ class ViewerLineRect extends _react.default.Component {
       isUiNoBrushSt: true,
       sweepExtentSt: sweepExtent[0]
     });
-    (0, _draw.drawLabel)(this.rootKlassLine, null, 'M/Z', 'Intensity');
+    (0, _draw.drawLabel)(this.rootKlassLine, null, 'Minutes', 'Intensity');
     (0, _draw.drawDisplay)(this.rootKlassLine, false);
     const filterSeed = seed;
     (0, _draw.drawMain)(this.rootKlassMulti, W, H, _list_graph.LIST_BRUSH_SVG_GRAPH.MULTI);
@@ -251,7 +251,7 @@ class ViewerLineRect extends _react.default.Component {
       isUiAddIntgSt,
       isUiNoBrushSt
     });
-    (0, _draw.drawLabel)(this.rootKlassMulti, cLabel, xLabel, yLabel);
+    (0, _draw.drawLabel)(this.rootKlassMulti, cLabel, 'Minutes', 'Intensity');
     (0, _draw.drawDisplay)(this.rootKlassMulti, isHidden);
     (0, _draw.drawMain)(this.rootKlassRect, W, H, _list_graph.LIST_BRUSH_SVG_GRAPH.RECT);
     this.rectFocus.create({
@@ -270,14 +270,13 @@ class ViewerLineRect extends _react.default.Component {
       curveSt,
       seed,
       cLabel,
-      xLabel,
-      yLabel,
       tTrEndPts,
       layoutSt,
       isUiAddIntgSt,
       isUiNoBrushSt,
       isHidden,
-      uiSt
+      uiSt,
+      hplcMsSt
     } = this.props;
     this.normChange(prevProps);
     const {
@@ -310,7 +309,7 @@ class ViewerLineRect extends _react.default.Component {
         isUiNoBrushSt: true,
         sweepExtentSt: sweepExtent[0]
       });
-      (0, _draw.drawLabel)(this.rootKlassLine, null, 'M/Z', 'Intensity');
+      (0, _draw.drawLabel)(this.rootKlassLine, null, 'Minutes', 'Intensity');
       (0, _draw.drawDisplay)(this.rootKlassLine, false);
     }
     const filterSeed = seed;
@@ -324,13 +323,16 @@ class ViewerLineRect extends _react.default.Component {
       isUiAddIntgSt,
       isUiNoBrushSt
     });
-    (0, _draw.drawLabel)(this.rootKlassMulti, cLabel, xLabel, yLabel);
+    (0, _draw.drawLabel)(this.rootKlassMulti, cLabel, 'Minutes', 'Intensity');
     (0, _draw.drawDisplay)(this.rootKlassMulti, isHidden);
     const subViewFeature = this.extractSubView();
     if (subViewFeature) {
+      const {
+        threshold
+      } = hplcMsSt;
+      const curTrEndPts = (0, _chem.convertThresEndPts)(subViewFeature, threshold.value);
       const {
         data,
-        xUnit,
         pageValue
       } = subViewFeature;
       const currentData = data[0];
@@ -348,11 +350,11 @@ class ViewerLineRect extends _react.default.Component {
       this.rectFocus.update({
         filterSeed: subSeed,
         filterPeak: [],
-        tTrEndPts,
+        tTrEndPts: curTrEndPts,
         isUiNoBrushSt: true,
         sweepExtentSt: sweepExtent[2]
       });
-      (0, _draw.drawLabel)(this.rootKlassRect, `${pageValue} min`, xUnit, 'Intensity');
+      (0, _draw.drawLabel)(this.rootKlassRect, `${pageValue} min`, 'M/Z', 'Intensity');
       (0, _draw.drawDisplay)(this.rootKlassRect, false);
     }
   }
@@ -432,22 +434,14 @@ class ViewerLineRect extends _react.default.Component {
       updateTicAct(event);
       selectCurveAct(event.target.value);
     };
-    return /*#__PURE__*/_react.default.createElement("div", null, zoomView(_classnames.default, 0, uiSt, zoomInAct), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        textAlign: 'right'
-      }
-    }, waveLengthSelect(classes, hplcMsSt, selectWavelengthAct), /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", null, zoomView(_classnames.default, 0, uiSt, zoomInAct), waveLengthSelect(classes, hplcMsSt, selectWavelengthAct), /*#__PURE__*/_react.default.createElement("div", {
       className: _list_graph.LIST_ROOT_SVG_GRAPH.LINE
-    })), /*#__PURE__*/_react.default.createElement(_peak_group.default, {
+    }), /*#__PURE__*/_react.default.createElement(_peak_group.default, {
       feature: feature,
       graphIndex: 1
-    }), zoomView(classes, 1, uiSt, zoomInAct), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        textAlign: 'right'
-      }
-    }, ticSelect(classes, hplcMsSt, handleTicChanged), /*#__PURE__*/_react.default.createElement("div", {
+    }), zoomView(classes, 1, uiSt, zoomInAct), ticSelect(classes, hplcMsSt, handleTicChanged), /*#__PURE__*/_react.default.createElement("div", {
       className: _list_graph.LIST_ROOT_SVG_GRAPH.MULTI
-    })), zoomView(classes, 2, uiSt, zoomInAct), /*#__PURE__*/_react.default.createElement("div", {
+    }), zoomView(classes, 2, uiSt, zoomInAct), /*#__PURE__*/_react.default.createElement(_r03_threshold.default, null), /*#__PURE__*/_react.default.createElement("div", {
       className: _list_graph.LIST_ROOT_SVG_GRAPH.RECT
     }));
   }
@@ -479,8 +473,6 @@ ViewerLineRect.propTypes = {
   subEntities: _propTypes.default.array.isRequired,
   seed: _propTypes.default.array.isRequired,
   cLabel: _propTypes.default.string.isRequired,
-  xLabel: _propTypes.default.string.isRequired,
-  yLabel: _propTypes.default.string.isRequired,
   layoutSt: _propTypes.default.string.isRequired,
   feature: _propTypes.default.object.isRequired,
   tTrEndPts: _propTypes.default.array.isRequired,

diff --git a/dist/components/d3_line_rect/rect_focus.js b/dist/components/d3_line_rect/rect_focus.js
@@ -132,9 +132,7 @@ class RectFocus {
       yt
     } = (0, _compass.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);
     bars.exit().attr('class', 'exit').remove();
     const gnd = yt(0);
@@ -201,7 +199,7 @@ class RectFocus {
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.drawBar();
-      // this.drawThres();
+      this.drawThres();
       this.drawGrid();
     }
     (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt, this.brushClass);
@@ -221,7 +219,7 @@ class RectFocus {
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.drawBar();
-      // this.drawThres();
+      this.drawThres();
       this.drawGrid();
     }
     (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt, this.brushClass);

diff --git a/dist/components/hplc_viewer.js b/dist/components/hplc_viewer.js
@@ -61,7 +61,8 @@ class HPLCViewer extends _react.default.Component {
       feature: feature,
       operations: operations,
       editorOnly: true,
-      hideThreshold: true
+      hideThreshold: true,
+      hideMainEditTools: true
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "react-spectrum-editor"
     }, /*#__PURE__*/_react.default.createElement(_material.Grid, {

diff --git a/dist/helpers/chem.js b/dist/helpers/chem.js
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertTopic = exports.Topic2Seed = exports.ToThresEndPts = exports.ToShiftPeaks = exports.ToFrequency = exports.GetCyclicVoltaShiftOffset = exports.GetCyclicVoltaRatio = exports.GetCyclicVoltaPreviousShift = exports.GetCyclicVoltaPeakSeparate = exports.GetComparisons = exports.Feature2Peak = exports.Feature2MaxMinPeak = exports.ExtractJcamp = exports.Convert2Thres = exports.Convert2Scan = exports.Convert2Peak = exports.Convert2MaxMinPeak = exports.Convert2DValue = void 0;
+exports.convertTopic = exports.convertThresEndPts = exports.Topic2Seed = exports.ToThresEndPts = exports.ToShiftPeaks = exports.ToFrequency = exports.GetCyclicVoltaShiftOffset = exports.GetCyclicVoltaRatio = exports.GetCyclicVoltaPreviousShift = exports.GetCyclicVoltaPeakSeparate = exports.GetComparisons = exports.Feature2Peak = exports.Feature2MaxMinPeak = exports.ExtractJcamp = exports.Convert2Thres = exports.Convert2Scan = exports.Convert2Peak = exports.Convert2MaxMinPeak = exports.Convert2DValue = void 0;
 var _jcampconverter = _interopRequireDefault(require("jcampconverter"));
 var _reselect = require("reselect");
 var _shift = require("./shift");
@@ -295,6 +295,7 @@ const convertThresEndPts = (feature, threshold) => {
   }];
   return endPts;
 };
+exports.convertThresEndPts = convertThresEndPts;
 const ToThresEndPts = exports.ToThresEndPts = (0, _reselect.createSelector)(getFeature, getThreshold, convertThresEndPts);
 const getShiftPeak = state => {
   const {
@@ -808,6 +809,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 => {
     const cpo = buildPeakFeature(jcamp, layout, peakUp, s, +thresRef.toFixed(4));

diff --git a/dist/reducers/reducer_hplc_ms.js b/dist/reducers/reducer_hplc_ms.js
@@ -17,6 +17,10 @@ const initialState = {
   },
   tic: {
     isNegative: false
+  },
+  threshold: {
+    isEdit: true,
+    value: false
   }
 };
 const updateHPLCData = (state, action) => {
@@ -42,8 +46,16 @@ const updateHPLCData = (state, action) => {
       listWaveLength,
       selectedWaveLength: listWaveLength[0]
     });
+    const postiveCurves = payload[3];
+    const {
+      thresRef
+    } = postiveCurves.features[0];
     return Object.assign({}, state, {
-      uvvis: newUvvis
+      uvvis: newUvvis,
+      threshold: {
+        isEdit: true,
+        value: thresRef
+      }
     });
   }
   return state;
@@ -94,6 +106,23 @@ const updateTic = (state, action) => {
   }
   return state;
 };
+const updateThresholdValue = (state, action) => {
+  const {
+    payload
+  } = action;
+  if (payload) {
+    const {
+      value
+    } = payload;
+    return Object.assign({}, state, {
+      threshold: {
+        isEdit: true,
+        value
+      }
+    });
+  }
+  return state;
+};
 const hplcmsReducer = function () {
   let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
   let action = arguments.length > 1 ? arguments[1] : undefined;
@@ -104,6 +133,8 @@ const hplcmsReducer = function () {
       return updateWaveLength(state, action);
     case _action_type.HPLC_MS.SELECT_TIC_CURVE:
       return updateTic(state, action);
+    case _action_type.THRESHOLD.UPDATE_VALUE:
+      return updateThresholdValue(state, action);
     default:
       return state;
   }

diff --git a/src/components/cmd_bar/r03_threshold.js b/src/components/cmd_bar/r03_threshold.js
@@ -89,10 +89,10 @@ const restoreTp = (hasEdit, isEdit) => (
 
 const Threshold = ({
   classes, feature, hasEdit,
-  hideThresSt, thresValSt, isEditSt, curveSt,
+  hideThresSt, thresValSt, isEditSt, curveSt, hplcMsSt,
   updateThresholdValueAct, resetThresholdValueAct, toggleThresholdIsEditAct,
 }) => {
-  const thresVal = thresValSt || feature.thresRef;
+  const thresVal = thresValSt || (feature ? feature.thresRef : hplcMsSt.threshold.value);
 
   return (
     <span className={classes.groupRight}>
@@ -139,6 +139,7 @@ const mapStateToProps = (state, props) => ( // eslint-disable-line
     isEditSt: state.threshold.list[state.curve.curveIdx].isEdit,
     thresValSt: parseFloat(state.threshold.list[state.curve.curveIdx].value) || 0,
     curveSt: state.curve,
+    hplcMsSt: state.hplcMs,
   }
 );
 
@@ -161,6 +162,7 @@ Threshold.propTypes = {
   updateThresholdValueAct: PropTypes.func.isRequired,
   resetThresholdValueAct: PropTypes.func.isRequired,
   toggleThresholdIsEditAct: PropTypes.func.isRequired,
+  hplcMsSt: PropTypes.bool.isRequired,
 };
 
 export default connect(

diff --git a/src/components/d3_line_rect/index.js b/src/components/d3_line_rect/index.js
@@ -32,8 +32,8 @@ import {
 } from '../common/draw';
 import { LIST_UI_SWEEP_TYPE, LIST_NON_BRUSH_TYPES } from '../../constants/list_ui';
 import { LIST_ROOT_SVG_GRAPH, LIST_BRUSH_SVG_GRAPH } from '../../constants/list_graph';
-// import Zoom from '../cmd_bar/02_zoom';
 import PeakGroup from '../cmd_bar/08_peak_group';
+import Threshold from '../cmd_bar/r03_threshold';
 
 const W = Math.round(window.innerWidth * 0.90 * 9 / 12); // ROI
 const H = Math.round(window.innerHeight * 0.90 * 0.8 / 3); // ROI
@@ -399,6 +399,7 @@ class ViewerLineRect extends React.Component {
         {
           zoomView(classes, 2, uiSt, zoomInAct)
         }
+        <Threshold />
         <div className={LIST_ROOT_SVG_GRAPH.RECT} />
       </div>
     );