feat: Add onset-offset labelling and analysis panels to TGA layout

dist/actions/offset.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sweepOffset = exports.rmOneOffset = exports.clearOffsetAll = void 0;
+var _action_type = require("../constants/action_type");
+const sweepOffset = payload => ({
+  type: _action_type.OFFSET.SWEEP,
+  payload
+});
+exports.sweepOffset = sweepOffset;
+const clearOffsetAll = payload => ({
+  type: _action_type.OFFSET.CLEAR_ALL,
+  payload
+});
+exports.clearOffsetAll = clearOffsetAll;
+const rmOneOffset = payload => ({
+  type: _action_type.OFFSET.RM_ONE,
+  payload
+});
+exports.rmOneOffset = rmOneOffset;

dist/components/cmd_bar/08_offsets.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _redux = require("redux");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _offset = require("../../actions/offset");
+var _ui = require("../../actions/ui");
+var _list_ui = require("../../constants/list_ui");
+var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
+var _tri_btn = _interopRequireDefault(require("./tri_btn"));
+var _common = require("./common");
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable react/function-component-definition, react/no-unused-prop-types, */
+
+const styles = () => ({
+  field: {
+    width: 80
+  },
+  txtIcon: {},
+  ..._common.commonStyle
+});
+const Offset = _ref => {
+  let {
+    classes,
+    isDisableSt,
+    isFocusAddOffsetSt,
+    isFocusRmOffsetSt,
+    setUiSweepTypeAct,
+    clearOffsetAllAct,
+    curveSt,
+    // eslint-disable-next-line no-unused-vars
+    offsetSt
+  } = _ref;
+  const onSweepOffsetAdd = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.OFFSET_ADD);
+  const onSweepOffsetRm = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.OFFSET_RM);
+  const {
+    curveIdx
+  } = curveSt;
+  const onClearAll = () => clearOffsetAllAct({
+    curveIdx
+  });
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.group
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: /*#__PURE__*/_react.default.createElement("span", {
+      className: "txt-sv-tp"
+    }, "Add On- and Offsets")
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
+    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddOffsetSt, classes)),
+    disabled: isDisableSt,
+    onClick: onSweepOffsetAdd
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addpeak')
+  }, "O+")))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: /*#__PURE__*/_react.default.createElement("span", {
+      className: "txt-sv-tp"
+    }, "Remove On- and Offsets")
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
+    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmOffsetSt, classes)),
+    disabled: isDisableSt,
+    onClick: onSweepOffsetRm
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addpeak')
+  }, "O-")))), /*#__PURE__*/_react.default.createElement(_tri_btn.default, {
+    content: {
+      tp: 'Clear All On/offsets'
+    },
+    cb: onClearAll
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addpeak')
+  }, "OX")));
+};
+const mapStateToProps = state => ({
+  isDisableSt: _cfg.default.btnCmdOffset(state.layout),
+  isFocusAddOffsetSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.OFFSET_ADD,
+  isFocusRmOffsetSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.OFFSET_RM,
+  curveSt: state.curve,
+  offsetSt: state.offset.present
+});
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  setUiSweepTypeAct: _ui.setUiSweepType,
+  clearOffsetAllAct: _offset.clearOffsetAll
+}, dispatch);
+Offset.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  isDisableSt: _propTypes.default.bool.isRequired,
+  isFocusAddOffsetSt: _propTypes.default.bool.isRequired,
+  isFocusRmOffsetSt: _propTypes.default.bool.isRequired,
+  setUiSweepTypeAct: _propTypes.default.func.isRequired,
+  clearOffsetAllAct: _propTypes.default.func.isRequired,
+  curveSt: _propTypes.default.object.isRequired,
+  offsetSt: _propTypes.default.object.isRequired
+};
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _withStyles.default)(styles)(Offset));

dist/components/cmd_bar/index.js

@@ -23,6 +23,7 @@ var _r04_submit = _interopRequireDefault(require("./r04_submit"));
 var _r07_wavelength_btn = _interopRequireDefault(require("./r07_wavelength_btn"));
 var _pecker = _interopRequireDefault(require("./07_pecker"));
 var _r08_change_axes = _interopRequireDefault(require("./r08_change_axes"));
+var _offsets = _interopRequireDefault(require("./08_offsets"));
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition, react/require-default-props */
 
@@ -46,7 +47,7 @@ const CmdBar = _ref => {
     jcampIdx: jcampIdx
   }), /*#__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(_offsets.default, null), /*#__PURE__*/_react.default.createElement(_undo_redo.default, null), /*#__PURE__*/_react.default.createElement(_r04_submit.default, {
     operations: operations,
     feature: feature,
     forecast: forecast,

dist/components/cmd_bar/r05_submit_btn.js

@@ -21,7 +21,7 @@ react/function-component-definition, function-call-argument-newline,
 react/require-default-props */
 
 const styles = () => Object.assign({}, _common.commonStyle);
-const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, analysis, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt) => () => {
+const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, analysis, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt, offsetSt) => () => {
   operation({
     peaks: peaksEdit,
     layout: layoutSt,
@@ -39,7 +39,8 @@ const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, lay
     waveLength: waveLengthSt,
     cyclicvoltaSt,
     curveSt,
-    axesUnitsSt
+    axesUnitsSt,
+    offsetSt
   });
 };
 const BtnSubmit = _ref => {
@@ -62,7 +63,8 @@ const BtnSubmit = _ref => {
     waveLengthSt,
     cyclicvoltaSt,
     curveSt,
-    axesUnitsSt
+    axesUnitsSt,
+    offsetSt
   } = _ref;
   const peaksEdit = (0, _extractPeaksEdit.extractPeaksEdit)(feature, editPeakSt, thresSt, shiftSt, layoutSt);
   // const disBtn = peaksEdit.length === 0 || statusSt.btnSubmit || disabled;
@@ -77,7 +79,7 @@ const BtnSubmit = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
     className: (0, _classnames.default)('btn-sv-bar-submit'),
     color: "primary",
-    onClick: onClickCb(operation.value, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, forecastSt.predictions, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt)
+    onClick: onClickCb(operation.value, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, forecastSt.predictions, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt, offsetSt)
   }, /*#__PURE__*/_react.default.createElement(_PlayCircleOutline.default, {
     className: classes.icon
   })));
@@ -98,7 +100,8 @@ const mapStateToProps = (state, props) => (
   waveLengthSt: state.wavelength,
   cyclicvoltaSt: state.cyclicvolta,
   curveSt: state.curve,
-  axesUnitsSt: state.axesUnits
+  axesUnitsSt: state.axesUnits,
+  offsetSt: state.offset.present
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch);
 BtnSubmit.propTypes = {
@@ -120,6 +123,7 @@ BtnSubmit.propTypes = {
   waveLengthSt: _propTypes.default.object.isRequired,
   cyclicvoltaSt: _propTypes.default.object.isRequired,
   curveSt: _propTypes.default.object,
-  axesUnitsSt: _propTypes.default.object.isRequired
+  axesUnitsSt: _propTypes.default.object.isRequired,
+  offsetSt: _propTypes.default.object.isRequired
 };
 var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(styles))(BtnSubmit);

dist/components/cmd_bar/tri_btn.js

@@ -64,7 +64,7 @@ class TriBtn extends _react.default.Component {
       title: title
     }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
       className: (0, _classnames.default)('btn-sv-bar-one'),
-      disabled: _cfg.default.btnCmdMpy(layoutSt) && _cfg.default.btnCmdIntg(layoutSt),
+      disabled: _cfg.default.btnCmdMpy(layoutSt) && _cfg.default.btnCmdIntg(layoutSt) && _cfg.default.btnCmdOffset(layoutSt),
       onClick: this.onToggle
     }, children)));
   }
@@ -79,7 +79,7 @@ class TriBtn extends _react.default.Component {
       this.onToggle(e);
     };
     return /*#__PURE__*/_react.default.createElement("span", {
-      disabled: _cfg.default.btnCmdMpy(layoutSt) && _cfg.default.btnCmdIntg(layoutSt)
+      disabled: _cfg.default.btnCmdMpy(layoutSt) && _cfg.default.btnCmdIntg(layoutSt) && _cfg.default.btnCmdOffset(layoutSt)
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)(classes.txtLabel, 'txt-sv-bar-desc')
     }, "Delete ALL?"), /*#__PURE__*/_react.default.createElement(_common.MuButton, {

dist/components/common/draw.js

@@ -3,12 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.drawMain = exports.drawLabel = exports.drawDisplay = exports.drawDestroy = exports.drawArrowOnCurve = void 0;
+exports.drawMain = exports.drawLabel = exports.drawDisplay = exports.drawDestroySecondaryAxis = exports.drawDestroy = exports.drawArrowOnCurve = void 0;
 var d3 = _interopRequireWildcard(require("d3"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const drawMain = (klass, w, h) => {
-  d3.select(klass).append('svg').attr('class', 'd3Svg').attr('preserveAspectRatio', 'xMinYMin meet').attr('viewBox', `0 0 ${w} ${h}`);
+const drawMain = (klass, w, h, hasSecondaryY) => {
+  let width = w;
+  if (hasSecondaryY) {
+    width = w * 1.04;
+  }
+  d3.select(klass).append('svg').attr('class', 'd3Svg').attr('preserveAspectRatio', 'xMinYMin meet').attr('viewBox', `0 0 ${width} ${h}`);
 };
 exports.drawMain = drawMain;
 const drawLabel = (klass, cLabel, xLabel, yLabel) => {
@@ -29,25 +33,24 @@ const drawDisplay = (klass, isHidden) => {
 exports.drawDisplay = drawDisplay;
 const drawDestroy = klass => d3.select(`${klass} > *`).remove();
 exports.drawDestroy = drawDestroy;
+const drawDestroySecondaryAxis = klass => {
+  const secondaryAxisClass = 'y-secondary-axis';
+  const secondaryLabelClass = 'secondaryYLabel';
+  d3.select(`${klass} .${secondaryAxisClass}`).remove();
+  d3.select(`${klass} .${secondaryLabelClass}`).remove();
+};
+exports.drawDestroySecondaryAxis = drawDestroySecondaryAxis;
 const drawArrowOnCurve = (klass, isHidden) => {
-  if (isHidden) {
+  const removeMarkers = () => {
     d3.select(klass).selectAll('marker').remove();
+  };
+  const createArrowMarker = (id, fillColor) => d3.select(klass).selectAll('defs').append('marker').attr('id', id).attr('viewBox', '0 0 10 10').attr('refX', 5).attr('refY', 5).attr('markerWidth', 6).attr('markerHeight', 6).attr('fill', fillColor);
+  if (isHidden) {
+    removeMarkers();
   } else {
-    d3.select(klass).selectAll('marker').remove();
-    const arrowLeft = d3.select(klass).selectAll('defs').append('marker').attr('id', 'arrow-left').attr('viewBox', '0 0 10 10').attr('refX', 5).attr('refY', 5).attr('markerWidth', 6).attr('markerHeight', 6).attr('orient', 'auto').attr('fill', '#00AA0099');
-    arrowLeft.append('path').attr('d', 'M 0 0 L 10 5 L 0 10 z');
-
-    // const arrowRight = d3.select(klass).selectAll('defs')
-    //   .append('marker')
-    //   .attr('id', 'arrow-right')
-    //   .attr('viewBox', '0 0 10 10')
-    //   .attr('refX', 5)
-    //   .attr('refY', 5)
-    //   .attr('markerWidth', 6)
-    //   .attr('markerHeight', 6)
-    //   .attr('orient', 'auto-start-reverse');
-    // arrowRight.append('path')
-    //   .attr('d', 'M 0 0 L 10 5 L 0 10 z');
+    removeMarkers();
+    createArrowMarker('arrow-left', '#00AA0099').attr('orient', 'auto').append('path').attr('d', 'M 0 0 L 10 5 L 0 10 z');
+    createArrowMarker('arrow-left-black', 'black').attr('orient', 'auto').append('path').attr('d', 'M 0 0 L 10 5 L 0 10 z');
   }
 };
 exports.drawArrowOnCurve = drawArrowOnCurve;

dist/components/d3_line/index.js

@@ -61,7 +61,9 @@ class ViewerLine extends _react.default.Component {
       isHidden,
       wavelength,
       axesUnitsSt,
-      resetAllAct
+      resetAllAct,
+      offsetSt,
+      isUiAddOffsetSt
     } = this.props;
     (0, _draw.drawDestroy)(this.rootKlass);
     resetAllAct(feature);
@@ -92,7 +94,9 @@ class ViewerLine extends _react.default.Component {
       sweepExtentSt,
       isUiAddIntgSt,
       isUiNoBrushSt,
-      wavelength
+      wavelength,
+      offsetSt,
+      isUiAddOffsetSt
     });
     (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
     (0, _draw.drawDisplay)(this.rootKlass, isHidden);
@@ -117,7 +121,9 @@ class ViewerLine extends _react.default.Component {
       isUiNoBrushSt,
       isHidden,
       wavelength,
-      axesUnitsSt
+      axesUnitsSt,
+      offsetSt,
+      isUiAddOffsetSt
     } = this.props;
     this.normChange(prevProps);
     let xxLabel = xLabel;
@@ -146,7 +152,9 @@ class ViewerLine extends _react.default.Component {
       sweepExtentSt,
       isUiAddIntgSt,
       isUiNoBrushSt,
-      wavelength
+      wavelength,
+      offsetSt,
+      isUiAddOffsetSt
     });
     (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
     (0, _draw.drawDisplay)(this.rootKlass, isHidden);
@@ -185,7 +193,9 @@ const mapStateToProps = (state, props) => ({
   isUiAddIntgSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
   isUiNoBrushSt: _list_ui.LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
   wavelength: state.wavelength,
-  axesUnitsSt: state.axesUnits
+  axesUnitsSt: state.axesUnits,
+  offsetSt: state.offset.present,
+  isUiAddOffsetSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.OFFSET_ADD
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   resetAllAct: _manager.resetAll,
@@ -220,6 +230,8 @@ ViewerLine.propTypes = {
   scrollUiWheelAct: _propTypes.default.func.isRequired,
   isHidden: _propTypes.default.bool.isRequired,
   wavelength: _propTypes.default.object.isRequired,
-  axesUnitsSt: _propTypes.default.object.isRequired
+  axesUnitsSt: _propTypes.default.object.isRequired,
+  offsetSt: _propTypes.default.object.isRequired,
+  isUiAddOffsetSt: _propTypes.default.bool.isRequired
 };
 var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ViewerLine);