@complat/react-spectra-editor 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/components/cmd_bar/r01_layout.js

@@ -309,6 +309,15 @@ var layoutSelect = function layoutSelect(classes, layoutSt, updateLayoutAct) {
           { className: (0, _classnames2.default)(classes.txtOpt, 'option-sv-bar-layout') },
           'CV (CYCLIC VOLTAMMETRY)'
         )
+      ),
+      _react2.default.createElement(
+        _MenuItem2.default,
+        { value: _list_layout.LIST_LAYOUT.SEC },
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.txtOpt, 'option-sv-bar-layout') },
+          'SEC'
+        )
       )
     )
   );

package/dist/components/d3_line/line_focus.js

@@ -767,7 +767,7 @@ var LineFocus = function () {
   }, {
     key: 'reverseXAxis',
     value: function reverseXAxis(layoutSt) {
-      return [_list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS, _list_layout.LIST_LAYOUT.TGA, _list_layout.LIST_LAYOUT.XRD, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY].indexOf(layoutSt) < 0;
+      return [_list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS, _list_layout.LIST_LAYOUT.TGA, _list_layout.LIST_LAYOUT.XRD, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY, _list_layout.LIST_LAYOUT.SEC].indexOf(layoutSt) < 0;
     }
   }, {
     key: 'create',

package/dist/components/d3_multi/multi_focus.js

@@ -190,19 +190,27 @@ var MultiFocus = function () {
       this.jcampIdx = jcampIdx;
       this.data = [];
       this.otherLineData = [];
+      var filterSubLayoutValue = null;
       this.entities.forEach(function (entry, idx) {
         var topic = entry.topic,
             feature = entry.feature,
             color = entry.color;
 
         var currData = (0, _chem.convertTopic)(topic, layout, feature, 0);
+
         if (idx === _this.jcampIdx) {
           _this.data = [].concat(_toConsumableArray(currData));
           _this.pathColor = color;
+          filterSubLayoutValue = feature.xUnit;
         } else {
-          _this.otherLineData.push({ data: currData, color: color });
+          _this.otherLineData.push({ data: currData, color: color, filterSublayout: feature.xUnit });
         }
       });
+      if (_format2.default.isSECLayout(layout)) {
+        this.otherLineData = this.otherLineData.filter(function (data) {
+          return data.filterSublayout === filterSubLayoutValue;
+        });
+      }
 
       this.dataPks = [].concat(_toConsumableArray(peaks));
       this.tTrEndPts = tTrEndPts;
@@ -348,7 +356,8 @@ var MultiFocus = function () {
         this.dataPks = [];
         this.dataPks = (0, _converter.PksEdit)(this.dataPks, editPeakSt, spectra.list);
       } else {
-        this.dataPks = (0, _converter.PksEdit)(this.dataPks, editPeakSt, []);
+        var newEditPeaks = Object.assign({}, editPeakSt, { selectedIdx: this.jcampIdx });
+        this.dataPks = (0, _converter.PksEdit)(this.dataPks, newEditPeaks, []);
       }
 
       return this.dataPks;
@@ -892,7 +901,7 @@ var MultiFocus = function () {
   }, {
     key: 'reverseXAxis',
     value: function reverseXAxis(layoutSt) {
-      return [_list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS, _list_layout.LIST_LAYOUT.TGA, _list_layout.LIST_LAYOUT.XRD, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY].indexOf(layoutSt) < 0;
+      return [_list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS, _list_layout.LIST_LAYOUT.TGA, _list_layout.LIST_LAYOUT.XRD, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY, _list_layout.LIST_LAYOUT.SEC].indexOf(layoutSt) < 0;
     }
   }, {
     key: 'create',

package/dist/components/multi_jcamps_viewer.js

@@ -63,6 +63,21 @@ var styles = function styles() {
   };
 };
 
+var seperatingSubLayout = function seperatingSubLayout(entities, featureCondition) {
+  var storedDict = {};
+  entities.forEach(function (entity) {
+    var feature = entity.feature;
+
+    var keyValue = feature[featureCondition];
+    if (keyValue in storedDict) {
+      storedDict[keyValue].push(entity);
+    } else {
+      storedDict[keyValue] = [entity];
+    }
+  });
+  return Object.assign({}, storedDict);
+};
+
 var MultiJcampsViewer = function (_React$Component) {
   _inherits(MultiJcampsViewer, _React$Component);
 
@@ -85,6 +100,7 @@ var MultiJcampsViewer = function (_React$Component) {
 
       if (!entities || entities.length === 0) return _react2.default.createElement('div', null);
 
+      var seperatedSubLayouts = seperatingSubLayout(entities, 'xUnit');
       var entity = entities[curvSt.curveIdx];
       var feature = entity.feature,
           topic = entity.topic,
@@ -126,6 +142,7 @@ var MultiJcampsViewer = function (_React$Component) {
                 userManualLink: userManualLink,
                 feature: feature,
                 molSvg: molSvg,
+                subLayoutsInfo: seperatedSubLayouts,
                 descriptions: '',
                 canChangeDescription: function canChangeDescription() {},
                 onDescriptionChanged: function onDescriptionChanged() {}

package/dist/components/panel/graph_selection.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -73,7 +75,8 @@ var GraphSelectionPanel = function GraphSelectionPanel(_ref) {
   var classes = _ref.classes,
       curveSt = _ref.curveSt,
       selectCurveAct = _ref.selectCurveAct,
-      entityFileNames = _ref.entityFileNames;
+      entityFileNames = _ref.entityFileNames,
+      subLayoutsInfo = _ref.subLayoutsInfo;
 
 
   if (!curveSt) {
@@ -82,11 +85,43 @@ var GraphSelectionPanel = function GraphSelectionPanel(_ref) {
   var curveIdx = curveSt.curveIdx,
       listCurves = curveSt.listCurves;
 
+  if (!listCurves) {
+    return _react2.default.createElement('span', null);
+  }
 
   var onChange = function onChange(idx) {
     selectCurveAct(idx);
   };
 
+  var subLayoutValues = [];
+  if (subLayoutsInfo !== undefined && subLayoutsInfo !== null) {
+    subLayoutValues = Object.keys(subLayoutsInfo);
+  }
+
+  var onChangeTabSubLayout = function onChangeTabSubLayout(event, newValue) {
+    setSelectedSublayout(newValue);
+  };
+
+  var _useState = (0, _react.useState)(subLayoutValues[0]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedSubLayout = _useState2[0],
+      setSelectedSublayout = _useState2[1];
+
+  var itemsSubLayout = [];
+  if (selectedSubLayout && subLayoutValues.length > 1) {
+    var subLayout = subLayoutsInfo[selectedSubLayout];
+    itemsSubLayout = subLayout.map(function (spectra, idx) {
+      var color = spectra.color,
+          curveIdx = spectra.curveIdx;
+
+      var filename = '';
+      if (entityFileNames && curveIdx < entityFileNames.length) {
+        filename = entityFileNames[curveIdx];
+      }
+      return { name: idx + 1 + '.', idx: curveIdx, color: color, filename: filename };
+    });
+  };
+
   var items = listCurves.map(function (spectra, idx) {
     var color = spectra.color;
 
@@ -98,12 +133,12 @@ var GraphSelectionPanel = function GraphSelectionPanel(_ref) {
   });
 
   return _react2.default.createElement(
-    _core.ExpansionPanel,
-    null,
+    _core.Accordion,
+    { 'data-testid': 'GraphSelectionPanel' },
     _react2.default.createElement(
-      _core.ExpansionPanelSummary,
+      _core.AccordionSummary,
       {
-        xpandIcon: _react2.default.createElement(_ExpandMore2.default, null),
+        expandIcon: _react2.default.createElement(_ExpandMore2.default, null),
         className: (0, _classnames2.default)(classes.panelSummary)
       },
       _react2.default.createElement(
@@ -117,7 +152,64 @@ var GraphSelectionPanel = function GraphSelectionPanel(_ref) {
       )
     ),
     _react2.default.createElement(_Divider2.default, null),
-    _react2.default.createElement(
+    subLayoutValues && subLayoutValues.length > 1 ? _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(
+        _core.Tabs,
+        { value: selectedSubLayout, onChange: onChangeTabSubLayout },
+        subLayoutValues.map(function (subLayout, i) {
+          var subLayoutName = '';
+          switch (subLayout) {
+            case 'G/MOL':
+              subLayoutName = 'MWD';
+              break;
+            case 'MILLILITERS':
+              subLayoutName = 'ELU';
+              break;
+            default:
+              break;
+          }
+          return _react2.default.createElement(_core.Tab, { key: i, value: subLayout, label: subLayoutName });
+        })
+      ),
+      _react2.default.createElement(
+        _core.List,
+        null,
+        itemsSubLayout.map(function (item) {
+          return _react2.default.createElement(
+            _core.ListItem,
+            {
+              key: item.idx,
+              onClick: function onClick() {
+                return onChange(item.idx);
+              },
+              className: (0, _classnames2.default)(item.idx === curveIdx ? classes.curveSelected : classes.curveDefault)
+            },
+            _react2.default.createElement(
+              'span',
+              { className: (0, _classnames2.default)(classes.curve) },
+              _react2.default.createElement(
+                'i',
+                null,
+                item.name
+              ),
+              _react2.default.createElement(
+                'span',
+                { style: { float: "right", width: "95%" } },
+                _react2.default.createElement('hr', { className: (0, _classnames2.default)(classes.line), style: { backgroundColor: item.color } }),
+                item.filename !== '' ? _react2.default.createElement(
+                  'span',
+                  null,
+                  'File: ',
+                  item.filename
+                ) : null
+              )
+            )
+          );
+        })
+      )
+    ) : _react2.default.createElement(
       _core.List,
       null,
       items.map(function (item) {
@@ -178,7 +270,8 @@ GraphSelectionPanel.propTypes = {
   onExapnd: _propTypes2.default.func.isRequired,
   curveSt: _propTypes2.default.object.isRequired,
   selectCurveAct: _propTypes2.default.func.isRequired,
-  entityFileNames: _propTypes2.default.array.isRequired
+  entityFileNames: _propTypes2.default.array.isRequired,
+  subLayoutsInfo: _propTypes2.default.array
 };
 
 exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(GraphSelectionPanel));

package/dist/components/panel/index.js

@@ -131,7 +131,8 @@ var PanelViewer = function (_React$Component) {
           jcampIdx = _props.jcampIdx,
           entityFileNames = _props.entityFileNames,
           curveSt = _props.curveSt,
-          userManualLink = _props.userManualLink;
+          userManualLink = _props.userManualLink,
+          subLayoutsInfo = _props.subLayoutsInfo;
 
       var onExapndInfo = function onExapndInfo() {
         return _this2.onExapnd('info');
@@ -164,7 +165,7 @@ var PanelViewer = function (_React$Component) {
           {
             theme: theme
           },
-          hideGraphSelection ? null : _react2.default.createElement(_graph_selection2.default, { jcampIdx: jcampIdx, entityFileNames: entityFileNames, expand: expand === 'graph', onExapnd: onExapndGraphSelection }),
+          hideGraphSelection ? null : _react2.default.createElement(_graph_selection2.default, { jcampIdx: jcampIdx, entityFileNames: entityFileNames, expand: expand === 'graph', onExapnd: onExapndGraphSelection, subLayoutsInfo: subLayoutsInfo }),
           _react2.default.createElement(_info2.default, {
             feature: feature,
             integration: integration,
@@ -213,7 +214,8 @@ PanelViewer.propTypes = {
   onDescriptionChanged: _propTypes2.default.func,
   entityFileNames: _propTypes2.default.array,
   userManualLink: _propTypes2.default.object,
-  curveSt: _propTypes2.default.object.isRequired
+  curveSt: _propTypes2.default.object.isRequired,
+  subLayoutsInfo: _propTypes2.default.object
 };
 
 exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(PanelViewer));

package/dist/components/panel/peaks.js

@@ -20,13 +20,7 @@ var _reactRedux = require('react-redux');
 
 var _redux = require('redux');
 
-var _ExpansionPanel = require('@material-ui/core/ExpansionPanel');
-
-var _ExpansionPanel2 = _interopRequireDefault(_ExpansionPanel);
-
-var _ExpansionPanelSummary = require('@material-ui/core/ExpansionPanelSummary');
-
-var _ExpansionPanelSummary2 = _interopRequireDefault(_ExpansionPanelSummary);
+var _core = require('@material-ui/core');
 
 var _ExpandMore = require('@material-ui/icons/ExpandMore');
 
@@ -66,6 +60,8 @@ var _HighlightOff2 = _interopRequireDefault(_HighlightOff);
 
 var _styles = require('@material-ui/core/styles');
 
+var _chem = require('../../helpers/chem');
+
 var _edit_peak = require('../../actions/edit_peak');
 
 var _format = require('../../helpers/format');
@@ -227,22 +223,44 @@ var PeakPanel = function PeakPanel(_ref) {
       expand = _ref.expand,
       onExapnd = _ref.onExapnd,
       rmFromPosListAct = _ref.rmFromPosListAct,
-      rmFromNegListAct = _ref.rmFromNegListAct;
-  var neg = editPeakSt.neg,
-      pos = editPeakSt.pos;
+      rmFromNegListAct = _ref.rmFromNegListAct,
+      curveSt = _ref.curveSt;
+  var curveIdx = curveSt.curveIdx,
+      listCurves = curveSt.listCurves;
+  var peaks = editPeakSt.peaks;
+
+  if (curveIdx >= peaks.length) {
+    return null;
+  }
+  var selectedEditPeaks = peaks[curveIdx];
+  if (!selectedEditPeaks) {
+    return null;
+  }
+  var pos = selectedEditPeaks.pos;
+
+
+  var selectedCurve = listCurves[curveIdx];
+  if (!selectedCurve) {
+    return null;
+  }
+  var feature = selectedCurve.feature;
+
+  var currentPeakOfCurve = (0, _chem.Convert2Peak)(feature);
+
+  var peaksData = [].concat(currentPeakOfCurve).concat(pos);
 
   var digits = _format2.default.isEmWaveLayout(layoutSt) ? 0 : 4;
 
   return _react2.default.createElement(
-    _ExpansionPanel2.default,
-    {
+    _core.Accordion,
+    { 'data-testid': 'PeaksPanelInfo',
       expanded: expand,
       onChange: onExapnd,
       className: (0, _classnames2.default)(classes.panel),
       TransitionProps: { unmountOnExit: true } // increase ExpansionPanel performance
     },
     _react2.default.createElement(
-      _ExpansionPanelSummary2.default,
+      _core.AccordionSummary,
       {
         expandIcon: _react2.default.createElement(_ExpandMore2.default, null),
         className: (0, _classnames2.default)(classes.panelSummary)
@@ -261,8 +279,7 @@ var PeakPanel = function PeakPanel(_ref) {
     _react2.default.createElement(
       'div',
       { className: (0, _classnames2.default)(classes.panelDetail) },
-      peakList(pos, digits, rmFromPosListAct, classes, true),
-      peakList(neg, digits, rmFromNegListAct, classes, false)
+      peakList(peaksData, digits, rmFromPosListAct, classes, true)
     )
   );
 };
@@ -271,7 +288,8 @@ var mapStateToProps = function mapStateToProps(state, props) {
   return (// eslint-disable-line
     {
       editPeakSt: state.editPeak.present,
-      layoutSt: state.layout
+      layoutSt: state.layout,
+      curveSt: state.curve
     }
   );
 };
@@ -290,7 +308,8 @@ PeakPanel.propTypes = {
   layoutSt: _propTypes2.default.string.isRequired,
   onExapnd: _propTypes2.default.func.isRequired,
   rmFromPosListAct: _propTypes2.default.func.isRequired,
-  rmFromNegListAct: _propTypes2.default.func.isRequired
+  rmFromNegListAct: _propTypes2.default.func.isRequired,
+  curveSt: _propTypes2.default.object.isRequired
 };
 
 exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(PeakPanel));

package/dist/constants/list_layout.js

@@ -18,7 +18,8 @@ var LIST_LAYOUT = {
   TGA: 'THERMOGRAVIMETRIC ANALYSIS',
   XRD: 'X-RAY DIFFRACTION',
   HPLC_UVVIS: 'HPLC UV/VIS',
-  CYCLIC_VOLTAMMETRY: 'CYCLIC VOLTAMMETRY'
+  CYCLIC_VOLTAMMETRY: 'CYCLIC VOLTAMMETRY',
+  SEC: 'SIZE EXCLUSION CHROMATOGRAPHY'
 };
 
 exports.LIST_LAYOUT = LIST_LAYOUT;

package/dist/helpers/cfg.js

@@ -54,7 +54,7 @@ var btnCmdThres = function btnCmdThres(thresVal) {
 
 // const hidePanelPeak = layoutSt => Format.isMsLayout(layoutSt);
 var hidePanelPeak = function hidePanelPeak(layoutSt) {
-  return true;
+  return !_format2.default.isSECLayout(layoutSt);
 }; // eslint-disable-line
 
 var hidePanelMpy = function hidePanelMpy(layoutSt) {

package/dist/helpers/chem.js

@@ -155,10 +155,12 @@ var Convert2Peak = function Convert2Peak(feature, threshold, offset) {
       thresRef = feature.thresRef,
       minY = feature.minY,
       upperThres = feature.upperThres,
-      lowerThres = feature.lowerThres;
+      lowerThres = feature.lowerThres,
+      operation = feature.operation;
+  var layout = operation.layout;
 
 
-  if (upperThres || lowerThres) {
+  if (!_format2.default.isSECLayout(layout) && (upperThres || lowerThres)) {
     var upperThresVal = upThreshold || upperThres;
     if (!upperThresVal) {
       upperThresVal = 1.0;
@@ -185,7 +187,7 @@ var Convert2Peak = function Convert2Peak(feature, threshold, offset) {
     return peak;
   } else {
     var thresVal = threshold || thresRef;
-    var yThres = thresVal * maxY / 100.0;
+    var yThres = Number.parseFloat((thresVal * maxY / 100.0).toFixed(10));
     var _corrOffset = offset || 0.0;
     for (var _i = 0; _i < data.y.length; _i += 1) {
       var _y = data.y[_i];
@@ -333,6 +335,9 @@ var readLayout = function readLayout(jcamp) {
     if (dataType.includes('CYCLIC VOLTAMMETRY')) {
       return _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY;
     }
+    if (dataType.includes('SIZE EXCLUSION CHROMATOGRAPHY')) {
+      return _list_layout.LIST_LAYOUT.SEC;
+    }
   }
   return false;
 };
@@ -758,7 +763,7 @@ var ExtractJcamp = function ExtractJcamp(source) {
     features = extrFeaturesMs(jcamp, layout, peakUp);
   } else if (_format2.default.isXRDLayout(layout)) {
     features = extrFeaturesXrd(jcamp, layout, peakUp);
-  } else if (_format2.default.isCyclicVoltaLayout(layout)) {
+  } else if (_format2.default.isCyclicVoltaLayout(layout) || _format2.default.isSECLayout(layout)) {
     features = extrFeaturesCylicVolta(jcamp, layout, peakUp);
   } else {
     features = extrFeaturesNi(jcamp, layout, peakUp, spectra);

package/dist/helpers/converter.js

@@ -30,9 +30,16 @@ var pksRmNeg = function pksRmNeg(dataPks, editPeakSt) {
       peaks = editPeakSt.peaks;
 
   var selectedEditPeaks = peaks[selectedIdx];
+  if (!selectedEditPeaks) {
+    return dataPks;
+  }
 
   var neg = selectedEditPeaks.neg;
 
+  if (!neg) {
+    return dataPks;
+  }
+
   var negXs = neg.map(function (n) {
     return n.x;
   });
@@ -52,9 +59,16 @@ var pksAddPos = function pksAddPos(dataPks, editPeakSt) {
       peaks = editPeakSt.peaks;
 
   var selectedEditPeaks = peaks[selectedIdx];
+  if (!selectedEditPeaks) {
+    return dataPks;
+  }
 
   var pos = selectedEditPeaks.pos;
 
+  if (!pos) {
+    return dataPks;
+  }
+
   var posXs = pos.map(function (p) {
     return p.x;
   });

package/dist/helpers/format.js

@@ -25,6 +25,7 @@ var spectraDigit = function spectraDigit(layout) {
     case _list_layout.LIST_LAYOUT.TGA:
     case _list_layout.LIST_LAYOUT.XRD:
     case _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY:
+    case _list_layout.LIST_LAYOUT.SEC:
     case _list_layout.LIST_LAYOUT.MS:
       return 0;
     case _list_layout.LIST_LAYOUT.C13:
@@ -63,9 +64,10 @@ var toPeakStr = function toPeakStr(peaks) {
   return str;
 };
 
-var spectraOps = (_spectraOps = {}, _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.PLAIN, { head: '', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.H1, { head: '1H', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.C13, { head: '13C', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.F19, { head: '19F', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.P31, { head: '31P', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.N15, { head: '15N', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.Si29, { head: '29Si', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.IR, { head: 'IR', tail: ' cm-1' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.RAMAN, { head: 'RAMAN', tail: ' cm-1' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.UVVIS, { head: 'UV-VIS (absorption, solvent), λmax', tail: ' nm' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.HPLC_UVVIS, { head: 'HPLC UV/VIS (transmittance)', tail: '' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.TGA, { head: 'THERMOGRAVIMETRIC ANALYSIS', tail: ' SECONDS' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.MS, { head: 'MASS', tail: ' m/z' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.XRD, { head: 'X-RAY DIFFRACTION', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY, { head: 'CYCLIC VOLTAMMETRY', tail: '.' }), _spectraOps);
+var spectraOps = (_spectraOps = {}, _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.PLAIN, { head: '', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.H1, { head: '1H', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.C13, { head: '13C', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.F19, { head: '19F', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.P31, { head: '31P', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.N15, { head: '15N', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.Si29, { head: '29Si', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.IR, { head: 'IR', tail: ' cm-1' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.RAMAN, { head: 'RAMAN', tail: ' cm-1' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.UVVIS, { head: 'UV-VIS (absorption, solvent), λmax', tail: ' nm' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.HPLC_UVVIS, { head: 'HPLC UV/VIS (transmittance)', tail: '' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.TGA, { head: 'THERMOGRAVIMETRIC ANALYSIS', tail: ' SECONDS' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.MS, { head: 'MASS', tail: ' m/z' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.XRD, { head: 'X-RAY DIFFRACTION', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY, { head: 'CYCLIC VOLTAMMETRY', tail: '.' }), _defineProperty(_spectraOps, _list_layout.LIST_LAYOUT.SEC, { head: 'SIZE EXCLUSION CHROMATOGRAPHY', tail: '.' }), _spectraOps);
 
 var rmRef = function rmRef(peaks, shift) {
+  if (!shift) return peaks;
   var refValue = shift.ref.value || shift.peak.x;
   return peaks.map(function (p) {
     return (0, _converter.IsSame)(p.x, refValue) ? null : p;
@@ -299,6 +301,9 @@ var peaksBody = function peaksBody(_ref) {
   if (layout === _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY) {
     return formatedEm(ordered, maxY, decimal, isAscend, isIntensity, boundary, false);
   }
+  if (layout === _list_layout.LIST_LAYOUT.SEC) {
+    return formatedEm(ordered, maxY, decimal, isAscend, isIntensity, boundary, false);
+  }
   return ordered.map(function (o) {
     return fixDigit(o.x, decimal);
   }).join(', ');
@@ -363,6 +368,9 @@ var isXRDLayout = function isXRDLayout(layoutSt) {
 var isCyclicVoltaLayout = function isCyclicVoltaLayout(layoutSt) {
   return _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY === layoutSt;
 };
+var isSECLayout = function isSECLayout(layoutSt) {
+  return _list_layout.LIST_LAYOUT.SEC === layoutSt;
+};
 var isEmWaveLayout = function isEmWaveLayout(layoutSt) {
   return [_list_layout.LIST_LAYOUT.IR, _list_layout.LIST_LAYOUT.RAMAN, _list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS].indexOf(layoutSt) >= 0;
 };
@@ -453,6 +461,7 @@ var Format = {
   isTGALayout: isTGALayout,
   isXRDLayout: isXRDLayout,
   isCyclicVoltaLayout: isCyclicVoltaLayout,
+  isSECLayout: isSECLayout,
   isEmWaveLayout: isEmWaveLayout,
   fixDigit: fixDigit,
   formatPeaksByPrediction: formatPeaksByPrediction,

package/dist/index.js

@@ -134,6 +134,22 @@ var _cyclic_voltammetry_5 = require('./__tests__/fixtures/cyclic_voltammetry_3')
 
 var _cyclic_voltammetry_6 = _interopRequireDefault(_cyclic_voltammetry_5);
 
+var _sec_1_jcamp = require('./__tests__/fixtures/sec_1_jcamp');
+
+var _sec_1_jcamp2 = _interopRequireDefault(_sec_1_jcamp);
+
+var _sec_2_jcamp = require('./__tests__/fixtures/sec_2_jcamp');
+
+var _sec_2_jcamp2 = _interopRequireDefault(_sec_2_jcamp);
+
+var _sec_3_jcamp = require('./__tests__/fixtures/sec_3_jcamp');
+
+var _sec_3_jcamp2 = _interopRequireDefault(_sec_3_jcamp);
+
+var _sec_4_jcamp = require('./__tests__/fixtures/sec_4_jcamp');
+
+var _sec_4_jcamp2 = _interopRequireDefault(_sec_4_jcamp);
+
 var _qDescValue = require('./__tests__/fixtures/qDescValue');
 
 require('./__tests__/style/svg.css');
@@ -171,6 +187,10 @@ var xrdEntity2 = _app.FN.ExtractJcamp(_xrd_jcamp_4.default);
 var cyclicVoltaEntity1 = _app.FN.ExtractJcamp(_cyclic_voltammetry_2.default);
 var cyclicVoltaEntity2 = _app.FN.ExtractJcamp(_cyclic_voltammetry_4.default);
 var cyclicVoltaEntity3 = _app.FN.ExtractJcamp(_cyclic_voltammetry_6.default);
+var secEntity1 = _app.FN.ExtractJcamp(_sec_1_jcamp2.default);
+var secEntity2 = _app.FN.ExtractJcamp(_sec_2_jcamp2.default);
+var secEntity3 = _app.FN.ExtractJcamp(_sec_3_jcamp2.default);
+var secEntity4 = _app.FN.ExtractJcamp(_sec_4_jcamp2.default);
 
 var DemoWriteIr = function (_React$Component) {
   _inherits(DemoWriteIr, _React$Component);
@@ -466,6 +486,8 @@ var DemoWriteIr = function (_React$Component) {
           return xrdEntity1;
         case 'cyclic volta':
           return cyclicVoltaEntity2;
+        case 'sec':
+          return secEntity1;
         case 'ms':
         default:
           return msEntity;
@@ -487,6 +509,8 @@ var DemoWriteIr = function (_React$Component) {
           return [compIr1Entity, compIr2Entity];
         case 'multi xrd':
           return [xrdEntity1, xrdEntity2];
+        case 'sec':
+          return [secEntity1, secEntity2, secEntity3, secEntity4];
         default:
           return false;
       }
@@ -516,6 +540,7 @@ var DemoWriteIr = function (_React$Component) {
         case 'xrd':
         case 'ms':
         case 'cyclic volta':
+        case 'sec':
         default:
           return false;
       }
@@ -715,6 +740,15 @@ var DemoWriteIr = function (_React$Component) {
             },
             'CV'
           ),
+          _react2.default.createElement(
+            _Button2.default,
+            {
+              variant: 'contained',
+              style: { margin: '0 10px 0 10px' },
+              onClick: this.onClick('sec')
+            },
+            'SEC'
+          ),
           _react2.default.createElement(
             _Button2.default,
             {

package/dist/reducers/reducer_curve.js

@@ -35,7 +35,7 @@ var setAllCurves = function setAllCurves(state, action) {
       var layout = entity.layout;
       var maxminPeak = (0, _chem.Convert2MaxMinPeak)(layout, feature, 0);
       var color = _format2.default.mutiEntitiesColors(idx);
-      return { layout: layout, topic: topic, feature: feature, hasEdit: hasEdit, integration: integration, maxminPeak: maxminPeak, color: color };
+      return { layout: layout, topic: topic, feature: feature, hasEdit: hasEdit, integration: integration, maxminPeak: maxminPeak, color: color, curveIdx: idx };
     });
 
     return Object.assign({}, state, { curveIdx: 0, listCurves: entities });

package/dist/sagas/saga_ui.js

@@ -214,277 +214,283 @@ var getUiSweepType = function getUiSweepType(state) {
 };
 
 function clickUiTarget(action) {
-  var payload, onPeak, voltammetryPeakIdx, onPecker, jcampIdx, uiSweepType, xExtent, xL, xU;
+  var payload, onPeak, voltammetryPeakIdx, onPecker, uiSweepType, curveSt, curveIdx, xExtent, xL, xU;
   return regeneratorRuntime.wrap(function clickUiTarget$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
         case 0:
-          payload = action.payload, onPeak = action.onPeak, voltammetryPeakIdx = action.voltammetryPeakIdx, onPecker = action.onPecker, jcampIdx = action.jcampIdx;
+          payload = action.payload, onPeak = action.onPeak, voltammetryPeakIdx = action.voltammetryPeakIdx, onPecker = action.onPecker;
           _context3.next = 3;
           return (0, _effects.select)(getUiSweepType);
 
         case 3:
           uiSweepType = _context3.sent;
+          _context3.next = 6;
+          return (0, _effects.select)(getCurveSt);
+
+        case 6:
+          curveSt = _context3.sent;
+          curveIdx = curveSt.curveIdx;
 
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.PEAK_ADD && !onPeak)) {
-            _context3.next = 9;
+            _context3.next = 13;
             break;
           }
 
-          _context3.next = 7;
+          _context3.next = 11;
           return (0, _effects.put)({
             type: _action_type.EDITPEAK.ADD_POSITIVE,
-            payload: { dataToAdd: payload, curveIdx: jcampIdx }
+            payload: { dataToAdd: payload, curveIdx: curveIdx }
           });
 
-        case 7:
-          _context3.next = 84;
+        case 11:
+          _context3.next = 88;
           break;
 
-        case 9:
+        case 13:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.PEAK_DELETE && onPeak)) {
-            _context3.next = 14;
+            _context3.next = 18;
             break;
           }
 
-          _context3.next = 12;
+          _context3.next = 16;
           return (0, _effects.put)({
             type: _action_type.EDITPEAK.ADD_NEGATIVE,
-            payload: { dataToAdd: payload, curveIdx: jcampIdx }
+            payload: { dataToAdd: payload, curveIdx: curveIdx }
           });
 
-        case 12:
-          _context3.next = 84;
+        case 16:
+          _context3.next = 88;
           break;
 
-        case 14:
+        case 18:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.ANCHOR_SHIFT && onPeak)) {
-            _context3.next = 19;
+            _context3.next = 23;
             break;
           }
 
-          _context3.next = 17;
+          _context3.next = 21;
           return (0, _effects.put)({
             type: _action_type.SHIFT.SET_PEAK,
-            payload: { dataToSet: payload, curveIdx: jcampIdx }
+            payload: { dataToSet: payload, curveIdx: curveIdx }
           });
 
-        case 17:
-          _context3.next = 84;
+        case 21:
+          _context3.next = 88;
           break;
 
-        case 19:
+        case 23:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_RM && onPeak)) {
-            _context3.next = 24;
+            _context3.next = 28;
             break;
           }
 
-          _context3.next = 22;
+          _context3.next = 26;
           return (0, _effects.put)({
             type: _action_type.INTEGRATION.RM_ONE,
-            payload: { dataToRemove: payload, curveIdx: jcampIdx }
+            payload: { dataToRemove: payload, curveIdx: curveIdx }
           });
 
-        case 22:
-          _context3.next = 84;
+        case 26:
+          _context3.next = 88;
           break;
 
-        case 24:
+        case 28:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.MULTIPLICITY_ONE_RM && onPeak)) {
-            _context3.next = 29;
+            _context3.next = 33;
             break;
           }
 
-          _context3.next = 27;
+          _context3.next = 31;
           return (0, _effects.put)({
             type: _action_type.INTEGRATION.RM_ONE,
-            payload: { dataToRemove: payload, curveIdx: jcampIdx }
+            payload: { dataToRemove: payload, curveIdx: curveIdx }
           });
 
-        case 27:
-          _context3.next = 84;
+        case 31:
+          _context3.next = 88;
           break;
 
-        case 29:
+        case 33:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_SET_REF && onPeak)) {
-            _context3.next = 34;
+            _context3.next = 38;
             break;
           }
 
-          _context3.next = 32;
+          _context3.next = 36;
           return (0, _effects.put)({
             type: _action_type.INTEGRATION.SET_REF,
-            payload: { refData: payload, curveIdx: jcampIdx }
+            payload: { refData: payload, curveIdx: curveIdx }
           });
 
-        case 32:
-          _context3.next = 84;
+        case 36:
+          _context3.next = 88;
           break;
 
-        case 34:
+        case 38:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.MULTIPLICITY_ONE_CLICK && onPeak)) {
-            _context3.next = 46;
+            _context3.next = 50;
             break;
           }
 
           xExtent = payload.xExtent, xL = payload.xL, xU = payload.xU;
 
           if (!xExtent) {
-            _context3.next = 41;
+            _context3.next = 45;
             break;
           }
 
-          _context3.next = 39;
+          _context3.next = 43;
           return (0, _effects.put)({
             type: _action_type.MULTIPLICITY.ONE_CLICK_BY_UI,
-            payload: { payloadData: xExtent, curveIdx: jcampIdx }
+            payload: { payloadData: xExtent, curveIdx: curveIdx }
           });
 
-        case 39:
-          _context3.next = 44;
+        case 43:
+          _context3.next = 48;
           break;
 
-        case 41:
+        case 45:
           if (!(xL && xU)) {
-            _context3.next = 44;
+            _context3.next = 48;
             break;
           }
 
-          _context3.next = 44;
+          _context3.next = 48;
           return (0, _effects.put)({
             type: _action_type.MULTIPLICITY.ONE_CLICK_BY_UI,
-            payload: { payloadData: { xL: xL, xU: xU }, curveIdx: jcampIdx }
+            payload: { payloadData: { xL: xL, xU: xU }, curveIdx: curveIdx }
           });
 
-        case 44:
-          _context3.next = 84;
+        case 48:
+          _context3.next = 88;
           break;
 
-        case 46:
+        case 50:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.MULTIPLICITY_PEAK_ADD)) {
-            _context3.next = 51;
+            _context3.next = 55;
             break;
           }
 
-          _context3.next = 49;
+          _context3.next = 53;
           return (0, _effects.put)({
             type: _action_type.MULTIPLICITY.PEAK_ADD_BY_UI_SAG,
             payload: payload
           });
 
-        case 49:
-          _context3.next = 84;
+        case 53:
+          _context3.next = 88;
           break;
 
-        case 51:
+        case 55:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.MULTIPLICITY_PEAK_RM && onPeak)) {
-            _context3.next = 56;
+            _context3.next = 60;
             break;
           }
 
-          _context3.next = 54;
+          _context3.next = 58;
           return (0, _effects.put)({
             type: _action_type.MULTIPLICITY.PEAK_RM_BY_UI,
             payload: payload
           });
 
-        case 54:
-          _context3.next = 84;
+        case 58:
+          _context3.next = 88;
           break;
 
-        case 56:
+        case 60:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_MAX_PEAK && !onPeak)) {
-            _context3.next = 61;
+            _context3.next = 65;
             break;
           }
 
-          _context3.next = 59;
+          _context3.next = 63;
           return (0, _effects.put)({
             type: _action_type.CYCLIC_VOLTA_METRY.ADD_MAX_PEAK,
-            payload: { peak: payload, index: voltammetryPeakIdx, jcampIdx: jcampIdx }
+            payload: { peak: payload, index: voltammetryPeakIdx, jcampIdx: curveIdx }
           });
 
-        case 59:
-          _context3.next = 84;
+        case 63:
+          _context3.next = 88;
           break;
 
-        case 61:
+        case 65:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_MAX_PEAK && onPeak)) {
-            _context3.next = 66;
+            _context3.next = 70;
             break;
           }
 
-          _context3.next = 64;
+          _context3.next = 68;
           return (0, _effects.put)({
             type: _action_type.CYCLIC_VOLTA_METRY.REMOVE_MAX_PEAK,
-            payload: { index: voltammetryPeakIdx, jcampIdx: jcampIdx }
+            payload: { index: voltammetryPeakIdx, jcampIdx: curveIdx }
           });
 
-        case 64:
-          _context3.next = 84;
+        case 68:
+          _context3.next = 88;
           break;
 
-        case 66:
+        case 70:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_MIN_PEAK && !onPeak)) {
-            _context3.next = 71;
+            _context3.next = 75;
             break;
           }
 
-          _context3.next = 69;
+          _context3.next = 73;
           return (0, _effects.put)({
             type: _action_type.CYCLIC_VOLTA_METRY.ADD_MIN_PEAK,
-            payload: { peak: payload, index: voltammetryPeakIdx, jcampIdx: jcampIdx }
+            payload: { peak: payload, index: voltammetryPeakIdx, jcampIdx: curveIdx }
           });
 
-        case 69:
-          _context3.next = 84;
+        case 73:
+          _context3.next = 88;
           break;
 
-        case 71:
+        case 75:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_MIN_PEAK && onPeak)) {
-            _context3.next = 76;
+            _context3.next = 80;
             break;
           }
 
-          _context3.next = 74;
+          _context3.next = 78;
           return (0, _effects.put)({
             type: _action_type.CYCLIC_VOLTA_METRY.REMOVE_MIN_PEAK,
-            payload: { index: voltammetryPeakIdx, jcampIdx: jcampIdx }
+            payload: { index: voltammetryPeakIdx, jcampIdx: curveIdx }
           });
 
-        case 74:
-          _context3.next = 84;
+        case 78:
+          _context3.next = 88;
           break;
 
-        case 76:
+        case 80:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_PECKER && !onPecker)) {
-            _context3.next = 81;
+            _context3.next = 85;
             break;
           }
 
-          _context3.next = 79;
+          _context3.next = 83;
           return (0, _effects.put)({
             type: _action_type.CYCLIC_VOLTA_METRY.ADD_PECKER,
-            payload: { peak: payload, index: voltammetryPeakIdx, jcampIdx: jcampIdx }
+            payload: { peak: payload, index: voltammetryPeakIdx, jcampIdx: curveIdx }
           });
 
-        case 79:
-          _context3.next = 84;
+        case 83:
+          _context3.next = 88;
           break;
 
-        case 81:
+        case 85:
           if (!(uiSweepType === _list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_PECKER && onPecker)) {
-            _context3.next = 84;
+            _context3.next = 88;
             break;
           }
 
-          _context3.next = 84;
+          _context3.next = 88;
           return (0, _effects.put)({
             type: _action_type.CYCLIC_VOLTA_METRY.REMOVE_PECKER,
-            payload: { index: voltammetryPeakIdx, jcampIdx: jcampIdx }
+            payload: { index: voltammetryPeakIdx, jcampIdx: curveIdx }
           });
 
-        case 84:
+        case 88:
         case 'end':
           return _context3.stop();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@complat/react-spectra-editor",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.6",
   "description": "An editor to View and Edit Chemical Spectra data (NMR, IR and MS).",
   "repository": {
     "type": "git",
@@ -13,6 +13,12 @@
     "@material-ui/icons": "^4.10.0",
     "@mdi/js": "^4.7.95",
     "@mdi/react": "^1.2.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "12.1.5",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.34",
+    "@types/react-dom": "^18.0.11",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
@@ -34,13 +40,15 @@
     "redux-saga": "^1.1.3",
     "redux-undo": "^1.0.1",
     "regenerator-transform": "^0.13.3",
-    "reselect": "^4.0.0"
+    "reselect": "^4.0.0",
+    "typescript": "^5.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "compile": "rm -rf dist && NODE_ENV=production babel --ignore tests,stories ./src --out-dir ./dist",
     "test": "react-scripts test --env=jsdom --verbose --testPathIgnorePatterns=./src/__tests__/fixtures/",
+    "test:coverage": "CI=true react-scripts test --env=jsdom --verbose --testPathIgnorePatterns=./src/__tests__/fixtures/ --coverage",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 3001 -c .storybook",
     "buildbook": "build-storybook -c .storybook -o .out"
@@ -50,7 +58,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@storybook/react": "^5.0.0",
+    "@storybook/react": "6.1.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "eslint-config-airbnb": "^19.0.4",
@@ -62,7 +70,8 @@
     "react-dom": "^17.0.2",
     "react-scripts": "^2.1.1",
     "react-select": "^4.0.0",
-    "redux-logger": "^3.0.6"
+    "redux-logger": "^3.0.6",
+    "redux-mock-store": "^1.5.4"
   },
   "main": "dist/app.js",
   "module": "dist/app.js",