feat: add threshold for multi spectra (#229)

Author: Lan Le

dist/components/cmd_bar/03_peak.js

@@ -135,7 +135,7 @@ const mapStateToProps = (state, props) => (
   cyclicVotaSt: state.cyclicvolta,
   curveSt: state.curve,
   editPeakSt: state.editPeak.present,
-  thresSt: state.threshold,
+  thresSt: state.threshold.list[state.curve.curveIdx],
   layoutSt: state.layout,
   shiftSt: state.shift
 });

dist/components/cmd_bar/r03_threshold.js

@@ -32,12 +32,24 @@ const txtPercent = () => /*#__PURE__*/_react.default.createElement(_material.Inp
 }, /*#__PURE__*/_react.default.createElement("span", {
   className: "txt-percent"
 }, "%"));
-const setThreshold = (classes, thresVal, updateThresholdValueAct) => {
-  const onBlur = e => updateThresholdValueAct(e.target.value);
-  const onChange = e => updateThresholdValueAct(e.target.value);
+const setThreshold = (classes, thresVal, updateThresholdValueAct, curveSt) => {
+  const {
+    curveIdx
+  } = curveSt;
+  const onBlur = e => updateThresholdValueAct({
+    value: e.target.value,
+    curveIdx
+  });
+  const onChange = e => updateThresholdValueAct({
+    value: e.target.value,
+    curveIdx
+  });
   const onEnterPress = e => {
     if (e.key === 'Enter') {
-      updateThresholdValueAct(e.target.value);
+      updateThresholdValueAct({
+        value: e.target.value,
+        curveIdx
+      });
     }
   };
   return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
@@ -78,14 +90,15 @@ const Threshold = _ref => {
     hideThresSt,
     thresValSt,
     isEditSt,
+    curveSt,
     updateThresholdValueAct,
     resetThresholdValueAct,
     toggleThresholdIsEditAct
   } = _ref;
   const thresVal = thresValSt || feature.thresRef;
   return /*#__PURE__*/_react.default.createElement("span", {
     className: classes.groupRight
-  }, setThreshold(classes, thresVal, updateThresholdValueAct), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+  }, setThreshold(classes, thresVal, updateThresholdValueAct, curveSt), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: /*#__PURE__*/_react.default.createElement("span", {
       className: "txt-sv-tp"
     }, "Restore Threshold")
@@ -109,8 +122,9 @@ const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {
   hideThresSt: _cfg.default.hideCmdThres(state.layout),
-  isEditSt: state.threshold.isEdit,
-  thresValSt: parseFloat(state.threshold.value) || 0
+  isEditSt: state.threshold.list[state.curve.curveIdx].isEdit,
+  thresValSt: parseFloat(state.threshold.list[state.curve.curveIdx].value) || 0,
+  curveSt: state.curve
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   updateThresholdValueAct: _threshold.updateThresholdValue,
@@ -124,6 +138,7 @@ Threshold.propTypes = {
   hideThresSt: _propTypes.default.bool.isRequired,
   isEditSt: _propTypes.default.bool.isRequired,
   thresValSt: _propTypes.default.number.isRequired,
+  curveSt: _propTypes.default.object.isRequired,
   updateThresholdValueAct: _propTypes.default.func.isRequired,
   resetThresholdValueAct: _propTypes.default.func.isRequired,
   toggleThresholdIsEditAct: _propTypes.default.func.isRequired

dist/components/cmd_bar/r05_submit_btn.js

@@ -93,7 +93,7 @@ const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {
   editPeakSt: state.editPeak.present,
-  thresSt: state.threshold,
+  thresSt: state.threshold.list[state.curve.curveIdx],
   layoutSt: state.layout,
   shiftSt: state.shift,
   scanSt: state.scan,

dist/components/cmd_bar/r06_predict_btn.js

@@ -194,7 +194,7 @@ const mapStateToProps = (state, props) => (
   editPeakSt: state.editPeak.present,
   scanSt: state.scan,
   shiftSt: state.shift,
-  thresSt: state.threshold,
+  thresSt: state.threshold.list[state.curve.curveIdx],
   integrationSt: state.integration.present,
   multiplicitySt: state.multiplicity.present,
   curveSt: state.curve

dist/components/d3_multi/multi_focus.js

@@ -19,7 +19,7 @@ var _integration = require("../../helpers/integration");
 var _multiplicity_calc = require("../../helpers/multiplicity_calc");
 var _calc = require("../../helpers/calc");
 /* eslint-disable no-unused-vars, prefer-object-spread, no-mixed-operators,
-no-unneeded-ternary, arrow-body-style */
+no-unneeded-ternary, arrow-body-style, max-len */
 
 const d3 = require('d3');
 class MultiFocus {
@@ -51,6 +51,8 @@ class MultiFocus {
     this.brushX = d3.brushX();
     this.axis = null;
     this.path = null;
+    this.thresLineUp = null;
+    this.thresLineDw = null;
     this.grid = null;
     this.tags = null;
     this.ref = null;
@@ -79,6 +81,7 @@ class MultiFocus {
     this.update = this.update.bind(this);
     this.setConfig = this.setConfig.bind(this);
     this.drawLine = this.drawLine.bind(this);
+    this.drawThres = this.drawThres.bind(this);
     this.drawOtherLines = this.drawOtherLines.bind(this);
     this.drawGrid = this.drawGrid.bind(this);
     this.drawPeaks = this.drawPeaks.bind(this);
@@ -155,8 +158,8 @@ class MultiFocus {
     this.tip = (0, _init.InitTip)();
     this.root.call(this.tip);
   }
-  setDataParams(peaks, tTrEndPts, tSfPeaks, layout, cyclicvoltaSt) {
-    let jcampIdx = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  setDataParams(filterSeed, peaks, tTrEndPts, tSfPeaks, layout, cyclicvoltaSt) {
+    let jcampIdx = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
     this.data = [];
     this.otherLineData = [];
     let filterSubLayoutValue = null;
@@ -167,8 +170,11 @@ class MultiFocus {
         color
       } = entry;
       const offset = (0, _chem.GetCyclicVoltaPreviousShift)(cyclicvoltaSt, jcampIdx);
-      const currData = (0, _chem.convertTopic)(topic, layout, feature, offset);
+      let currData = (0, _chem.convertTopic)(topic, layout, feature, offset);
       if (idx === jcampIdx) {
+        if (!_format.default.isCyclicVoltaLayout(layout)) {
+          currData = filterSeed;
+        }
         this.data = [...currData];
         this.pathColor = color;
         filterSubLayoutValue = _format.default.isSECLayout(layout) ? feature.xUnit : feature.yUnit;
@@ -258,6 +264,23 @@ class MultiFocus {
       this.path.attr('marker-mid', 'url(#arrow-left)');
     }
   }
+  drawThres() {
+    if (this.tTrEndPts.length > 0) {
+      this.thresLineUp.attr('d', this.pathCall(this.tTrEndPts));
+      this.thresLineUp.attr('visibility', 'visible');
+      const [left, right] = this.tTrEndPts;
+      const dwMirrorEndPts = [Object.assign({}, left, {
+        y: -left.y
+      }), Object.assign({}, right, {
+        y: -right.y
+      })];
+      this.thresLineDw.attr('d', this.pathCall(dwMirrorEndPts));
+      this.thresLineDw.attr('visibility', 'visible');
+    } else {
+      this.thresLineUp.attr('visibility', 'hidden');
+      this.thresLineDw.attr('visibility', 'hidden');
+    }
+  }
   drawOtherLines(layout) {
     d3.selectAll('.line-clip-compare').remove();
     if (!this.otherLineData) return null;
@@ -815,10 +838,11 @@ class MultiFocus {
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.scales = (0, _init.InitScale)(this, this.reverseXAxis(layoutSt));
     this.setTip();
-    this.setDataParams(filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt, jcampIdx);
+    this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt, jcampIdx);
     (0, _compass.MountCompass)(this);
     this.axis = (0, _mount.MountAxis)(this);
     this.path = (0, _mount.MountPath)(this, this.pathColor);
+    [this.thresLineUp, this.thresLineDw] = (0, _mount.MountThresLine)(this, 'green');
     this.grid = (0, _mount.MountGrid)(this);
     this.tags = (0, _mount.MountTags)(this);
     this.ref = (0, _mount.MountRef)(this);
@@ -827,6 +851,7 @@ class MultiFocus {
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.drawLine();
+      this.drawThres();
       this.drawGrid();
       this.drawOtherLines(layoutSt);
       this.drawPeaks(editPeakSt);
@@ -863,11 +888,12 @@ class MultiFocus {
     const jcampIdx = curveIdx;
     this.isShowAllCurves = isShowAllCurve;
     this.entities = entities;
-    this.setDataParams(filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt, jcampIdx);
+    this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt, jcampIdx);
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.getShouldUpdate(editPeakSt);
       this.drawLine();
+      this.drawThres();
       this.drawGrid();
       this.drawOtherLines(layoutSt);
       this.drawPeaks(editPeakSt);

dist/components/multi_jcamps_viewer.js

@@ -88,7 +88,7 @@ class MultiJcampsViewer extends _react.default.Component {
       feature: feature,
       operations: operations,
       editorOnly: true,
-      hideThreshold: true
+      hideThreshold: !_format.default.isNmrLayout(layoutSt)
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "react-spectrum-editor"
     }, /*#__PURE__*/_react.default.createElement(_Grid.default, {

dist/helpers/chem.js

@@ -164,7 +164,7 @@ const convertFrequency = (layout, feature) => {
   return parseFloat(freq) || false;
 };
 const ToFrequency = exports.ToFrequency = (0, _reselect.createSelector)(getLayout, getFeature, convertFrequency);
-const getThreshold = state => state.threshold ? state.threshold.value * 1.0 : false;
+const getThreshold = state => state.threshold ? state.threshold.list[state.curve.curveIdx].value * 1.0 : false;
 const Convert2Peak = function (feature, threshold, offset) {
   let upThreshold = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   let lowThreshold = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;

dist/layer_prism.js

@@ -113,7 +113,7 @@ const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {
   scanSt: state.scan,
-  thresSt: state.threshold,
+  thresSt: state.threshold.list[state.curve.curveIdx],
   uiSt: state.ui
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch);

dist/reducers/reducer_curve.js

@@ -9,7 +9,7 @@ var _action_type = require("../constants/action_type");
 var _extractParams = require("../helpers/extractParams");
 var _chem = require("../helpers/chem");
 var _format = _interopRequireDefault(require("../helpers/format"));
-/* eslint-disable prefer-object-spread, default-param-last */
+/* eslint-disable prefer-object-spread, default-param-last, max-len */
 
 const initialState = {
   listCurves: [],
@@ -26,8 +26,11 @@ const setAllCurves = (state, action) => {
         topic,
         feature,
         hasEdit,
-        integration
-      } = (0, _extractParams.extractParams)(entity, 1);
+        integration,
+        multiplicity
+      } = (0, _extractParams.extractParams)(entity, {
+        isEdit: true
+      });
       // const layout = entity.layout;
       const {
         layout
@@ -40,6 +43,7 @@ const setAllCurves = (state, action) => {
         feature,
         hasEdit,
         integration,
+        multiplicity,
         maxminPeak,
         color,
         curveIdx: idx