@complat/react-spectra-editor 0.10.13 → 0.10.14-alpha.2

package/dist/components/d3_line/line_focus.js

@@ -450,14 +450,6 @@ var LineFocus = function () {
       var ignoreRef = _format2.default.isHplcUvVisLayout(this.layout);
       var itgs = isDisable ? [] : stack;
 
-      if (itgs.length === 0 || isDisable) {
-        // remove drawn are under curve
-        var auc = this.tags.aucPath.selectAll('path').data(stack);
-        auc.exit().attr('class', 'exit').remove();
-        auc.merge(auc);
-        return;
-      }
-
       var igbp = this.tags.igbPath.selectAll('path').data(itgs);
       igbp.exit().attr('class', 'exit').remove();
       var igcp = this.tags.igcPath.selectAll('path').data(itgs);
@@ -467,10 +459,10 @@ var LineFocus = function () {
       igtp.exit().attr('class', 'exit').remove();
 
       if (itgs.length === 0 || isDisable) {
-        // remove drawn are under curve
-        var _auc = this.tags.aucPath.selectAll('path').data(stack);
-        _auc.exit().attr('class', 'exit').remove();
-        _auc.merge(_auc);
+        // remove drawn area under curve
+        var auc = this.tags.aucPath.selectAll('path').data(stack);
+        auc.exit().attr('class', 'exit').remove();
+        auc.merge(auc);
         return;
       }
 

package/dist/components/d3_multi/index copy.js

@@ -0,0 +1,275 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactRedux = require('react-redux');
+
+var _redux = require('redux');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _chem = require('../../helpers/chem');
+
+var _manager = require('../../actions/manager');
+
+var _ui = require('../../actions/ui');
+
+var _list_ui = require('../../constants/list_ui');
+
+var _cyclic_voltammetry = require('../../actions/cyclic_voltammetry');
+
+var _multi_focus = require('./multi_focus');
+
+var _multi_focus2 = _interopRequireDefault(_multi_focus);
+
+var _draw = require('../common/draw');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var W = Math.round(window.innerWidth * 0.90 * 9 / 12); // ROI
+var H = Math.round(window.innerHeight * 0.90 * 0.85); // ROI
+
+
+var ViewerMulti = function (_React$Component) {
+  _inherits(ViewerMulti, _React$Component);
+
+  function ViewerMulti(props) {
+    _classCallCheck(this, ViewerMulti);
+
+    var _this = _possibleConstructorReturn(this, (ViewerMulti.__proto__ || Object.getPrototypeOf(ViewerMulti)).call(this, props));
+
+    var _this$props = _this.props,
+        id = _this$props.id,
+        clickUiTargetAct = _this$props.clickUiTargetAct,
+        selectUiSweepAct = _this$props.selectUiSweepAct,
+        scrollUiWheelAct = _this$props.scrollUiWheelAct;
+
+    _this.rootKlass = '.d3Line' + id;
+
+    _this.focus = new _multi_focus2.default({
+      W: W, H: H, id: id, clickUiTargetAct: clickUiTargetAct, selectUiSweepAct: selectUiSweepAct, scrollUiWheelAct: scrollUiWheelAct
+    });
+
+    _this.normChange = _this.normChange.bind(_this);
+    _this.initMaxMinPeaks = _this.initMaxMinPeaks.bind(_this);
+    return _this;
+  }
+
+  _createClass(ViewerMulti, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _props = this.props,
+          seed = _props.seed,
+          peak = _props.peak,
+          cLabel = _props.cLabel,
+          xLabel = _props.xLabel,
+          yLabel = _props.yLabel,
+          feature = _props.feature,
+          tTrEndPts = _props.tTrEndPts,
+          tSfPeaks = _props.tSfPeaks,
+          editPeakSt = _props.editPeakSt,
+          layoutSt = _props.layoutSt,
+          sweepExtentSt = _props.sweepExtentSt,
+          isUiNoBrushSt = _props.isUiNoBrushSt,
+          isHidden = _props.isHidden,
+          resetAllAct = _props.resetAllAct,
+          cyclicvoltaSt = _props.cyclicvoltaSt;
+
+      (0, _draw.drawDestroy)(this.rootKlass);
+      resetAllAct(feature);
+      this.initMaxMinPeaks();
+
+      var filterSeed = seed;
+      var filterPeak = peak;
+
+      (0, _draw.drawMain)(this.rootKlass, W, H);
+      this.focus.create({
+        filterSeed: filterSeed,
+        filterPeak: filterPeak,
+        tTrEndPts: tTrEndPts,
+        tSfPeaks: tSfPeaks,
+        editPeakSt: editPeakSt,
+        layoutSt: layoutSt,
+        sweepExtentSt: sweepExtentSt,
+        isUiNoBrushSt: isUiNoBrushSt,
+        cyclicvoltaSt: cyclicvoltaSt
+      });
+      (0, _draw.drawLabel)(this.rootKlass, cLabel, xLabel, yLabel);
+      (0, _draw.drawDisplay)(this.rootKlass, isHidden);
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      var _props2 = this.props,
+          seed = _props2.seed,
+          peak = _props2.peak,
+          cLabel = _props2.cLabel,
+          xLabel = _props2.xLabel,
+          yLabel = _props2.yLabel,
+          tTrEndPts = _props2.tTrEndPts,
+          tSfPeaks = _props2.tSfPeaks,
+          editPeakSt = _props2.editPeakSt,
+          layoutSt = _props2.layoutSt,
+          sweepExtentSt = _props2.sweepExtentSt,
+          isUiNoBrushSt = _props2.isUiNoBrushSt,
+          isHidden = _props2.isHidden,
+          cyclicvoltaSt = _props2.cyclicvoltaSt;
+
+      this.normChange(prevProps);
+
+      this.initMaxMinPeaks();
+
+      var filterSeed = seed;
+      var filterPeak = peak;
+
+      this.focus.update({
+        filterSeed: filterSeed,
+        filterPeak: filterPeak,
+        tTrEndPts: tTrEndPts,
+        tSfPeaks: tSfPeaks,
+        editPeakSt: editPeakSt,
+        layoutSt: layoutSt,
+        sweepExtentSt: sweepExtentSt,
+        isUiNoBrushSt: isUiNoBrushSt,
+        cyclicvoltaSt: cyclicvoltaSt
+      });
+      (0, _draw.drawLabel)(this.rootKlass, cLabel, xLabel, yLabel);
+      (0, _draw.drawDisplay)(this.rootKlass, isHidden);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      (0, _draw.drawDestroy)(this.rootKlass);
+    }
+  }, {
+    key: 'normChange',
+    value: function normChange(prevProps) {
+      var _props3 = this.props,
+          feature = _props3.feature,
+          resetAllAct = _props3.resetAllAct;
+
+      var oldFeature = prevProps.feature;
+      if (oldFeature !== feature) {
+        resetAllAct(feature);
+      }
+    }
+  }, {
+    key: 'initMaxMinPeaks',
+    value: function initMaxMinPeaks() {
+      var _props4 = this.props,
+          entities = _props4.entities,
+          id = _props4.id,
+          cyclicvoltaSt = _props4.cyclicvoltaSt,
+          maxminPeakSt = _props4.maxminPeakSt,
+          addNewCylicVoltaPairPeakAct = _props4.addNewCylicVoltaPairPeakAct,
+          addCylicVoltaMaxPeakAct = _props4.addCylicVoltaMaxPeakAct,
+          addCylicVoltaMinPeakAct = _props4.addCylicVoltaMinPeakAct;
+
+      if (cyclicvoltaSt && maxminPeakSt) {
+        var spectraList = cyclicvoltaSt.spectraList;
+
+        var spectra = spectraList[id];
+        if (spectra) {
+          var list = spectra.list;
+
+          if (list.length === 0) {
+            maxminPeakSt.max.forEach(function (maxPeak, idx) {
+              addNewCylicVoltaPairPeakAct(id);
+              var minPeak = maxminPeakSt.min[idx];
+              addCylicVoltaMaxPeakAct({ peak: maxPeak, index: idx, jcampIdx: id });
+              addCylicVoltaMinPeakAct({ peak: minPeak, index: idx, jcampIdx: id });
+            });
+          }
+        } else {
+          addNewCylicVoltaPairPeakAct(id);
+          maxminPeakSt.max.forEach(function (maxPeak, idx) {
+            addNewCylicVoltaPairPeakAct(id);
+            var minPeak = maxminPeakSt.min[idx];
+            addCylicVoltaMaxPeakAct({ peak: maxPeak, index: idx, jcampIdx: id });
+            addCylicVoltaMinPeakAct({ peak: minPeak, index: idx, jcampIdx: id });
+          });
+        }
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var id = this.props.id;
+
+      return _react2.default.createElement('div', { className: 'd3Line' + id });
+    }
+  }]);
+
+  return ViewerMulti;
+}(_react2.default.Component);
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return {
+    seed: (0, _chem.Topic2Seed)(state, props),
+    peak: (0, _chem.Feature2Peak)(state, props),
+    tTrEndPts: (0, _chem.ToThresEndPts)(state, props),
+    tSfPeaks: (0, _chem.ToShiftPeaks)(state, props),
+    editPeakSt: state.editPeak.present,
+    layoutSt: state.layout,
+    sweepExtentSt: state.ui.sweepExtent,
+    isUiNoBrushSt: _list_ui.LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
+    cyclicvoltaSt: state.cyclicvolta,
+    maxminPeakSt: (0, _chem.Feature2MaxMinPeak)(state, props)
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({
+    resetAllAct: _manager.resetAll,
+    clickUiTargetAct: _ui.clickUiTarget,
+    selectUiSweepAct: _ui.selectUiSweep,
+    scrollUiWheelAct: _ui.scrollUiWheel,
+    addNewCylicVoltaPairPeakAct: _cyclic_voltammetry.addNewCylicVoltaPairPeak,
+    addCylicVoltaMaxPeakAct: _cyclic_voltammetry.addCylicVoltaMaxPeak,
+    addCylicVoltaMinPeakAct: _cyclic_voltammetry.addCylicVoltaMinPeak
+  }, dispatch);
+};
+
+ViewerMulti.propTypes = {
+  id: _propTypes2.default.any.isRequired,
+  entities: _propTypes2.default.array.isRequired,
+  seed: _propTypes2.default.array.isRequired,
+  peak: _propTypes2.default.array.isRequired,
+  xLabel: _propTypes2.default.string.isRequired,
+  yLabel: _propTypes2.default.string.isRequired,
+  feature: _propTypes2.default.object.isRequired,
+  tTrEndPts: _propTypes2.default.array.isRequired,
+  tSfPeaks: _propTypes2.default.array.isRequired,
+  editPeakSt: _propTypes2.default.object.isRequired,
+  layoutSt: _propTypes2.default.string.isRequired,
+  sweepExtentSt: _propTypes2.default.object.isRequired,
+  isUiNoBrushSt: _propTypes2.default.bool.isRequired,
+  resetAllAct: _propTypes2.default.func.isRequired,
+  clickUiTargetAct: _propTypes2.default.func.isRequired,
+  selectUiSweepAct: _propTypes2.default.func.isRequired,
+  scrollUiWheelAct: _propTypes2.default.func.isRequired,
+  isHidden: _propTypes2.default.bool,
+  cyclicvoltaSt: _propTypes2.default.object.isRequired,
+  maxminPeakSt: _propTypes2.default.object,
+  addNewCylicVoltaPairPeakAct: _propTypes2.default.func.isRequired,
+  addCylicVoltaMaxPeakAct: _propTypes2.default.func.isRequired,
+  addCylicVoltaMinPeakAct: _propTypes2.default.func.isRequired
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ViewerMulti);

package/dist/components/d3_multi/multi_focus copy.js

@@ -0,0 +1,490 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _d = require('d3');
+
+var d3 = _interopRequireWildcard(_d);
+
+var _init = require('../../helpers/init');
+
+var _mount = require('../../helpers/mount');
+
+var _converter = require('../../helpers/converter');
+
+var _brush = require('../../helpers/brush');
+
+var _brush2 = _interopRequireDefault(_brush);
+
+var _compass = require('../../helpers/compass');
+
+var _list_layout = require('../../constants/list_layout');
+
+var _format = require('../../helpers/format');
+
+var _format2 = _interopRequireDefault(_format);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var MultiFocus = function () {
+  function MultiFocus(props) {
+    _classCallCheck(this, MultiFocus);
+
+    var W = props.W,
+        H = props.H,
+        clickUiTargetAct = props.clickUiTargetAct,
+        selectUiSweepAct = props.selectUiSweepAct,
+        scrollUiWheelAct = props.scrollUiWheelAct,
+        id = props.id;
+
+
+    this.jcampIdx = id;
+    this.rootKlass = '.d3Line' + id;
+    this.margin = {
+      t: 5,
+      b: 40,
+      l: 60,
+      r: 5
+    };
+    this.w = W - this.margin.l - this.margin.r;
+    this.h = H - this.margin.t - this.margin.b;
+    this.clickUiTargetAct = clickUiTargetAct;
+    this.selectUiSweepAct = selectUiSweepAct;
+    this.scrollUiWheelAct = scrollUiWheelAct;
+    this.brush = d3.brush();
+    this.brushX = d3.brushX();
+
+    this.axis = null;
+    this.path = null;
+    this.grid = null;
+    this.tags = null;
+    this.data = [];
+    this.dataPks = [];
+    this.dataPeckers = [];
+    this.tTrEndPts = null;
+    this.tSfPeaks = null;
+    this.root = null;
+    this.svg = null;
+    this.axisCall = (0, _init.InitAxisCall)(5);
+    this.pathCall = null;
+    this.tip = null;
+    this.factor = 0.125;
+    this.currentExtent = null;
+    this.shouldUpdate = {};
+    // this.freq = false;
+    this.layout = _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY;
+
+    this.getShouldUpdate = this.getShouldUpdate.bind(this);
+    this.resetShouldUpdate = this.resetShouldUpdate.bind(this);
+    this.setTip = this.setTip.bind(this);
+    this.setDataParams = this.setDataParams.bind(this);
+    this.create = this.create.bind(this);
+    this.update = this.update.bind(this);
+    this.setConfig = this.setConfig.bind(this);
+    this.drawLine = this.drawLine.bind(this);
+    this.drawGrid = this.drawGrid.bind(this);
+    this.drawPeaks = this.drawPeaks.bind(this);
+    this.onClickTarget = this.onClickTarget.bind(this);
+    this.mergedPeaks = this.mergedPeaks.bind(this);
+    this.setDataPecker = this.setDataPecker.bind(this);
+    this.drawPeckers = this.drawPeckers.bind(this);
+    this.onClickPecker = this.onClickPecker.bind(this);
+    this.isFirefox = typeof InstallTrigger !== 'undefined';
+    this.cyclicvoltaSt = null;
+  }
+
+  _createClass(MultiFocus, [{
+    key: 'getShouldUpdate',
+    value: function getShouldUpdate(nextEpSt) {
+      var _shouldUpdate = this.shouldUpdate,
+          prevXt = _shouldUpdate.prevXt,
+          prevYt = _shouldUpdate.prevYt,
+          prevEpSt = _shouldUpdate.prevEpSt,
+          prevLySt = _shouldUpdate.prevLySt,
+          prevTePt = _shouldUpdate.prevTePt,
+          prevDtPk = _shouldUpdate.prevDtPk,
+          prevSfPk = _shouldUpdate.prevSfPk,
+          prevData = _shouldUpdate.prevData;
+
+      var _TfRescale = (0, _compass.TfRescale)(this),
+          xt = _TfRescale.xt,
+          yt = _TfRescale.yt;
+
+      var sameXY = xt(1.1) === prevXt && prevYt === yt(1.1);
+      var sameEpSt = prevEpSt === nextEpSt;
+      var sameLySt = prevLySt === this.layout;
+      var sameTePt = prevTePt === this.tTrEndPts.length;
+      var sameDtPk = prevDtPk === this.dataPks.length;
+      var sameSfPk = prevSfPk === this.tSfPeaks.length;
+      var sameData = prevData === this.data.length;
+      var sameRef = prevEpSt.prevOffset === nextEpSt.prevOffset;
+      this.shouldUpdate = Object.assign({}, this.shouldUpdate, {
+        sameXY: sameXY, sameEpSt: sameEpSt, sameLySt: sameLySt, // eslint-disable-line
+        sameTePt: sameTePt, sameDtPk: sameDtPk, sameSfPk: sameSfPk, sameData: sameData, sameRef: sameRef // eslint-disable-line
+      });
+    }
+  }, {
+    key: 'resetShouldUpdate',
+    value: function resetShouldUpdate(prevEpSt) {
+      var _TfRescale2 = (0, _compass.TfRescale)(this),
+          xt = _TfRescale2.xt,
+          yt = _TfRescale2.yt;
+
+      var prevXt = xt(1.1);
+      var prevYt = yt(1.1);
+      var prevTePt = this.tTrEndPts.length;
+      var prevDtPk = this.dataPks.length;
+      var prevSfPk = this.tSfPeaks.length;
+      var prevData = this.data.length;
+      var prevLySt = this.layout;
+      this.shouldUpdate = Object.assign({}, this.shouldUpdate, {
+        prevXt: prevXt, prevYt: prevYt, prevEpSt: prevEpSt, prevLySt: prevLySt, // eslint-disable-line
+        prevTePt: prevTePt, prevDtPk: prevDtPk, prevSfPk: prevSfPk, prevData: prevData // eslint-disable-line
+      });
+    }
+  }, {
+    key: 'setTip',
+    value: function setTip() {
+      this.tip = (0, _init.InitTip)();
+      this.root.call(this.tip);
+    }
+  }, {
+    key: 'setDataParams',
+    value: function setDataParams(data, peaks, tTrEndPts, tSfPeaks, layout, cyclicvoltaSt) {
+      this.data = [].concat(_toConsumableArray(data));
+      this.dataPks = [].concat(_toConsumableArray(peaks));
+      this.tTrEndPts = tTrEndPts;
+      this.tSfPeaks = tSfPeaks;
+      this.layout = layout;
+      this.cyclicvoltaSt = cyclicvoltaSt;
+    }
+  }, {
+    key: 'updatePathCall',
+    value: function updatePathCall(xt, yt) {
+      this.pathCall = d3.line().x(function (d) {
+        return xt(d.x);
+      }).y(function (d) {
+        return yt(d.y);
+      });
+    }
+  }, {
+    key: 'setConfig',
+    value: function setConfig(sweepExtentSt) {
+      // Domain Calculate
+      var _ref = sweepExtentSt || { xExtent: false, yExtent: false },
+          xExtent = _ref.xExtent,
+          yExtent = _ref.yExtent;
+
+      if (!xExtent || !yExtent) {
+        var xes = d3.extent(this.data, function (d) {
+          return d.x;
+        }).sort(function (a, b) {
+          return a - b;
+        });
+        xExtent = { xL: xes[0], xU: xes[1] };
+        var btm = d3.min(this.data, function (d) {
+          return d.y;
+        });
+        var top = d3.max(this.data, function (d) {
+          return d.y;
+        });
+        var height = top - btm;
+        yExtent = {
+          yL: btm - this.factor * height,
+          yU: top + this.factor * height
+        };
+      }
+
+      this.scales.x.domain([xExtent.xL, xExtent.xU]);
+      this.scales.y.domain([yExtent.yL, yExtent.yU]);
+
+      // rescale for zoom
+
+      var _TfRescale3 = (0, _compass.TfRescale)(this),
+          xt = _TfRescale3.xt,
+          yt = _TfRescale3.yt;
+
+      // Axis Call
+
+
+      this.axisCall.x.scale(xt);
+      this.axisCall.y.scale(yt);
+
+      this.currentExtent = { xExtent: xExtent, yExtent: yExtent };
+    }
+  }, {
+    key: 'drawLine',
+    value: function drawLine() {
+      var _shouldUpdate2 = this.shouldUpdate,
+          sameXY = _shouldUpdate2.sameXY,
+          sameRef = _shouldUpdate2.sameRef;
+
+      if (sameXY && sameRef) return;
+
+      var _TfRescale4 = (0, _compass.TfRescale)(this),
+          xt = _TfRescale4.xt,
+          yt = _TfRescale4.yt;
+
+      this.updatePathCall(xt, yt);
+      this.path.attr('d', this.pathCall(this.data));
+    }
+  }, {
+    key: 'drawGrid',
+    value: function drawGrid() {
+      var sameXY = this.shouldUpdate.sameXY;
+
+      if (sameXY) return;
+
+      this.grid.x.call(this.axisCall.x.tickSize(-this.h, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
+      this.grid.y.call(this.axisCall.y.tickSize(-this.w, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
+    }
+  }, {
+    key: 'onClickTarget',
+    value: function onClickTarget(data) {
+      d3.event.stopPropagation();
+      d3.event.preventDefault();
+      var onPeak = true;
+      var spectraList = this.cyclicvoltaSt.spectraList;
+
+      var spectra = spectraList[this.jcampIdx];
+      var voltammetryPeakIdx = spectra.selectedIdx;
+      this.clickUiTargetAct(data, onPeak, voltammetryPeakIdx, this.jcampIdx);
+    }
+  }, {
+    key: 'onClickPecker',
+    value: function onClickPecker(data) {
+      d3.event.stopPropagation();
+      d3.event.preventDefault();
+      var onPecker = true;
+      var spectraList = this.cyclicvoltaSt.spectraList;
+
+      var spectra = spectraList[this.jcampIdx];
+      var voltammetryPeakIdx = spectra.selectedIdx;
+      this.clickUiTargetAct(data, false, voltammetryPeakIdx, this.jcampIdx, onPecker);
+    }
+  }, {
+    key: 'mergedPeaks',
+    value: function mergedPeaks(editPeakSt) {
+      if (!editPeakSt) return this.dataPks;
+      var spectraList = this.cyclicvoltaSt.spectraList;
+
+      var spectra = spectraList[this.jcampIdx];
+      if (spectra) {
+        this.dataPks = (0, _converter.PksEdit)(this.dataPks, editPeakSt, spectra.list);
+      } else {
+        this.dataPks = (0, _converter.PksEdit)(this.dataPks, editPeakSt, []);
+      }
+
+      return this.dataPks;
+    }
+  }, {
+    key: 'setDataPecker',
+    value: function setDataPecker() {
+      var spectraList = this.cyclicvoltaSt.spectraList;
+
+      var spectra = spectraList[this.jcampIdx];
+      if (spectra) {
+        this.dataPeckers = (0, _converter.PeckersEdit)(spectra.list);
+      }
+      return this.dataPeckers;
+    }
+  }, {
+    key: 'drawPeaks',
+    value: function drawPeaks(editPeakSt) {
+      var _this = this;
+
+      var _shouldUpdate3 = this.shouldUpdate,
+          sameXY = _shouldUpdate3.sameXY,
+          sameEpSt = _shouldUpdate3.sameEpSt,
+          sameDtPk = _shouldUpdate3.sameDtPk,
+          sameSfPk = _shouldUpdate3.sameSfPk;
+
+
+      if (!_format2.default.isCyclicVoltaLayout(this.layout) && sameXY && sameEpSt && sameDtPk && sameSfPk) return;
+
+      // rescale for zoom
+
+      var _TfRescale5 = (0, _compass.TfRescale)(this),
+          xt = _TfRescale5.xt,
+          yt = _TfRescale5.yt;
+
+      var dPks = this.mergedPeaks(editPeakSt);
+
+      var mpp = this.tags.pPath.selectAll('path').data(dPks);
+      mpp.exit().attr('class', 'exit').remove();
+
+      var linePath = [{ x: -0.5, y: 10 }, { x: -0.5, y: -20 }, { x: 0.5, y: -20 }, { x: 0.5, y: 10 }];
+      var lineSymbol = d3.line().x(function (d) {
+        return d.x;
+      }).y(function (d) {
+        return d.y;
+      })(linePath);
+
+      mpp.enter().append('path').attr('d', lineSymbol).attr('class', 'enter-peak').attr('fill', 'red').attr('stroke', 'pink').attr('stroke-width', 3).attr('stroke-opacity', 0.0).merge(mpp).attr('id', function (d) {
+        return 'mpp' + Math.round(1000 * d.x);
+      }).attr('transform', function (d) {
+        return 'translate(' + xt(d.x) + ', ' + yt(d.y) + ')';
+      }).on('mouseover', function (d, i, n) {
+        d3.select('#mpp' + Math.round(1000 * d.x)).attr('stroke-opacity', '1.0');
+        d3.select('#bpt' + Math.round(1000 * d.x)).style('fill', 'blue');
+        var tipParams = { d: d, layout: _this.layout };
+        _this.tip.show(tipParams, n[i]);
+      }).on('mouseout', function (d, i, n) {
+        d3.select('#mpp' + Math.round(1000 * d.x)).attr('stroke-opacity', '0.0');
+        d3.select('#bpt' + Math.round(1000 * d.x)).style('fill', 'red');
+        var tipParams = { d: d, layout: _this.layout };
+        _this.tip.hide(tipParams, n[i]);
+      }).on('click', function (d) {
+        return _this.onClickTarget(d);
+      });
+
+      var ignoreRef = _format2.default.isHplcUvVisLayout(this.layout);
+      if (ignoreRef) {
+        var bpTxt = this.tags.bpTxt.selectAll('text').data(dPks);
+        bpTxt.exit().attr('class', 'exit').remove();
+
+        bpTxt.enter().append('text').attr('class', 'peak-text').attr('font-family', 'Helvetica').style('font-size', '12px').attr('fill', '#228B22').style('text-anchor', 'middle').merge(bpTxt).attr('id', function (d) {
+          return 'mpp' + Math.round(1000 * d.x);
+        }).text(function (d) {
+          return d.x.toFixed(2);
+        }).attr('transform', function (d) {
+          return 'translate(' + xt(d.x) + ', ' + (yt(d.y) - 25) + ')';
+        }).on('click', function (d) {
+          return _this.onClickTarget(d);
+        });
+      }
+    }
+  }, {
+    key: 'drawPeckers',
+    value: function drawPeckers() {
+      var _this2 = this;
+
+      var _shouldUpdate4 = this.shouldUpdate,
+          sameXY = _shouldUpdate4.sameXY,
+          sameEpSt = _shouldUpdate4.sameEpSt,
+          sameDtPk = _shouldUpdate4.sameDtPk,
+          sameSfPk = _shouldUpdate4.sameSfPk;
+
+
+      if (!_format2.default.isCyclicVoltaLayout(this.layout) && sameXY && sameEpSt && sameDtPk && sameSfPk) return;
+
+      // rescale for zoom
+
+      var _TfRescale6 = (0, _compass.TfRescale)(this),
+          xt = _TfRescale6.xt,
+          yt = _TfRescale6.yt;
+
+      var dPks = this.setDataPecker();
+
+      var mpp = this.tags.peckerPath.selectAll('path').data(dPks);
+      mpp.exit().attr('class', 'exit').remove();
+
+      var linePath = [{ x: -0.5, y: 10 }, { x: -0.5, y: -20 }, { x: 0.5, y: -20 }, { x: 0.5, y: 10 }];
+      var lineSymbol = d3.line().x(function (d) {
+        return d.x;
+      }).y(function (d) {
+        return d.y;
+      })(linePath);
+
+      mpp.enter().append('path').attr('d', lineSymbol).attr('class', 'enter-peak').attr('fill', '#228B22').attr('stroke', 'pink').attr('stroke-width', 3).attr('stroke-opacity', 0.0).merge(mpp).attr('id', function (d) {
+        return 'mpp' + Math.round(1000 * d.x);
+      }).attr('transform', function (d) {
+        return 'translate(' + xt(d.x) + ', ' + yt(d.y) + ')';
+      }).on('mouseover', function (d, i, n) {
+        d3.select('#mpp' + Math.round(1000 * d.x)).attr('stroke-opacity', '1.0');
+        d3.select('#bpt' + Math.round(1000 * d.x)).style('fill', 'blue');
+        var tipParams = { d: d, layout: _this2.layout };
+        _this2.tip.show(tipParams, n[i]);
+      }).on('mouseout', function (d, i, n) {
+        d3.select('#mpp' + Math.round(1000 * d.x)).attr('stroke-opacity', '0.0');
+        d3.select('#bpt' + Math.round(1000 * d.x)).style('fill', '#228B22');
+        var tipParams = { d: d, layout: _this2.layout };
+        _this2.tip.hide(tipParams, n[i]);
+      }).on('click', function (d) {
+        return _this2.onClickPecker(d);
+      });
+    }
+  }, {
+    key: 'create',
+    value: function create(_ref2) {
+      var filterSeed = _ref2.filterSeed,
+          filterPeak = _ref2.filterPeak,
+          tTrEndPts = _ref2.tTrEndPts,
+          tSfPeaks = _ref2.tSfPeaks,
+          editPeakSt = _ref2.editPeakSt,
+          layoutSt = _ref2.layoutSt,
+          sweepExtentSt = _ref2.sweepExtentSt,
+          isUiNoBrushSt = _ref2.isUiNoBrushSt,
+          cyclicvoltaSt = _ref2.cyclicvoltaSt;
+
+      this.svg = d3.select(this.rootKlass).select('.d3Svg');
+      (0, _mount.MountMainFrame)(this, 'focus');
+      (0, _mount.MountClip)(this);
+
+      this.root = d3.select(this.rootKlass).selectAll('.focus-main');
+      this.scales = (0, _init.InitScale)(this, false);
+      this.setTip();
+      this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt);
+      (0, _compass.MountCompass)(this);
+
+      this.axis = (0, _mount.MountAxis)(this);
+      this.path = (0, _mount.MountPath)(this, 'steelblue');
+      this.grid = (0, _mount.MountGrid)(this);
+      this.tags = (0, _mount.MountTags)(this);
+      (0, _mount.MountAxisLabelX)(this);
+      (0, _mount.MountAxisLabelY)(this);
+
+      if (this.data && this.data.length > 0) {
+        this.setConfig(sweepExtentSt);
+        this.drawLine();
+        this.drawGrid();
+        this.drawPeaks(editPeakSt);
+        this.drawPeckers();
+      }
+      (0, _brush2.default)(this, false, isUiNoBrushSt);
+      this.resetShouldUpdate(editPeakSt);
+    }
+  }, {
+    key: 'update',
+    value: function update(_ref3) {
+      var filterSeed = _ref3.filterSeed,
+          filterPeak = _ref3.filterPeak,
+          tTrEndPts = _ref3.tTrEndPts,
+          tSfPeaks = _ref3.tSfPeaks,
+          editPeakSt = _ref3.editPeakSt,
+          layoutSt = _ref3.layoutSt,
+          sweepExtentSt = _ref3.sweepExtentSt,
+          isUiNoBrushSt = _ref3.isUiNoBrushSt,
+          cyclicvoltaSt = _ref3.cyclicvoltaSt;
+
+      this.root = d3.select(this.rootKlass).selectAll('.focus-main');
+      this.scales = (0, _init.InitScale)(this, false);
+      this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt);
+
+      if (this.data && this.data.length > 0) {
+        this.setConfig(sweepExtentSt);
+        this.getShouldUpdate(editPeakSt);
+        this.drawLine();
+        this.drawGrid();
+        this.drawPeaks(editPeakSt);
+        this.drawPeckers();
+      }
+      (0, _brush2.default)(this, false, isUiNoBrushSt);
+      this.resetShouldUpdate(editPeakSt);
+    }
+  }]);
+
+  return MultiFocus;
+}();
+
+exports.default = MultiFocus;

package/dist/components/forecast/comps.js

@@ -13,7 +13,7 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _reactSvgFileZoomPan = require('react-svg-file-zoom-pan');
+var _reactSvgFileZoomPan = require('@complat/react-svg-file-zoom-pan');
 
 var _reactSvgFileZoomPan2 = _interopRequireDefault(_reactSvgFileZoomPan);
 

package/dist/components/panel/info.js

@@ -20,7 +20,7 @@ var _reactRedux = require('react-redux');
 
 var _redux = require('redux');
 
-var _reactSvgFileZoomPan = require('react-svg-file-zoom-pan');
+var _reactSvgFileZoomPan = require('@complat/react-svg-file-zoom-pan');
 
 var _reactSvgFileZoomPan2 = _interopRequireDefault(_reactSvgFileZoomPan);
 
@@ -149,10 +149,12 @@ var aucValue = function aucValue(integration) {
     });
     sumVal = sumVal.toFixed(2);
     stackIntegration.forEach(function (inte) {
-      var areaVal = inte.absoluteArea.toFixed(2);
-      var percent = (areaVal * 100 / sumVal).toFixed(2);
-      var valStr = areaVal + " (" + percent + "%)";
-      values.push(valStr);
+      if (inte.absoluteArea) {
+        var areaVal = inte.absoluteArea.toFixed(2);
+        var percent = (areaVal * 100 / sumVal).toFixed(2);
+        var valStr = areaVal + " (" + percent + "%)";
+        values.push(valStr);
+      }
     });
   }
   return values.join(", ");

package/dist/helpers/chem.js

@@ -585,8 +585,12 @@ var Convert2Thres = function Convert2Thres(feature, thresSt) {
 
 var Convert2DValue = function Convert2DValue(doubleTheta) {
   var lambda = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15406;
+  var isRadian = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
 
   var theta = doubleTheta / 2;
+  if (isRadian) {
+    theta = theta / 180 * Math.PI;
+  }
   var sinTheta = Math.sin(theta);
   var dValue = lambda / (2 * sinTheta);
   return dValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@complat/react-spectra-editor",
-  "version": "0.10.13",
+  "version": "0.10.14-alpha.2",
   "description": "An editor to View and Edit Chemical Spectra data (NMR, IR and MS).",
   "repository": {
     "type": "git",
@@ -8,11 +8,14 @@
   },
   "license": "AGPL-3.0",
   "dependencies": {
-    "@material-ui/core": "^3.9.3",
-    "@material-ui/icons": "^3.0.2",
+    "@complat/react-svg-file-zoom-pan": "^1.0.11",
+    "@material-ui/core": "^4.10.0",
+    "@material-ui/icons": "^4.10.0",
     "@mdi/js": "^4.7.95",
     "@mdi/react": "^1.2.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
     "browserslist": "^4.16.3",
     "classnames": "^2.2.6",
     "d3": "^5.5.0",
@@ -22,8 +25,8 @@
     "ml-savitzky-golay-generalized": "1.1.1",
     "prop-types": "^15.7.2",
     "react-dropzone": "^8.0.3",
-    "react-quill": "1.1.0",
-    "react-redux": "6.0.1",
+    "react-quill": "^1.3.0",
+    "react-redux": "^7.2.0",
     "react-svg-file-zoom-pan": "^1.0.5",
     "react-svg-inline": "^2.1.1",
     "redux": "^4.1.1",
@@ -42,21 +45,22 @@
     "buildbook": "build-storybook -c .storybook -o .out"
   },
   "peerDependencies": {
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@storybook/react": "^3.4.10",
+    "@storybook/react": "^5.0.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "eslint-config-airbnb": "^17.0.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.10.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.25.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-scripts": "^2.1.1",
-    "react-select": "^2.0.0",
+    "react-select": "^4.0.0",
     "redux-logger": "^3.0.6"
   },
   "main": "dist/app.js",