diff --git a/dist/actions/manager.js b/dist/actions/manager.js
index 0033d319..f2effe9c 100644
--- a/dist/actions/manager.js
+++ b/dist/actions/manager.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resetInitNmr = exports.resetInitMs = exports.resetInitCommonWithIntergation = exports.resetInitCommon = exports.resetDetector = exports.resetAll = void 0;
+exports.resetMultiplicity = exports.resetInitNmr = exports.resetInitMs = exports.resetInitCommonWithIntergation = exports.resetInitCommon = exports.resetDetector = exports.resetAll = void 0;
 var _action_type = require("../constants/action_type");
 const resetAll = payload => ({
   type: _action_type.MANAGER.RESETALL,
@@ -33,6 +33,10 @@ exports.resetInitCommonWithIntergation = resetInitCommonWithIntergation;
 const resetDetector = () => ({
   type: _action_type.MANAGER.RESET_DETECTOR
 });
+exports.resetDetector = resetDetector;
+const resetMultiplicity = () => ({
+  type: _action_type.MANAGER.RESET_MULTIPLICITY
+});
 
 // eslint-disable-line
-exports.resetDetector = resetDetector;
\ No newline at end of file
+exports.resetMultiplicity = resetMultiplicity;
\ No newline at end of file
diff --git a/dist/actions/ui.js b/dist/actions/ui.js
index 52dc1ad0..20199e67 100644
--- a/dist/actions/ui.js
+++ b/dist/actions/ui.js
@@ -3,21 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setUiViewerType = exports.setUiSweepType = exports.selectUiSweep = exports.scrollUiWheel = exports.clickUiTarget = void 0;
+exports.setUiViewerType = exports.setUiSweepType = exports.setUiAlignCompareX = exports.selectUiSweep = exports.scrollUiWheel = exports.clickUiTarget = void 0;
 var _action_type = require("../constants/action_type");
 const setUiViewerType = payload => ({
   type: _action_type.UI.VIEWER.SET_TYPE,
   payload
 });
 exports.setUiViewerType = setUiViewerType;
-const setUiSweepType = function (payload) {
-  let jcampIdx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return {
-    type: _action_type.UI.SWEEP.SET_TYPE,
-    payload,
-    jcampIdx
-  };
-};
+const setUiSweepType = (payload, jcampIdx = 0) => ({
+  type: _action_type.UI.SWEEP.SET_TYPE,
+  payload,
+  jcampIdx
+});
 exports.setUiSweepType = setUiSweepType;
 const selectUiSweep = payload => ({
   type: _action_type.UI.SWEEP.SELECT,
@@ -29,17 +26,17 @@ const scrollUiWheel = payload => ({
   payload
 });
 exports.scrollUiWheel = scrollUiWheel;
-const clickUiTarget = function (payload, onPeak) {
-  let voltammetryPeakIdx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  let jcampIdx = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  let onPecker = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  return {
-    type: _action_type.UI.CLICK_TARGET,
-    payload,
-    onPeak,
-    voltammetryPeakIdx,
-    jcampIdx,
-    onPecker
-  };
-};
-exports.clickUiTarget = clickUiTarget;
\ No newline at end of file
+const clickUiTarget = (payload, onPeak, voltammetryPeakIdx = 0, jcampIdx = 0, onPecker = false) => ({
+  type: _action_type.UI.CLICK_TARGET,
+  payload,
+  onPeak,
+  voltammetryPeakIdx,
+  jcampIdx,
+  onPecker
+});
+exports.clickUiTarget = clickUiTarget;
+const setUiAlignCompareX = payload => ({
+  type: _action_type.UI.COMPARE.SET_ALIGN_X,
+  payload
+});
+exports.setUiAlignCompareX = setUiAlignCompareX;
\ No newline at end of file
diff --git a/dist/app.js b/dist/app.js
index 50530991..a6bd495c 100644
--- a/dist/app.js
+++ b/dist/app.js
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "FN", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _fn.default;
   }
 });
@@ -22,6 +22,7 @@ var _index = _interopRequireDefault(require("./reducers/index"));
 var _index2 = _interopRequireDefault(require("./sagas/index"));
 var _layer_init = _interopRequireDefault(require("./layer_init"));
 var _fn = _interopRequireDefault(require("./fn"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react/function-component-definition, react/require-default-props */
 
 // eslint-disable-line
@@ -44,50 +45,49 @@ const ensureQuillDelta = descs => {
 };
 
 // - - - React - - -
-const SpectraEditor = _ref => {
-  let {
-    entity,
-    others,
-    cLabel,
-    xLabel,
-    yLabel,
-    operations,
-    forecast,
-    molSvg,
-    editorOnly,
-    descriptions,
-    exactMass,
-    canChangeDescription,
-    onDescriptionChanged,
-    multiEntities,
-    multiMolSvgs,
-    entityFileNames,
-    userManualLink
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
-    store: store
-  }, /*#__PURE__*/_react.default.createElement(_material.StyledEngineProvider, {
-    injectFirst: true
-  }, /*#__PURE__*/_react.default.createElement(_layer_init.default, {
-    entity: entity,
-    multiEntities: multiEntities,
-    entityFileNames: entityFileNames,
-    userManualLink: userManualLink,
-    others: others,
-    cLabel: cLabel,
-    xLabel: xLabel,
-    yLabel: yLabel,
-    forecast: forecast,
-    operations: operations,
-    descriptions: ensureQuillDelta(descriptions),
-    molSvg: molSvg,
-    multiMolSvgs: multiMolSvgs,
-    editorOnly: editorOnly,
-    exactMass: exactMass,
-    canChangeDescription: canChangeDescription,
-    onDescriptionChanged: onDescriptionChanged
-  })));
-};
+const SpectraEditor = ({
+  entity,
+  others,
+  cLabel,
+  xLabel,
+  yLabel,
+  operations,
+  forecast,
+  molSvg,
+  editorOnly,
+  descriptions,
+  exactMass,
+  canChangeDescription,
+  onDescriptionChanged,
+  multiEntities,
+  multiMolSvgs,
+  entityFileNames,
+  userManualLink
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRedux.Provider, {
+  store: store,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.StyledEngineProvider, {
+    injectFirst: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layer_init.default, {
+      entity: entity,
+      multiEntities: multiEntities,
+      entityFileNames: entityFileNames,
+      userManualLink: userManualLink,
+      others: others,
+      cLabel: cLabel,
+      xLabel: xLabel,
+      yLabel: yLabel,
+      forecast: forecast,
+      operations: operations,
+      descriptions: ensureQuillDelta(descriptions),
+      molSvg: molSvg,
+      multiMolSvgs: multiMolSvgs,
+      editorOnly: editorOnly,
+      exactMass: exactMass,
+      canChangeDescription: canChangeDescription,
+      onDescriptionChanged: onDescriptionChanged
+    })
+  })
+});
 exports.SpectraEditor = SpectraEditor;
 SpectraEditor.propTypes = {
   entity: _propTypes.default.object.isRequired,
diff --git a/dist/components/cmd_bar/01_viewer.js b/dist/components/cmd_bar/01_viewer.js
index ed017099..637df919 100644
--- a/dist/components/cmd_bar/01_viewer.js
+++ b/dist/components/cmd_bar/01_viewer.js
@@ -18,43 +18,50 @@ var _ui = require("../../actions/ui");
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _common = require("./common");
 var _list_ui = require("../../constants/list_ui");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, react/function-component-definition */
 
 const styles = () => Object.assign({}, _common.commonStyle);
-const Viewer = _ref => {
-  let {
-    classes,
-    isfocusSpectrumSt,
-    isfocusAnalysisSt,
-    hideCmdAnaViewerSt,
-    disableCmdAnaViewerSt,
-    setUiViewerTypeAct
-  } = _ref;
+const Viewer = ({
+  classes,
+  isfocusSpectrumSt,
+  isfocusAnalysisSt,
+  hideCmdAnaViewerSt,
+  disableCmdAnaViewerSt,
+  setUiViewerTypeAct
+}) => {
   const onViewSpectrum = () => setUiViewerTypeAct(_list_ui.LIST_UI_VIEWER_TYPE.SPECTRUM);
   const onViewAnalysis = () => setUiViewerTypeAct(_list_ui.LIST_UI_VIEWER_TYPE.ANALYSIS);
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     className: classes.group,
-    "data-testid": "Viewer"
-  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Spectrum Viewer")
-  }, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isfocusSpectrumSt, classes), 'btn-sv-bar-spctrum'),
-    onClick: onViewSpectrum
-  }, /*#__PURE__*/_react.default.createElement(_TimelineOutlined.default, {
-    className: classes.icon
-  }))), hideCmdAnaViewerSt ? null : /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Analysis Viewer")
-  }, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isfocusAnalysisSt, classes), 'btn-sv-bar-analysis'),
-    disabled: disableCmdAnaViewerSt,
-    onClick: onViewAnalysis
-  }, /*#__PURE__*/_react.default.createElement(_SpellcheckOutlined.default, {
-    className: classes.icon
-  }))));
+    "data-testid": "Viewer",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Spectrum Viewer"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: (0, _classnames.default)((0, _common.focusStyle)(isfocusSpectrumSt, classes), 'btn-sv-bar-spctrum'),
+        onClick: onViewSpectrum,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimelineOutlined.default, {
+          className: classes.icon
+        })
+      })
+    }), hideCmdAnaViewerSt ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Analysis Viewer"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: (0, _classnames.default)((0, _common.focusStyle)(isfocusAnalysisSt, classes), 'btn-sv-bar-analysis'),
+        disabled: disableCmdAnaViewerSt,
+        onClick: onViewAnalysis,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpellcheckOutlined.default, {
+          className: classes.icon
+        })
+      })
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/cmd_bar/02_zoom.js b/dist/components/cmd_bar/02_zoom.js
index f615d3b3..799169fb 100644
--- a/dist/components/cmd_bar/02_zoom.js
+++ b/dist/components/cmd_bar/02_zoom.js
@@ -17,44 +17,60 @@ var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _ui = require("../../actions/ui");
 var _common = require("./common");
 var _list_ui = require("../../constants/list_ui");
+var _r10_align_compare_x = _interopRequireDefault(require("./r10_align_compare_x"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, react/function-component-definition */
 
 const styles = () => Object.assign({}, _common.commonStyle);
-const Zoom = _ref => {
-  let {
-    classes,
-    isfocusZoomSt,
-    setUiSweepTypeAct
-  } = _ref;
-  const onSweepZoomIn = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.ZOOMIN);
-  const onSweepZoomReset = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.ZOOMRESET);
-  return /*#__PURE__*/_react.default.createElement("span", {
+const Zoom = ({
+  classes,
+  isfocusZoomSt,
+  curveIdx,
+  setUiSweepTypeAct
+}) => {
+  const onSweepZoomIn = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.ZOOMIN, curveIdx);
+  const onSweepZoomReset = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.ZOOMRESET, curveIdx);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     className: classes.group,
-    "data-testid": "Zoom"
-  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Zoom In")
-  }, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isfocusZoomSt, classes), 'btn-sv-bar-zoomin'),
-    onClick: onSweepZoomIn
-  }, /*#__PURE__*/_react.default.createElement(_ZoomInOutlined.default, {
-    className: (0, _classnames.default)(classes.icon, classes.iconWp)
-  }))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Reset Zoom")
-  }, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)('btn-sv-bar-zoomreset'),
-    onClick: onSweepZoomReset
-  }, /*#__PURE__*/_react.default.createElement(_FindReplaceOutlined.default, {
-    className: classes.icon
-  }))));
+    "data-testid": "Zoom",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Zoom In"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isfocusZoomSt, classes), 'btn-sv-bar-zoomin'),
+          onClick: onSweepZoomIn,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomInOutlined.default, {
+            className: (0, _classnames.default)(classes.icon, classes.iconWp)
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Reset Zoom"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)('btn-sv-bar-zoomreset'),
+          onClick: onSweepZoomReset,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FindReplaceOutlined.default, {
+            className: classes.icon
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r10_align_compare_x.default, {
+      compact: true
+    })]
+  });
 };
 const mapStateToProps = (state, _) => (
 // eslint-disable-line
 {
-  isfocusZoomSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.ZOOMIN
+  isfocusZoomSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.ZOOMIN,
+  curveIdx: state.curve.curveIdx
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   setUiSweepTypeAct: _ui.setUiSweepType
@@ -62,6 +78,7 @@ const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
 Zoom.propTypes = {
   classes: _propTypes.default.object.isRequired,
   isfocusZoomSt: _propTypes.default.bool.isRequired,
+  curveIdx: _propTypes.default.number.isRequired,
   setUiSweepTypeAct: _propTypes.default.func.isRequired
 };
 var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _withStyles.default)(styles))(Zoom);
\ No newline at end of file
diff --git a/dist/components/cmd_bar/03_peak.js b/dist/components/cmd_bar/03_peak.js
index baa9d3a9..ea2777d2 100644
--- a/dist/components/cmd_bar/03_peak.js
+++ b/dist/components/cmd_bar/03_peak.js
@@ -20,31 +20,31 @@ var _list_ui = require("../../constants/list_ui");
 var _tri_btn = _interopRequireDefault(require("./tri_btn"));
 var _edit_peak = require("../../actions/edit_peak");
 var _extractPeaksEdit = require("../../helpers/extractPeaksEdit");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline, no-unused-vars,
 react/function-component-definition, react/require-default-props, max-len,
 react/no-unused-prop-types */
 
 const styles = () => Object.assign({}, _common.commonStyle);
-const Peak = _ref => {
-  let {
-    classes,
-    setUiSweepTypeAct,
-    isFocusAddPeakSt,
-    disableAddPeakSt,
-    isFocusRmPeakSt,
-    disableRmPeakSt,
-    isFocusSetRefSt,
-    disableSetRefSt,
-    isHandleMaxAndMinPeaksSt,
-    cyclicVotaSt,
-    curveSt,
-    clearAllPeaksAct,
-    feature,
-    editPeakSt,
-    thresSt,
-    shiftSt,
-    layoutSt
-  } = _ref;
+const Peak = ({
+  classes,
+  setUiSweepTypeAct,
+  isFocusAddPeakSt,
+  disableAddPeakSt,
+  isFocusRmPeakSt,
+  disableRmPeakSt,
+  isFocusSetRefSt,
+  disableSetRefSt,
+  isHandleMaxAndMinPeaksSt,
+  cyclicVotaSt,
+  curveSt,
+  clearAllPeaksAct,
+  feature,
+  editPeakSt,
+  thresSt,
+  shiftSt,
+  layoutSt
+}) => {
   let onSweepPeakAdd = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.PEAK_ADD);
   let onSweepPeakDELETE = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.PEAK_DELETE);
   let onSweepAnchorShift = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.ANCHOR_SHIFT);
@@ -77,50 +77,71 @@ const Peak = _ref => {
       onSweepAnchorShift = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_SET_REF, curveIdx);
     }
   }
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     className: classes.group,
-    "data-testid": "Peak"
-  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Add Peak")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddPeakSt, classes), 'btn-sv-bar-addpeak'),
-    disabled: disableAddPeakSt,
-    onClick: onSweepPeakAdd
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addpeak')
-  }, "P+")))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Remove Peak")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmPeakSt, classes), 'btn-sv-bar-rmpeak'),
-    disabled: disableRmPeakSt,
-    onClick: onSweepPeakDELETE
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmpeak')
-  }, "P-")))), /*#__PURE__*/_react.default.createElement(_tri_btn.default, {
-    content: {
-      tp: 'Clear All Peaks'
-    },
-    cb: onClearAll,
-    isClearAllDisabled: disableRmPeakSt
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmallpeaks')
-  }, "P"), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-rmallpeaks')
-  }, "x")), !disableSetRefSt ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Set Reference")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusSetRefSt, classes), 'btn-sv-bar-setref'),
-    disabled: disableSetRefSt,
-    onClick: onSweepAnchorShift
-  }, /*#__PURE__*/_react.default.createElement(_AddLocationOutlined.default, {
-    className: classes.icon
-  })))) : null);
+    "data-testid": "Peak",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Add Peak"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddPeakSt, classes), 'btn-sv-bar-addpeak'),
+          disabled: disableAddPeakSt,
+          onClick: onSweepPeakAdd,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addpeak'),
+            children: "P+"
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Remove Peak"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmPeakSt, classes), 'btn-sv-bar-rmpeak'),
+          disabled: disableRmPeakSt,
+          onClick: onSweepPeakDELETE,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmpeak'),
+            children: "P-"
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tri_btn.default, {
+      content: {
+        tp: 'Clear All Peaks'
+      },
+      cb: onClearAll,
+      isClearAllDisabled: disableRmPeakSt,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmallpeaks'),
+        children: "P"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-rmallpeaks'),
+        children: "x"
+      })]
+    }), !disableSetRefSt ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Set Reference"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusSetRefSt, classes), 'btn-sv-bar-setref'),
+          disabled: disableSetRefSt,
+          onClick: onSweepAnchorShift,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddLocationOutlined.default, {
+            className: classes.icon
+          })
+        })
+      })
+    }) : null]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/cmd_bar/04_integration.js b/dist/components/cmd_bar/04_integration.js
index 17a1f33d..2152a917 100644
--- a/dist/components/cmd_bar/04_integration.js
+++ b/dist/components/cmd_bar/04_integration.js
@@ -22,6 +22,7 @@ var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _tri_btn = _interopRequireDefault(require("./tri_btn"));
 var _common = require("./common");
 var _format = _interopRequireDefault(require("../../helpers/format"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition, react/require-default-props, max-len,
 react/no-unused-prop-types */
@@ -57,7 +58,7 @@ const setFactor = (classes, isDisable, integrationSt, setIntegrationFkrAct, curv
     const selectedIntegration = integrations[curveIdx];
     refFactor = selectedIntegration.refFactor || 1.00;
   }
-  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
     className: classes.field,
     disabled: isDisable,
     id: "intg-factor-name",
@@ -67,9 +68,10 @@ const setFactor = (classes, isDisable, integrationSt, setIntegrationFkrAct, curv
     InputProps: {
       className: (0, _classnames.default)(classes.txtInput, 'txtfield-sv-bar-input')
     },
-    label: /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txtLabel, 'txtfield-sv-bar-label')
-    }, "Ref Area"),
+    label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)(classes.txtLabel, 'txtfield-sv-bar-label'),
+      children: "Ref Area"
+    }),
     onChange: onFactorChanged,
     onBlur: onFactorChanged,
     onKeyUp: onEnterPress,
@@ -77,20 +79,19 @@ const setFactor = (classes, isDisable, integrationSt, setIntegrationFkrAct, curv
   });
 };
 const iconColor = criteria => criteria ? '#fff' : '#000';
-const Integration = _ref => {
-  let {
-    classes,
-    ignoreRef,
-    isDisableSt,
-    isFocusAddIntgSt,
-    isFocusRmIntgSt,
-    isFocusSetRefSt,
-    setUiSweepTypeAct,
-    setIntegrationFkrAct,
-    clearIntegrationAllAct,
-    curveSt,
-    integrationSt
-  } = _ref;
+const Integration = ({
+  classes,
+  ignoreRef,
+  isDisableSt,
+  isFocusAddIntgSt,
+  isFocusRmIntgSt,
+  isFocusSetRefSt,
+  setUiSweepTypeAct,
+  setIntegrationFkrAct,
+  clearIntegrationAllAct,
+  curveSt,
+  integrationSt
+}) => {
   const onSweepIntegtAdd = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_ADD);
   const onSweepIntegtRm = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_RM);
   const onSweepIntegtSR = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_SET_REF);
@@ -100,64 +101,84 @@ const Integration = _ref => {
   const onClearAll = () => clearIntegrationAllAct({
     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 Integration")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddIntgSt, classes), 'btn-add-inter'),
-    disabled: isDisableSt,
-    onClick: onSweepIntegtAdd
-  }, /*#__PURE__*/_react.default.createElement(_react2.default, {
-    path: _js.mdiMathIntegral,
-    size: iconSize,
-    color: iconColor(isFocusAddIntgSt || isDisableSt),
-    className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-addint')
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-addint')
-  }, "+")))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Remove Integration")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmIntgSt, classes), 'btn-remove-inter'),
-    disabled: isDisableSt,
-    onClick: onSweepIntegtRm
-  }, /*#__PURE__*/_react.default.createElement(_react2.default, {
-    path: _js.mdiMathIntegral,
-    size: iconSize,
-    color: iconColor(isFocusRmIntgSt || isDisableSt),
-    className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-rmint')
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-rmint')
-  }, "-")))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Set Integration Reference")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusSetRefSt, classes), 'btn-set-inter-ref'),
-    disabled: isDisableSt,
-    onClick: onSweepIntegtSR
-  }, /*#__PURE__*/_react.default.createElement(_react2.default, {
-    path: _js.mdiReflectVertical,
-    size: iconSize,
-    color: iconColor(isFocusSetRefSt || isDisableSt),
-    className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-refint')
-  })))), !ignoreRef ? setFactor(classes, isDisableSt, integrationSt, setIntegrationFkrAct, curveIdx) : null, /*#__PURE__*/_react.default.createElement(_tri_btn.default, {
-    content: {
-      tp: 'Clear All Integration'
-    },
-    cb: onClearAll
-  }, /*#__PURE__*/_react.default.createElement(_react2.default, {
-    path: _js.mdiMathIntegral,
-    size: iconSize,
-    color: iconColor(isDisableSt),
-    className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-rmallint')
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-rmallint')
-  }, "x")));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: classes.group,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Add Integration"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddIntgSt, classes), 'btn-add-inter'),
+          disabled: isDisableSt,
+          onClick: onSweepIntegtAdd,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
+            path: _js.mdiMathIntegral,
+            size: iconSize,
+            color: iconColor(isFocusAddIntgSt || isDisableSt),
+            className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-addint')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-addint'),
+            children: "+"
+          })]
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Remove Integration"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmIntgSt, classes), 'btn-remove-inter'),
+          disabled: isDisableSt,
+          onClick: onSweepIntegtRm,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
+            path: _js.mdiMathIntegral,
+            size: iconSize,
+            color: iconColor(isFocusRmIntgSt || isDisableSt),
+            className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-rmint')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-rmint'),
+            children: "-"
+          })]
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Set Integration Reference"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusSetRefSt, classes), 'btn-set-inter-ref'),
+          disabled: isDisableSt,
+          onClick: onSweepIntegtSR,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
+            path: _js.mdiReflectVertical,
+            size: iconSize,
+            color: iconColor(isFocusSetRefSt || isDisableSt),
+            className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-refint')
+          })
+        })
+      })
+    }), !ignoreRef ? setFactor(classes, isDisableSt, integrationSt, setIntegrationFkrAct, curveIdx) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tri_btn.default, {
+      content: {
+        tp: 'Clear All Integration'
+      },
+      cb: onClearAll,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
+        path: _js.mdiMathIntegral,
+        size: iconSize,
+        color: iconColor(isDisableSt),
+        className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-rmallint')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-rmallint'),
+        children: "x"
+      })]
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/cmd_bar/05_multiplicity.js b/dist/components/cmd_bar/05_multiplicity.js
index bc88bf01..c725320e 100644
--- a/dist/components/cmd_bar/05_multiplicity.js
+++ b/dist/components/cmd_bar/05_multiplicity.js
@@ -18,25 +18,25 @@ var _list_ui = require("../../constants/list_ui");
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _tri_btn = _interopRequireDefault(require("./tri_btn"));
 var _common = require("./common");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition, react/require-default-props, max-len,
 react/no-unused-prop-types */
 
 const styles = () => Object.assign({}, _common.commonStyle);
-const Multiplicity = _ref => {
-  let {
-    classes,
-    isFocusAddMpySt,
-    disableAddMpySt,
-    isFocusRmMpySt,
-    disableRmMpySt,
-    isFocusAddPeakSt,
-    isFocusRmPeakSt,
-    disableMpyPeakSt,
-    setUiSweepTypeAct,
-    clearMpyAllAct,
-    curveSt
-  } = _ref;
+const Multiplicity = ({
+  classes,
+  isFocusAddMpySt,
+  disableAddMpySt,
+  isFocusRmMpySt,
+  disableRmMpySt,
+  isFocusAddPeakSt,
+  isFocusRmPeakSt,
+  disableMpyPeakSt,
+  setUiSweepTypeAct,
+  clearMpyAllAct,
+  curveSt
+}) => {
   const onSweepMutAdd = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.MULTIPLICITY_SWEEP_ADD);
   const onOneMutAdd = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.MULTIPLICITY_ONE_RM);
   const onPeakMutAdd = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.MULTIPLICITY_PEAK_ADD);
@@ -47,59 +47,86 @@ const Multiplicity = _ref => {
   const onClearAll = () => clearMpyAllAct({
     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 Multiplicity")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddMpySt, classes), 'btn-sv-bar-addmpy'),
-    disabled: disableAddMpySt,
-    onClick: onSweepMutAdd
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addmpy')
-  }, "J+")))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Remove Multiplicity")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmMpySt, classes), 'btn-sv-bar-rmmpy'),
-    disabled: disableRmMpySt,
-    onClick: onOneMutAdd
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmmpy')
-  }, "J-")))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Add Peak for Multiplicity")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddPeakSt, classes), 'btn-sv-bar-addpeakmpy'),
-    disabled: disableMpyPeakSt,
-    onClick: onPeakMutAdd
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addpeakmpy')
-  }, "JP+")))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Remove Peak for Multiplicity")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmPeakSt, classes), 'btn-sv-bar-rmpeakmpy'),
-    disabled: disableMpyPeakSt,
-    onClick: onPeakMutRm
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmpeakmpy')
-  }, "JP-")))), disableAddMpySt ? null :
-  /*#__PURE__*/
-  // eslint-disable-line
-  _react.default.createElement(_tri_btn.default, {
-    content: {
-      tp: 'Clear All Multiplicity'
-    },
-    cb: onClearAll
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmallmpy')
-  }, "Jx")));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: classes.group,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Add Multiplicity"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddMpySt, classes), 'btn-sv-bar-addmpy'),
+          disabled: disableAddMpySt,
+          onClick: onSweepMutAdd,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addmpy'),
+            children: "J+"
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Remove Multiplicity"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmMpySt, classes), 'btn-sv-bar-rmmpy'),
+          disabled: disableRmMpySt,
+          onClick: onOneMutAdd,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmmpy'),
+            children: "J-"
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Add Peak for Multiplicity"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddPeakSt, classes), 'btn-sv-bar-addpeakmpy'),
+          disabled: disableMpyPeakSt,
+          onClick: onPeakMutAdd,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addpeakmpy'),
+            children: "JP+"
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Remove Peak for Multiplicity"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmPeakSt, classes), 'btn-sv-bar-rmpeakmpy'),
+          disabled: disableMpyPeakSt,
+          onClick: onPeakMutRm,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmpeakmpy'),
+            children: "JP-"
+          })
+        })
+      })
+    }), disableAddMpySt ? null :
+    /*#__PURE__*/
+    // eslint-disable-line
+    (0, _jsxRuntime.jsx)(_tri_btn.default, {
+      content: {
+        tp: 'Clear All Multiplicity'
+      },
+      cb: onClearAll,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmallmpy'),
+        children: "Jx"
+      })
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/cmd_bar/06_undo_redo.js b/dist/components/cmd_bar/06_undo_redo.js
index 34bf0720..24a8bae7 100644
--- a/dist/components/cmd_bar/06_undo_redo.js
+++ b/dist/components/cmd_bar/06_undo_redo.js
@@ -16,43 +16,52 @@ var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _RedoOutlined = _interopRequireDefault(require("@mui/icons-material/RedoOutlined"));
 var _UndoOutlined = _interopRequireDefault(require("@mui/icons-material/UndoOutlined"));
 var _common = require("./common");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition, react/require-default-props, max-len,
 react/no-unused-prop-types */
 
 const styles = () => Object.assign({}, _common.commonStyle);
-const UndoRedo = _ref => {
-  let {
-    classes,
-    canUndo,
-    canRedo,
-    onUndoAct,
-    onRedoAct
-  } = _ref;
-  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"
-    }, "Undo")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)('btn-sv-bar-undo'),
-    disabled: !canUndo,
-    onClick: onUndoAct
-  }, /*#__PURE__*/_react.default.createElement(_UndoOutlined.default, {
-    className: classes.icon
-  })))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Redo")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)('btn-sv-bar-redo'),
-    disabled: !canRedo,
-    onClick: onRedoAct
-  }, /*#__PURE__*/_react.default.createElement(_RedoOutlined.default, {
-    className: classes.icon
-  })))));
-};
+const UndoRedo = ({
+  classes,
+  canUndo,
+  canRedo,
+  onUndoAct,
+  onRedoAct
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+  className: classes.group,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "txt-sv-tp",
+      children: "Undo"
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: (0, _classnames.default)('btn-sv-bar-undo'),
+        disabled: !canUndo,
+        onClick: onUndoAct,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_UndoOutlined.default, {
+          className: classes.icon
+        })
+      })
+    })
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "txt-sv-tp",
+      children: "Redo"
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: (0, _classnames.default)('btn-sv-bar-redo'),
+        disabled: !canRedo,
+        onClick: onRedoAct,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RedoOutlined.default, {
+          className: classes.icon
+        })
+      })
+    })
+  })]
+});
 const canUndoFunc = state => state.editPeak.past.length > 0 || state.integration.past.length > 0 || state.multiplicity.past.length > 0;
 const canRedoFunc = state => state.editPeak.future.length > 0 || state.integration.future.length > 0 || state.multiplicity.future.length > 0;
 const mapStateToProps = (state, _) => (
diff --git a/dist/components/cmd_bar/07_pecker.js b/dist/components/cmd_bar/07_pecker.js
index 154b3196..d8fbf678 100644
--- a/dist/components/cmd_bar/07_pecker.js
+++ b/dist/components/cmd_bar/07_pecker.js
@@ -19,6 +19,7 @@ var _common = require("./common");
 var _list_ui = require("../../constants/list_ui");
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _cyclic_voltammetry = require("../../actions/cyclic_voltammetry");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition, react/require-default-props, max-len,
 react/no-unused-prop-types */
@@ -59,7 +60,7 @@ const setRef = (classes, cyclicVotaSt, curveIdx, setCylicVoltaRefFactorAct) => {
       });
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_material.TextField, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
     className: classes.field,
     id: "intg-factor-name",
     type: "number",
@@ -68,28 +69,28 @@ const setRef = (classes, cyclicVotaSt, curveIdx, setCylicVoltaRefFactorAct) => {
     InputProps: {
       className: (0, _classnames.default)(classes.txtInput, 'txtfield-sv-bar-input')
     },
-    label: /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txtLabel, 'txtfield-sv-bar-label')
-    }, hasRefPeaks ? 'Ref Value (V)' : 'Shift'),
+    label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)(classes.txtLabel, 'txtfield-sv-bar-label'),
+      children: hasRefPeaks ? 'Ref Value (V)' : 'Shift'
+    }),
     variant: "outlined",
     onChange: onFactorChanged,
     onBlur: onFactorChanged,
     onKeyUp: onEnterPress
   });
 };
-const Pecker = _ref => {
-  let {
-    classes,
-    layoutSt,
-    isFocusAddPeckerSt,
-    isFocusRmPeckerSt,
-    setUiSweepTypeAct,
-    curveSt,
-    cyclicVotaSt,
-    setCylicVoltaRefFactorAct,
-    isFocusSetRefSt,
-    setCylicVoltaRefAct
-  } = _ref;
+const Pecker = ({
+  classes,
+  layoutSt,
+  isFocusAddPeckerSt,
+  isFocusRmPeckerSt,
+  setUiSweepTypeAct,
+  curveSt,
+  cyclicVotaSt,
+  setCylicVoltaRefFactorAct,
+  isFocusSetRefSt,
+  setCylicVoltaRefAct
+}) => {
   const {
     curveIdx
   } = curveSt;
@@ -109,36 +110,58 @@ const Pecker = _ref => {
     } = spectra;
     hasRefPeaks = hasRefPeak;
   }
-  return !_cfg.default.hidePanelCyclicVolta(layoutSt) ? /*#__PURE__*/_react.default.createElement("span", {
-    "data-testid": "Pecker"
-  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Add Pecker")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddPeckerSt, classes), 'btn-sv-bar-addpecker'),
-    onClick: onSweepPeckerAdd
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addpeak')
-  }, "I", /*#__PURE__*/_react.default.createElement("sub", null, "\u03BB0"), "+")))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Remove Pecker")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmPeckerSt, classes), 'btn-sv-bar-rmpecker'),
-    onClick: onSweepPeckerDELETE
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmpeak')
-  }, "I", /*#__PURE__*/_react.default.createElement("sub", null, "\u03BB0"), "-")))), setRef(classes, cyclicVotaSt, curveIdx, setCylicVoltaRefFactorAct), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, hasRefPeaks ? 'Set Reference' : 'Set Shift')
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusSetRefSt, classes), 'btn-sv-bar-setref'),
-    onClick: onConfirmSetRef
-  }, /*#__PURE__*/_react.default.createElement(_AddLocationOutlined.default, {
-    className: classes.icon
-  }))))) : /*#__PURE__*/_react.default.createElement("span", null);
+  return !_cfg.default.hidePanelCyclicVolta(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    "data-testid": "Pecker",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Add Pecker"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddPeckerSt, classes), 'btn-sv-bar-addpecker'),
+          onClick: onSweepPeckerAdd,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addpeak'),
+            children: ["I", /*#__PURE__*/(0, _jsxRuntime.jsx)("sub", {
+              children: "\u03BB0"
+            }), "+"]
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Remove Pecker"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmPeckerSt, classes), 'btn-sv-bar-rmpecker'),
+          onClick: onSweepPeckerDELETE,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmpeak'),
+            children: ["I", /*#__PURE__*/(0, _jsxRuntime.jsx)("sub", {
+              children: "\u03BB0"
+            }), "-"]
+          })
+        })
+      })
+    }), setRef(classes, cyclicVotaSt, curveIdx, setCylicVoltaRefFactorAct), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: hasRefPeaks ? 'Set Reference' : 'Set Shift'
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)((0, _common.focusStyle)(isFocusSetRefSt, classes), 'btn-sv-bar-setref'),
+          onClick: onConfirmSetRef,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddLocationOutlined.default, {
+            className: classes.icon
+          })
+        })
+      })
+    })]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {});
 };
 const mapStateToProps = (state, _) => (
 // eslint-disable-line
diff --git a/dist/components/cmd_bar/common.js b/dist/components/cmd_bar/common.js
index 9cefb64b..f99639f0 100644
--- a/dist/components/cmd_bar/common.js
+++ b/dist/components/cmd_bar/common.js
@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.focusStyle = exports.commonStyle = exports.MuButton = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@mui/styles");
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable no-unused-vars, max-len, indent, react/function-component-definition, react/self-closing-comp, react/prop-types, react/jsx-props-no-spreading */
 
 const useStyles = (0, _styles.makeStyles)(theme => ({
@@ -30,12 +29,13 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
 const MuButton = props => {
   const classes = useStyles();
   const {
-      className
-    } = props,
-    other = (0, _objectWithoutProperties2.default)(props, ["className"]);
-  return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
-    className: (0, _classnames.default)(classes.muiBtn, className)
-  }, other));
+    className,
+    ...other
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    className: (0, _classnames.default)(classes.muiBtn, className),
+    ...other
+  });
 };
 exports.MuButton = MuButton;
 const commonStyle = exports.commonStyle = {
diff --git a/dist/components/cmd_bar/index.js b/dist/components/cmd_bar/index.js
index fdfcd5c4..765e7529 100644
--- a/dist/components/cmd_bar/index.js
+++ b/dist/components/cmd_bar/index.js
@@ -24,45 +24,44 @@ 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 _r09_detector = _interopRequireDefault(require("./r09_detector"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition, react/require-default-props */
 
 const styles = () => Object.assign({}, {}, _common.commonStyle);
-const CmdBar = _ref => {
-  let {
-    classes,
-    feature,
-    hasEdit,
-    forecast,
-    operations,
-    editorOnly,
-    jcampIdx,
-    hideThreshold
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.card
-  }, /*#__PURE__*/_react.default.createElement(_viewer.default, {
+const CmdBar = ({
+  classes,
+  feature,
+  hasEdit,
+  forecast,
+  operations,
+  editorOnly,
+  jcampIdx,
+  hideThreshold
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  className: classes.card,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_viewer.default, {
     editorOnly: editorOnly
-  }), /*#__PURE__*/_react.default.createElement(_zoom.default, null), /*#__PURE__*/_react.default.createElement(_peak.default, {
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_zoom.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_peak.default, {
     jcampIdx: jcampIdx,
     feature: feature
-  }), /*#__PURE__*/_react.default.createElement(_pecker.default, {
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_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__*/(0, _jsxRuntime.jsx)(_integration.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiplicity.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_undo_redo.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r04_submit.default, {
     operations: operations,
     feature: feature,
     forecast: forecast,
     editorOnly: editorOnly,
     hideSwitch: false,
     disabled: false
-  }), hideThreshold ? null : /*#__PURE__*/_react.default.createElement(_r03_threshold.default, {
+  }), hideThreshold ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_r03_threshold.default, {
     feature: feature,
     hasEdit: hasEdit
-  }), /*#__PURE__*/_react.default.createElement(_r01_layout.default, {
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r01_layout.default, {
     feature: feature,
     hasEdit: hasEdit
-  }), /*#__PURE__*/_react.default.createElement(_r07_wavelength_btn.default, null), /*#__PURE__*/_react.default.createElement(_r08_change_axes.default, null), /*#__PURE__*/_react.default.createElement(_r09_detector.default, null));
-};
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r07_wavelength_btn.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r08_change_axes.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r09_detector.default, {})]
+});
 const mapStateToProps = (state, _) => (
 // eslint-disable-line
 {});
diff --git a/dist/components/cmd_bar/r01_layout.js b/dist/components/cmd_bar/r01_layout.js
index 984ca5db..4cbc5c95 100644
--- a/dist/components/cmd_bar/r01_layout.js
+++ b/dist/components/cmd_bar/r01_layout.js
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactRedux = require("react-redux");
@@ -20,6 +20,8 @@ var _list_shift = require("../../constants/list_shift");
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _common = require("./common");
 var _format = _interopRequireDefault(require("../../helpers/format"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition */
 
@@ -32,168 +34,299 @@ const styles = () => Object.assign({
   }
 }, _common.commonStyle);
 const shiftSelect = (classes, layoutSt, setShiftRefAct, shiftSt, curveSt) => {
-  if (_cfg.default.hideSolvent(layoutSt)) return null;
-  // const onChange = (e) => setShiftRefAct(e.target.value);
+  if (_cfg.default.hideSolvent(layoutSt)) {
+    return null;
+  }
   const {
     curveIdx
   } = curveSt;
   const {
     shifts
   } = shiftSt;
-  const selectedShift = shifts[curveIdx];
-  const shiftRef = selectedShift.ref;
+  const selectedShift = shifts[curveIdx] || {};
+  const listShift = (0, _list_shift.getListShift)(layoutSt) || [];
+  const shiftRefName = selectedShift?.ref?.name || '';
+  const isInList = listShift.some(r => r.name === shiftRefName);
+  const selectValue = isInList ? shiftRefName : '';
   const onChange = e => {
-    const payload = {
-      dataToSet: e.target.value,
-      curveIdx
-    };
-    setShiftRefAct(payload);
+    const name = e.target.value;
+    const refObj = listShift.find(r => r.name === name);
+    if (refObj) {
+      setShiftRefAct({
+        dataToSet: refObj,
+        curveIdx
+      });
+    }
   };
-  const listShift = (0, _list_shift.getListShift)(layoutSt);
-  const content = listShift.map(ref => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: ref,
-    key: ref.name
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-shift')
-  }, `${ref.name}: ${_format.default.strNumberFixedDecimal(ref.value, 2)} ppm`)));
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldShift),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-solvent-label",
-    className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
-  }, "Reference"), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    value: shiftRef,
-    labelId: "select-solvent-label",
-    label: "Solvent",
-    onChange: onChange,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-shift')
-  }, content));
+    variant: "outlined",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-solvent-label",
+      className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+      children: "Reference"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+      value: selectValue,
+      labelId: "select-solvent-label",
+      label: "Solvent",
+      onChange: onChange,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-shift'),
+      children: listShift.map(ref => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: ref.name,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-shift'),
+          children: `${ref.name}: ${_format.default.strNumberFixedDecimal(ref.value, 2)} ppm`
+        })
+      }, ref.name))
+    })]
+  });
 };
 const layoutSelect = (classes, layoutSt, updateLayoutAct) => {
   const onChange = e => updateLayoutAct(e.target.value);
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
-    className: (0, _classnames.default)(classes.fieldLayout)
-  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-layout-label",
-    className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
-  }, "Layout"), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "select-layout-label",
-    label: "Layout",
-    value: layoutSt,
-    onChange: onChange,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout')
-  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.PLAIN
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "plain")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.IR
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "IR")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.RAMAN
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "RAMAN")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.UVVIS
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "UV/VIS")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.HPLC_UVVIS
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "HPLC UV/VIS")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.TGA
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "TGA (THERMOGRAVIMETRIC ANALYSIS)")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.DSC
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "DSC (DIFFERENTIAL SCANNING CALORIMETRY)")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.XRD
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "XRD (X-RAY DIFFRACTION)")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.H1
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, /*#__PURE__*/_react.default.createElement("sup", null, "1"), "H")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.C13
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, /*#__PURE__*/_react.default.createElement("sup", null, "13"), "C")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.F19
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, /*#__PURE__*/_react.default.createElement("sup", null, "19"), "F")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.P31
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, /*#__PURE__*/_react.default.createElement("sup", null, "31"), "P")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.N15
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, /*#__PURE__*/_react.default.createElement("sup", null, "15"), "N")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.Si29
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, /*#__PURE__*/_react.default.createElement("sup", null, "29"), "Si")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.MS
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "MS")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "CV (CYCLIC VOLTAMMETRY)")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.CDS
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "CDS (CIRCULAR DICHROISM SPECTROSCOPY)")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.SEC
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "SEC")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.GC
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "GC (GAS CHROMATOGRAPHY)")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.AIF
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "SORPTION-DESORPTION")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.EMISSIONS
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "EMISSIONS")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.DLS_ACF
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "DLS ACF")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: _list_layout.LIST_LAYOUT.DLS_INTENSITY
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, "DLS INTENSITY"))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+    className: (0, _classnames.default)(classes.fieldLayout),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-layout-label",
+      className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+      children: "Layout"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Select, {
+      labelId: "select-layout-label",
+      label: "Layout",
+      value: layoutSt,
+      onChange: onChange,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.PLAIN,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "plain"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.IR,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "IR"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.RAMAN,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "RAMAN"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.UVVIS,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "UV/VIS"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.HPLC_UVVIS,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "HPLC UV/VIS"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.TGA,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "TGA (THERMOGRAVIMETRIC ANALYSIS)"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.DSC,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "DSC (DIFFERENTIAL SCANNING CALORIMETRY)"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.XRD,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "XRD (X-RAY DIFFRACTION)"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.H1,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("sup", {
+            children: "1"
+          }), "H"]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.C13,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("sup", {
+            children: "13"
+          }), "C"]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.F19,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("sup", {
+            children: "19"
+          }), "F"]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.P31,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("sup", {
+            children: "31"
+          }), "P"]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.N15,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("sup", {
+            children: "15"
+          }), "N"]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.Si29,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("sup", {
+            children: "29"
+          }), "Si"]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.MS,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "MS"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "CV (CYCLIC VOLTAMMETRY)"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.CDS,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "CDS (CIRCULAR DICHROISM SPECTROSCOPY)"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.SEC,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "SEC"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.GC,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "GC (GAS CHROMATOGRAPHY)"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.AIF,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "SORPTION-DESORPTION"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.EMISSIONS,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "EMISSIONS"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.DLS_ACF,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "DLS ACF"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: _list_layout.LIST_LAYOUT.DLS_INTENSITY,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: "DLS INTENSITY"
+        })
+      })]
+    })]
+  });
 };
-const Layout = _ref => {
-  let {
-    classes,
-    feature,
-    hasEdit,
-    layoutSt,
-    setShiftRefAct,
-    updateLayoutAct,
-    curveSt,
-    shiftSt
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.groupRight
-  }, layoutSelect(classes, layoutSt, updateLayoutAct), shiftSelect(classes, layoutSt, setShiftRefAct, shiftSt, curveSt), /*#__PURE__*/_react.default.createElement(_r02_scan.default, {
-    feature: feature,
-    hasEdit: hasEdit
-  }));
+const PLACEHOLDER = '- - -';
+const norm = s => (s || '').toString().toLowerCase().normalize('NFKD').replace(/[^a-z0-9]+/g, '');
+function solventKeyOf(feature) {
+  const r = feature?.metadata?.solventName ?? feature?.metadata?.solvent ?? feature?.meta?.solventName ?? feature?.meta?.solvent ?? feature?.solventName ?? feature?.solvent ?? null;
+  const a = feature?.metadata?.solvent_label ?? feature?.metadata?.solventLabel ?? null;
+  const raw = r && r !== PLACEHOLDER ? r : null;
+  const alt = a && a !== PLACEHOLDER ? a : null;
+  return norm(raw || alt || '');
+}
+function pickBestRef(list, key) {
+  if (!key || !list?.length) return null;
+  const scored = [];
+  list.forEach(r => {
+    const nLabel = norm(r.label);
+    const nName = norm(r.name);
+    const nNsdb = norm(r.nsdb);
+    let s = 0;
+    if (nLabel && nLabel === key) s += 3;
+    if (nNsdb && nNsdb.includes(key)) s += 2;
+    if (nName && nName.includes(key)) s += 1;
+    if (s > 0) scored.push({
+      r,
+      s
+    });
+  });
+  if (!scored.length) return null;
+  let max = 0;
+  scored.forEach(x => {
+    if (x.s > max) max = x.s;
+  });
+  let cand = scored.filter(x => x.s === max).map(x => x.r);
+  if (cand.length > 1) {
+    const vals = cand.map(c => typeof c.value === 'number' ? c.value : null).filter(v => v != null).sort((a, b) => a - b);
+    if (vals.length) {
+      const m = vals[Math.floor(vals.length / 2)];
+      cand = cand.slice().sort((a, b) => Math.abs((a.value ?? m) - m) - Math.abs((b.value ?? m) - m));
+    }
+    if (cand.length > 1) {
+      cand.sort((a, b) => (a.name?.length || 0) - (b.name?.length || 0));
+    }
+  }
+  return cand[0] || null;
+}
+function isRefUnset(shiftSt, curveIdx, list) {
+  const name = shiftSt?.shifts?.[curveIdx]?.ref?.name || '';
+  if (!name || name === PLACEHOLDER) return true;
+  return !(list || []).some(r => r.name === name);
+}
+const Layout = ({
+  classes,
+  feature,
+  hasEdit,
+  layoutSt,
+  setShiftRefAct,
+  updateLayoutAct,
+  curveSt,
+  shiftSt
+}) => {
+  const {
+    curveIdx
+  } = curveSt;
+  const list = (0, _list_shift.getListShift)(layoutSt) || [];
+  const unset = isRefUnset(shiftSt, curveIdx, list);
+  const key = solventKeyOf(feature);
+  const best = pickBestRef(list, key);
+  (0, _react.useEffect)(() => {
+    if (unset && best) setShiftRefAct({
+      dataToSet: best,
+      curveIdx
+    });
+  }, [unset, best, curveIdx, setShiftRefAct]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: classes.groupRight,
+    children: [layoutSelect(classes, layoutSt, updateLayoutAct), shiftSelect(classes, layoutSt, setShiftRefAct, shiftSt, curveSt), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r02_scan.default, {
+      feature: feature,
+      hasEdit: hasEdit
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/cmd_bar/r02_scan.js b/dist/components/cmd_bar/r02_scan.js
index d30ce659..89c5b7a3 100644
--- a/dist/components/cmd_bar/r02_scan.js
+++ b/dist/components/cmd_bar/r02_scan.js
@@ -17,6 +17,7 @@ var _HowToRegOutlined = _interopRequireDefault(require("@mui/icons-material/HowT
 var _RefreshOutlined = _interopRequireDefault(require("@mui/icons-material/RefreshOutlined"));
 var _scan = require("../../actions/scan");
 var _common = require("./common");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition */
 
@@ -25,32 +26,38 @@ const styles = () => Object.assign({
     width: 90
   }
 }, _common.commonStyle);
-const restoreIcon = (classes, hasEdit, isEdit) => hasEdit && isEdit ? /*#__PURE__*/_react.default.createElement(_HowToRegOutlined.default, {
+const restoreIcon = (classes, hasEdit, isEdit) => hasEdit && isEdit ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_HowToRegOutlined.default, {
   className: classes.icon
-}) : /*#__PURE__*/_react.default.createElement(_CloudDoneOutlined.default, {
+}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudDoneOutlined.default, {
   className: classes.icon
 });
 const restoreTp = (hasEdit, isEdit) => hasEdit && isEdit ? 'User Defined Scan' : 'Auto Picked Scan';
-const btnRestore = (classes, hasEdit, isEdit, toggleEditAct) => /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-  title: /*#__PURE__*/_react.default.createElement("span", {
-    className: "txt-sv-tp"
-  }, restoreTp(hasEdit, isEdit))
-}, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-  className: (0, _classnames.default)('btn-sv-bar-scanrst'),
-  disabled: !hasEdit,
-  onClick: toggleEditAct
-}, restoreIcon(classes, hasEdit, isEdit)));
-const btnRrfresh = (classes, disabled, refreshAct) => /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-  title: /*#__PURE__*/_react.default.createElement("span", {
-    className: "txt-sv-tp"
-  }, "Refresh Scan")
-}, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-  className: (0, _classnames.default)('btn-sv-bar-scanrfs'),
-  disabled: disabled,
-  onClick: refreshAct
-}, /*#__PURE__*/_react.default.createElement(_RefreshOutlined.default, {
-  className: classes.icon
-})));
+const btnRestore = (classes, hasEdit, isEdit, toggleEditAct) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+  title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "txt-sv-tp",
+    children: restoreTp(hasEdit, isEdit)
+  }),
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+    className: (0, _classnames.default)('btn-sv-bar-scanrst'),
+    disabled: !hasEdit,
+    onClick: toggleEditAct,
+    children: restoreIcon(classes, hasEdit, isEdit)
+  })
+});
+const btnRrfresh = (classes, disabled, refreshAct) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+  title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "txt-sv-tp",
+    children: "Refresh Scan"
+  }),
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+    className: (0, _classnames.default)('btn-sv-bar-scanrfs'),
+    disabled: disabled,
+    onClick: refreshAct,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RefreshOutlined.default, {
+      className: classes.icon
+    })
+  })
+});
 const scanSelect = (classes, feature, layoutSt, scanSt, onChange) => {
   const {
     target,
@@ -58,43 +65,48 @@ const scanSelect = (classes, feature, layoutSt, scanSt, onChange) => {
   } = scanSt;
   if (!count) return null;
   const range = [...Array(count + 1).keys()].slice(1);
-  const content = range.map(num => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+  const content = range.map(num => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
     value: num,
-    key: num
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-scan')
-  }, `scan ${num}`)));
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-scan'),
+      children: `scan ${num}`
+    })
+  }, num));
   const defaultValue = scanSt.isAuto || !feature.scanEditTarget ? feature.scanAutoTarget : feature.scanEditTarget;
   const selValue = target || defaultValue || 1;
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldScan),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-scan-label",
-    className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
-  }, "Current Scan"), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "select-scan-label",
-    label: "Current Scan",
-    value: selValue,
-    onChange: onChange,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-scan')
-  }, content));
+    variant: "outlined",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-scan-label",
+      className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+      children: "Current Scan"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+      labelId: "select-scan-label",
+      label: "Current Scan",
+      value: selValue,
+      onChange: onChange,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-scan'),
+      children: content
+    })]
+  });
 };
-const Scan = _ref => {
-  let {
-    classes,
-    feature,
-    hasEdit,
-    layoutSt,
-    scanSt,
-    setScanTargetAct,
-    resetScanTargetAct,
-    toggleScanIsAutoAct
-  } = _ref;
+const Scan = ({
+  classes,
+  feature,
+  hasEdit,
+  layoutSt,
+  scanSt,
+  setScanTargetAct,
+  resetScanTargetAct,
+  toggleScanIsAutoAct
+}) => {
   const isMs = ['MS'].indexOf(layoutSt) >= 0;
   if (!isMs) return null;
   const onChange = e => setScanTargetAct(e.target.value);
-  return /*#__PURE__*/_react.default.createElement("span", null, scanSelect(classes, feature, layoutSt, scanSt, onChange), btnRrfresh(classes, false, resetScanTargetAct), btnRestore(classes, hasEdit, !scanSt.isAuto, toggleScanIsAutoAct));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    children: [scanSelect(classes, feature, layoutSt, scanSt, onChange), btnRrfresh(classes, false, resetScanTargetAct), btnRestore(classes, hasEdit, !scanSt.isAuto, toggleScanIsAutoAct)]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/cmd_bar/r03_threshold.js b/dist/components/cmd_bar/r03_threshold.js
index 294c33c5..4e2e6b38 100644
--- a/dist/components/cmd_bar/r03_threshold.js
+++ b/dist/components/cmd_bar/r03_threshold.js
@@ -18,6 +18,7 @@ var _RefreshOutlined = _interopRequireDefault(require("@mui/icons-material/Refre
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _threshold = require("../../actions/threshold");
 var _common = require("./common");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition */
 
@@ -27,11 +28,13 @@ const styles = () => Object.assign({
   },
   txtIcon: {}
 }, _common.commonStyle);
-const txtPercent = () => /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
-  position: "end"
-}, /*#__PURE__*/_react.default.createElement("span", {
-  className: "txt-percent"
-}, "%"));
+const txtPercent = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+  position: "end",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "txt-percent",
+    children: "%"
+  })
+});
 const setThreshold = (classes, thresVal, updateThresholdValueAct, curveSt) => {
   const {
     curveIdx
@@ -52,71 +55,83 @@ const setThreshold = (classes, thresVal, updateThresholdValueAct, curveSt) => {
       });
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
-    className: classes.field,
-    id: "outlined-name",
-    placeholder: "N.A.",
-    type: "number",
-    value: thresVal || 0.01,
-    margin: "none",
-    InputProps: {
-      endAdornment: txtPercent(),
-      className: (0, _classnames.default)(classes.txtInput, 'txtfield-sv-bar-input'),
-      inputProps: {
-        min: 0.01
-      }
-    },
-    onChange: onChange,
-    onBlur: onBlur,
-    onKeyPress: onEnterPress,
-    variant: "outlined"
-  }), /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    className: (0, _classnames.default)(classes.txtLabelBottomInput)
-  }, "Threshold"));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+    variant: "outlined",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+      className: classes.field,
+      id: "outlined-name",
+      placeholder: "N.A.",
+      type: "number",
+      value: thresVal || 0.01,
+      margin: "none",
+      InputProps: {
+        endAdornment: txtPercent(),
+        className: (0, _classnames.default)(classes.txtInput, 'txtfield-sv-bar-input'),
+        inputProps: {
+          min: 0.01
+        }
+      },
+      onChange: onChange,
+      onBlur: onBlur,
+      onKeyPress: onEnterPress,
+      variant: "outlined"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      className: (0, _classnames.default)(classes.txtLabelBottomInput),
+      children: "Threshold"
+    })]
+  });
 };
-const restoreIcon = (classes, hasEdit, isEdit) => hasEdit && isEdit ? /*#__PURE__*/_react.default.createElement(_HowToRegOutlined.default, {
+const restoreIcon = (classes, hasEdit, isEdit) => hasEdit && isEdit ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_HowToRegOutlined.default, {
   className: classes.icon
-}) : /*#__PURE__*/_react.default.createElement(_CloudDoneOutlined.default, {
+}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudDoneOutlined.default, {
   className: classes.icon
 });
 const restoreTp = (hasEdit, isEdit) => hasEdit && isEdit ? 'User Defined Threshold' : 'Auto Picked Threshold';
-const Threshold = _ref => {
-  let {
-    classes,
-    feature,
-    hasEdit,
-    hideThresSt,
-    thresValSt,
-    isEditSt,
-    curveSt,
-    updateThresholdValueAct,
-    resetThresholdValueAct,
-    toggleThresholdIsEditAct
-  } = _ref;
+const Threshold = ({
+  classes,
+  feature,
+  hasEdit,
+  hideThresSt,
+  thresValSt,
+  isEditSt,
+  curveSt,
+  updateThresholdValueAct,
+  resetThresholdValueAct,
+  toggleThresholdIsEditAct
+}) => {
   const thresVal = thresValSt || feature.thresRef;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.groupRight
-  }, setThreshold(classes, thresVal, updateThresholdValueAct, curveSt), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Restore Threshold")
-  }, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)('btn-sv-bar-thresref'),
-    disabled: _cfg.default.btnCmdThres(thresVal),
-    onClick: resetThresholdValueAct
-  }, /*#__PURE__*/_react.default.createElement(_RefreshOutlined.default, {
-    className: classes.icon
-  }))), hideThresSt ? null : /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, restoreTp(hasEdit, isEditSt))
-  }, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)('btn-sv-bar-thresrst'),
-    disabled: _cfg.default.btnCmdThres(thresVal),
-    onClick: toggleThresholdIsEditAct
-  }, restoreIcon(classes, hasEdit, isEditSt))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: classes.groupRight,
+    children: [setThreshold(classes, thresVal, updateThresholdValueAct, curveSt), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Restore Threshold"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)('btn-sv-bar-thresref'),
+          disabled: _cfg.default.btnCmdThres(thresVal),
+          onClick: resetThresholdValueAct,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RefreshOutlined.default, {
+            className: classes.icon
+          })
+        })
+      })
+    }), hideThresSt ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: restoreTp(hasEdit, isEditSt)
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)('btn-sv-bar-thresrst'),
+          disabled: _cfg.default.btnCmdThres(thresVal),
+          onClick: toggleThresholdIsEditAct,
+          children: restoreIcon(classes, hasEdit, isEditSt)
+        })
+      })
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/cmd_bar/r04_submit.js b/dist/components/cmd_bar/r04_submit.js
index 9c5f3702..3a9431f9 100644
--- a/dist/components/cmd_bar/r04_submit.js
+++ b/dist/components/cmd_bar/r04_submit.js
@@ -17,6 +17,7 @@ var _r05_submit_btn = _interopRequireDefault(require("./r05_submit_btn"));
 var _r06_predict_btn = _interopRequireDefault(require("./r06_predict_btn"));
 var _common = require("./common");
 var _format = _interopRequireDefault(require("../../helpers/format"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition */
 
@@ -36,124 +37,145 @@ const styles = () => Object.assign({
 }, _common.commonStyle);
 const ascendSelect = (classes, hideSwitch, isAscendSt, toggleIsAscendAct) => {
   if (hideSwitch) return null;
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldOrder),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-sort-peaks-label",
-    className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
-  }, "Write Peaks"), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "select-sort-peaks-label",
-    label: "Write Peaks",
-    value: isAscendSt,
-    onChange: toggleIsAscendAct,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-order')
-  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: true,
-    key: "ascend"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-ascend')
-  }, "Ascend")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: false,
-    key: "descend"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-descend')
-  }, "Descend"))));
+    variant: "outlined",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-sort-peaks-label",
+      className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+      children: "Write Peaks"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Select, {
+      labelId: "select-sort-peaks-label",
+      label: "Write Peaks",
+      value: isAscendSt,
+      onChange: toggleIsAscendAct,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-order'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-ascend'),
+          children: "Ascend"
+        })
+      }, "ascend"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-descend'),
+          children: "Descend"
+        })
+      }, "descend")]
+    })]
+  });
 };
 const intensitySelect = (classes, hideSwitch, isIntensitySt, toggleIsIntensityAct) => {
   if (hideSwitch) return null;
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldIntensity),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-intensity-label",
-    className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
-  }, "Write Intensity"), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "select-intensity-label",
-    label: "Write Intensity",
-    value: isIntensitySt,
-    onChange: toggleIsIntensityAct,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-intensity')
-    // input={
-    //   (
-    //     <OutlinedInput
-    //       className={classNames(classes.selectInput, 'input-sv-bar-intensity')}
-    //       labelWidth={100}
-    //     />
-    //   )
-    // }
-  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: true,
-    key: "ascend"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-show')
-  }, "Show")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: false,
-    key: "descend"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-hide')
-  }, "Hide"))));
+    variant: "outlined",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-intensity-label",
+      className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+      children: "Write Intensity"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Select, {
+      labelId: "select-intensity-label",
+      label: "Write Intensity",
+      value: isIntensitySt,
+      onChange: toggleIsIntensityAct,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-intensity')
+      // input={
+      //   (
+      //     <OutlinedInput
+      //       className={classNames(classes.selectInput, 'input-sv-bar-intensity')}
+      //       labelWidth={100}
+      //     />
+      //   )
+      // }
+      ,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-show'),
+          children: "Show"
+        })
+      }, "ascend"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-hide'),
+          children: "Hide"
+        })
+      }, "descend")]
+    })]
+  });
 };
 const decimalSelect = (classes, hideSwitch, decimalSt, updateDecimalAct) => {
   if (hideSwitch) return null;
   const decimals = [0, 1, 2, 3, 4];
-  const options = decimals.map(d => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+  const options = decimals.map(d => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
     value: d,
-    key: d
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-decimal')
-  }, d)));
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-decimal'),
+      children: d
+    })
+  }, d));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldDecimal),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-decimal-label",
-    className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
-  }, "Decimal"), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "select-decimal-label",
-    label: "Decimal",
-    value: decimalSt,
-    onChange: updateDecimalAct,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-decimal')
-    // input={
-    //   (
-    //     <OutlinedInput
-    //       className={classNames(classes.selectInput, 'input-sv-bar-decimal')}
-    //       labelWidth={60}
-    //     />
-    //   )
-    // }
-  }, options));
+    variant: "outlined",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-decimal-label",
+      className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+      children: "Decimal"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+      labelId: "select-decimal-label",
+      label: "Decimal",
+      value: decimalSt,
+      onChange: updateDecimalAct,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-decimal')
+      // input={
+      //   (
+      //     <OutlinedInput
+      //       className={classNames(classes.selectInput, 'input-sv-bar-decimal')}
+      //       labelWidth={60}
+      //     />
+      //   )
+      // }
+      ,
+      children: options
+    })]
+  });
 };
 const operationSelect = (classes, operations, operation, onChangeSelect) => {
-  const options = operations.map(o => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+  const options = operations.map(o => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
     value: o.name,
-    key: o.name
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-operation')
-  }, o.name)));
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-operation'),
+      children: o.name
+    })
+  }, o.name));
   const selectedValue = operation.name || operations[0].name;
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldOpertaion),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-submit-label",
-    className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
-  }, "Submit"), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "select-submit-label",
-    label: "Submit",
-    value: selectedValue,
-    onChange: onChangeSelect,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-operation')
-    // input={
-    //   (
-    //     <OutlinedInput
-    //       className={classNames(classes.selectInput, 'input-sv-bar-operation')}
-    //       labelWidth={50}
-    //     />
-    //   )
-    // }
-  }, options));
+    variant: "outlined",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-submit-label",
+      className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+      children: "Submit"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+      labelId: "select-submit-label",
+      label: "Submit",
+      value: selectedValue,
+      onChange: onChangeSelect,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-operation')
+      // input={
+      //   (
+      //     <OutlinedInput
+      //       className={classNames(classes.selectInput, 'input-sv-bar-operation')}
+      //       labelWidth={50}
+      //     />
+      //   )
+      // }
+      ,
+      children: options
+    })]
+  });
 };
 const selectOperation = (name, operations, updateOperationAct) => {
   let operation = false;
@@ -164,39 +186,39 @@ const selectOperation = (name, operations, updateOperationAct) => {
   });
   updateOperationAct(operation);
 };
-const Submit = _ref => {
-  let {
-    operations,
-    classes,
-    feature,
-    forecast,
-    editorOnly,
-    hideSwitch,
-    disabled,
-    isAscendSt,
-    isIntensitySt,
-    operationSt,
-    decimalSt,
-    isEmWaveSt,
-    toggleIsAscendAct,
-    toggleIsIntensityAct,
-    updateOperationAct,
-    updateDecimalAct
-  } = _ref;
+const Submit = ({
+  operations,
+  classes,
+  feature,
+  forecast,
+  editorOnly,
+  hideSwitch,
+  disabled,
+  isAscendSt,
+  isIntensitySt,
+  operationSt,
+  decimalSt,
+  isEmWaveSt,
+  toggleIsAscendAct,
+  toggleIsIntensityAct,
+  updateOperationAct,
+  updateDecimalAct
+}) => {
   const onChangeSelect = e => selectOperation(e.target.value, operations, updateOperationAct);
   if (!operations || operations.length === 0) return null;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.groupRightMost
-  }, ascendSelect(classes, hideSwitch, isAscendSt, toggleIsAscendAct), intensitySelect(classes, hideSwitch || !isEmWaveSt, isIntensitySt, toggleIsIntensityAct), decimalSelect(classes, hideSwitch, decimalSt, updateDecimalAct), editorOnly ? null : /*#__PURE__*/_react.default.createElement(_r06_predict_btn.default, {
-    feature: feature,
-    forecast: forecast
-  }), operationSelect(classes, operations, operationSt, onChangeSelect), /*#__PURE__*/_react.default.createElement(_r05_submit_btn.default, {
-    feature: feature,
-    isAscend: isAscendSt,
-    isIntensity: isIntensitySt,
-    operation: operationSt,
-    disabled: disabled
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: classes.groupRightMost,
+    children: [ascendSelect(classes, hideSwitch, isAscendSt, toggleIsAscendAct), intensitySelect(classes, hideSwitch || !isEmWaveSt, isIntensitySt, toggleIsIntensityAct), decimalSelect(classes, hideSwitch, decimalSt, updateDecimalAct), editorOnly ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_r06_predict_btn.default, {
+      feature: feature,
+      forecast: forecast
+    }), operationSelect(classes, operations, operationSt, onChangeSelect), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r05_submit_btn.default, {
+      feature: feature,
+      isAscend: isAscendSt,
+      isIntensity: isIntensitySt,
+      operation: operationSt,
+      disabled: disabled
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/cmd_bar/r05_submit_btn.js b/dist/components/cmd_bar/r05_submit_btn.js
index c6e1cf4c..69d1b09f 100644
--- a/dist/components/cmd_bar/r05_submit_btn.js
+++ b/dist/components/cmd_bar/r05_submit_btn.js
@@ -16,6 +16,7 @@ var _styles = require("@mui/styles");
 var _chem = require("../../helpers/chem");
 var _common = require("./common");
 var _extractPeaksEdit = require("../../helpers/extractPeaksEdit");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition, function-call-argument-newline,
 react/require-default-props */
@@ -44,30 +45,29 @@ const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, lay
     dscMetaData
   });
 };
-const BtnSubmit = _ref => {
-  let {
-    classes,
-    operation,
-    feature,
-    isAscend,
-    isIntensity,
-    editPeakSt,
-    thresSt,
-    layoutSt,
-    shiftSt,
-    scanSt,
-    forecastSt,
-    decimalSt,
-    integrationSt,
-    multiplicitySt,
-    allIntegrationSt,
-    waveLengthSt,
-    cyclicvoltaSt,
-    curveSt,
-    axesUnitsSt,
-    detectorSt,
-    metaSt
-  } = _ref;
+const BtnSubmit = ({
+  classes,
+  operation,
+  feature,
+  isAscend,
+  isIntensity,
+  editPeakSt,
+  thresSt,
+  layoutSt,
+  shiftSt,
+  scanSt,
+  forecastSt,
+  decimalSt,
+  integrationSt,
+  multiplicitySt,
+  allIntegrationSt,
+  waveLengthSt,
+  cyclicvoltaSt,
+  curveSt,
+  axesUnitsSt,
+  detectorSt,
+  metaSt
+}) => {
   const peaksEdit = (0, _extractPeaksEdit.extractPeaksEdit)(feature, editPeakSt, thresSt, shiftSt, layoutSt);
   // const disBtn = peaksEdit.length === 0 || statusSt.btnSubmit || disabled;
   const scan = (0, _chem.Convert2Scan)(feature, scanSt);
@@ -77,17 +77,20 @@ const BtnSubmit = _ref => {
     dscMetaData
   } = metaSt;
   if (!operation) return null;
-  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, "Submit")
-  }, /*#__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, detectorSt, dscMetaData)
-  }, /*#__PURE__*/_react.default.createElement(_PlayCircleOutline.default, {
-    className: classes.icon
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "txt-sv-tp",
+      children: "Submit"
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_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, detectorSt, dscMetaData),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayCircleOutline.default, {
+        className: classes.icon
+      })
+    })
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/cmd_bar/r06_predict_btn.js b/dist/components/cmd_bar/r06_predict_btn.js
index 0040036d..0a6b1163 100644
--- a/dist/components/cmd_bar/r06_predict_btn.js
+++ b/dist/components/cmd_bar/r06_predict_btn.js
@@ -21,6 +21,7 @@ var _extractPeaksEdit = require("../../helpers/extractPeaksEdit");
 var _ui = require("../../actions/ui");
 var _list_ui = require("../../constants/list_ui");
 var _chem = require("../../helpers/chem");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, function-paren-newline,
 max-len, react/function-component-definition,
 function-call-argument-newline, react/require-default-props */
@@ -100,57 +101,70 @@ const onClicUnknown = (feature, forecast, peaksEdit, layoutSt, scan, shiftSt, th
     curveSt
   });
 };
-const counterText = (classes, isIr, realCount, uniqCount, simuCount) => isIr ? null : /*#__PURE__*/_react.default.createElement("span", {
-  className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-}, `${realCount}/${uniqCount}/${simuCount}`);
-const renderBtnPredict = (classes, isIr, realCount, uniqCount, simuCount, color, btnWidthCls, onClick) => /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-  title: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
-    className: "txt-sv-tp"
-  }, "Predict"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
-    className: "txt-sv-tp"
-  }, "- Selected features must be eqal or less than simulated features."))
-}, /*#__PURE__*/_react.default.createElement(MuPredictButton, {
-  className: (0, _classnames.default)('btn-sv-bar-submit', btnWidthCls),
-  style: {
-    color
-  },
-  onClick: onClick
-}, counterText(classes, isIr, realCount, uniqCount, simuCount), /*#__PURE__*/_react.default.createElement(_GpsFixedOutlined.default, {
-  className: classes.icon
-})));
-const renderBtnUnknown = (classes, onClick) => /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-  title: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
-    className: "txt-sv-tp"
-  }, "Refresh Simulation"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
-    className: "txt-sv-tp"
-  }, "- Simulation must be refreshed before making a prediction."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
-    className: "txt-sv-tp"
-  }, "- If you continue to see this button after clicking it, the server is not ready. Please wait for a while."))
-}, /*#__PURE__*/_react.default.createElement(MuPredictButton, {
-  className: (0, _classnames.default)('btn-sv-bar-submit', classes.btnWidthUnknown),
-  style: {
-    color: 'orange'
-  },
-  onClick: onClick
-}, /*#__PURE__*/_react.default.createElement(_HelpOutlineOutlined.default, {
-  className: classes.icon
-})));
-const BtnPredict = _ref => {
-  let {
-    classes,
-    feature,
-    forecast,
-    layoutSt,
-    simulationSt,
-    editPeakSt,
-    scanSt,
-    shiftSt,
-    thresSt,
-    integrationSt,
-    multiplicitySt,
-    setUiViewerTypeAct,
-    curveSt
-  } = _ref;
+const counterText = (classes, isIr, realCount, uniqCount, simuCount) => isIr ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+  children: `${realCount}/${uniqCount}/${simuCount}`
+});
+const renderBtnPredict = (classes, isIr, realCount, uniqCount, simuCount, color, btnWidthCls, onClick) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+  title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "txt-sv-tp",
+      children: "Predict"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "txt-sv-tp",
+      children: "- Selected features must be eqal or less than simulated features."
+    })]
+  }),
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(MuPredictButton, {
+    className: (0, _classnames.default)('btn-sv-bar-submit', btnWidthCls),
+    style: {
+      color
+    },
+    onClick: onClick,
+    children: [counterText(classes, isIr, realCount, uniqCount, simuCount), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GpsFixedOutlined.default, {
+      className: classes.icon
+    })]
+  })
+});
+const renderBtnUnknown = (classes, onClick) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+  title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "txt-sv-tp",
+      children: "Refresh Simulation"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "txt-sv-tp",
+      children: "- Simulation must be refreshed before making a prediction."
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "txt-sv-tp",
+      children: "- If you continue to see this button after clicking it, the server is not ready. Please wait for a while."
+    })]
+  }),
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MuPredictButton, {
+    className: (0, _classnames.default)('btn-sv-bar-submit', classes.btnWidthUnknown),
+    style: {
+      color: 'orange'
+    },
+    onClick: onClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpOutlineOutlined.default, {
+      className: classes.icon
+    })
+  })
+});
+const BtnPredict = ({
+  classes,
+  feature,
+  forecast,
+  layoutSt,
+  simulationSt,
+  editPeakSt,
+  scanSt,
+  shiftSt,
+  thresSt,
+  integrationSt,
+  multiplicitySt,
+  setUiViewerTypeAct,
+  curveSt
+}) => {
   const is13Cor1H = _format.default.is13CLayout(layoutSt) || _format.default.is1HLayout(layoutSt);
   const isIr = _format.default.isIrLayout(layoutSt);
   if (!(is13Cor1H || isIr)) return null;
diff --git a/dist/components/cmd_bar/r07_wavelength_btn.js b/dist/components/cmd_bar/r07_wavelength_btn.js
index 07c69af3..326026e6 100644
--- a/dist/components/cmd_bar/r07_wavelength_btn.js
+++ b/dist/components/cmd_bar/r07_wavelength_btn.js
@@ -16,6 +16,7 @@ var _wavelength = require("../../actions/wavelength");
 var _format = _interopRequireDefault(require("../../helpers/format"));
 var _common = require("./common");
 var _list_wavelength = require("../../constants/list_wavelength");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, react/jsx-one-expression-per-line,
 react/function-component-definition */
 
@@ -29,41 +30,44 @@ const styles = () => Object.assign({
 }, _common.commonStyle);
 const wavelengthSelect = (classes, waveLengthSt, layoutSt, updateWaveLengthAct) => {
   if (!_format.default.isXRDLayout(layoutSt)) {
-    return /*#__PURE__*/_react.default.createElement("i", null);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {});
   }
   const onChange = e => updateWaveLengthAct(e.target.value);
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldLayout),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-wavelength-label",
-    className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
-  }, "Wavelength"), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "select-wavelength-label",
-    label: "Wavelength",
-    value: waveLengthSt,
-    onChange: onChange,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout')
-  }, _list_wavelength.LIST_WAVE_LENGTH.map(item => {
-    // eslint-disable-line
-    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-      value: item
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-    }, item.label, " (", item.value, " ", item.unit, ")"));
-  })));
-};
-const Wavelength = _ref => {
-  let {
-    classes,
-    waveLengthSt,
-    layoutSt,
-    updateWaveLengthAct
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.groupRight
-  }, wavelengthSelect(classes, waveLengthSt, layoutSt, updateWaveLengthAct));
+    variant: "outlined",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-wavelength-label",
+      className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+      children: "Wavelength"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+      labelId: "select-wavelength-label",
+      label: "Wavelength",
+      value: waveLengthSt,
+      onChange: onChange,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout'),
+      children: _list_wavelength.LIST_WAVE_LENGTH.map(item => {
+        // eslint-disable-line
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          value: item,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+            children: [item.label, " (", item.value, " ", item.unit, ")"]
+          })
+        });
+      })
+    })]
+  });
 };
+const Wavelength = ({
+  classes,
+  waveLengthSt,
+  layoutSt,
+  updateWaveLengthAct
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  className: classes.groupRight,
+  children: wavelengthSelect(classes, waveLengthSt, layoutSt, updateWaveLengthAct)
+});
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {
diff --git a/dist/components/cmd_bar/r08_change_axes.js b/dist/components/cmd_bar/r08_change_axes.js
index 7de2c8ba..970d0886 100644
--- a/dist/components/cmd_bar/r08_change_axes.js
+++ b/dist/components/cmd_bar/r08_change_axes.js
@@ -16,6 +16,7 @@ var _common = require("./common");
 var _list_layout = require("../../constants/list_layout");
 var _list_axes = require("../../constants/list_axes");
 var _axes = require("../../actions/axes");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, react/jsx-one-expression-per-line,
 react/function-component-definition,
 max-len, no-unused-vars, no-multiple-empty-lines */
@@ -52,27 +53,31 @@ const axisX = (classes, layoutSt, axesUnitsSt, updateXAxisAct, curveSt) => {
   const {
     xUnit
   } = selectedAxes;
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldLayout),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "select-x-axis-label",
-    label: "x-Axis",
-    value: xUnit,
-    onChange: onChange,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout')
-  }, options.map(item => {
-    // eslint-disable-line
-    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-      value: item,
-      key: item
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-    }, item === '' ? 'Default' : item));
-  })), /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-x-axis-label",
-    className: (0, _classnames.default)(classes.txtLabelTopInput)
-  }, "x-Axis"));
+    variant: "outlined",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+      labelId: "select-x-axis-label",
+      label: "x-Axis",
+      value: xUnit,
+      onChange: onChange,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout'),
+      children: options.map(item => {
+        // eslint-disable-line
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          value: item,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+            children: item === '' ? 'Default' : item
+          })
+        }, item);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-x-axis-label",
+      className: (0, _classnames.default)(classes.txtLabelTopInput),
+      children: "x-Axis"
+    })]
+  });
 };
 const axisY = (classes, layoutSt, axesUnitsSt, updateYAxisAct, curveSt) => {
   const optionsAxisX = _list_axes.LIST_AXES.y;
@@ -97,48 +102,52 @@ const axisY = (classes, layoutSt, axesUnitsSt, updateYAxisAct, curveSt) => {
   const {
     yUnit
   } = selectedAxes;
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldLayout),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "select-y-axis-label",
-    label: "y-Axis",
-    value: yUnit,
-    onChange: onChange,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout')
-  }, options.map(item => {
-    // eslint-disable-line
-    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-      value: item,
-      key: item
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-    }, item === '' ? 'Default' : item));
-  })), /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-y-axis-label",
-    className: (0, _classnames.default)(classes.txtLabelTopInput)
-  }, "y-Axis"));
+    variant: "outlined",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+      labelId: "select-y-axis-label",
+      label: "y-Axis",
+      value: yUnit,
+      onChange: onChange,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout'),
+      children: options.map(item => {
+        // eslint-disable-line
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          value: item,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+            children: item === '' ? 'Default' : item
+          })
+        }, item);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-y-axis-label",
+      className: (0, _classnames.default)(classes.txtLabelTopInput),
+      children: "y-Axis"
+    })]
+  });
 };
 const showSelect = (classes, layoutSt, curveSt, axesUnitsSt, updateXAxisAct, updateYAxisAct) => {
   if (!listLayoutToShow.includes(layoutSt)) {
-    return /*#__PURE__*/_react.default.createElement("i", null);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {});
   }
-  return /*#__PURE__*/_react.default.createElement("span", null, axisX(classes, layoutSt, axesUnitsSt, updateXAxisAct, curveSt), axisY(classes, layoutSt, axesUnitsSt, updateYAxisAct, curveSt));
-};
-const ChangeAxes = _ref => {
-  let {
-    classes,
-    layoutSt,
-    curveSt,
-    axesUnitsSt,
-    updateXAxisAct,
-    updateYAxisAct
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.groupRight,
-    "data-testid": "ChangeAxes"
-  }, showSelect(classes, layoutSt, curveSt, axesUnitsSt, updateXAxisAct, updateYAxisAct));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    children: [axisX(classes, layoutSt, axesUnitsSt, updateXAxisAct, curveSt), axisY(classes, layoutSt, axesUnitsSt, updateYAxisAct, curveSt)]
+  });
 };
+const ChangeAxes = ({
+  classes,
+  layoutSt,
+  curveSt,
+  axesUnitsSt,
+  updateXAxisAct,
+  updateYAxisAct
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  className: classes.groupRight,
+  "data-testid": "ChangeAxes",
+  children: showSelect(classes, layoutSt, curveSt, axesUnitsSt, updateXAxisAct, updateYAxisAct)
+});
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {
diff --git a/dist/components/cmd_bar/r09_detector.js b/dist/components/cmd_bar/r09_detector.js
index 28f1a606..3efdcf7c 100644
--- a/dist/components/cmd_bar/r09_detector.js
+++ b/dist/components/cmd_bar/r09_detector.js
@@ -16,6 +16,7 @@ var _detector = require("../../actions/detector");
 var _format = _interopRequireDefault(require("../../helpers/format"));
 var _common = require("./common");
 var _list_detectors = require("../../constants/list_detectors");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, react/jsx-one-expression-per-line,
 react/function-component-definition */
 
@@ -29,7 +30,7 @@ const styles = () => Object.assign({
 }, _common.commonStyle);
 const detectorSelect = (classes, detectorSt, curveSt, layoutSt, updateDetectorAct) => {
   if (!_format.default.isSECLayout(layoutSt)) {
-    return /*#__PURE__*/_react.default.createElement("i", null);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {});
   }
   const {
     curveIdx
@@ -46,39 +47,43 @@ const detectorSelect = (classes, detectorSt, curveSt, layoutSt, updateDetectorAc
     curveIdx,
     selectedDetector: e.target.value
   });
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
-    className: (0, _classnames.default)(classes.fieldLayout)
-  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "select-detector-label",
-    className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
-  }, "Detector"), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "select-detector-label",
-    label: "Detector",
-    value: selectedDetector,
-    onChange: onChange,
-    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout')
-  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: ""
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  })), _list_detectors.LIST_DETECTORS.map(item => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: item
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
-  }, item.name)))));
-};
-const Detector = _ref => {
-  let {
-    classes,
-    detectorSt,
-    curveSt,
-    layoutSt,
-    updateDetectorAct
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.groupRight
-  }, detectorSelect(classes, detectorSt, curveSt, layoutSt, updateDetectorAct));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+    className: (0, _classnames.default)(classes.fieldLayout),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      id: "select-detector-label",
+      className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+      children: "Detector"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Select, {
+      labelId: "select-detector-label",
+      label: "Detector",
+      value: selectedDetector,
+      onChange: onChange,
+      className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: "",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
+        })
+      }), _list_detectors.LIST_DETECTORS.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: item,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+          children: item.name
+        })
+      }))]
+    })]
+  });
 };
+const Detector = ({
+  classes,
+  detectorSt,
+  curveSt,
+  layoutSt,
+  updateDetectorAct
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  className: classes.groupRight,
+  children: detectorSelect(classes, detectorSt, curveSt, layoutSt, updateDetectorAct)
+});
 const mapStateToProps = (state, _props) => (
 // eslint-disable-line
 {
diff --git a/dist/components/cmd_bar/r10_align_compare_x.js b/dist/components/cmd_bar/r10_align_compare_x.js
new file mode 100644
index 00000000..e8ef0df1
--- /dev/null
+++ b/dist/components/cmd_bar/r10_align_compare_x.js
@@ -0,0 +1,68 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactRedux = require("react-redux");
+var _redux = require("redux");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _SwapHorizOutlined = _interopRequireDefault(require("@mui/icons-material/SwapHorizOutlined"));
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _ui = require("../../actions/ui");
+var _common = require("./common");
+var _jsxRuntime = require("react/jsx-runtime");
+/* eslint-disable prefer-object-spread, react/function-component-definition */
+
+const styles = () => Object.assign({}, _common.commonStyle);
+const AlignCompareX = ({
+  classes,
+  alignCompareXSt,
+  isMultiSpectraSt,
+  setUiAlignCompareXAct,
+  compact
+}) => {
+  if (!isMultiSpectraSt) return null;
+  const onToggle = () => setUiAlignCompareXAct(!alignCompareXSt);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: compact ? undefined : classes.group,
+    "data-testid": "AlignCompareX",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Align X (compare)"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: (0, _classnames.default)((0, _common.focusStyle)(alignCompareXSt, classes), 'btn-sv-bar-align-compare-x'),
+        onClick: onToggle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SwapHorizOutlined.default, {
+          className: classes.icon
+        })
+      })
+    })
+  });
+};
+const mapStateToProps = (state, _) => (
+// eslint-disable-line
+{
+  alignCompareXSt: state.ui.alignCompareX,
+  isMultiSpectraSt: (state.curve.listCurves || []).length > 1
+});
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  setUiAlignCompareXAct: _ui.setUiAlignCompareX
+}, dispatch);
+AlignCompareX.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  alignCompareXSt: _propTypes.default.bool.isRequired,
+  isMultiSpectraSt: _propTypes.default.bool.isRequired,
+  setUiAlignCompareXAct: _propTypes.default.func.isRequired,
+  compact: _propTypes.default.bool
+};
+AlignCompareX.defaultProps = {
+  compact: false
+};
+var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _withStyles.default)(styles))(AlignCompareX);
\ No newline at end of file
diff --git a/dist/components/cmd_bar/tri_btn.js b/dist/components/cmd_bar/tri_btn.js
index 177374d9..64800f48 100644
--- a/dist/components/cmd_bar/tri_btn.js
+++ b/dist/components/cmd_bar/tri_btn.js
@@ -14,6 +14,7 @@ var _styles = require("@mui/styles");
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _common = require("./common");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread */
 
 const styles = () => Object.assign({
@@ -58,16 +59,21 @@ class TriBtn extends _react.default.Component {
     const {
       tp
     } = content;
-    const title = /*#__PURE__*/_react.default.createElement("span", {
-      className: "txt-sv-tp"
-    }, tp);
-    return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-      title: title
-    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-      className: (0, _classnames.default)('btn-sv-bar-one'),
-      disabled: isClearAllDisabled === false ? false : _cfg.default.btnCmdMpy(layoutSt) && _cfg.default.btnCmdIntg(layoutSt),
-      onClick: this.onToggle
-    }, children)));
+    const title = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "txt-sv-tp",
+      children: tp
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: title,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: (0, _classnames.default)('btn-sv-bar-one'),
+          disabled: isClearAllDisabled === false ? false : _cfg.default.btnCmdMpy(layoutSt) && _cfg.default.btnCmdIntg(layoutSt),
+          onClick: this.onToggle,
+          children: children
+        })
+      })
+    });
   }
   renderStageTwo() {
     const {
@@ -79,21 +85,27 @@ class TriBtn extends _react.default.Component {
       cb();
       this.onToggle(e);
     };
-    return /*#__PURE__*/_react.default.createElement("span", {
-      disabled: _cfg.default.btnCmdMpy(layoutSt) && _cfg.default.btnCmdIntg(layoutSt)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txtLabel, 'txt-sv-bar-desc')
-    }, "Delete ALL?"), /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-      className: (0, _classnames.default)('btn-sv-bar-yes'),
-      onClick: onExec
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txt, classes.btnYes, 'txt-sv-bar-yes')
-    }, "Y")), /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-      className: (0, _classnames.default)('btn-sv-bar-no'),
-      onClick: this.onToggle
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txt, classes.btnNo, 'txt-sv-bar-no')
-    }, "N")));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      disabled: _cfg.default.btnCmdMpy(layoutSt) && _cfg.default.btnCmdIntg(layoutSt),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)(classes.txtLabel, 'txt-sv-bar-desc'),
+        children: "Delete ALL?"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: (0, _classnames.default)('btn-sv-bar-yes'),
+        onClick: onExec,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txt, classes.btnYes, 'txt-sv-bar-yes'),
+          children: "Y"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: (0, _classnames.default)('btn-sv-bar-no'),
+        onClick: this.onToggle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txt, classes.btnNo, 'txt-sv-bar-no'),
+          children: "N"
+        })
+      })]
+    });
   }
   render() {
     const {
diff --git a/dist/components/common/comps.js b/dist/components/common/comps.js
index cfe2e321..c366d9f5 100644
--- a/dist/components/common/comps.js
+++ b/dist/components/common/comps.js
@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.TabLabel = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-const TabLabel = function (classes, label) {
-  let extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-tab-label';
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tabLabel, extClsName)
-  }, label);
-};
+var _jsxRuntime = require("react/jsx-runtime");
+const TabLabel = (classes, label, extClsName = 'txt-tab-label') => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  className: (0, _classnames.default)(classes.tabLabel, extClsName),
+  children: label
+});
 exports.TabLabel = TabLabel;
\ No newline at end of file
diff --git a/dist/components/d3_line/index.js b/dist/components/d3_line/index.js
index 84c2b8df..8adff77d 100644
--- a/dist/components/d3_line/index.js
+++ b/dist/components/d3_line/index.js
@@ -16,6 +16,7 @@ var _line_focus = _interopRequireDefault(require("./line_focus"));
 var _draw = require("../common/draw");
 var _list_ui = require("../../constants/list_ui");
 var _cyclic_voltammetry = require("../../actions/cyclic_voltammetry");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable no-mixed-operators */
 
 const W = Math.round(window.innerWidth * 0.90 * 9 / 12); // ROI
@@ -171,28 +172,38 @@ class ViewerLine extends _react.default.Component {
     }
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "d3Line"
     });
   }
 }
-const mapStateToProps = (state, props) => ({
-  seed: (0, _chem.Topic2Seed)(state, props),
-  peak: (0, _chem.Feature2Peak)(state, props),
-  freq: (0, _chem.ToFrequency)(state, props),
-  comparisons: (0, _chem.GetComparisons)(state, props),
-  tTrEndPts: (0, _chem.ToThresEndPts)(state, props),
-  tSfPeaks: (0, _chem.ToShiftPeaks)(state, props),
-  editPeakSt: state.editPeak.present,
-  layoutSt: state.layout,
-  integationSt: state.integration.present,
-  mtplySt: state.multiplicity.present,
-  sweepExtentSt: state.ui.sweepExtent,
-  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
-});
+const mapStateToProps = (state, props) => (() => {
+  const {
+    curveIdx
+  } = state.curve;
+  const sweepExtentByCurve = state.ui.sweepExtentByCurve || {};
+  const sweepExtentSt = sweepExtentByCurve[curveIdx] || {
+    xExtent: false,
+    yExtent: false
+  };
+  return {
+    seed: (0, _chem.Topic2Seed)(state, props),
+    peak: (0, _chem.Feature2Peak)(state, props),
+    freq: (0, _chem.ToFrequency)(state, props),
+    comparisons: (0, _chem.GetComparisons)(state, props),
+    tTrEndPts: (0, _chem.ToThresEndPts)(state, props),
+    tSfPeaks: (0, _chem.ToShiftPeaks)(state, props),
+    editPeakSt: state.editPeak.present,
+    layoutSt: state.layout,
+    integationSt: state.integration.present,
+    mtplySt: state.multiplicity.present,
+    sweepExtentSt,
+    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
+  };
+})();
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   resetAllAct: _manager.resetAll,
   clickUiTargetAct: _ui.clickUiTarget,
diff --git a/dist/components/d3_line/line_focus.js b/dist/components/d3_line/line_focus.js
index 554587a9..a578a53a 100644
--- a/dist/components/d3_line/line_focus.js
+++ b/dist/components/d3_line/line_focus.js
@@ -598,23 +598,22 @@ class LineFocus {
   reverseXAxis(layoutSt) {
     return [_list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS, _list_layout.LIST_LAYOUT.TGA, _list_layout.LIST_LAYOUT.DSC, _list_layout.LIST_LAYOUT.XRD, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY, _list_layout.LIST_LAYOUT.CDS, _list_layout.LIST_LAYOUT.DLS_ACF, _list_layout.LIST_LAYOUT.SEC, _list_layout.LIST_LAYOUT.GC, _list_layout.LIST_LAYOUT.EMISSIONS, _list_layout.LIST_LAYOUT.DLS_INTENSITY].indexOf(layoutSt) < 0;
   }
-  create(_ref) {
-    let {
-      filterSeed,
-      filterPeak,
-      tTrEndPts,
-      tSfPeaks,
-      freq,
-      comparisons,
-      editPeakSt,
-      layoutSt,
-      integationSt,
-      mtplySt,
-      sweepExtentSt,
-      isUiAddIntgSt,
-      isUiNoBrushSt,
-      wavelength
-    } = _ref;
+  create({
+    filterSeed,
+    filterPeak,
+    tTrEndPts,
+    tSfPeaks,
+    freq,
+    comparisons,
+    editPeakSt,
+    layoutSt,
+    integationSt,
+    mtplySt,
+    sweepExtentSt,
+    isUiAddIntgSt,
+    isUiNoBrushSt,
+    wavelength
+  }) {
     this.svg = d3.select('.d3Svg');
     (0, _mount.MountMainFrame)(this, 'focus');
     (0, _mount.MountClip)(this);
@@ -645,23 +644,22 @@ class LineFocus {
     (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt);
     this.resetShouldUpdate(editPeakSt, integationSt, mtplySt);
   }
-  update(_ref2) {
-    let {
-      filterSeed,
-      filterPeak,
-      tTrEndPts,
-      tSfPeaks,
-      freq,
-      comparisons,
-      editPeakSt,
-      layoutSt,
-      integationSt,
-      mtplySt,
-      sweepExtentSt,
-      isUiAddIntgSt,
-      isUiNoBrushSt,
-      wavelength
-    } = _ref2;
+  update({
+    filterSeed,
+    filterPeak,
+    tTrEndPts,
+    tSfPeaks,
+    freq,
+    comparisons,
+    editPeakSt,
+    layoutSt,
+    integationSt,
+    mtplySt,
+    sweepExtentSt,
+    isUiAddIntgSt,
+    isUiNoBrushSt,
+    wavelength
+  }) {
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.scales = (0, _init.InitScale)(this, this.reverseXAxis(layoutSt));
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, freq, layoutSt, wavelength);
diff --git a/dist/components/d3_multi/index.js b/dist/components/d3_multi/index.js
index 590d1c12..9e1b057f 100644
--- a/dist/components/d3_multi/index.js
+++ b/dist/components/d3_multi/index.js
@@ -16,6 +16,7 @@ var _list_ui = require("../../constants/list_ui");
 var _cyclic_voltammetry = require("../../actions/cyclic_voltammetry");
 var _multi_focus = _interopRequireDefault(require("./multi_focus"));
 var _draw = require("../common/draw");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable no-mixed-operators, react/require-default-props,
 react/no-unused-prop-types */
 
@@ -60,6 +61,7 @@ class ViewerMulti extends _react.default.Component {
       isHidden,
       resetAllAct,
       cyclicvoltaSt,
+      alignCompareXSt,
       integationSt,
       mtplySt,
       axesUnitsSt
@@ -104,7 +106,8 @@ class ViewerMulti extends _react.default.Component {
       isUiNoBrushSt,
       cyclicvoltaSt,
       integationSt,
-      mtplySt
+      mtplySt,
+      alignCompareX: alignCompareXSt
     });
     (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
     (0, _draw.drawDisplay)(this.rootKlass, isHidden);
@@ -127,6 +130,7 @@ class ViewerMulti extends _react.default.Component {
       isUiNoBrushSt,
       isHidden,
       cyclicvoltaSt,
+      alignCompareXSt,
       integationSt,
       mtplySt,
       axesUnitsSt
@@ -170,7 +174,8 @@ class ViewerMulti extends _react.default.Component {
       isUiNoBrushSt,
       cyclicvoltaSt,
       integationSt,
-      mtplySt
+      mtplySt,
+      alignCompareX: alignCompareXSt
     });
     (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
     (0, _draw.drawDisplay)(this.rootKlass, isHidden);
@@ -191,27 +196,38 @@ class ViewerMulti extends _react.default.Component {
     }
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "d3Line"
     });
   }
 }
-const mapStateToProps = (state, props) => ({
-  curveSt: state.curve,
-  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),
-  integationSt: state.integration.present,
-  mtplySt: state.multiplicity.present,
-  axesUnitsSt: state.axesUnits
-});
+const mapStateToProps = (state, props) => (() => {
+  const {
+    curveIdx
+  } = state.curve;
+  const sweepExtentByCurve = state.ui.sweepExtentByCurve || {};
+  const sweepExtentSt = sweepExtentByCurve[curveIdx] || {
+    xExtent: false,
+    yExtent: false
+  };
+  return {
+    curveSt: state.curve,
+    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,
+    isUiNoBrushSt: _list_ui.LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
+    alignCompareXSt: state.ui.alignCompareX,
+    cyclicvoltaSt: state.cyclicvolta,
+    maxminPeakSt: (0, _chem.Feature2MaxMinPeak)(state, props),
+    integationSt: state.integration.present,
+    mtplySt: state.multiplicity.present,
+    axesUnitsSt: state.axesUnits
+  };
+})();
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   resetAllAct: _manager.resetAll,
   clickUiTargetAct: _ui.clickUiTarget,
@@ -248,6 +264,7 @@ ViewerMulti.propTypes = {
   addCylicVoltaMaxPeakAct: _propTypes.default.func.isRequired,
   addCylicVoltaMinPeakAct: _propTypes.default.func.isRequired,
   cLabel: _propTypes.default.string,
-  axesUnitsSt: _propTypes.default.object.isRequired
+  axesUnitsSt: _propTypes.default.object.isRequired,
+  alignCompareXSt: _propTypes.default.bool.isRequired
 };
 var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ViewerMulti);
\ No newline at end of file
diff --git a/dist/components/d3_multi/multi_focus.js b/dist/components/d3_multi/multi_focus.js
index 6ae38d83..7241842d 100644
--- a/dist/components/d3_multi/multi_focus.js
+++ b/dist/components/d3_multi/multi_focus.js
@@ -96,6 +96,20 @@ class MultiFocus {
     this.onClickPecker = this.onClickPecker.bind(this);
     this.isFirefox = typeof InstallTrigger !== 'undefined';
     this.cyclicvoltaSt = null;
+    this.alignCompareX = true;
+  }
+  getGlobalXExtent() {
+    let allData = [...this.data];
+    if (this.otherLineData) {
+      this.otherLineData.forEach(lineData => {
+        allData = [...allData, ...lineData.data];
+      });
+    }
+    const xes = d3.extent(allData, d => d.x).sort((a, b) => a - b);
+    return {
+      xL: xes[0],
+      xU: xes[1]
+    };
   }
   getShouldUpdate(nextEpSt) {
     const {
@@ -158,8 +172,7 @@ class MultiFocus {
     this.tip = (0, _init.InitTip)();
     this.root.call(this.tip);
   }
-  setDataParams(filterSeed, peaks, tTrEndPts, tSfPeaks, layout, cyclicvoltaSt) {
-    let jcampIdx = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  setDataParams(filterSeed, peaks, tTrEndPts, tSfPeaks, layout, cyclicvoltaSt, jcampIdx = 0) {
     this.data = [];
     this.otherLineData = [];
     let filterSubLayoutValue = null;
@@ -284,6 +297,20 @@ class MultiFocus {
   drawOtherLines(layout) {
     d3.selectAll('.line-clip-compare').remove();
     if (!this.otherLineData) return null;
+    const {
+      xt,
+      yt
+    } = (0, _compass.TfRescale)(this);
+    let globalPathCall;
+    if (this.alignCompareX) {
+      const globalXExtent = this.getGlobalXExtent();
+      const reverse = this.reverseXAxis(this.layout);
+      const xRange = reverse ? [this.w, 0] : [0, this.w];
+      const xtGlobal = d3.scaleLinear().domain([globalXExtent.xL, globalXExtent.xU]).range(xRange);
+      globalPathCall = d3.line().x(d => xtGlobal(d.x)).y(d => yt(d.y));
+    } else {
+      globalPathCall = d3.line().x(d => xt(d.x)).y(d => yt(d.y));
+    }
     this.otherLineData.forEach((entry, idx) => {
       const {
         data,
@@ -291,7 +318,7 @@ class MultiFocus {
       } = entry;
       const pathColor = color ? color : _format.default.mutiEntitiesColors(idx);
       const path = (0, _mount.MountComparePath)(this, pathColor, idx, 0.4);
-      path.attr('d', this.pathCall(data));
+      path.attr('d', globalPathCall(data));
       if (this.layout === _list_layout.LIST_LAYOUT.AIF && this.isShowAllCurves === true) {
         path.attr('marker-mid', 'url(#arrow-left)');
       }
@@ -811,21 +838,21 @@ class MultiFocus {
   reverseXAxis(layoutSt) {
     return [_list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS, _list_layout.LIST_LAYOUT.TGA, _list_layout.LIST_LAYOUT.DSC, _list_layout.LIST_LAYOUT.XRD, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY, _list_layout.LIST_LAYOUT.CDS, _list_layout.LIST_LAYOUT.SEC, _list_layout.LIST_LAYOUT.GC, _list_layout.LIST_LAYOUT.AIF].indexOf(layoutSt) < 0;
   }
-  create(_ref) {
-    let {
-      curveSt,
-      filterSeed,
-      filterPeak,
-      tTrEndPts,
-      tSfPeaks,
-      editPeakSt,
-      layoutSt,
-      sweepExtentSt,
-      isUiNoBrushSt,
-      cyclicvoltaSt,
-      integationSt,
-      mtplySt
-    } = _ref;
+  create({
+    curveSt,
+    filterSeed,
+    filterPeak,
+    tTrEndPts,
+    tSfPeaks,
+    editPeakSt,
+    layoutSt,
+    sweepExtentSt,
+    isUiNoBrushSt,
+    cyclicvoltaSt,
+    integationSt,
+    mtplySt,
+    alignCompareX
+  }) {
     this.svg = d3.select(this.rootKlass).select('.d3Svg');
     (0, _mount.MountMainFrame)(this, 'focus');
     (0, _mount.MountClip)(this);
@@ -839,6 +866,7 @@ class MultiFocus {
     this.scales = (0, _init.InitScale)(this, this.reverseXAxis(layoutSt));
     this.setTip();
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt, jcampIdx);
+    this.alignCompareX = alignCompareX;
     (0, _compass.MountCompass)(this);
     this.axis = (0, _mount.MountAxis)(this);
     this.path = (0, _mount.MountPath)(this, this.pathColor);
@@ -863,22 +891,22 @@ class MultiFocus {
     (0, _brush.default)(this, false, isUiNoBrushSt);
     this.resetShouldUpdate(editPeakSt);
   }
-  update(_ref2) {
-    let {
-      entities,
-      curveSt,
-      filterSeed,
-      filterPeak,
-      tTrEndPts,
-      tSfPeaks,
-      editPeakSt,
-      layoutSt,
-      sweepExtentSt,
-      isUiNoBrushSt,
-      cyclicvoltaSt,
-      integationSt,
-      mtplySt
-    } = _ref2;
+  update({
+    entities,
+    curveSt,
+    filterSeed,
+    filterPeak,
+    tTrEndPts,
+    tSfPeaks,
+    editPeakSt,
+    layoutSt,
+    sweepExtentSt,
+    isUiNoBrushSt,
+    cyclicvoltaSt,
+    integationSt,
+    mtplySt,
+    alignCompareX
+  }) {
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.scales = (0, _init.InitScale)(this, this.reverseXAxis(layoutSt));
     const {
@@ -889,6 +917,7 @@ class MultiFocus {
     this.isShowAllCurves = isShowAllCurve;
     this.entities = entities;
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt, jcampIdx);
+    this.alignCompareX = alignCompareX;
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.getShouldUpdate(editPeakSt);
diff --git a/dist/components/d3_rect/index.js b/dist/components/d3_rect/index.js
index 1cb94605..8f42d40c 100644
--- a/dist/components/d3_rect/index.js
+++ b/dist/components/d3_rect/index.js
@@ -15,6 +15,7 @@ var _ui = require("../../actions/ui");
 var _rect_focus = _interopRequireDefault(require("./rect_focus"));
 var _draw = require("../common/draw");
 var _list_ui = require("../../constants/list_ui");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable no-mixed-operators */
 
 const W = Math.round(window.innerWidth * 0.90 * 9 / 12); // ROI
@@ -110,20 +111,30 @@ class ViewerRect extends _react.default.Component {
     }
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "d3Rect"
     });
   }
 }
-const mapStateToProps = (state, props) => ({
-  seed: (0, _chem.Topic2Seed)(state, props),
-  peak: (0, _chem.Feature2Peak)(state, props),
-  tTrEndPts: (0, _chem.ToThresEndPts)(state, props),
-  tSfPeaks: (0, _chem.ToShiftPeaks)(state, props),
-  sweepExtentSt: state.ui.sweepExtent,
-  isUiAddIntgSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
-  isUiNoBrushSt: _list_ui.LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0
-});
+const mapStateToProps = (state, props) => (() => {
+  const {
+    curveIdx
+  } = state.curve;
+  const sweepExtentByCurve = state.ui.sweepExtentByCurve || {};
+  const sweepExtentSt = sweepExtentByCurve[curveIdx] || {
+    xExtent: false,
+    yExtent: false
+  };
+  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),
+    sweepExtentSt,
+    isUiAddIntgSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
+    isUiNoBrushSt: _list_ui.LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0
+  };
+})();
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   resetAllAct: _manager.resetAll,
   clickUiTargetAct: _ui.clickUiTarget,
diff --git a/dist/components/d3_rect/rect_focus.js b/dist/components/d3_rect/rect_focus.js
index 29d25af2..bc58f31e 100644
--- a/dist/components/d3_rect/rect_focus.js
+++ b/dist/components/d3_rect/rect_focus.js
@@ -169,16 +169,15 @@ class RectFocus {
     this.dataPks = (0, _converter.PksEdit)(this.dataPks, editPeakSt);
     return this.dataPks;
   }
-  create(_ref) {
-    let {
-      filterSeed,
-      filterPeak,
-      tTrEndPts,
-      tSfPeaks,
-      sweepExtentSt,
-      isUiAddIntgSt,
-      isUiNoBrushSt
-    } = _ref;
+  create({
+    filterSeed,
+    filterPeak,
+    tTrEndPts,
+    tSfPeaks,
+    sweepExtentSt,
+    isUiAddIntgSt,
+    isUiNoBrushSt
+  }) {
     this.svg = d3.select('.d3Svg');
     (0, _mount.MountMainFrame)(this, 'focus');
     (0, _mount.MountClip)(this);
@@ -201,16 +200,15 @@ class RectFocus {
     }
     (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt);
   }
-  update(_ref2) {
-    let {
-      filterSeed,
-      filterPeak,
-      tTrEndPts,
-      tSfPeaks,
-      sweepExtentSt,
-      isUiAddIntgSt,
-      isUiNoBrushSt
-    } = _ref2;
+  update({
+    filterSeed,
+    filterPeak,
+    tTrEndPts,
+    tSfPeaks,
+    sweepExtentSt,
+    isUiAddIntgSt,
+    isUiNoBrushSt
+  }) {
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks);
     if (this.data && this.data.length > 0) {
diff --git a/dist/components/forecast/comps.js b/dist/components/forecast/comps.js
index eb711478..263de551 100644
--- a/dist/components/forecast/comps.js
+++ b/dist/components/forecast/comps.js
@@ -16,6 +16,7 @@ var _Help = _interopRequireDefault(require("@mui/icons-material/Help"));
 var _material = require("@mui/material");
 var _CloudOff = _interopRequireDefault(require("@mui/icons-material/CloudOff"));
 var _section_loading = _interopRequireDefault(require("./section_loading"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react/function-component-definition, react/destructuring-assignment,
 max-len */
 
@@ -33,157 +34,193 @@ const titleStyle = {
 const txtStyle = {
   lineHeight: '20px'
 };
-const TxtLabel = function (classes, label) {
-  let extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-label';
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtLabel, extClsName)
-  }, label);
-};
+const TxtLabel = (classes, label, extClsName = 'txt-label') => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  className: (0, _classnames.default)(classes.txtLabel, extClsName),
+  children: label
+});
 exports.TxtLabel = TxtLabel;
 const StatusIcon = status => {
   switch (status) {
     case 'accept':
-      return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-        title: /*#__PURE__*/_react.default.createElement("span", {
-          className: "txt-sv-tp"
-        }, "Accept"),
-        placement: "left"
-      }, /*#__PURE__*/_react.default.createElement(_CheckCircleOutline.default, {
-        style: {
-          color: '#4caf50'
-        }
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "txt-sv-tp",
+          children: "Accept"
+        }),
+        placement: "left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircleOutline.default, {
+          style: {
+            color: '#4caf50'
+          }
+        })
+      });
     case 'warning':
-      return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-        title: /*#__PURE__*/_react.default.createElement("span", {
-          className: "txt-sv-tp"
-        }, "Warning"),
-        placement: "left"
-      }, /*#__PURE__*/_react.default.createElement(_ErrorOutline.default, {
-        style: {
-          color: '#ffc107'
-        }
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "txt-sv-tp",
+          children: "Warning"
+        }),
+        placement: "left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorOutline.default, {
+          style: {
+            color: '#ffc107'
+          }
+        })
+      });
     case 'reject':
-      return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-        title: /*#__PURE__*/_react.default.createElement("span", {
-          className: "txt-sv-tp"
-        }, "Reject"),
-        placement: "left"
-      }, /*#__PURE__*/_react.default.createElement(_HighlightOff.default, {
-        style: {
-          color: '#e91e63'
-        }
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "txt-sv-tp",
+          children: "Reject"
+        }),
+        placement: "left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightOff.default, {
+          style: {
+            color: '#e91e63'
+          }
+        })
+      });
     case 'missing':
-      return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-        title: /*#__PURE__*/_react.default.createElement("span", {
-          className: "txt-sv-tp"
-        }, "Missing"),
-        placement: "left"
-      }, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
-        style: {
-          color: '#5d4037'
-        }
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "txt-sv-tp",
+          children: "Missing"
+        }),
+        placement: "left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpOutline.default, {
+          style: {
+            color: '#5d4037'
+          }
+        })
+      });
     case 'unknown':
-      return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-        title: /*#__PURE__*/_react.default.createElement("span", {
-          className: "txt-sv-tp"
-        }, "Not Support"),
-        placement: "left"
-      }, /*#__PURE__*/_react.default.createElement(_Help.default, {
-        style: {
-          color: '#5d4037'
-        }
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "txt-sv-tp",
+          children: "Not Support"
+        }),
+        placement: "left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Help.default, {
+          style: {
+            color: '#5d4037'
+          }
+        })
+      });
     default:
       return null;
   }
 };
 exports.StatusIcon = StatusIcon;
-const ConfidenceLabel = function (classes, confidence) {
-  let extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-label';
-  if (!confidence) return /*#__PURE__*/_react.default.createElement("span", null, " - - ");
+const ConfidenceLabel = (classes, confidence, extClsName = 'txt-label') => {
+  if (!confidence) return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    children: " - - "
+  });
   const confidenceDp = parseFloat(Math.round(confidence * 100) / 100).toFixed(2);
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtLabel, extClsName)
-  }, `${confidenceDp} %`);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: (0, _classnames.default)(classes.txtLabel, extClsName),
+    children: `${confidenceDp} %`
+  });
 };
 exports.ConfidenceLabel = ConfidenceLabel;
 const sectionInput = (classes, molecule, inputFuncCb) => {
   if (!inputFuncCb) return null;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.inputRoot)
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    container: true
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true,
-    xs: 6
-  }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
-    fullWidth: true,
-    label: TxtLabel(classes, 'Molfile', 'txt-mol-label'),
-    margin: "normal",
-    multiline: true,
-    onChange: inputFuncCb,
-    rows: "2",
-    variant: "outlined",
-    value: molecule
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(classes.inputRoot),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      container: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+        item: true,
+        xs: 6,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+          fullWidth: true,
+          label: TxtLabel(classes, 'Molfile', 'txt-mol-label'),
+          margin: "normal",
+          multiline: true,
+          onChange: inputFuncCb,
+          rows: "2",
+          variant: "outlined",
+          value: molecule
+        })
+      })
+    })
+  });
 };
 exports.sectionInput = sectionInput;
-const SectionRunning = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: titleStyle
-}, /*#__PURE__*/_react.default.createElement("h2", {
-  style: txtStyle
-}, /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
-  style: {
-    color: 'blue',
-    fontSize: 50
-  }
-}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "The server is making predictions...")));
-const SectionMissMatch = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: titleStyle
-}, /*#__PURE__*/_react.default.createElement("h2", {
-  style: txtStyle
-}, /*#__PURE__*/_react.default.createElement(_ErrorOutline.default, {
-  style: {
-    color: 'red',
-    fontSize: 50
-  }
-}), /*#__PURE__*/_react.default.createElement("p", {
-  className: "txt-predict-fail"
-}, "Peak & Element count mismatch!"), /*#__PURE__*/_react.default.createElement("p", {
-  className: "txt-predict-fail"
-}, /*#__PURE__*/_react.default.createElement("sup", null, "1"), "H multiplicity count should not be more than the proton group count. Multiplicity must be assigned manulally before predictions."), /*#__PURE__*/_react.default.createElement("p", {
-  className: "txt-predict-fail"
-}, /*#__PURE__*/_react.default.createElement("sup", null, "13"), "C peak count should not be more than the carbon count, and solvent peaks should be excluded.")));
-const SectionNoService = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: titleStyle
-}, /*#__PURE__*/_react.default.createElement("h2", {
-  style: txtStyle
-}, /*#__PURE__*/_react.default.createElement(_CloudOff.default, {
-  style: {
-    color: 'red',
-    fontSize: 50
-  }
-}), /*#__PURE__*/_react.default.createElement("p", null, "Service is not available."), /*#__PURE__*/_react.default.createElement("p", null, "Please try it again later.")));
-const SectionUnknown = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: titleStyle
-}, /*#__PURE__*/_react.default.createElement("h2", {
-  style: txtStyle
-}, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
-  style: {
-    color: 'purple',
-    fontSize: 50
-  }
-}), /*#__PURE__*/_react.default.createElement("p", null, "Unknown state.")));
+const SectionRunning = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  style: titleStyle,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+    style: txtStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+      style: {
+        color: 'blue',
+        fontSize: 50
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "The server is making predictions..."
+    })]
+  })
+});
+const SectionMissMatch = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  style: titleStyle,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+    style: txtStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorOutline.default, {
+      style: {
+        color: 'red',
+        fontSize: 50
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "txt-predict-fail",
+      children: "Peak & Element count mismatch!"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      className: "txt-predict-fail",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("sup", {
+        children: "1"
+      }), "H multiplicity count should not be more than the proton group count. Multiplicity must be assigned manulally before predictions."]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      className: "txt-predict-fail",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("sup", {
+        children: "13"
+      }), "C peak count should not be more than the carbon count, and solvent peaks should be excluded."]
+    })]
+  })
+});
+const SectionNoService = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  style: titleStyle,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+    style: txtStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudOff.default, {
+      style: {
+        color: 'red',
+        fontSize: 50
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "Service is not available."
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "Please try it again later."
+    })]
+  })
+});
+const SectionUnknown = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  style: titleStyle,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+    style: txtStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpOutline.default, {
+      style: {
+        color: 'purple',
+        fontSize: 50
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "Unknown state."
+    })]
+  })
+});
 const notToRenderAnalysis = pds => {
-  if (pds.running) return /*#__PURE__*/_react.default.createElement(SectionRunning, null);
-  if (!pds.outline || !pds.outline.code) return /*#__PURE__*/_react.default.createElement("div", null);
-  if (pds.outline.code >= 500) return /*#__PURE__*/_react.default.createElement(SectionNoService, null);
-  if (pds.outline.code === 400) return /*#__PURE__*/_react.default.createElement(SectionMissMatch, null);
-  if (pds.outline.code >= 300) return /*#__PURE__*/_react.default.createElement(SectionUnknown, null);
+  if (pds.running) return /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionRunning, {});
+  if (!pds.outline || !pds.outline.code) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
+  if (pds.outline.code >= 500) return /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionNoService, {});
+  if (pds.outline.code === 400) return /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionMissMatch, {});
+  if (pds.outline.code >= 300) return /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionUnknown, {});
   return false;
 };
 exports.notToRenderAnalysis = notToRenderAnalysis;
@@ -192,8 +229,8 @@ const sectionSvg = (classes, predictions) => {
   if (renderMsg) return null;
   if (!predictions.output) return null;
   const targetSvg = predictions.output.result[0].svgs[0];
-  if (!targetSvg) return /*#__PURE__*/_react.default.createElement(_section_loading.default, null);
-  return /*#__PURE__*/_react.default.createElement(_reactSvgFileZoomPan.default, {
+  if (!targetSvg) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_section_loading.default, {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvgFileZoomPan.default, {
     svg: targetSvg,
     duration: 300,
     resize: true
diff --git a/dist/components/forecast/ir_comps.js b/dist/components/forecast/ir_comps.js
index 9c2b12e2..0b432458 100644
--- a/dist/components/forecast/ir_comps.js
+++ b/dist/components/forecast/ir_comps.js
@@ -15,46 +15,51 @@ var _CheckCircleOutline = _interopRequireDefault(require("@mui/icons-material/Ch
 var _HighlightOff = _interopRequireDefault(require("@mui/icons-material/HighlightOff"));
 var _comps = require("./comps");
 var _forecast = require("../../actions/forecast");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react/function-component-definition, function-paren-newline,
 prefer-object-spread */
 
 // import SmaToSvg from '../common/chem';
-
-const baseSelectIrStatus = _ref => {
-  let {
-    sma,
-    status,
-    identity,
-    setIrStatusAct
-  } = _ref;
+const baseSelectIrStatus = ({
+  sma,
+  status,
+  identity,
+  setIrStatusAct
+}) => {
   const theStatus = ['accept', 'reject'].includes(status) ? status : '';
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, null, /*#__PURE__*/_react.default.createElement(_material.Select, {
-    value: theStatus,
-    onChange: e => {
-      setIrStatusAct({
-        predictions: {
-          sma,
-          identity,
-          value: e.target.value
-        },
-        svgs: []
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: "accept"
-  }, /*#__PURE__*/_react.default.createElement(_CheckCircleOutline.default, {
-    style: {
-      color: '#4caf50'
-    }
-  })), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: "reject"
-  }, /*#__PURE__*/_react.default.createElement(_HighlightOff.default, {
-    style: {
-      color: '#e91e63'
-    }
-  })), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: ""
-  }, /*#__PURE__*/_react.default.createElement("span", null))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Select, {
+      value: theStatus,
+      onChange: e => {
+        setIrStatusAct({
+          predictions: {
+            sma,
+            identity,
+            value: e.target.value
+          },
+          svgs: []
+        });
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: "accept",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircleOutline.default, {
+          style: {
+            color: '#4caf50'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: "reject",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightOff.default, {
+          style: {
+            color: '#e91e63'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: "",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
+      })]
+    })
+  });
 };
 const bssMapStateToProps = (state, props) => (
 // eslint-disable-line
@@ -72,15 +77,23 @@ baseSelectIrStatus.defaultProps = {
   status: ''
 };
 const SelectIrStatus = (0, _reactRedux.connect)(bssMapStateToProps, bssMapDispatchToProps)(baseSelectIrStatus);
-const IrTableHeader = classes => /*#__PURE__*/_react.default.createElement(_material.TableHead, null, /*#__PURE__*/_react.default.createElement(_material.TableRow, null, /*#__PURE__*/_react.default.createElement(_material.TableCell, null), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "left"
-}, (0, _comps.TxtLabel)(classes, 'FG SMARTS', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, 'Machine Confidence', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, 'Machine', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, 'Owner', 'txt-prd-table-title'))));
+const IrTableHeader = classes => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableHead, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "left",
+      children: (0, _comps.TxtLabel)(classes, 'FG SMARTS', 'txt-prd-table-title')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      children: (0, _comps.TxtLabel)(classes, 'Machine Confidence', 'txt-prd-table-title')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      children: (0, _comps.TxtLabel)(classes, 'Machine', 'txt-prd-table-title')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      children: (0, _comps.TxtLabel)(classes, 'Owner', 'txt-prd-table-title')
+    })]
+  })
+});
 exports.IrTableHeader = IrTableHeader;
 const colorStyles = [{
   backgroundColor: '#FFFF00'
@@ -99,35 +112,41 @@ const colorStyles = [{
 }, {
   backgroundColor: '#F5F5DC'
 }];
-const colorLabel = function (classes, idx) {
-  let extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-label';
+const colorLabel = (classes, idx, extClsName = 'txt-label') => {
   const style = Object.assign({}, colorStyles[idx % 8], {
     width: 20,
     borderRadius: 20,
     textAlign: 'center'
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: style
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtLabel, extClsName)
-  }, idx + 1));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)(classes.txtLabel, extClsName),
+      children: idx + 1
+    })
+  });
 };
-const IrTableBodyRow = (classes, idx, fg) => /*#__PURE__*/_react.default.createElement(_material.TableRow, {
-  key: `${idx}-${fg.name}`
-}, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  component: "th",
-  scope: "row"
-}, colorLabel(classes, idx)), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "left"
-}, (0, _comps.TxtLabel)(classes, fg.sma, 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.ConfidenceLabel)(classes, fg.confidence, 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.StatusIcon)(fg.status)), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, /*#__PURE__*/_react.default.createElement(SelectIrStatus, {
-  sma: fg.sma,
-  status: fg.statusOwner,
-  identity: "Owner"
-})));
+const IrTableBodyRow = (classes, idx, fg) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    component: "th",
+    scope: "row",
+    children: colorLabel(classes, idx)
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    align: "left",
+    children: (0, _comps.TxtLabel)(classes, fg.sma, 'txt-prd-table-content')
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    align: "right",
+    children: (0, _comps.ConfidenceLabel)(classes, fg.confidence, 'txt-prd-table-content')
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    align: "right",
+    children: (0, _comps.StatusIcon)(fg.status)
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    align: "right",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectIrStatus, {
+      sma: fg.sma,
+      status: fg.statusOwner,
+      identity: "Owner"
+    })
+  })]
+}, `${idx}-${fg.name}`);
 exports.IrTableBodyRow = IrTableBodyRow;
\ No newline at end of file
diff --git a/dist/components/forecast/ir_viewer.js b/dist/components/forecast/ir_viewer.js
index 9caec92d..e1d9f482 100644
--- a/dist/components/forecast/ir_viewer.js
+++ b/dist/components/forecast/ir_viewer.js
@@ -14,6 +14,7 @@ var _styles = require("@mui/styles");
 var _material = require("@mui/material");
 var _comps = require("./comps");
 var _ir_comps = require("./ir_comps");
+var _jsxRuntime = require("react/jsx-runtime");
 const Styles = () => ({
   root: {
     overflowX: 'hidden',
@@ -62,36 +63,42 @@ const sectionTable = (classes, pds) => {
     fgs
   } = pds.output.result[0];
   if (!fgs) return null;
-  return /*#__PURE__*/_react.default.createElement(_material.Paper, {
-    className: classes.tableRoot
-  }, /*#__PURE__*/_react.default.createElement(_material.Table, {
-    className: classes.table,
-    size: "small"
-  }, (0, _ir_comps.IrTableHeader)(classes), /*#__PURE__*/_react.default.createElement(_material.TableBody, null, fgs.sort((a, b) => b.confidence - a.confidence).map((fg, idx) => (0, _ir_comps.IrTableBodyRow)(classes, idx, fg)))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+    className: classes.tableRoot,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Table, {
+      className: classes.table,
+      size: "small",
+      children: [(0, _ir_comps.IrTableHeader)(classes), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableBody, {
+        children: fgs.sort((a, b) => b.confidence - a.confidence).map((fg, idx) => (0, _ir_comps.IrTableBodyRow)(classes, idx, fg))
+      })]
+    })
+  });
 };
-const IrViewer = _ref => {
-  let {
-    // eslint-disable-line
-    classes,
-    molecule,
-    inputCb,
-    forecastSt
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.root, 'card-forecast-viewer')
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+const IrViewer = ({
+  // eslint-disable-line
+  classes,
+  molecule,
+  inputCb,
+  forecastSt
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  className: (0, _classnames.default)(classes.root, 'card-forecast-viewer'),
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
     className: (0, _classnames.default)(classes.container),
-    container: true
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true,
-    xs: 4
-  }, /*#__PURE__*/_react.default.createElement(_material.Paper, {
-    className: classes.svgRoot
-  }, (0, _comps.sectionSvg)(classes, forecastSt.predictions))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true,
-    xs: 8
-  }, sectionTable(classes, forecastSt.predictions))), (0, _comps.sectionInput)(classes, molecule, inputCb));
-};
+    container: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      item: true,
+      xs: 4,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+        className: classes.svgRoot,
+        children: (0, _comps.sectionSvg)(classes, forecastSt.predictions)
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      item: true,
+      xs: 8,
+      children: sectionTable(classes, forecastSt.predictions)
+    })]
+  }), (0, _comps.sectionInput)(classes, molecule, inputCb)]
+});
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {
diff --git a/dist/components/forecast/nmr_comps.js b/dist/components/forecast/nmr_comps.js
index f0cf960a..3ce7da6d 100644
--- a/dist/components/forecast/nmr_comps.js
+++ b/dist/components/forecast/nmr_comps.js
@@ -15,46 +15,52 @@ var _CheckCircleOutline = _interopRequireDefault(require("@mui/icons-material/Ch
 var _HighlightOff = _interopRequireDefault(require("@mui/icons-material/HighlightOff"));
 var _comps = require("./comps");
 var _forecast = require("../../actions/forecast");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react/function-component-definition, react/destructuring-assignment */
 
-const baseSelectNmrStatus = _ref => {
-  let {
-    // eslint-disable-line
-    idx,
-    atom,
-    status,
-    identity,
-    setNmrStatusAct
-  } = _ref;
+const baseSelectNmrStatus = ({
+  // eslint-disable-line
+  idx,
+  atom,
+  status,
+  identity,
+  setNmrStatusAct
+}) => {
   const theStatus = ['accept', 'reject'].includes(status) ? status : '';
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, null, /*#__PURE__*/_react.default.createElement(_material.Select, {
-    value: theStatus,
-    onChange: e => {
-      setNmrStatusAct({
-        predictions: {
-          idx,
-          atom,
-          identity,
-          value: e.target.value
-        },
-        svgs: []
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: "accept"
-  }, /*#__PURE__*/_react.default.createElement(_CheckCircleOutline.default, {
-    style: {
-      color: '#4caf50'
-    }
-  })), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: "reject"
-  }, /*#__PURE__*/_react.default.createElement(_HighlightOff.default, {
-    style: {
-      color: '#e91e63'
-    }
-  })), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    value: ""
-  }, /*#__PURE__*/_react.default.createElement("span", null))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Select, {
+      value: theStatus,
+      onChange: e => {
+        setNmrStatusAct({
+          predictions: {
+            idx,
+            atom,
+            identity,
+            value: e.target.value
+          },
+          svgs: []
+        });
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: "accept",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircleOutline.default, {
+          style: {
+            color: '#4caf50'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: "reject",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightOff.default, {
+          style: {
+            color: '#e91e63'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: "",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
+      })]
+    })
+  });
 };
 const bssMapStateToProps = (state, props) => (
 // eslint-disable-line
@@ -83,45 +89,68 @@ const realFormat = (val, status) => {
   }
   return numFormat(val);
 };
-const NmrTableHeader = classes => /*#__PURE__*/_react.default.createElement(_material.TableHead, null, /*#__PURE__*/_react.default.createElement(_material.TableRow, null, /*#__PURE__*/_react.default.createElement(_material.TableCell, null, (0, _comps.TxtLabel)(classes, 'Atom', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, 'Prediction (ppm)', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, 'Real (ppm)', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, 'Diff (ppm)', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, 'Machine', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, 'Owner', 'txt-prd-table-title'))));
+const NmrTableHeader = classes => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableHead, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      children: (0, _comps.TxtLabel)(classes, 'Atom', 'txt-prd-table-title')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      children: (0, _comps.TxtLabel)(classes, 'Prediction (ppm)', 'txt-prd-table-title')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      children: (0, _comps.TxtLabel)(classes, 'Real (ppm)', 'txt-prd-table-title')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      children: (0, _comps.TxtLabel)(classes, 'Diff (ppm)', 'txt-prd-table-title')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      children: (0, _comps.TxtLabel)(classes, 'Machine', 'txt-prd-table-title')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      children: (0, _comps.TxtLabel)(classes, 'Owner', 'txt-prd-table-title')
+    })]
+  })
+});
 exports.NmrTableHeader = NmrTableHeader;
-const NmrTableBodyRow = (classes, row, idx) => /*#__PURE__*/_react.default.createElement(_material.TableRow, {
-  key: `${idx}-${row.atom}`
-}, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  component: "th",
-  scope: "row"
-}, (0, _comps.TxtLabel)(classes, row.atom, 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, numFormat(row.prediction), 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, realFormat(row.real, row.status), 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.TxtLabel)(classes, realFormat(row.diff, row.status), 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, (0, _comps.StatusIcon)(row.status)), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-  align: "right"
-}, /*#__PURE__*/_react.default.createElement(SelectNmrStatus, {
-  idx: idx,
-  atom: row.atom,
-  status: row.statusOwner,
-  identity: "Owner"
-})));
+const NmrTableBodyRow = (classes, row, idx) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    component: "th",
+    scope: "row",
+    children: (0, _comps.TxtLabel)(classes, row.atom, 'txt-prd-table-content')
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    align: "right",
+    children: (0, _comps.TxtLabel)(classes, numFormat(row.prediction), 'txt-prd-table-content')
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    align: "right",
+    children: (0, _comps.TxtLabel)(classes, realFormat(row.real, row.status), 'txt-prd-table-content')
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    align: "right",
+    children: (0, _comps.TxtLabel)(classes, realFormat(row.diff, row.status), 'txt-prd-table-content')
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    align: "right",
+    children: (0, _comps.StatusIcon)(row.status)
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+    align: "right",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectNmrStatus, {
+      idx: idx,
+      atom: row.atom,
+      status: row.statusOwner,
+      identity: "Owner"
+    })
+  })]
+}, `${idx}-${row.atom}`);
 exports.NmrTableBodyRow = NmrTableBodyRow;
-const SectionReference = classes => /*#__PURE__*/_react.default.createElement("div", {
-  className: (0, _classnames.default)(classes.reference)
-}, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("span", null, "NMR prediction source: "), /*#__PURE__*/_react.default.createElement("a", {
-  href: "https://www.ncbi.nlm.nih.gov/pubmed/15464159",
-  target: "_blank",
-  rel: "noopener noreferrer"
-}, "nmrshiftdb")));
+const SectionReference = classes => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  className: (0, _classnames.default)(classes.reference),
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: "NMR prediction source: "
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      href: "https://www.ncbi.nlm.nih.gov/pubmed/15464159",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: "nmrshiftdb"
+    })]
+  })
+});
 exports.SectionReference = SectionReference;
\ No newline at end of file
diff --git a/dist/components/forecast/nmr_viewer.js b/dist/components/forecast/nmr_viewer.js
index 6188d539..c397d56b 100644
--- a/dist/components/forecast/nmr_viewer.js
+++ b/dist/components/forecast/nmr_viewer.js
@@ -14,6 +14,7 @@ var _styles = require("@mui/styles");
 var _material = require("@mui/material");
 var _comps = require("./comps");
 var _nmr_comps = require("./nmr_comps");
+var _jsxRuntime = require("react/jsx-runtime");
 const Styles = () => ({
   root: {
     overflowX: 'hidden',
@@ -58,37 +59,43 @@ const sectionTable = (classes, pds) => {
   const renderMsg = (0, _comps.notToRenderAnalysis)(pds);
   if (renderMsg) return renderMsg;
   const dict = pds.output.result[0];
-  if (!dict) return /*#__PURE__*/_react.default.createElement("div", null);
-  return /*#__PURE__*/_react.default.createElement(_material.Paper, {
-    className: classes.tableRoot
-  }, /*#__PURE__*/_react.default.createElement(_material.Table, {
-    className: classes.table,
-    size: "small"
-  }, (0, _nmr_comps.NmrTableHeader)(classes), /*#__PURE__*/_react.default.createElement(_material.TableBody, null, dict.shifts.sort((a, b) => a.atom - b.atom).map((row, idx) => (0, _nmr_comps.NmrTableBodyRow)(classes, row, idx)))));
+  if (!dict) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+    className: classes.tableRoot,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Table, {
+      className: classes.table,
+      size: "small",
+      children: [(0, _nmr_comps.NmrTableHeader)(classes), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableBody, {
+        children: dict.shifts.sort((a, b) => a.atom - b.atom).map((row, idx) => (0, _nmr_comps.NmrTableBodyRow)(classes, row, idx))
+      })]
+    })
+  });
 };
-const NmrViewer = _ref => {
-  let {
-    // eslint-disable-line
-    classes,
-    molecule,
-    inputCb,
-    forecastSt
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.root, 'card-forecast-viewer')
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+const NmrViewer = ({
+  // eslint-disable-line
+  classes,
+  molecule,
+  inputCb,
+  forecastSt
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  className: (0, _classnames.default)(classes.root, 'card-forecast-viewer'),
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
     className: (0, _classnames.default)(classes.container),
-    container: true
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true,
-    xs: 4
-  }, /*#__PURE__*/_react.default.createElement(_material.Paper, {
-    className: classes.svgRoot
-  }, (0, _comps.sectionSvg)(classes, forecastSt.predictions))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true,
-    xs: 8
-  }, sectionTable(classes, forecastSt.predictions))), (0, _comps.sectionInput)(classes, molecule, inputCb), (0, _nmr_comps.SectionReference)(classes));
-};
+    container: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      item: true,
+      xs: 4,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+        className: classes.svgRoot,
+        children: (0, _comps.sectionSvg)(classes, forecastSt.predictions)
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      item: true,
+      xs: 8,
+      children: sectionTable(classes, forecastSt.predictions)
+    })]
+  }), (0, _comps.sectionInput)(classes, molecule, inputCb), (0, _nmr_comps.SectionReference)(classes)]
+});
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {
diff --git a/dist/components/forecast/section_loading.js b/dist/components/forecast/section_loading.js
index 25e1f2b9..62d38f8d 100644
--- a/dist/components/forecast/section_loading.js
+++ b/dist/components/forecast/section_loading.js
@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _ErrorOutline = _interopRequireDefault(require("@mui/icons-material/ErrorOutline"));
+var _jsxRuntime = require("react/jsx-runtime");
 const styleLoading = {
   alignItems: 'center',
   display: 'flex',
@@ -27,25 +28,29 @@ class SectionLoading extends _react.default.Component {
     }), 5000);
   }
   renderLoading() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: styleLoading
-    }, /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
-      style: {
-        color: 'blue',
-        fontSize: 50
-      }
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: styleLoading,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        style: {
+          color: 'blue',
+          fontSize: 50
+        }
+      })
+    });
   }
   renderNotFound() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: styleLoading
-    }, /*#__PURE__*/_react.default.createElement(_ErrorOutline.default, {
-      style: {
-        color: '#ffc107',
-        fontSize: 50,
-        margin: 20
-      }
-    }), /*#__PURE__*/_react.default.createElement("h3", null, "Structure Not Found"));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: styleLoading,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorOutline.default, {
+        style: {
+          color: '#ffc107',
+          fontSize: 50,
+          margin: 20
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: "Structure Not Found"
+      })]
+    });
   }
   render() {
     const {
diff --git a/dist/components/forecast_viewer.js b/dist/components/forecast_viewer.js
index b84ea1e7..cfce89e4 100644
--- a/dist/components/forecast_viewer.js
+++ b/dist/components/forecast_viewer.js
@@ -16,6 +16,7 @@ var _ir_viewer = _interopRequireDefault(require("./forecast/ir_viewer"));
 var _forecast = require("../actions/forecast");
 var _ui = require("../actions/ui");
 var _list_ui = require("../constants/list_ui");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react/no-unused-prop-types */
 
 const styles = () => ({
@@ -94,23 +95,24 @@ class ForecastViewer extends _react.default.Component {
       jcamps
     } = jcampSt;
     const comparisons = jcamps[curveIdx].others;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classes.root
-    }, /*#__PURE__*/_react.default.createElement(_index.default, {
-      topic: topic,
-      feature: feature,
-      cLabel: cLabel,
-      xLabel: isXRD && wavelength ? `${xLabel}, WL=${wavelength.value} ${wavelength.unit}` : xLabel,
-      yLabel: yLabel,
-      comparisons: comparisons,
-      isHidden: viewer !== _list_ui.LIST_UI_VIEWER_TYPE.SPECTRUM
-    }), viewer === _list_ui.LIST_UI_VIEWER_TYPE.ANALYSIS && isNmr && /*#__PURE__*/_react.default.createElement(_nmr_viewer.default, {
-      molecule: molecule,
-      inputCb: inputCb
-    }), viewer === _list_ui.LIST_UI_VIEWER_TYPE.ANALYSIS && isIr && /*#__PURE__*/_react.default.createElement(_ir_viewer.default, {
-      molecule: molecule,
-      inputCb: inputCb
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.root,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
+        topic: topic,
+        feature: feature,
+        cLabel: cLabel,
+        xLabel: isXRD && wavelength ? `${xLabel}, WL=${wavelength.value} ${wavelength.unit}` : xLabel,
+        yLabel: yLabel,
+        comparisons: comparisons,
+        isHidden: viewer !== _list_ui.LIST_UI_VIEWER_TYPE.SPECTRUM
+      }), viewer === _list_ui.LIST_UI_VIEWER_TYPE.ANALYSIS && isNmr && /*#__PURE__*/(0, _jsxRuntime.jsx)(_nmr_viewer.default, {
+        molecule: molecule,
+        inputCb: inputCb
+      }), viewer === _list_ui.LIST_UI_VIEWER_TYPE.ANALYSIS && isIr && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ir_viewer.default, {
+        molecule: molecule,
+        inputCb: inputCb
+      })]
+    });
   }
 }
 const mapStateToProps = (state, _) => (
diff --git a/dist/components/multi_jcamps_viewer.js b/dist/components/multi_jcamps_viewer.js
index 1efda3cf..be2492e7 100644
--- a/dist/components/multi_jcamps_viewer.js
+++ b/dist/components/multi_jcamps_viewer.js
@@ -18,6 +18,7 @@ var _curve = require("../actions/curve");
 var _cyclic_voltammetry = require("../actions/cyclic_voltammetry");
 var _list_layout = require("../constants/list_layout");
 var _format = _interopRequireDefault(require("../helpers/format"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react/default-props-match-prop-types,
 react/require-default-props, react/no-unused-prop-types, react/jsx-boolean-value,
 prefer-object-spread */
@@ -67,7 +68,7 @@ class MultiJcampsViewer extends _react.default.Component {
       layoutSt,
       integrationSt
     } = this.props;
-    if (!entities || entities.length === 0) return /*#__PURE__*/_react.default.createElement("div", null);
+    if (!entities || entities.length === 0) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
     const separateCondition = _format.default.isGCLayout(layoutSt) ? 'yUnit' : 'xUnit';
     const seperatedSubLayouts = seperatingSubLayout(entities, separateCondition, layoutSt);
     const {
@@ -82,43 +83,48 @@ class MultiJcampsViewer extends _react.default.Component {
       integrations
     } = integrationSt;
     const currentIntegration = integrations[curveIdx];
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classes.root
-    }, /*#__PURE__*/_react.default.createElement(_index2.default, {
-      feature: feature,
-      operations: operations,
-      editorOnly: true,
-      hideThreshold: !_format.default.isNmrLayout(layoutSt)
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "react-spectrum-editor"
-    }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-      container: true
-    }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-      item: true,
-      xs: 9
-    }, /*#__PURE__*/_react.default.createElement(_index3.default, {
-      entities: entities,
-      topic: topic,
-      xLabel: feature.xUnit,
-      yLabel: feature.yUnit,
-      feature: feature
-    })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
-      item: true,
-      xs: 3,
-      align: "center"
-    }, /*#__PURE__*/_react.default.createElement(_index.default, {
-      jcampIdx: curveIdx,
-      entityFileNames: entityFileNames,
-      userManualLink: userManualLink,
-      feature: feature,
-      molSvg: molSvg,
-      exactMass: exactMass,
-      subLayoutsInfo: seperatedSubLayouts,
-      integration: currentIntegration,
-      descriptions: "",
-      canChangeDescription: () => {},
-      onDescriptionChanged: () => {}
-    })))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.root,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
+        feature: feature,
+        operations: operations,
+        editorOnly: true,
+        hideThreshold: !_format.default.isNmrLayout(layoutSt)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "react-spectrum-editor",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+          container: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+            item: true,
+            xs: 9,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, {
+              entities: entities,
+              topic: topic,
+              xLabel: feature.xUnit,
+              yLabel: feature.yUnit,
+              feature: feature
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+            item: true,
+            xs: 3,
+            align: "center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
+              jcampIdx: curveIdx,
+              entityFileNames: entityFileNames,
+              userManualLink: userManualLink,
+              feature: feature,
+              molSvg: molSvg,
+              exactMass: exactMass,
+              subLayoutsInfo: seperatedSubLayouts,
+              integration: currentIntegration,
+              descriptions: "",
+              canChangeDescription: () => {},
+              onDescriptionChanged: () => {}
+            })
+          })]
+        })
+      })]
+    });
   }
 }
 const mapStateToProps = (state, _) => (
diff --git a/dist/components/panel/compare.js b/dist/components/panel/compare.js
index 278f3669..1ab135fe 100644
--- a/dist/components/panel/compare.js
+++ b/dist/components/panel/compare.js
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -20,6 +19,7 @@ var _VisibilityOffOutlined = _interopRequireDefault(require("@mui/icons-material
 var _styles = require("@mui/styles");
 var _format = _interopRequireDefault(require("../../helpers/format"));
 var _jcamp = require("../../actions/jcamp");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable function-paren-newline, react/jsx-props-no-spreading,
 react/function-component-definition */
 
@@ -112,19 +112,24 @@ const styles = theme => ({
   }
 });
 const msgDefault = 'Add spectra to compare.';
-const tpHint = classes => /*#__PURE__*/_react.default.createElement("span", {
-  className: (0, _classnames.default)(classes.tpCard)
-}, /*#__PURE__*/_react.default.createElement("p", {
-  className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp')
-}, "- Accept *.dx, *.jdx, *.JCAMP,"), /*#__PURE__*/_react.default.createElement("p", {
-  className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp')
-}, "- Max 5 spectra."));
-const content = (classes, desc) => /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+const tpHint = classes => /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+  className: (0, _classnames.default)(classes.tpCard),
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp'),
+    children: "- Accept *.dx, *.jdx, *.JCAMP,"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp'),
+    children: "- Max 5 spectra."
+  })]
+});
+const content = (classes, desc) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
   title: tpHint(classes),
-  placement: "bottom"
-}, /*#__PURE__*/_react.default.createElement("span", {
-  className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp')
-}, desc));
+  placement: "bottom",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp'),
+    children: desc
+  })
+});
 const inputOthers = (classes, jcampSt) => {
   const {
     selectedIdx,
@@ -142,17 +147,19 @@ const inputOthers = (classes, jcampSt) => {
       jcamps: jcampFiles
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_reactDropzone.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDropzone.default, {
     className: "dropbox",
-    onDrop: onDrop
-  }, _ref => {
-    let {
+    onDrop: onDrop,
+    children: ({
       getRootProps,
       getInputProps
-    } = _ref;
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, getRootProps(), {
-      className: (0, _classnames.default)(classes.baseDD)
-    }), /*#__PURE__*/_react.default.createElement("input", getInputProps()), content(classes, desc));
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ...getRootProps(),
+      className: (0, _classnames.default)(classes.baseDD),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        ...getInputProps()
+      }), content(classes, desc)]
+    })
   });
 };
 const compareList = (classes, jcampSt, rmOthersOneAct, toggleShowAct) => {
@@ -172,62 +179,71 @@ const compareList = (classes, jcampSt, rmOthersOneAct, toggleShowAct) => {
     isShow: o.show,
     toggleShowCb: () => toggleShowAct(idx)
   }));
-  return /*#__PURE__*/_react.default.createElement(_material.Table, {
-    className: classes.table
-  }, /*#__PURE__*/_react.default.createElement(_material.TableBody, null, rows.map(row => /*#__PURE__*/_react.default.createElement(_material.TableRow, {
-    key: row.idx,
-    className: classes.tRow,
-    hover: true
-  }, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
-    style: {
-      backgroundColor: row.color
-    }
-  }, row.idx + 1), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt', row.isShow ? null : classes.tTxtHide)
-  }, row.title), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, row.isShow ? /*#__PURE__*/_react.default.createElement(_VisibilityOutlined.default, {
-    onClick: row.toggleShowCb,
-    className: classes.showBtn
-  }) : /*#__PURE__*/_react.default.createElement(_VisibilityOffOutlined.default, {
-    onClick: row.toggleShowCb,
-    className: classes.hideBtn
-  }), /*#__PURE__*/_react.default.createElement(_HighlightOff.default, {
-    onClick: row.rmCb,
-    className: classes.rmBtn
-  }))))));
-};
-const ComparePanel = _ref2 => {
-  let {
-    classes,
-    expand,
-    onExapnd,
-    jcampSt,
-    rmOthersOneAct,
-    toggleShowAct
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(_material.Accordion, {
-    expanded: expand,
-    onChange: onExapnd,
-    className: (0, _classnames.default)(classes.panel),
-    TransitionProps: {
-      unmountOnExit: true
-    } // increase Accordion performance
-  }, /*#__PURE__*/_react.default.createElement(_material.AccordionSummary, {
-    expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
-    className: (0, _classnames.default)(classes.panelSummary)
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    className: "txt-panel-header"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title')
-  }, "Spectra Comparisons"))), /*#__PURE__*/_react.default.createElement(_material.Divider, null), inputOthers(classes, jcampSt), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.panelDetail)
-  }, compareList(classes, jcampSt, rmOthersOneAct, toggleShowAct)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Table, {
+    className: classes.table,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableBody, {
+      children: rows.map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+        className: classes.tRow,
+        hover: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+          style: {
+            backgroundColor: row.color
+          },
+          children: row.idx + 1
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt', row.isShow ? null : classes.tTxtHide),
+          children: row.title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: [row.isShow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisibilityOutlined.default, {
+            onClick: row.toggleShowCb,
+            className: classes.showBtn
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisibilityOffOutlined.default, {
+            onClick: row.toggleShowCb,
+            className: classes.hideBtn
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightOff.default, {
+            onClick: row.rmCb,
+            className: classes.rmBtn
+          })]
+        })]
+      }, row.idx))
+    })
+  });
 };
+const ComparePanel = ({
+  classes,
+  expand,
+  onExapnd,
+  jcampSt,
+  rmOthersOneAct,
+  toggleShowAct
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
+  expanded: expand,
+  onChange: onExapnd,
+  className: (0, _classnames.default)(classes.panel),
+  TransitionProps: {
+    unmountOnExit: true
+  } // increase Accordion performance
+  ,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionSummary, {
+    expandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+    className: (0, _classnames.default)(classes.panelSummary),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      className: "txt-panel-header",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title'),
+        children: "Spectra Comparisons"
+      })
+    })
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), inputOthers(classes, jcampSt), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(classes.panelDetail),
+    children: compareList(classes, jcampSt, rmOthersOneAct, toggleShowAct)
+  })]
+});
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {
diff --git a/dist/components/panel/cyclic_voltamery_data.js b/dist/components/panel/cyclic_voltamery_data.js
index 3ee1ad82..d7df8188 100644
--- a/dist/components/panel/cyclic_voltamery_data.js
+++ b/dist/components/panel/cyclic_voltamery_data.js
@@ -22,6 +22,7 @@ var _ui = require("../../actions/ui");
 var _list_ui = require("../../constants/list_ui");
 var _chem = require("../../helpers/chem");
 var _format = _interopRequireDefault(require("../../helpers/format"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable function-paren-newline, react/require-default-props,
 react/no-unused-prop-types, react/jsx-closing-tag-location, max-len, react/jsx-one-expression-per-line,
 react/jsx-indent, react/no-unescaped-entities, react/jsx-wrap-multilines, camelcase, no-shadow,
@@ -92,21 +93,20 @@ const styles = () => ({
     whiteSpace: 'nowrap'
   }
 });
-const CyclicVoltammetryPanel = _ref => {
-  let {
-    classes,
-    cyclicVotaSt,
-    feature,
-    addNewPairPeakAct,
-    setWorkWithMaxPeakAct,
-    selectPairPeakAct,
-    removePairPeakAct,
-    selectRefPeaksAct,
-    sweepTypeSt,
-    setUiSweepTypeAct,
-    jcampIdx,
-    userManualLink
-  } = _ref;
+const CyclicVoltammetryPanel = ({
+  classes,
+  cyclicVotaSt,
+  feature,
+  addNewPairPeakAct,
+  setWorkWithMaxPeakAct,
+  selectPairPeakAct,
+  removePairPeakAct,
+  selectRefPeaksAct,
+  sweepTypeSt,
+  setUiSweepTypeAct,
+  jcampIdx,
+  userManualLink
+}) => {
   const {
     spectraList
   } = cyclicVotaSt;
@@ -171,113 +171,162 @@ const CyclicVoltammetryPanel = _ref => {
     }),
     onCheckRefChanged: e => changeCheckRefPeaks(idx, e)
   }));
-  return /*#__PURE__*/_react.default.createElement(_material.Accordion, {
-    "data-testid": "PanelVoltammetry"
-  }, /*#__PURE__*/_react.default.createElement(_material.AccordionSummary, {
-    expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
-    className: (0, _classnames.default)(classes.panelSummary)
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    className: "txt-panel-header"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title')
-  }, "Voltammetry data"))), /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement(_material.Table, {
-    className: classes.table
-  }, /*#__PURE__*/_react.default.createElement(_material.TableHead, null, /*#__PURE__*/_react.default.createElement(_material.TableRow, null, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, "Ref"), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, "Anodic"), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, "Cathodic"), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, "I ", /*#__PURE__*/_react.default.createElement("sub", null, "\u03BB0"), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: /*#__PURE__*/_react.default.createElement("p", {
-      className: (0, _classnames.default)(classes.txtToolTip)
-    }, "Baseline correction value for I ratio ", /*#__PURE__*/_react.default.createElement("br", null), "(a.k.a y value of pecker)")
-  }, /*#__PURE__*/_react.default.createElement(_Info.default, {
-    className: (0, _classnames.default)(classes.infoIcon)
-  }))), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, "I ratio", /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.txtToolTip)
-    }, /*#__PURE__*/_react.default.createElement("p", null, "Nicholson's method"), /*#__PURE__*/_react.default.createElement("i", null, "NICHOLSON, Rl S. Semiempirical Procedure for Measuring with Stationary Electrode Polarography Rates of Chemical Reactions Involving the Product of Electron Transfer. Analytical Chemistry, 1966, 38. Jg., Nr. 10, S. 1406-1406. https://doi.org/10.1021/ac60242a030"))
-  }, /*#__PURE__*/_react.default.createElement(_Info.default, {
-    className: (0, _classnames.default)(classes.infoIcon)
-  }))), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, "E", /*#__PURE__*/_react.default.createElement("sub", null, "1/2")), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, "\u0394E", /*#__PURE__*/_react.default.createElement("sub", null, "p"), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txtToolTip)
-    }, "| Epa - Epc |")
-  }, /*#__PURE__*/_react.default.createElement(_Info.default, {
-    className: (0, _classnames.default)(classes.infoIcon)
-  }))), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, /*#__PURE__*/_react.default.createElement(_AddCircleOutline.default, {
-    onClick: () => addNewPairPeakAct(jcampIdx),
-    className: (0, _classnames.default)(classes.btnAddRow)
-  })))), /*#__PURE__*/_react.default.createElement(_material.TableBody, null, rows.map(row => /*#__PURE__*/_react.default.createElement(_material.TableRow, {
-    key: row.idx
-  }, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
-    checked: row.isRef,
-    onChange: row.onCheckRefChanged
-  })), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, spectra.isWorkMaxPeak && spectra.selectedIdx === row.idx ? classes.cellSelected : 'txt-sv-panel-txt'),
-    onClick: row.onClickMax
-  }, row.max.split('\n').map((s, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-    key: index
-  }, s, /*#__PURE__*/_react.default.createElement("br", null)))), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, !spectra.isWorkMaxPeak && spectra.selectedIdx === row.idx ? classes.cellSelected : 'txt-sv-panel-txt'),
-    onClick: row.onClickMin
-  }, row.min.split('\n').map((s, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-    key: index
-  }, s, /*#__PURE__*/_react.default.createElement("br", null)))), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, row.pecker), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, row.ratio), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, row.e12), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, row.delta), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "left",
-    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt')
-  }, /*#__PURE__*/_react.default.createElement(_RemoveCircle.default, {
-    className: (0, _classnames.default)(classes.btnRemove),
-    onClick: row.remove
-  })))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
-  }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txtToolTip)
-    }, "Click here to open the User manual document")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("a", {
-    target: "_blank",
-    rel: "noopener noreferrer",
-    href: userManualLink
-  }, "How-To "), /*#__PURE__*/_react.default.createElement(_Help.default, {
-    className: (0, _classnames.default)(classes.infoIcon)
-  })))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
+    "data-testid": "PanelVoltammetry",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionSummary, {
+      expandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+      className: (0, _classnames.default)(classes.panelSummary),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        className: "txt-panel-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title'),
+          children: "Voltammetry data"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Table, {
+      className: classes.table,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableHead, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: "Ref"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: "Anodic"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: "Cathodic"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: ["I ", /*#__PURE__*/(0, _jsxRuntime.jsx)("sub", {
+              children: "\u03BB0"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+                className: (0, _classnames.default)(classes.txtToolTip),
+                children: ["Baseline correction value for I ratio ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "(a.k.a y value of pecker)"]
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Info.default, {
+                className: (0, _classnames.default)(classes.infoIcon)
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: ["I ratio", /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _classnames.default)(classes.txtToolTip),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: "Nicholson's method"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                  children: "NICHOLSON, Rl S. Semiempirical Procedure for Measuring with Stationary Electrode Polarography Rates of Chemical Reactions Involving the Product of Electron Transfer. Analytical Chemistry, 1966, 38. Jg., Nr. 10, S. 1406-1406. https://doi.org/10.1021/ac60242a030"
+                })]
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Info.default, {
+                className: (0, _classnames.default)(classes.infoIcon)
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: ["E", /*#__PURE__*/(0, _jsxRuntime.jsx)("sub", {
+              children: "1/2"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: ["\u0394E", /*#__PURE__*/(0, _jsxRuntime.jsx)("sub", {
+              children: "p"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: (0, _classnames.default)(classes.txtToolTip),
+                children: "| Epa - Epc |"
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Info.default, {
+                className: (0, _classnames.default)(classes.infoIcon)
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddCircleOutline.default, {
+              onClick: () => addNewPairPeakAct(jcampIdx),
+              className: (0, _classnames.default)(classes.btnAddRow)
+            })
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableBody, {
+        children: rows.map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+              checked: row.isRef,
+              onChange: row.onCheckRefChanged
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, spectra.isWorkMaxPeak && spectra.selectedIdx === row.idx ? classes.cellSelected : 'txt-sv-panel-txt'),
+            onClick: row.onClickMax,
+            children: row.max.split('\n').map((s, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+              children: [s, /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {})]
+            }, index))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, !spectra.isWorkMaxPeak && spectra.selectedIdx === row.idx ? classes.cellSelected : 'txt-sv-panel-txt'),
+            onClick: row.onClickMin,
+            children: row.min.split('\n').map((s, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+              children: [s, /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {})]
+            }, index))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: row.pecker
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: row.ratio
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: row.e12
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: row.delta
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "left",
+            className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RemoveCircle.default, {
+              className: (0, _classnames.default)(classes.btnRemove),
+              onClick: row.remove
+            })
+          })]
+        }, row.idx))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(classes.rowRoot, classes.rowEven),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtToolTip),
+          children: "Click here to open the User manual document"
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            target: "_blank",
+            rel: "noopener noreferrer",
+            href: userManualLink,
+            children: "How-To "
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Help.default, {
+            className: (0, _classnames.default)(classes.infoIcon)
+          })]
+        })
+      })
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/panel/graph_selection.js b/dist/components/panel/graph_selection.js
index 4c5f0993..f43e6a05 100644
--- a/dist/components/panel/graph_selection.js
+++ b/dist/components/panel/graph_selection.js
@@ -15,8 +15,8 @@ var _styles = require("@mui/styles");
 var _material = require("@mui/material");
 var _curve = require("../../actions/curve");
 var _list_layout = require("../../constants/list_layout");
-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 && {}.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; }
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /* eslint-disable react/function-component-definition, function-paren-newline,
 react/require-default-props, react/no-unused-prop-types */
 
@@ -50,16 +50,15 @@ const styles = () => ({
     overflowWrap: 'anywhere'
   }
 });
-const GraphSelectionPanel = _ref => {
-  let {
-    classes,
-    curveSt,
-    entityFileNames,
-    subLayoutsInfo,
-    layoutSt,
-    selectCurveAct,
-    toggleShowAllCurveAct
-  } = _ref;
+const GraphSelectionPanel = ({
+  classes,
+  curveSt,
+  entityFileNames,
+  subLayoutsInfo,
+  layoutSt,
+  selectCurveAct,
+  toggleShowAllCurveAct
+}) => {
   let subLayoutValues = [];
   if (subLayoutsInfo) {
     subLayoutValues = Object.keys(subLayoutsInfo);
@@ -69,7 +68,7 @@ const GraphSelectionPanel = _ref => {
     setSelectedSublayout(subLayoutValues[0]);
   }, subLayoutValues);
   if (!curveSt) {
-    return /*#__PURE__*/_react.default.createElement("span", null);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {});
   }
   const {
     curveIdx,
@@ -77,7 +76,7 @@ const GraphSelectionPanel = _ref => {
     isShowAllCurve
   } = curveSt;
   if (!listCurves) {
-    return /*#__PURE__*/_react.default.createElement("span", null);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {});
   }
   const onChange = idx => {
     selectCurveAct(idx);
@@ -127,82 +126,106 @@ const GraphSelectionPanel = _ref => {
       filename
     };
   });
-  return /*#__PURE__*/_react.default.createElement(_material.Accordion, {
-    "data-testid": "GraphSelectionPanel"
-  }, /*#__PURE__*/_react.default.createElement(_material.AccordionSummary, {
-    expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
-    className: (0, _classnames.default)(classes.panelSummary)
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    className: "txt-panel-header"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title')
-  }, "Graph selection"))), /*#__PURE__*/_react.default.createElement(_material.Divider, null), layoutSt === _list_layout.LIST_LAYOUT.AIF ? /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
-    control: /*#__PURE__*/_react.default.createElement(_material.Switch, {
-      checked: isShowAllCurve,
-      onChange: onChangeSwitch
-    }),
-    label: "Show all curves"
-  }) : null, subLayoutValues && subLayoutValues.length > 1 ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.Tabs, {
-    value: selectedSubLayout,
-    onChange: onChangeTabSubLayout
-  }, subLayoutValues.map((subLayout, i) => {
-    let subLayoutName = '';
-    switch (subLayout.toUpperCase()) {
-      case 'G/MOL':
-        subLayoutName = 'MWD';
-        break;
-      case 'MILLILITERS':
-        subLayoutName = 'ELU';
-        break;
-      case 'INTENSITY':
-        subLayoutName = 'Chromatogram';
-        break;
-      case 'DEGREES CELSIUS':
-        subLayoutName = 'Temperature';
-        break;
-      default:
-        break;
-    }
-    return /*#__PURE__*/_react.default.createElement(_material.Tab, {
-      key: i,
-      value: subLayout,
-      label: subLayoutName
-    });
-  })), /*#__PURE__*/_react.default.createElement(_material.List, null, itemsSubLayout.map(item => /*#__PURE__*/_react.default.createElement(_material.ListItem, {
-    key: item.idx,
-    onClick: () => onChange(item.idx),
-    className: (0, _classnames.default)(item.idx === curveIdx ? classes.curveSelected : classes.curveDefault) // eslint-disable-line
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.curve)
-  }, /*#__PURE__*/_react.default.createElement("i", null, item.name), /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      float: 'right',
-      width: '95%'
-    }
-  }, /*#__PURE__*/_react.default.createElement("hr", {
-    className: (0, _classnames.default)(classes.line),
-    style: {
-      backgroundColor: item.color
-    }
-  }), item.filename !== '' ? /*#__PURE__*/_react.default.createElement("span", null, "File: ", item.filename) : null // eslint-disable-line
-  )))))) : /*#__PURE__*/_react.default.createElement(_material.List, null, items.map(item => /*#__PURE__*/_react.default.createElement(_material.ListItem, {
-    key: item.idx,
-    onClick: () => onChange(item.idx),
-    className: (0, _classnames.default)(item.idx === curveIdx ? classes.curveSelected : classes.curveDefault) // eslint-disable-line
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.curve)
-  }, /*#__PURE__*/_react.default.createElement("i", null, item.name), /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      float: 'right',
-      width: '95%'
-    }
-  }, /*#__PURE__*/_react.default.createElement("hr", {
-    className: (0, _classnames.default)(classes.line),
-    style: {
-      backgroundColor: item.color
-    }
-  }), item.filename !== '' ? /*#__PURE__*/_react.default.createElement("span", null, "File: ", item.filename) : null // eslint-disable-line
-  ))))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
+    "data-testid": "GraphSelectionPanel",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionSummary, {
+      expandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+      className: (0, _classnames.default)(classes.panelSummary),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        className: "txt-panel-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title'),
+          children: "Graph selection"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), layoutSt === _list_layout.LIST_LAYOUT.AIF ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+      control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Switch, {
+        checked: isShowAllCurve,
+        onChange: onChangeSwitch
+      }),
+      label: "Show all curves"
+    }) : null, subLayoutValues && subLayoutValues.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, {
+        value: selectedSubLayout,
+        onChange: onChangeTabSubLayout,
+        children: subLayoutValues.map((subLayout, i) => {
+          let subLayoutName = '';
+          switch (subLayout.toUpperCase()) {
+            case 'G/MOL':
+              subLayoutName = 'MWD';
+              break;
+            case 'MILLILITERS':
+              subLayoutName = 'ELU';
+              break;
+            case 'INTENSITY':
+              subLayoutName = 'Chromatogram';
+              break;
+            case 'DEGREES CELSIUS':
+              subLayoutName = 'Temperature';
+              break;
+            default:
+              break;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, {
+            value: subLayout,
+            label: subLayoutName
+          }, i);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
+        children: itemsSubLayout.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
+          onClick: () => onChange(item.idx),
+          className: (0, _classnames.default)(item.idx === curveIdx ? classes.curveSelected : classes.curveDefault) // eslint-disable-line
+          ,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: (0, _classnames.default)(classes.curve),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              children: item.name
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              style: {
+                float: 'right',
+                width: '95%'
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+                className: (0, _classnames.default)(classes.line),
+                style: {
+                  backgroundColor: item.color
+                }
+              }), item.filename !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                children: ["File: ", item.filename]
+              }) : null // eslint-disable-line
+              ]
+            })]
+          })
+        }, item.idx))
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
+      children: items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
+        onClick: () => onChange(item.idx),
+        className: (0, _classnames.default)(item.idx === curveIdx ? classes.curveSelected : classes.curveDefault) // eslint-disable-line
+        ,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: (0, _classnames.default)(classes.curve),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            children: item.name
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            style: {
+              float: 'right',
+              width: '95%'
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+              className: (0, _classnames.default)(classes.line),
+              style: {
+                backgroundColor: item.color
+              }
+            }), item.filename !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              children: ["File: ", item.filename]
+            }) : null // eslint-disable-line
+            ]
+          })]
+        })
+      }, item.idx))
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/panel/index.js b/dist/components/panel/index.js
index 8fbcd8f0..03e803b0 100644
--- a/dist/components/panel/index.js
+++ b/dist/components/panel/index.js
@@ -19,6 +19,7 @@ var _multiplicity = _interopRequireDefault(require("./multiplicity"));
 var _cyclic_voltamery_data = _interopRequireDefault(require("./cyclic_voltamery_data"));
 var _graph_selection = _interopRequireDefault(require("./graph_selection"));
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react/prop-types, react/require-default-props */
 
 const theme = (0, _styles.createTheme)({
@@ -97,45 +98,48 @@ class PanelViewer extends _react.default.Component {
       listCurves
     } = curveSt;
     const hideGraphSelection = listCurves === false || listCurves === undefined;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.panels)
-    }, /*#__PURE__*/_react.default.createElement(_styles.StyledEngineProvider, {
-      injectFirst: true
-    }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
-      theme: theme
-    }, hideGraphSelection ? null : /*#__PURE__*/_react.default.createElement(_graph_selection.default, {
-      jcampIdx: jcampIdx,
-      entityFileNames: entityFileNames,
-      expand: expand === 'graph',
-      onExapnd: onExapndGraphSelection,
-      subLayoutsInfo: subLayoutsInfo
-    }), /*#__PURE__*/_react.default.createElement(_info.default, {
-      feature: feature,
-      integration: integration,
-      editorOnly: editorOnly,
-      expand: expand === 'info',
-      molSvg: molSvg,
-      exactMass: exactMass,
-      onExapnd: onExapndInfo,
-      descriptions: descriptions,
-      canChangeDescription: canChangeDescription,
-      onDescriptionChanged: this.handleDescriptionChanged
-    }), _cfg.default.hidePanelPeak(layoutSt) ? null : /*#__PURE__*/_react.default.createElement(_peaks.default, {
-      expand: expand === 'peak',
-      onExapnd: onExapndPeak
-    }), _cfg.default.hidePanelMpy(layoutSt) ? null : /*#__PURE__*/_react.default.createElement(_multiplicity.default, {
-      expand: expand === 'mpy',
-      onExapnd: onExapndMpy
-    }), _cfg.default.hidePanelCompare(layoutSt) || listCurves.length > 1 ? null : /*#__PURE__*/_react.default.createElement(_compare.default, {
-      expand: expand === 'compare',
-      onExapnd: onExapndCompare
-    }), _cfg.default.hidePanelCyclicVolta(layoutSt) ? null : /*#__PURE__*/_react.default.createElement(_cyclic_voltamery_data.default, {
-      jcampIdx: jcampIdx,
-      feature: feature,
-      expand: expand === 'cyclicvolta',
-      onExapnd: onExapndCyclicVolta,
-      userManualLink: userManualLink ? userManualLink.cv : undefined
-    }))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(classes.panels),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledEngineProvider, {
+        injectFirst: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
+          theme: theme,
+          children: [hideGraphSelection ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_graph_selection.default, {
+            jcampIdx: jcampIdx,
+            entityFileNames: entityFileNames,
+            expand: expand === 'graph',
+            onExapnd: onExapndGraphSelection,
+            subLayoutsInfo: subLayoutsInfo
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_info.default, {
+            feature: feature,
+            integration: integration,
+            editorOnly: editorOnly,
+            expand: expand === 'info',
+            molSvg: molSvg,
+            exactMass: exactMass,
+            onExapnd: onExapndInfo,
+            descriptions: descriptions,
+            canChangeDescription: canChangeDescription,
+            onDescriptionChanged: this.handleDescriptionChanged
+          }), _cfg.default.hidePanelPeak(layoutSt) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_peaks.default, {
+            expand: expand === 'peak',
+            onExapnd: onExapndPeak
+          }), _cfg.default.hidePanelMpy(layoutSt) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiplicity.default, {
+            expand: expand === 'mpy',
+            onExapnd: onExapndMpy
+          }), _cfg.default.hidePanelCompare(layoutSt) || listCurves.length > 1 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_compare.default, {
+            expand: expand === 'compare',
+            onExapnd: onExapndCompare
+          }), _cfg.default.hidePanelCyclicVolta(layoutSt) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_cyclic_voltamery_data.default, {
+            jcampIdx: jcampIdx,
+            feature: feature,
+            expand: expand === 'cyclicvolta',
+            onExapnd: onExapndCyclicVolta,
+            userManualLink: userManualLink ? userManualLink.cv : undefined
+          })]
+        })
+      })
+    });
   }
 }
 const mapStateToProps = (state, _) => (
diff --git a/dist/components/panel/info.js b/dist/components/panel/info.js
index 3775d576..ffbe85eb 100644
--- a/dist/components/panel/info.js
+++ b/dist/components/panel/info.js
@@ -17,6 +17,7 @@ var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore
 var _styles = require("@mui/styles");
 var _format = _interopRequireDefault(require("../../helpers/format"));
 var _meta = require("../../actions/meta");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable no-mixed-operators, react/function-component-definition,
 react/require-default-props, max-len */
 
@@ -30,7 +31,23 @@ const styles = () => ({
   },
   panelSummary: {
     backgroundColor: '#eee',
-    height: 32
+    height: 32,
+    minHeight: 32,
+    '& .MuiAccordionSummary-content': {
+      margin: 0
+    }
+  },
+  subSectionHeader: {
+    backgroundColor: '#eee',
+    height: 32,
+    lineHeight: '32px',
+    paddingLeft: 10,
+    textAlign: 'left',
+    fontWeight: 'bold',
+    fontSize: '0.8rem',
+    fontFamily: 'Helvetica',
+    borderTop: '1px solid #dcdcdc',
+    color: 'rgba(0, 0, 0, 0.87)'
   },
   panelDetail: {
     backgroundColor: '#fff',
@@ -81,10 +98,32 @@ const styles = () => ({
     fontSize: '0.8rem',
     fontFamily: 'Helvetica',
     textAlign: 'left'
+  },
+  quillContainer: {
+    margin: '10px 10px',
+    backgroundColor: '#fff',
+    '& .ql-container': {
+      border: 'none'
+    },
+    '& .ql-editor': {
+      minHeight: '60px'
+    },
+    '& .ql-editor.ql-blank::before': {
+      fontStyle: 'normal',
+      color: 'rgba(0, 0, 0, 0.54)'
+    }
   }
 });
 const simTitle = () => 'Simulated signals from NMRshiftDB';
 const simContent = nmrSimPeaks => nmrSimPeaks && nmrSimPeaks.sort((a, b) => a - b).join(', ');
+const normalizeQuillValue = val => {
+  if (!val) return '';
+  if (val === '<p><br></p>' || val === '<p></p>') return '';
+  return val;
+};
+const handleDescriptionChanged = (value, onDescriptionChanged) => {
+  onDescriptionChanged(normalizeQuillValue(value));
+};
 const aucValue = integration => {
   if (!integration) {
     return '';
@@ -110,13 +149,12 @@ const aucValue = integration => {
   }
   return values.join(', ');
 };
-const SECData = _ref => {
-  let {
-    classes,
-    layout,
-    detector,
-    secData
-  } = _ref;
+const SECData = ({
+  classes,
+  layout,
+  detector,
+  secData
+}) => {
   if (_format.default.isSECLayout(layout) && secData) {
     const {
       d,
@@ -124,37 +162,54 @@ const SECData = _ref => {
       mp,
       mw
     } = secData;
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "Detector: "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, detector)), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "D: "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, d)), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "MN: "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, mn)), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "MP: "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, mp)), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "MW: "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, mw)));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Detector: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: detector
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowEven),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "D: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: d
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "MN: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: mn
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowEven),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "MP: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: mp
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "MW: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: mw
+        })]
+      })]
+    });
   }
   return null;
 };
@@ -164,13 +219,12 @@ SECData.propTypes = {
   detector: _propTypes.default.object.isRequired,
   secData: _propTypes.default.object.isRequired
 };
-const DSCData = _ref2 => {
-  let {
-    classes,
-    layout,
-    dscMetaData,
-    updateAction
-  } = _ref2;
+const DSCData = ({
+  classes,
+  layout,
+  dscMetaData,
+  updateAction
+}) => {
   if (_format.default.isDSCLayout(layout) && dscMetaData !== undefined) {
     const {
       meltingPoint,
@@ -188,27 +242,33 @@ const DSCData = _ref2 => {
       dataToUpdate[name] = value;
       updateAction(dataToUpdate);
     };
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "Melting Point: "), /*#__PURE__*/_react.default.createElement("input", {
-      type: "text",
-      name: "meltingPoint",
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
-      value: meltingPoint,
-      onChange: onChange
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "TG: "), /*#__PURE__*/_react.default.createElement("input", {
-      type: "text",
-      name: "tg",
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
-      value: tg,
-      onChange: onChange
-    })));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Melting Point: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "text",
+          name: "meltingPoint",
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          value: meltingPoint,
+          onChange: onChange
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowEven),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "TG: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "text",
+          name: "tg",
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          value: tg,
+          onChange: onChange
+        })]
+      })]
+    });
   }
   return null;
 };
@@ -218,27 +278,26 @@ DSCData.propTypes = {
   dscMetaData: _propTypes.default.object.isRequired,
   updateAction: _propTypes.default.func.isRequired
 };
-const InfoPanel = _ref3 => {
-  let {
-    classes,
-    expand,
-    feature,
-    integration,
-    editorOnly,
-    molSvg,
-    descriptions,
-    layoutSt,
-    simulationSt,
-    shiftSt,
-    curveSt,
-    exactMass,
-    onExapnd,
-    canChangeDescription,
-    onDescriptionChanged,
-    detectorSt,
-    metaSt,
-    updateDSCMetaDataAct
-  } = _ref3;
+const InfoPanel = ({
+  classes,
+  expand,
+  feature,
+  integration,
+  editorOnly,
+  molSvg,
+  descriptions,
+  layoutSt,
+  simulationSt,
+  shiftSt,
+  curveSt,
+  exactMass,
+  onExapnd,
+  canChangeDescription,
+  onDescriptionChanged,
+  detectorSt,
+  metaSt,
+  updateDSCMetaDataAct
+}) => {
   if (!feature) return null;
   const {
     title,
@@ -278,7 +337,7 @@ const InfoPanel = _ref3 => {
   if (integration) {
     originStack = integration.originStack; // eslint-disable-line
   }
-  return /*#__PURE__*/_react.default.createElement(_material.Accordion, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
     "data-testid": "PanelInfo",
     expanded: expand,
     onChange: onExapnd,
@@ -286,74 +345,108 @@ const InfoPanel = _ref3 => {
     TransitionProps: {
       unmountOnExit: true
     } // increase Accordion performance
-  }, /*#__PURE__*/_react.default.createElement(_material.AccordionSummary, {
-    expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
-    className: (0, _classnames.default)(classes.panelSummary)
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    className: "txt-panel-header"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title')
-  }, "Info"))), /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.panelDetail)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, "Title : "), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, title)), _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, "Freq : "), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, `${parseInt(observeFrequency, 10)} Hz` || ' - ')) : null, _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, "Solv : "), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, showSolvName)) : null, _format.default.isMsLayout(layoutSt) && exactMass ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, "Exact mass: "), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, `${parseFloat(exactMass).toFixed(6)} g/mol`)) : null, /*#__PURE__*/_react.default.createElement(SECData, {
-    classes: classes,
-    layout: layoutSt,
-    detector: selectedDetector,
-    secData: secData
-  }), !molSvg ? null : /*#__PURE__*/_react.default.createElement(_reactSvgFileZoomPan.default, {
-    svg: molSvg,
-    duration: 300,
-    resize: true
-  }), _format.default.isHplcUvVisLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, "Area under curve (AUC):"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt')
-  }, aucValue(integration))) : null, /*#__PURE__*/_react.default.createElement(DSCData, {
-    classes: classes,
-    layout: layoutSt,
-    dscMetaData: dscMetaData,
-    updateAction: updateDSCMetaDataAct
-  })), !_format.default.isCyclicVoltaLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement(_reactQuill.default, {
-    className: (0, _classnames.default)(classes.quill, 'card-sv-quill'),
-    value: descriptions,
-    modules: {
-      toolbar: false
-    },
-    onChange: onDescriptionChanged,
-    readOnly: canChangeDescription !== undefined ? !canChangeDescription : true
-  }) : null, /*#__PURE__*/_react.default.createElement("div", null, !editorOnly && _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, simTitle(), ":"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt')
-  }, simContent(simulationSt.nmrSimPeaks))) : null));
+    ,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionSummary, {
+      expandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+      className: (0, _classnames.default)(classes.panelSummary),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        className: "txt-panel-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title'),
+          children: "Info"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(classes.panelDetail),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Title : "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: title
+        })]
+      }), _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowEven),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Freq : "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: `${parseInt(observeFrequency, 10)} MHz` || ' - '
+        })]
+      }) : null, _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Solv : "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: showSolvName
+        })]
+      }) : null, _format.default.isMsLayout(layoutSt) && exactMass ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Exact mass: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: `${parseFloat(exactMass).toFixed(6)} g/mol`
+        })]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(SECData, {
+        classes: classes,
+        layout: layoutSt,
+        detector: selectedDetector,
+        secData: secData
+      }), !molSvg ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvgFileZoomPan.default, {
+        svg: molSvg,
+        duration: 300,
+        resize: true
+      }), _format.default.isHplcUvVisLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Area under curve (AUC):"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt'),
+          children: aucValue(integration)
+        })]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(DSCData, {
+        classes: classes,
+        layout: layoutSt,
+        dscMetaData: dscMetaData,
+        updateAction: updateDSCMetaDataAct
+      }), !editorOnly && _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.subSectionHeader,
+          children: simTitle()
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt'),
+            children: simContent(simulationSt.nmrSimPeaks)
+          })
+        })]
+      }) : null, !_format.default.isCyclicVoltaLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.subSectionHeader,
+          children: "Content"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.quillContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, {
+            value: normalizeQuillValue(descriptions),
+            placeholder: canChangeDescription ? 'Add text here...' : undefined,
+            readOnly: !canChangeDescription,
+            modules: {
+              toolbar: false
+            },
+            onChange: value => handleDescriptionChanged(value, onDescriptionChanged)
+          })
+        })]
+      }) : null]
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
@@ -375,7 +468,7 @@ InfoPanel.propTypes = {
   integration: _propTypes.default.object.isRequired,
   editorOnly: _propTypes.default.bool.isRequired,
   molSvg: _propTypes.default.string.isRequired,
-  descriptions: _propTypes.default.array.isRequired,
+  descriptions: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]).isRequired,
   layoutSt: _propTypes.default.string.isRequired,
   simulationSt: _propTypes.default.array.isRequired,
   shiftSt: _propTypes.default.object.isRequired,
diff --git a/dist/components/panel/multiplicity.js b/dist/components/panel/multiplicity.js
index 8ecb64c7..f4a37685 100644
--- a/dist/components/panel/multiplicity.js
+++ b/dist/components/panel/multiplicity.js
@@ -19,6 +19,7 @@ var _multiplicity = require("../../actions/multiplicity");
 var _multiplicity_select = _interopRequireDefault(require("./multiplicity_select"));
 var _multiplicity_coupling = _interopRequireDefault(require("./multiplicity_coupling"));
 var _multiplicity_calc = require("../../helpers/multiplicity_calc");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable function-paren-newline,
 function-call-argument-newline, react/function-component-definition */
 
@@ -138,31 +139,36 @@ const pkList = (classes, row, shift, digits, rmMpyPeakByPanelAct) => row.peaks.m
     peak: pk,
     xExtent
   });
-  const rmBtn = /*#__PURE__*/_react.default.createElement(_HighlightOff.default, {
+  const rmBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightOff.default, {
     onClick: cb,
     className: classes.rmBtn
   });
-  return /*#__PURE__*/_react.default.createElement(_material.TableRow, {
-    key: pk.x,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
     className: classes.tRow,
-    hover: true
-  }, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, `(${(pk.x - shift).toFixed(digits)}, ${pk.y.toExponential(2)})`), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, rmBtn));
+    hover: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+      children: `(${(pk.x - shift).toFixed(digits)}, ${pk.y.toExponential(2)})`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+      children: rmBtn
+    })]
+  }, pk.x);
 });
-const refreshBtn = (classes, onRefresh) => /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+const refreshBtn = (classes, onRefresh) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
   placement: "left",
-  title: /*#__PURE__*/_react.default.createElement("span", {
-    className: "txt-sv-tp"
-  }, "Calculate Multiplicity")
-}, /*#__PURE__*/_react.default.createElement(_material.Button, {
-  className: classes.btnRf,
-  onClick: onRefresh
-}, /*#__PURE__*/_react.default.createElement(_RefreshOutlined.default, null)));
+  title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "txt-sv-tp",
+    children: "Calculate Multiplicity"
+  }),
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+    className: classes.btnRf,
+    onClick: onRefresh,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RefreshOutlined.default, {})
+  })
+});
 const mpyList = (classes, digits, multiplicitySt, curveSt, clickMpyOneAct, rmMpyPeakByPanelAct, resetMpyOneAct) => {
   const {
     curveIdx
@@ -203,58 +209,74 @@ const mpyList = (classes, digits, multiplicitySt, curveSt, clickMpyOneAct, rmMpy
     };
     return createData(idx, xExtent, peaks, shift, smExtext, mpyType, js, onClick, onRefresh);
   });
-  return /*#__PURE__*/_react.default.createElement("div", null, rows.map(row => /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.moCard,
-    key: row.idx
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.moCardHead
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(MUCheckbox, {
-    className: classes.moCBox,
-    checked: row.isCheck,
-    onChange: row.onClick
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.moExtTxt, classes.moExtId, 'txt-sv-panel-head')
-  }, row.idx), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.moExtTxt, 'txt-sv-panel-head')
-  }, `${row.center.toFixed(3)} (ppm)`), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.moSelect, 'txt-sv-panel-head')
-  }, /*#__PURE__*/_react.default.createElement(_multiplicity_select.default, {
-    target: row
-  })), refreshBtn(classes, row.onRefresh)), /*#__PURE__*/_react.default.createElement(_multiplicity_coupling.default, {
-    row: row
-  })), /*#__PURE__*/_react.default.createElement(_material.Table, {
-    className: classes.table
-  }, /*#__PURE__*/_react.default.createElement(_material.TableBody, null, pkList(classes, row, shift, digits, rmMpyPeakByPanelAct))))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: rows.map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.moCard,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classes.moCardHead,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MUCheckbox, {
+            className: classes.moCBox,
+            checked: row.isCheck,
+            onChange: row.onClick
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.moExtTxt, classes.moExtId, 'txt-sv-panel-head'),
+            children: row.idx
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.moExtTxt, 'txt-sv-panel-head'),
+            children: `${row.center.toFixed(3)} (ppm)`
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.moSelect, 'txt-sv-panel-head'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiplicity_select.default, {
+              target: row
+            })
+          }), refreshBtn(classes, row.onRefresh)]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiplicity_coupling.default, {
+          row: row
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Table, {
+        className: classes.table,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableBody, {
+          children: pkList(classes, row, shift, digits, rmMpyPeakByPanelAct)
+        })
+      })]
+    }, row.idx))
+  });
 };
-const MultiplicityPanel = _ref => {
-  let {
-    classes,
-    expand,
-    onExapnd,
-    multiplicitySt,
-    curveSt,
-    clickMpyOneAct,
-    rmMpyPeakByPanelAct,
-    resetMpyOneAct
-  } = _ref;
+const MultiplicityPanel = ({
+  classes,
+  expand,
+  onExapnd,
+  multiplicitySt,
+  curveSt,
+  clickMpyOneAct,
+  rmMpyPeakByPanelAct,
+  resetMpyOneAct
+}) => {
   const digits = 4;
-  return /*#__PURE__*/_react.default.createElement(_material.Accordion, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
     expanded: expand,
     onChange: onExapnd,
     className: (0, _classnames.default)(classes.panel),
     TransitionProps: {
       unmountOnExit: true
     } // increase Accordion performance
-  }, /*#__PURE__*/_react.default.createElement(_material.AccordionSummary, {
-    expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
-    className: (0, _classnames.default)(classes.panelSummary)
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    className: "txt-panel-header"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title')
-  }, "Multiplicity"))), /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.panelDetail)
-  }, mpyList(classes, digits, multiplicitySt, curveSt, clickMpyOneAct, rmMpyPeakByPanelAct, resetMpyOneAct)));
+    ,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionSummary, {
+      expandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+      className: (0, _classnames.default)(classes.panelSummary),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        className: "txt-panel-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title'),
+          children: "Multiplicity"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(classes.panelDetail),
+      children: mpyList(classes, digits, multiplicitySt, curveSt, clickMpyOneAct, rmMpyPeakByPanelAct, resetMpyOneAct)
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/panel/multiplicity_coupling.js b/dist/components/panel/multiplicity_coupling.js
index 745a720f..e245ceee 100644
--- a/dist/components/panel/multiplicity_coupling.js
+++ b/dist/components/panel/multiplicity_coupling.js
@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/styles");
 var _material = require("@mui/material");
 var _multiplicity = require("../../actions/multiplicity");
+var _jsxRuntime = require("react/jsx-runtime");
 const styles = () => ({
   jDiv: {
     height: 28
@@ -36,16 +37,20 @@ const styles = () => ({
     height: 24
   }
 });
-const txtJ = () => /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
-  position: "start"
-}, /*#__PURE__*/_react.default.createElement("span", {
-  className: "txt-cmd-j"
-}, "J\xA0="));
-const txtHz = () => /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
-  position: "end"
-}, /*#__PURE__*/_react.default.createElement("span", {
-  className: "txt-cmd-hz"
-}, "Hz"));
+const txtJ = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+  position: "start",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "txt-cmd-j",
+    children: "J\xA0="
+  })
+});
+const txtHz = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+  position: "end",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "txt-cmd-hz",
+    children: "Hz"
+  })
+});
 class MpyCoupling extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -97,25 +102,27 @@ class MpyCoupling extends _react.default.Component {
       tmpVal
     } = this.state;
     const value = focus && (tmpVal || tmpVal === '') ? tmpVal : row.jStr;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.jDiv)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.moExtTxt, classes.jTxt, 'txt-sv-panel-head')
-    }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
-      className: (0, _classnames.default)(classes.txtField, 'txt-cmd-field'),
-      placeholder: "-",
-      value: value,
-      margin: "none",
-      InputProps: {
-        startAdornment: txtJ(),
-        endAdornment: txtHz(),
-        className: (0, _classnames.default)(classes.txtInput, 'txt-sv-input-label')
-      },
-      onChange: this.onChange,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      variant: "outlined"
-    })));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(classes.jDiv),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)(classes.moExtTxt, classes.jTxt, 'txt-sv-panel-head'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+          className: (0, _classnames.default)(classes.txtField, 'txt-cmd-field'),
+          placeholder: "-",
+          value: value,
+          margin: "none",
+          InputProps: {
+            startAdornment: txtJ(),
+            endAdornment: txtHz(),
+            className: (0, _classnames.default)(classes.txtInput, 'txt-sv-input-label')
+          },
+          onChange: this.onChange,
+          onFocus: this.onFocus,
+          onBlur: this.onBlur,
+          variant: "outlined"
+        })
+      })
+    });
   }
 }
 const mapStateToProps = (state, props) => (
diff --git a/dist/components/panel/multiplicity_select.js b/dist/components/panel/multiplicity_select.js
index 4cb74b74..056ae028 100644
--- a/dist/components/panel/multiplicity_select.js
+++ b/dist/components/panel/multiplicity_select.js
@@ -13,6 +13,7 @@ var _redux = require("redux");
 var _material = require("@mui/material");
 var _styles = require("@mui/styles");
 var _multiplicity = require("../../actions/multiplicity");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react/function-component-definition */
 
 const Styles = () => ({
@@ -31,12 +32,11 @@ const Styles = () => ({
     color: 'white'
   }
 });
-const MpySelect = _ref => {
-  let {
-    classes,
-    target,
-    selectMpyTypeAct
-  } = _ref;
+const MpySelect = ({
+  classes,
+  target,
+  selectMpyTypeAct
+}) => {
   const {
     mpyType,
     xExtent
@@ -57,21 +57,22 @@ const MpySelect = _ref => {
       });
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
     className: (0, _classnames.default)(classes.formControl),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
-    className: (0, _classnames.default)(classes.txtField, 'txt-cmd-field'),
-    value: mpyType,
-    margin: "none",
     variant: "outlined",
-    InputProps: {
-      className: (0, _classnames.default)(classes.txtInput, 'txt-sv-input-label')
-    },
-    onChange: onChange,
-    onBlur: onBlur,
-    onKeyPress: onEnterPress
-  }));
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+      className: (0, _classnames.default)(classes.txtField, 'txt-cmd-field'),
+      value: mpyType,
+      margin: "none",
+      variant: "outlined",
+      InputProps: {
+        className: (0, _classnames.default)(classes.txtInput, 'txt-sv-input-label')
+      },
+      onChange: onChange,
+      onBlur: onBlur,
+      onKeyPress: onEnterPress
+    })
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/components/panel/peaks.js b/dist/components/panel/peaks.js
index 05b2bf6d..2c1892bf 100644
--- a/dist/components/panel/peaks.js
+++ b/dist/components/panel/peaks.js
@@ -17,6 +17,7 @@ var _styles = require("@mui/styles");
 var _chem = require("../../helpers/chem");
 var _edit_peak = require("../../actions/edit_peak");
 var _format = _interopRequireDefault(require("../../helpers/format"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react/function-component-definition, no-unused-vars */
 
 const styles = theme => ({
@@ -79,7 +80,7 @@ const createData = (classes, idx, x, y, cb, digits) => ({
   idx: idx + 1,
   x: x.toFixed(digits),
   y,
-  rmBtn: /*#__PURE__*/_react.default.createElement(_HighlightOff.default, {
+  rmBtn: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightOff.default, {
     onClick: cb,
     className: classes.rmBtn
   })
@@ -91,51 +92,66 @@ const peakList = (peaks, digits, cbAct, classes, isPos) => {
   });
   const rowKlass = isPos ? classes.tRowHeadPos : classes.tRowHeadNeg;
   const headTxt = isPos ? 'P+' : 'P-';
-  return /*#__PURE__*/_react.default.createElement(_material.Table, {
-    className: classes.table
-  }, /*#__PURE__*/_react.default.createElement(_material.TableHead, null, /*#__PURE__*/_react.default.createElement(_material.TableRow, {
-    className: rowKlass
-  }, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxtHead, 'txt-sv-panel-head')
-  }, /*#__PURE__*/_react.default.createElement("i", null, headTxt)), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxtHeadXY, 'txt-sv-panel-head')
-  }, "X"), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxtHeadXY, 'txt-sv-panel-head')
-  }, "Y"), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxtHead, 'txt-sv-panel-head')
-  }, "-"))), /*#__PURE__*/_react.default.createElement(_material.TableBody, null, rows.map(row => /*#__PURE__*/_react.default.createElement(_material.TableRow, {
-    key: row.idx,
-    className: classes.tRow,
-    hover: true
-  }, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, row.idx), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, row.x), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, row.y.toExponential(2)), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, row.rmBtn)))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Table, {
+    className: classes.table,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableHead, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+        className: rowKlass,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxtHead, 'txt-sv-panel-head'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            children: headTxt
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxtHeadXY, 'txt-sv-panel-head'),
+          children: "X"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxtHeadXY, 'txt-sv-panel-head'),
+          children: "Y"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxtHead, 'txt-sv-panel-head'),
+          children: "-"
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableBody, {
+      children: rows.map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+        className: classes.tRow,
+        hover: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: row.idx
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: row.x
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: row.y.toExponential(2)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: row.rmBtn
+        })]
+      }, row.idx))
+    })]
+  });
 };
-const PeakPanel = _ref => {
-  let {
-    editPeakSt,
-    layoutSt,
-    classes,
-    expand,
-    onExapnd,
-    rmFromPosListAct,
-    rmFromNegListAct,
-    curveSt
-  } = _ref;
+const PeakPanel = ({
+  editPeakSt,
+  layoutSt,
+  classes,
+  expand,
+  onExapnd,
+  rmFromPosListAct,
+  rmFromNegListAct,
+  curveSt
+}) => {
   const {
     curveIdx,
     listCurves
@@ -165,7 +181,7 @@ const PeakPanel = _ref => {
   const filteredArray = currentPeakOfCurve.filter(element => neg.includes(element));
   const peaksData = [].concat(filteredArray).concat(pos);
   const digits = _format.default.isEmWaveLayout(layoutSt) ? 0 : 4;
-  return /*#__PURE__*/_react.default.createElement(_material.Accordion, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
     "data-testid": "PeaksPanelInfo",
     expanded: expand,
     onChange: onExapnd,
@@ -173,16 +189,22 @@ const PeakPanel = _ref => {
     TransitionProps: {
       unmountOnExit: true
     } // increase Accordion performance
-  }, /*#__PURE__*/_react.default.createElement(_material.AccordionSummary, {
-    expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
-    className: (0, _classnames.default)(classes.panelSummary)
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    className: "txt-panel-header"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title')
-  }, "Peaks"))), /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.panelDetail)
-  }, peakList(peaksData, digits, rmFromPosListAct, classes, true)));
+    ,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionSummary, {
+      expandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+      className: (0, _classnames.default)(classes.panelSummary),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        className: "txt-panel-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title'),
+          children: "Peaks"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(classes.panelDetail),
+      children: peakList(peaksData, digits, rmFromPosListAct, classes, true)
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
diff --git a/dist/constants/action_type.js b/dist/constants/action_type.js
index 2754d8f0..2666fd97 100644
--- a/dist/constants/action_type.js
+++ b/dist/constants/action_type.js
@@ -31,7 +31,8 @@ const MANAGER = exports.MANAGER = {
   RESET_INIT_NMR: 'RESET_INIT_NMR',
   RESET_INIT_MS: 'RESET_INIT_MS',
   RESET_INIT_COMMON_WITH_INTERGATION: 'RESET_INIT_COMMON_WITH_INTERGATION',
-  RESET_DETECTOR: 'RESET_DETECTOR'
+  RESET_DETECTOR: 'RESET_DETECTOR',
+  RESET_MULTIPLICITY: 'RESET_MULTIPLICITY'
 };
 const LAYOUT = exports.LAYOUT = {
   UPDATE: 'UPDATE_LAYOUT'
@@ -51,6 +52,9 @@ const UI = exports.UI = {
   VIEWER: {
     SET_TYPE: 'UI_VIEWER_SET_TYPE'
   },
+  COMPARE: {
+    SET_ALIGN_X: 'UI_COMPARE_SET_ALIGN_X'
+  },
   SWEEP: {
     SET_TYPE: 'UI_SWEEP_SET_TYPE',
     SELECT: 'UI_SWEEP_SELECT',
diff --git a/dist/constants/list_shift.js b/dist/constants/list_shift.js
index 940a70e8..63eaf99d 100644
--- a/dist/constants/list_shift.js
+++ b/dist/constants/list_shift.js
@@ -396,10 +396,10 @@ const hTrifluoroethanolD32 = {
   label: 'Trifluoroethanol-d3'
 };
 const LIST_SHIFT_1H = exports.LIST_SHIFT_1H = [noReference, hActicAcidD4Quin, hActicAcidD4S, hAcetoneD6Quin, hAcetonitrileD3Qquin, hBenzeneS, hChloroformDS, hCyclohexaneD12S, hDeuteriumOxideS, hDichloroethaneD4S, hDichloromethaneD2T, hDMFD7Quin1, hDMFD7Quin2, hDMFD7Broad3, hDioxaneD8Broad, hDMSOD6Quin, hEthanolD6Broad1, hEthanolD6S2, hEthanolD6S3, hMethanolD4Quin, hMethanolD4S, hNitromethaneD3S, hPyridineD5Broad1, hPyridineD5Broad2, hPyridineD5Broad3, hTHFD8S1, hTHFD8S2, hTMSS, hTolueneD8Quin, hTolueneD8Boad2, hTolueneD8S3, hTolueneD8Broad4, hTFADS, hTrifluoroethanolD31, hTrifluoroethanolD32];
-const LIST_SHIFT_19F = exports.LIST_SHIFT_19F = [];
-const LIST_SHIFT_31P = exports.LIST_SHIFT_31P = [];
-const LIST_SHIFT_15N = exports.LIST_SHIFT_15N = [];
-const LIST_SHIFT_29Si = exports.LIST_SHIFT_29Si = [];
+const LIST_SHIFT_19F = exports.LIST_SHIFT_19F = [noReference, hActicAcidD4Quin, hActicAcidD4S, hAcetoneD6Quin, hAcetonitrileD3Qquin, hBenzeneS, hChloroformDS, hCyclohexaneD12S, hDeuteriumOxideS, hDichloroethaneD4S, hDichloromethaneD2T, hDMFD7Quin1, hDMFD7Quin2, hDMFD7Broad3, hDioxaneD8Broad, hDMSOD6Quin, hEthanolD6Broad1, hEthanolD6S2, hEthanolD6S3, hMethanolD4Quin, hMethanolD4S, hNitromethaneD3S, hPyridineD5Broad1, hPyridineD5Broad2, hPyridineD5Broad3, hTHFD8S1, hTHFD8S2, hTMSS, hTolueneD8Quin, hTolueneD8Boad2, hTolueneD8S3, hTolueneD8Broad4, hTFADS, hTrifluoroethanolD31, hTrifluoroethanolD32];
+const LIST_SHIFT_31P = exports.LIST_SHIFT_31P = [noReference, hActicAcidD4Quin, hActicAcidD4S, hAcetoneD6Quin, hAcetonitrileD3Qquin, hBenzeneS, hChloroformDS, hCyclohexaneD12S, hDeuteriumOxideS, hDichloroethaneD4S, hDichloromethaneD2T, hDMFD7Quin1, hDMFD7Quin2, hDMFD7Broad3, hDioxaneD8Broad, hDMSOD6Quin, hEthanolD6Broad1, hEthanolD6S2, hEthanolD6S3, hMethanolD4Quin, hMethanolD4S, hNitromethaneD3S, hPyridineD5Broad1, hPyridineD5Broad2, hPyridineD5Broad3, hTHFD8S1, hTHFD8S2, hTMSS, hTolueneD8Quin, hTolueneD8Boad2, hTolueneD8S3, hTolueneD8Broad4, hTFADS, hTrifluoroethanolD31, hTrifluoroethanolD32];
+const LIST_SHIFT_15N = exports.LIST_SHIFT_15N = [noReference, hActicAcidD4Quin, hActicAcidD4S, hAcetoneD6Quin, hAcetonitrileD3Qquin, hBenzeneS, hChloroformDS, hCyclohexaneD12S, hDeuteriumOxideS, hDichloroethaneD4S, hDichloromethaneD2T, hDMFD7Quin1, hDMFD7Quin2, hDMFD7Broad3, hDioxaneD8Broad, hDMSOD6Quin, hEthanolD6Broad1, hEthanolD6S2, hEthanolD6S3, hMethanolD4Quin, hMethanolD4S, hNitromethaneD3S, hPyridineD5Broad1, hPyridineD5Broad2, hPyridineD5Broad3, hTHFD8S1, hTHFD8S2, hTMSS, hTolueneD8Quin, hTolueneD8Boad2, hTolueneD8S3, hTolueneD8Broad4, hTFADS, hTrifluoroethanolD31, hTrifluoroethanolD32];
+const LIST_SHIFT_29Si = exports.LIST_SHIFT_29Si = [noReference, hActicAcidD4Quin, hActicAcidD4S, hAcetoneD6Quin, hAcetonitrileD3Qquin, hBenzeneS, hChloroformDS, hCyclohexaneD12S, hDeuteriumOxideS, hDichloroethaneD4S, hDichloromethaneD2T, hDMFD7Quin1, hDMFD7Quin2, hDMFD7Broad3, hDioxaneD8Broad, hDMSOD6Quin, hEthanolD6Broad1, hEthanolD6S2, hEthanolD6S3, hMethanolD4Quin, hMethanolD4S, hNitromethaneD3S, hPyridineD5Broad1, hPyridineD5Broad2, hPyridineD5Broad3, hTHFD8S1, hTHFD8S2, hTMSS, hTolueneD8Quin, hTolueneD8Boad2, hTolueneD8S3, hTolueneD8Broad4, hTFADS, hTrifluoroethanolD31, hTrifluoroethanolD32];
 const getListShift = layoutSt => {
   switch (layoutSt) {
     case _list_layout.LIST_LAYOUT.H1:
diff --git a/dist/helpers/cfg.js b/dist/helpers/cfg.js
index 651671b8..4cc3b51c 100644
--- a/dist/helpers/cfg.js
+++ b/dist/helpers/cfg.js
@@ -15,8 +15,7 @@ const btnCmdSetRef = layoutSt => !_format.default.isNmrLayout(layoutSt); // esli
 const btnCmdIntg = layoutSt => !(_format.default.isNmrLayout(layoutSt) || _format.default.isHplcUvVisLayout(layoutSt)); // eslint-disable-line
 
 const btnCmdMpy = layoutSt => !_format.default.isNmrLayout(layoutSt);
-const btnCmdMpyPeak = function (layoutSt, mpySt) {
-  let curveIdx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+const btnCmdMpyPeak = (layoutSt, mpySt, curveIdx = 0) => {
   const {
     multiplicities
   } = mpySt;
diff --git a/dist/helpers/chem.js b/dist/helpers/chem.js
index bf7cc1cd..b740f9b8 100644
--- a/dist/helpers/chem.js
+++ b/dist/helpers/chem.js
@@ -21,9 +21,7 @@ const getTopic = (_, props) => props.topic;
 const getFeature = (_, props) => props.feature;
 const getLayout = (state, _) => state.layout; // eslint-disable-line
 
-const GetCyclicVoltaShiftOffset = function () {
-  let volammetryData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  let curveIdx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+const GetCyclicVoltaShiftOffset = (volammetryData = null, curveIdx = 0) => {
   if (!volammetryData) return 0.0;
   const {
     spectraList
@@ -165,9 +163,7 @@ const convertFrequency = (layout, feature) => {
 };
 const ToFrequency = exports.ToFrequency = (0, _reselect.createSelector)(getLayout, getFeature, convertFrequency);
 const getThreshold = state => state.threshold ? state.threshold.list[state.curve.curveIdx].value * 1.0 : false;
-const Convert2Peak = function (feature, threshold, offset) {
-  let upThreshold = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  let lowThreshold = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+const Convert2Peak = (feature, threshold, offset, upThreshold = false, lowThreshold = false) => {
   const peak = [];
   if (!feature || !feature.data) return peak;
   const data = feature.data[0];
@@ -495,9 +491,7 @@ const extractVoltammetryData = jcamp => {
   });
   return peakStack;
 };
-const buildPeakFeature = function (jcamp, layout, peakUp, s, thresRef) {
-  let upperThres = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  let lowerThres = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+const buildPeakFeature = (jcamp, layout, peakUp, s, thresRef, upperThres = false, lowerThres = false) => {
   // eslint-disable-line
   const {
     xType,
@@ -894,9 +888,7 @@ const Convert2Thres = (feature, thresSt) => {
   return value;
 };
 exports.Convert2Thres = Convert2Thres;
-const Convert2DValue = function (doubleTheta) {
-  let lambda = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15406;
-  let isRadian = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+const Convert2DValue = (doubleTheta, lambda = 0.15406, isRadian = true) => {
   let theta = doubleTheta / 2;
   if (isRadian) {
     theta = theta / 180 * Math.PI;
diff --git a/dist/helpers/converter.js b/dist/helpers/converter.js
index 2135a266..da24848d 100644
--- a/dist/helpers/converter.js
+++ b/dist/helpers/converter.js
@@ -66,8 +66,7 @@ const pksAddPos = (dataPks, editPeakSt) => {
   const result = [...posPks, ...pos];
   return result;
 };
-const PksEdit = function (dataPks, editPeakSt) {
-  let voltammetryPeak = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+const PksEdit = (dataPks, editPeakSt, voltammetryPeak = false) => {
   if (voltammetryPeak && voltammetryPeak.length > 0) {
     let modDataPks = [];
     voltammetryPeak.forEach(peak => {
diff --git a/dist/helpers/extractParams.js b/dist/helpers/extractParams.js
index 4c52c49e..cbb4f86a 100644
--- a/dist/helpers/extractParams.js
+++ b/dist/helpers/extractParams.js
@@ -25,8 +25,7 @@ const getScanIdx = (entity, scanSt) => {
   }
   return idx - 1;
 };
-const extrShare = function (entity, thresSt) {
-  let scanIdx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+const extrShare = (entity, thresSt, scanIdx = 0) => {
   const {
     spectra,
     features
diff --git a/dist/helpers/extractPeaksEdit.js b/dist/helpers/extractPeaksEdit.js
index 86fc2793..92af43f4 100644
--- a/dist/helpers/extractPeaksEdit.js
+++ b/dist/helpers/extractPeaksEdit.js
@@ -10,8 +10,7 @@ var _chem = require("./chem");
 var _shift = require("./shift");
 var _format = _interopRequireDefault(require("./format"));
 var _integration = require("./integration");
-const niOffset = function (shiftSt) {
-  let atIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+const niOffset = (shiftSt, atIndex = 0) => {
   const {
     shifts
   } = shiftSt;
@@ -27,16 +26,14 @@ const niOffset = function (shiftSt) {
   return offset;
 };
 const msOffset = () => 0;
-const extractPeaksEdit = function (feature, editPeakSt, thresSt, shiftSt, layoutSt) {
-  let atIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+const extractPeaksEdit = (feature, editPeakSt, thresSt, shiftSt, layoutSt, atIndex = 0) => {
   const offset = _format.default.isMsLayout(layoutSt) ? msOffset() : niOffset(shiftSt, atIndex);
   const peaks = (0, _chem.Convert2Peak)(feature, thresSt.value, offset);
   const peaksEdit = (0, _converter.PksEdit)(peaks, editPeakSt);
   return peaksEdit;
 };
 exports.extractPeaksEdit = extractPeaksEdit;
-const extractAutoPeaks = function (feature, thresSt, shiftSt, layoutSt) {
-  let atIndex = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+const extractAutoPeaks = (feature, thresSt, shiftSt, layoutSt, atIndex = 0) => {
   const offset = _format.default.isMsLayout(layoutSt) ? msOffset() : niOffset(shiftSt, atIndex);
   const peaks = (0, _chem.Convert2Peak)(feature, thresSt.value, offset);
   return peaks;
diff --git a/dist/helpers/format.js b/dist/helpers/format.js
index 3ae06026..5b3a6c7e 100644
--- a/dist/helpers/format.js
+++ b/dist/helpers/format.js
@@ -149,8 +149,7 @@ const spectraOps = {
     tail: '.'
   }
 };
-const rmRef = function (peaks, shift) {
-  let atIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+const rmRef = (peaks, shift, atIndex = 0) => {
   if (!shift) return peaks;
   const {
     shifts
@@ -159,9 +158,7 @@ const rmRef = function (peaks, shift) {
   const refValue = selectedShift.ref.value || selectedShift.peak.x;
   return peaks.map(p => (0, _converter.IsSame)(p.x, refValue) ? null : p).filter(r => r != null);
 };
-const formatedMS = function (peaks, maxY) {
-  let decimal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-  let isAscend = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+const formatedMS = (peaks, maxY, decimal = 2, isAscend = true) => {
   const ascendFunc = (a, b) => parseFloat(a) - parseFloat(b);
   const descendFunc = (a, b) => parseFloat(b) - parseFloat(a);
   const sortFunc = isAscend ? ascendFunc : descendFunc;
@@ -193,12 +190,7 @@ const emLevel = (boundary, val, lowerIsStronger) => {
   if (ratio > 30) return 's';
   return 'vs';
 };
-const formatedEm = function (peaks, maxY) {
-  let decimal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-  let isAscend = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  let isIntensity = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  let boundary = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
-  let lowerIsStronger = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+const formatedEm = (peaks, maxY, decimal = 2, isAscend = true, isIntensity = false, boundary = {}, lowerIsStronger = false) => {
   const ascendFunc = (a, b) => parseFloat(a) - parseFloat(b);
   const descendFunc = (a, b) => parseFloat(b) - parseFloat(a);
   const sortFunc = isAscend ? ascendFunc : descendFunc;
@@ -221,12 +213,7 @@ const formatedEm = function (peaks, maxY) {
   }
   return ordered.map(o => `${o.x}`).join(', ');
 };
-const formatedUvVis = function (peaks, maxY) {
-  let decimal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-  let isAscend = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  let isIntensity = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  let boundary = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
-  let lowerIsStronger = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+const formatedUvVis = (peaks, maxY, decimal = 2, isAscend = true, isIntensity = false, boundary = {}, lowerIsStronger = false) => {
   const ascendFunc = (a, b) => parseFloat(a) - parseFloat(b);
   const descendFunc = (a, b) => parseFloat(b) - parseFloat(a);
   const sortFunc = isAscend ? ascendFunc : descendFunc;
@@ -249,12 +236,7 @@ const formatedUvVis = function (peaks, maxY) {
   //   .join(', ');
   return ordered.map(o => `${o.x}`).join(', ');
 };
-const formatedEmissions = function (peaks, maxY) {
-  let decimal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-  let isAscend = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  let isIntensity = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  let boundary = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
-  let lowerIsStronger = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+const formatedEmissions = (peaks, maxY, decimal = 2, isAscend = true, isIntensity = false, boundary = {}, lowerIsStronger = false) => {
   const ascendFunc = (a, b) => parseFloat(a) - parseFloat(b);
   const descendFunc = (a, b) => parseFloat(b) - parseFloat(a);
   const sortFunc = isAscend ? ascendFunc : descendFunc;
@@ -274,12 +256,7 @@ const formatedEmissions = function (peaks, maxY) {
   }));
   return ordered.map(o => `${o.x} nm (${fixDigit(o.y, 2)} a.u.)`).join(', ');
 };
-const formatedDLSIntensity = function (peaks, maxY) {
-  let decimal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-  let isAscend = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  let isIntensity = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  let boundary = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
-  let lowerIsStronger = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+const formatedDLSIntensity = (peaks, maxY, decimal = 2, isAscend = true, isIntensity = false, boundary = {}, lowerIsStronger = false) => {
   const ascendFunc = (a, b) => parseFloat(a) - parseFloat(b);
   const descendFunc = (a, b) => parseFloat(b) - parseFloat(a);
   const sortFunc = isAscend ? ascendFunc : descendFunc;
@@ -299,9 +276,7 @@ const formatedDLSIntensity = function (peaks, maxY) {
   }));
   return ordered.map(o => `${o.x} nm (${o.y} %)`).join(', ');
 };
-const formatedHplcUvVis = function (peaks) {
-  let decimal = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  let integration = arguments.length > 2 ? arguments[2] : undefined;
+const formatedHplcUvVis = (peaks, decimal = 2, integration) => {
   let stack = [];
   if (integration) {
     stack = integration.stack;
@@ -334,10 +309,7 @@ const formatedHplcUvVis = function (peaks) {
   });
   return arrResult.join(', ');
 };
-const formatedXRD = function (peaks) {
-  let isAscend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  let waveLength = arguments.length > 2 ? arguments[2] : undefined;
-  let temperature = arguments.length > 3 ? arguments[3] : undefined;
+const formatedXRD = (peaks, isAscend = true, waveLength, temperature) => {
   const ascendFunc = (a, b) => parseFloat(a) - parseFloat(b);
   const descendFunc = (a, b) => parseFloat(b) - parseFloat(a);
   const sortFunc = isAscend ? ascendFunc : descendFunc;
@@ -359,8 +331,7 @@ const formatedXRD = function (peaks) {
   }));
   return `(${XRDSource}, ${XRDWavelength}, ${temperature} °C), 2θ [°] (d [nm]): ${ordered.map(o => `${o.x} (${fixDigit(o.y, 2)})`).join(', ')}`;
 };
-const rmShiftFromPeaks = function (peaks, shift) {
-  let atIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+const rmShiftFromPeaks = (peaks, shift, atIndex = 0) => {
   const peaksXY = (0, _converter.ToXY)(peaks);
   const {
     shifts
@@ -383,20 +354,19 @@ const rmShiftFromPeaks = function (peaks, shift) {
   }).filter(r => r != null);
   return result;
 };
-const peaksBody = _ref => {
-  let {
-    peaks,
-    layout,
-    decimal,
-    shift,
-    isAscend,
-    isIntensity = false,
-    boundary = {},
-    integration,
-    atIndex = 0,
-    waveLength,
-    temperature
-  } = _ref;
+const peaksBody = ({
+  peaks,
+  layout,
+  decimal,
+  shift,
+  isAscend,
+  isIntensity = false,
+  boundary = {},
+  integration,
+  atIndex = 0,
+  waveLength,
+  temperature
+}) => {
   const result = rmShiftFromPeaks(peaks, shift, atIndex);
   const ascendFunc = (a, b) => parseFloat(a.x) - parseFloat(b.x);
   const descendFunc = (a, b) => parseFloat(b.x) - parseFloat(a.x);
@@ -429,8 +399,7 @@ const peaksBody = _ref => {
   }
   return ordered.map(o => fixDigit(o.x, decimal)).join(', ');
 };
-const peaksWrapper = function (layout, shift) {
-  let atIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+const peaksWrapper = (layout, shift, atIndex = 0) => {
   let solvTxt = '';
   const {
     shifts
@@ -494,8 +463,7 @@ const getNmrTyp = layout => {
       return '';
   }
 };
-const formatPeaksByPrediction = function (peaks, layout, isAscend, decimal) {
-  let predictions = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+const formatPeaksByPrediction = (peaks, layout, isAscend, decimal, predictions = []) => {
   const pDict = {};
   peaks.forEach(p => {
     pDict[p.x.toFixed(decimal)] = 0;
@@ -524,16 +492,14 @@ const formatPeaksByPrediction = function (peaks, layout, isAscend, decimal) {
   return body;
 };
 const compareColors = idx => ['#ABB2B9', '#EDBB99', '#ABEBC6', '#D2B4DE', '#F9E79F'][idx % 5];
-const mutiEntitiesColors = idx => ['#d35400', '#2980b9', '#8e44ad', '#2c3e50', '#6D214F', '#182C61', '#BDC581'][idx % 7];
-const strNumberFixedDecimal = function (number) {
-  let decimal = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+const mutiEntitiesColors = idx => ['#2980b9', '#e4b423', '#8e44ad', '#2c3e50', '#6D214F', '#182C61', '#BDC581'][idx % 7];
+const strNumberFixedDecimal = (number, decimal = -1) => {
   if (decimal <= 0) {
     return `${number}`;
   }
   return number.toFixed(Math.max(decimal, (number.toString().split('.')[1] || []).length));
 };
-const strNumberFixedLength = function (number) {
-  let maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+const strNumberFixedLength = (number, maxLength = -1) => {
   if (maxLength <= 0) {
     return `${number}`;
   }
@@ -550,8 +516,7 @@ const strNumberFixedLength = function (number) {
 
   return number.toFixed(lengthToFix);
 };
-const inlineNotation = function (layout, data) {
-  let sampleName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+const inlineNotation = (layout, data, sampleName = '') => {
   let formattedString = '';
   let quillData = [];
   const {
diff --git a/dist/helpers/init.js b/dist/helpers/init.js
index 8d695f68..0dc98b42 100644
--- a/dist/helpers/init.js
+++ b/dist/helpers/init.js
@@ -8,8 +8,7 @@ exports.InitTip = exports.InitScale = exports.InitPathCall = exports.InitAxisCal
 var _d3Tip = _interopRequireDefault(require("d3-tip"));
 var _format = _interopRequireDefault(require("./format"));
 const d3 = require('d3');
-const InitScale = function (target) {
-  let reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+const InitScale = (target, reverse = true) => {
   const xRange = reverse ? [target.w, 0] : [0, target.w];
   const x = d3.scaleLinear().range(xRange);
   const y = d3.scaleLinear().range([target.h, 0]);
@@ -58,13 +57,10 @@ const tpDiv = (d, digits) => `
   `;
 const InitTip = () => {
   d3.select('.peak-tp').remove();
-  const tip = (0, _d3Tip.default)().attr('class', 'd3-tip').html(_ref => {
-    let {
-      d,
-      layout
-    } = _ref;
-    return tpDiv(d, _format.default.spectraDigit(layout));
-  });
+  const tip = (0, _d3Tip.default)().attr('class', 'd3-tip').html(({
+    d,
+    layout
+  }) => tpDiv(d, _format.default.spectraDigit(layout)));
   return tip;
 };
 exports.InitTip = InitTip;
\ No newline at end of file
diff --git a/dist/helpers/integration.js b/dist/helpers/integration.js
index 9f768c12..3be92276 100644
--- a/dist/helpers/integration.js
+++ b/dist/helpers/integration.js
@@ -44,8 +44,7 @@ const getAbsoluteArea = (xL, xU, data) => {
   return area;
 };
 exports.getAbsoluteArea = getAbsoluteArea;
-const calcArea = function (d, refArea, refFactor) {
-  let ignoreRef = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+const calcArea = (d, refArea, refFactor, ignoreRef = false) => {
   if (ignoreRef) {
     const {
       absoluteArea
diff --git a/dist/helpers/mount.js b/dist/helpers/mount.js
index 8b66300a..5f1bb693 100644
--- a/dist/helpers/mount.js
+++ b/dist/helpers/mount.js
@@ -49,8 +49,7 @@ const MountPath = (target, color) => {
   return path;
 };
 exports.MountPath = MountPath;
-const MountComparePath = function (target, color, id) {
-  let alpha = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+const MountComparePath = (target, color, id, alpha = 1) => {
   const path = target.root.append('g').attr('class', 'line-clip-compare').attr('id', id).attr('clip-path', 'url(#clip)').append('path').attr('class', 'line').style('fill', 'none').style('stroke', color).style('stroke-opacity', alpha).style('stroke-width', 1).style('stroke-dasharray', '30, 3').on('click', event => (0, _compass.ClickCompass)(event, target));
   return path;
 };
diff --git a/dist/index.js b/dist/index.js
index daafc090..0e6db507 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -48,6 +48,7 @@ var _dls_acf_jcamp = _interopRequireDefault(require("./__tests__/fixtures/dls_ac
 var _dls_intensity_jcamp = _interopRequireDefault(require("./__tests__/fixtures/dls_intensity_jcamp"));
 var _qDescValue = require("./__tests__/fixtures/qDescValue");
 require("./__tests__/style/svg.css");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, default-param-last, no-nested-ternary */
 
 const nmr1HEntity = _app.FN.ExtractJcamp(_nmr1h_jcamp.default);
@@ -266,19 +267,18 @@ class DemoWriteIr extends _react.default.Component {
   rmDollarSign(target) {
     return target.replace(/\$/g, '');
   }
-  formatPks(_ref) {
-    let {
-      peaks,
-      layout,
-      shift,
-      isAscend,
-      decimal,
-      isIntensity,
-      integration,
-      waveLength,
-      cyclicvoltaSt,
-      curveSt
-    } = _ref;
+  formatPks({
+    peaks,
+    layout,
+    shift,
+    isAscend,
+    decimal,
+    isIntensity,
+    integration,
+    waveLength,
+    cyclicvoltaSt,
+    curveSt
+  }) {
     const entity = this.loadEntity();
     const {
       features
@@ -339,15 +339,14 @@ class DemoWriteIr extends _react.default.Component {
     }
     return desc;
   }
-  formatMpy(_ref2) {
-    let {
-      multiplicity,
-      integration,
-      shift,
-      isAscend,
-      decimal,
-      layout
-    } = _ref2;
+  formatMpy({
+    multiplicity,
+    integration,
+    shift,
+    isAscend,
+    decimal,
+    layout
+  }) {
     // obsv freq
     const entity = this.loadEntity();
     const {
@@ -409,15 +408,14 @@ class DemoWriteIr extends _react.default.Component {
     const solvent = label ? `${name.split('(')[0].trim()} [${value.toFixed(decimal)} ppm], ` : '';
     return `${layout} NMR (${freqStr}${solvent}ppm) δ = ${str}.`;
   }
-  writeMpy(_ref3) {
-    let {
-      layout,
-      shift,
-      isAscend,
-      decimal,
-      multiplicity,
-      integration
-    } = _ref3;
+  writeMpy({
+    layout,
+    shift,
+    isAscend,
+    decimal,
+    multiplicity,
+    integration
+  }) {
     if (!_app.FN.isNmrLayout(layout)) return;
     const desc = this.formatMpy({
       multiplicity,
@@ -431,19 +429,18 @@ class DemoWriteIr extends _react.default.Component {
       desc
     });
   }
-  writePeak(_ref4) {
-    let {
-      peaks,
-      layout,
-      shift,
-      isAscend,
-      decimal,
-      isIntensity,
-      integration,
-      waveLength,
-      cyclicvoltaSt,
-      curveSt
-    } = _ref4;
+  writePeak({
+    peaks,
+    layout,
+    shift,
+    isAscend,
+    decimal,
+    isIntensity,
+    integration,
+    waveLength,
+    cyclicvoltaSt,
+    curveSt
+  }) {
     const desc = this.formatPks({
       peaks,
       layout,
@@ -461,19 +458,18 @@ class DemoWriteIr extends _react.default.Component {
       desc
     });
   }
-  savePeaks(_ref5) {
-    let {
-      peaks,
-      layout,
-      shift,
-      isAscend,
-      decimal,
-      analysis,
-      isIntensity,
-      integration,
-      multiplicity,
-      waveLength
-    } = _ref5;
+  savePeaks({
+    peaks,
+    layout,
+    shift,
+    isAscend,
+    decimal,
+    analysis,
+    isIntensity,
+    integration,
+    multiplicity,
+    waveLength
+  }) {
     const entity = this.loadEntity();
     const {
       features
@@ -512,11 +508,10 @@ class DemoWriteIr extends _react.default.Component {
     }
     /*eslint-disable */
   }
-  predictOp(_ref6) {
-    let {
-      multiplicity,
-      curveSt
-    } = _ref6;
+  predictOp({
+    multiplicity,
+    curveSt
+  }) {
     const {
       curveIdx
     } = curveSt;
@@ -593,224 +588,259 @@ class DemoWriteIr extends _react.default.Component {
     };
     const molSvg = ['nmr 1h', 'ir', 'cyclic volta'].indexOf(typ) >= 0 ? _phenylalanin.default.path : '';
     const others = this.loadOthers();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
         width: Math.round(window.innerWidth * 0.96)
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        margin: '0 0 15px 55px'
-      }
-    }, /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('nmr 1h')
-    }, "NMR 1H"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('nmr 13c')
-    }, "NMR 13C"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('nmr 13c dept')
-    }, "NMR 13C DEPT"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
       },
-      onClick: this.onClick('nmr 19f')
-    }, "NMR 19F"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('nmr 31p')
-    }, "NMR 31P"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('nmr 15n')
-    }, "NMR 15N"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('nmr 29si')
-    }, "NMR 29Si"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('ir')
-    }, "IR"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('raman')
-    }, "RAMAN"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      id: "btn-uv-vis",
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('uv/vis')
-    }, "UV/VIS"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      id: "btn-hplc",
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('hplc uv/vis')
-    }, "HPLC UV/VIS"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      id: "btn-tga",
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('tga')
-    }, "TGA"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      id: "btn-dsc",
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('dsc')
-    }, "DSC"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      id: "btn-xrd",
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('xrd')
-    }, "XRD"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      id: "btn-cv",
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('cyclic volta')
-    }, "CV"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('cds')
-    }, "CDS"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      id: "btn-sec",
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('sec')
-    }, "SEC"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      id: "btn-sec",
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('gc')
-    }, "GC"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      id: "btn-sod",
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('aif')
-    }, "SORPTION-DESORPTION"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('emissions')
-    }, "EMISSIONS"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('dls acf')
-    }, "DLS ACF"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('dls intensity')
-    }, "DLS intensity"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('ms')
-    }, "MS"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('multi')
-    }, "Multi NMR"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('multi ir')
-    }, "Multi IR"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('multi hplc')
-    }, "Multi HPLC"), /*#__PURE__*/_react.default.createElement(_material.Button, {
-      variant: "contained",
-      style: {
-        margin: '0 10px 0 10px'
-      },
-      onClick: this.onClick('multi xrd')
-    }, "Multi XRD")), /*#__PURE__*/_react.default.createElement(_app.SpectraEditor, {
-      entity: entity,
-      multiEntities: multiEntities,
-      others: others,
-      editorOnly: false,
-      canChangeDescription: true,
-      onDescriptionChanged: this.onDescriptionChanged,
-      molSvg: molSvg,
-      theoryMass: '123.0',
-      userManualLink: {
-        cv: "https://www.chemotion.net/chemotionsaurus/docs/eln/chemspectra/cvanalysis"
-      },
-      forecast: forecast,
-      operations: operations
-    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, "Description Changed"), /*#__PURE__*/_react.default.createElement(_reactQuill.default, {
-      className: 'card-sv-quill',
-      value: this.state.descChanged,
-      modules: {
-        toolbar: false
-      },
-      readOnly: true
-    })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
-      container: true
-    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
-      item: true,
-      xs: 10
-    }, /*#__PURE__*/_react.default.createElement(_material.InputBase, {
-      style: {
-        margin: '0 0 0 63px'
-      },
-      placeholder: "Description",
-      multiline: true,
-      fullWidth: true,
-      rows: "2",
-      margin: "dense",
-      value: desc
-    }))));
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          margin: '0 0 15px 55px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('nmr 1h'),
+          children: "NMR 1H"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('nmr 13c'),
+          children: "NMR 13C"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('nmr 13c dept'),
+          children: "NMR 13C DEPT"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('nmr 19f'),
+          children: "NMR 19F"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('nmr 31p'),
+          children: "NMR 31P"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('nmr 15n'),
+          children: "NMR 15N"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('nmr 29si'),
+          children: "NMR 29Si"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('ir'),
+          children: "IR"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('raman'),
+          children: "RAMAN"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          id: "btn-uv-vis",
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('uv/vis'),
+          children: "UV/VIS"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          id: "btn-hplc",
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('hplc uv/vis'),
+          children: "HPLC UV/VIS"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          id: "btn-tga",
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('tga'),
+          children: "TGA"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          id: "btn-dsc",
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('dsc'),
+          children: "DSC"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          id: "btn-xrd",
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('xrd'),
+          children: "XRD"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          id: "btn-cv",
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('cyclic volta'),
+          children: "CV"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('cds'),
+          children: "CDS"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          id: "btn-sec",
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('sec'),
+          children: "SEC"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          id: "btn-sec",
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('gc'),
+          children: "GC"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          id: "btn-sod",
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('aif'),
+          children: "SORPTION-DESORPTION"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('emissions'),
+          children: "EMISSIONS"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('dls acf'),
+          children: "DLS ACF"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('dls intensity'),
+          children: "DLS intensity"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('ms'),
+          children: "MS"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('multi'),
+          children: "Multi NMR"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('multi ir'),
+          children: "Multi IR"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('multi hplc'),
+          children: "Multi HPLC"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          style: {
+            margin: '0 10px 0 10px'
+          },
+          onClick: this.onClick('multi xrd'),
+          children: "Multi XRD"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_app.SpectraEditor, {
+        entity: entity,
+        multiEntities: multiEntities,
+        others: others,
+        editorOnly: false,
+        canChangeDescription: true,
+        onDescriptionChanged: this.onDescriptionChanged,
+        molSvg: molSvg,
+        exactMass: '123.0',
+        userManualLink: {
+          cv: "https://www.chemotion.net/chemotionsaurus/docs/eln/chemspectra/cvanalysis"
+        },
+        forecast: forecast,
+        operations: operations
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: "Description Changed"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, {
+          className: 'card-sv-quill',
+          value: this.state.descChanged,
+          modules: {
+            toolbar: false
+          },
+          readOnly: true
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+        container: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          item: true,
+          xs: 10,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputBase, {
+            style: {
+              margin: '0 0 0 63px'
+            },
+            placeholder: "Description",
+            multiline: true,
+            fullWidth: true,
+            rows: "2",
+            margin: "dense",
+            value: desc
+          })
+        })
+      })]
+    });
   }
 }
 
 // - - - DOM - - -
-_reactDom.default.render( /*#__PURE__*/_react.default.createElement(DemoWriteIr, null), document.getElementById('root'));
\ No newline at end of file
+_reactDom.default.render(/*#__PURE__*/(0, _jsxRuntime.jsx)(DemoWriteIr, {}), document.getElementById('root'));
\ No newline at end of file
diff --git a/dist/layer_content.js b/dist/layer_content.js
index d19f7380..56a2fb51 100644
--- a/dist/layer_content.js
+++ b/dist/layer_content.js
@@ -13,6 +13,7 @@ var _index = _interopRequireDefault(require("./components/d3_line/index"));
 var _index2 = _interopRequireDefault(require("./components/d3_rect/index"));
 var _forecast_viewer = _interopRequireDefault(require("./components/forecast_viewer"));
 var _format = _interopRequireDefault(require("./helpers/format"));
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, default-param-last, react/function-component-definition */
 
 const extractLayout = (forecast, layoutSt) => {
@@ -32,17 +33,16 @@ const extractLayout = (forecast, layoutSt) => {
     isXRD
   };
 };
-const Content = _ref => {
-  let {
-    topic,
-    feature,
-    cLabel,
-    xLabel,
-    yLabel,
-    forecast,
-    operations,
-    layoutSt
-  } = _ref;
+const Content = ({
+  topic,
+  feature,
+  cLabel,
+  xLabel,
+  yLabel,
+  forecast,
+  operations,
+  layoutSt
+}) => {
   const {
     showForecast,
     isNmr,
@@ -52,7 +52,7 @@ const Content = _ref => {
     isXRD
   } = extractLayout(forecast, layoutSt);
   if (showForecast) {
-    return /*#__PURE__*/_react.default.createElement(_forecast_viewer.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_forecast_viewer.default, {
       topic: topic,
       cLabel: cLabel,
       xLabel: xLabel,
@@ -67,7 +67,7 @@ const Content = _ref => {
     });
   }
   if (isMs) {
-    return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
       topic: topic,
       cLabel: cLabel,
       xLabel: xLabel,
@@ -76,7 +76,7 @@ const Content = _ref => {
       isHidden: false
     });
   }
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
     topic: topic,
     cLabel: cLabel,
     xLabel: xLabel,
diff --git a/dist/layer_init.js b/dist/layer_init.js
index 0cd879a3..616c8f5c 100644
--- a/dist/layer_init.js
+++ b/dist/layer_init.js
@@ -18,6 +18,7 @@ var _layer_prism = _interopRequireDefault(require("./layer_prism"));
 var _format = _interopRequireDefault(require("./helpers/format"));
 var _multi_jcamps_viewer = _interopRequireDefault(require("./components/multi_jcamps_viewer"));
 var _curve = require("./actions/curve");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, default-param-last */
 
 const styles = () => ({});
@@ -42,14 +43,10 @@ class LayerInit extends _react.default.Component {
     this.updateMultiEntities();
   }
   normChange(prevProps) {
-    const prevFeatures = prevProps.entity.features;
-    const prevPeak = prevFeatures.editPeak || prevFeatures.autoPeak;
     const {
       entity
     } = this.props;
-    const nextFeatures = entity.features;
-    const nextPeak = nextFeatures.editPeak || nextFeatures.autoPeak;
-    if (prevPeak !== nextPeak) {
+    if (prevProps.entity !== entity) {
       this.execReset();
     }
   }
@@ -62,7 +59,8 @@ class LayerInit extends _react.default.Component {
       resetInitNmrAct,
       resetInitCommonWithIntergationAct,
       resetDetectorAct,
-      updateDSCMetaDataAct
+      updateDSCMetaDataAct,
+      resetMultiplicityAct
     } = this.props;
     resetInitCommonAct();
     resetDetectorAct();
@@ -76,8 +74,7 @@ class LayerInit extends _react.default.Component {
       const editPeak = features.editPeak || features[0];
       const baseFeat = editPeak || autoPeak;
       resetInitMsAct(baseFeat);
-    }
-    if (_format.default.isNmrLayout(layout)) {
+    } else if (_format.default.isNmrLayout(layout)) {
       const {
         integration,
         multiplicity,
@@ -102,6 +99,8 @@ class LayerInit extends _react.default.Component {
         dscMetaData
       } = features;
       updateDSCMetaDataAct(dscMetaData);
+    } else {
+      resetMultiplicityAct();
     }
   }
   initReducer() {
@@ -136,7 +135,7 @@ class LayerInit extends _react.default.Component {
       descriptions,
       molSvg,
       editorOnly,
-      theoryMass,
+      exactMass,
       canChangeDescription,
       onDescriptionChanged,
       multiEntities,
@@ -150,26 +149,26 @@ class LayerInit extends _react.default.Component {
     const xxLabel = !xLabel && xLabel === '' ? `X (${target.xUnit})` : xLabel;
     const yyLabel = !yLabel && yLabel === '' ? `Y (${target.yUnit})` : yLabel;
     if (multiEntities) {
-      return /*#__PURE__*/_react.default.createElement(_multi_jcamps_viewer.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_multi_jcamps_viewer.default, {
         multiEntities: multiEntities,
         entityFileNames: entityFileNames,
         userManualLink: userManualLink,
         molSvg: molSvg,
-        theoryMass: theoryMass,
+        exactMass: exactMass,
         operations: operations
       });
     } else if (_format.default.isCyclicVoltaLayout(layout)) {
       // eslint-disable-line
-      return /*#__PURE__*/_react.default.createElement(_multi_jcamps_viewer.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_multi_jcamps_viewer.default, {
         multiEntities: [entity],
         entityFileNames: entityFileNames,
         userManualLink: userManualLink,
         molSvg: molSvg,
-        theoryMass: theoryMass,
+        exactMass: exactMass,
         operations: operations
       });
     }
-    return /*#__PURE__*/_react.default.createElement(_layer_prism.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_layer_prism.default, {
       entity: entity,
       cLabel: cLabel,
       xLabel: xxLabel,
@@ -179,7 +178,7 @@ class LayerInit extends _react.default.Component {
       descriptions: descriptions,
       molSvg: molSvg,
       editorOnly: editorOnly,
-      theoryMass: theoryMass,
+      exactMass: exactMass,
       canChangeDescription: canChangeDescription,
       onDescriptionChanged: onDescriptionChanged
     });
@@ -194,6 +193,7 @@ const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   resetInitMsAct: _manager.resetInitMs,
   resetInitCommonWithIntergationAct: _manager.resetInitCommonWithIntergation,
   resetDetectorAct: _manager.resetDetector,
+  resetMultiplicityAct: _manager.resetMultiplicity,
   updateOperationAct: _submit.updateOperation,
   updateMetaPeaksAct: _meta.updateMetaPeaks,
   addOthersAct: _jcamp.addOthers,
@@ -212,7 +212,7 @@ LayerInit.propTypes = {
   yLabel: _propTypes.default.string.isRequired,
   molSvg: _propTypes.default.string.isRequired,
   editorOnly: _propTypes.default.bool.isRequired,
-  theoryMass: _propTypes.default.string.isRequired,
+  exactMass: _propTypes.default.string.isRequired,
   forecast: _propTypes.default.object.isRequired,
   operations: _propTypes.default.array.isRequired,
   descriptions: _propTypes.default.array.isRequired,
@@ -230,6 +230,7 @@ LayerInit.propTypes = {
   userManualLink: _propTypes.default.object,
   // eslint-disable-line
   resetDetectorAct: _propTypes.default.func.isRequired,
+  resetMultiplicityAct: _propTypes.default.func.isRequired,
   updateDSCMetaDataAct: _propTypes.default.func.isRequired
 };
 var _default = exports.default = (0, _reactRedux.connect)(
diff --git a/dist/layer_prism.js b/dist/layer_prism.js
index 12bc2af0..7680524a 100644
--- a/dist/layer_prism.js
+++ b/dist/layer_prism.js
@@ -16,29 +16,29 @@ var _index2 = _interopRequireDefault(require("./components/cmd_bar/index"));
 var _layer_content = _interopRequireDefault(require("./layer_content"));
 var _list_ui = require("./constants/list_ui");
 var _extractParams = require("./helpers/extractParams");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable prefer-object-spread, default-param-last,
 react/function-component-definition, react/require-default-props
 */
 
 const styles = () => ({});
-const LayerPrism = _ref => {
-  let {
-    entity,
-    cLabel,
-    xLabel,
-    yLabel,
-    forecast,
-    operations,
-    descriptions,
-    molSvg,
-    editorOnly,
-    theoryMass,
-    thresSt,
-    scanSt,
-    uiSt,
-    canChangeDescription,
-    onDescriptionChanged
-  } = _ref;
+const LayerPrism = ({
+  entity,
+  cLabel,
+  xLabel,
+  yLabel,
+  forecast,
+  operations,
+  descriptions,
+  molSvg,
+  editorOnly,
+  exactMass,
+  thresSt,
+  scanSt,
+  uiSt,
+  canChangeDescription,
+  onDescriptionChanged
+}) => {
   const {
     topic,
     feature,
@@ -50,64 +50,75 @@ const LayerPrism = _ref => {
     viewer
   } = uiSt;
   if (viewer === _list_ui.LIST_UI_VIEWER_TYPE.ANALYSIS) {
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index2.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
+        feature: feature,
+        hasEdit: hasEdit,
+        forecast: forecast,
+        operations: operations,
+        editorOnly: editorOnly
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "react-spectrum-editor",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+          container: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+            item: true,
+            xs: 12,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layer_content.default, {
+              topic: topic,
+              feature: feature,
+              cLabel: cLabel,
+              xLabel: xLabel,
+              yLabel: yLabel,
+              forecast: forecast,
+              operations: operations
+            })
+          })
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
       feature: feature,
       hasEdit: hasEdit,
       forecast: forecast,
       operations: operations,
       editorOnly: editorOnly
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "react-spectrum-editor"
-    }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-      container: true
-    }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-      item: true,
-      xs: 12
-    }, /*#__PURE__*/_react.default.createElement(_layer_content.default, {
-      topic: topic,
-      feature: feature,
-      cLabel: cLabel,
-      xLabel: xLabel,
-      yLabel: yLabel,
-      forecast: forecast,
-      operations: operations
-    })))));
-  }
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index2.default, {
-    feature: feature,
-    hasEdit: hasEdit,
-    forecast: forecast,
-    operations: operations,
-    editorOnly: editorOnly
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "react-spectrum-editor"
-  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    container: true
-  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    item: true,
-    xs: 9
-  }, /*#__PURE__*/_react.default.createElement(_layer_content.default, {
-    topic: topic,
-    feature: feature,
-    cLabel: cLabel,
-    xLabel: xLabel,
-    yLabel: yLabel,
-    forecast: forecast,
-    operations: operations
-  })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    item: true,
-    xs: 3,
-    align: "center"
-  }, /*#__PURE__*/_react.default.createElement(_index.default, {
-    feature: feature,
-    integration: integration,
-    editorOnly: editorOnly,
-    molSvg: molSvg,
-    theoryMass: theoryMass,
-    descriptions: descriptions,
-    canChangeDescription: canChangeDescription,
-    onDescriptionChanged: onDescriptionChanged
-  })))));
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "react-spectrum-editor",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+        container: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+          item: true,
+          xs: 9,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layer_content.default, {
+            topic: topic,
+            feature: feature,
+            cLabel: cLabel,
+            xLabel: xLabel,
+            yLabel: yLabel,
+            forecast: forecast,
+            operations: operations
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+          item: true,
+          xs: 3,
+          align: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
+            feature: feature,
+            integration: integration,
+            editorOnly: editorOnly,
+            molSvg: molSvg,
+            exactMass: exactMass,
+            descriptions: descriptions,
+            canChangeDescription: canChangeDescription,
+            onDescriptionChanged: onDescriptionChanged
+          })
+        })]
+      })
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
@@ -124,7 +135,7 @@ LayerPrism.propTypes = {
   yLabel: _propTypes.default.string.isRequired,
   molSvg: _propTypes.default.string.isRequired,
   editorOnly: _propTypes.default.bool.isRequired,
-  theoryMass: _propTypes.default.string,
+  exactMass: _propTypes.default.string,
   forecast: _propTypes.default.object.isRequired,
   operations: _propTypes.default.array.isRequired,
   descriptions: _propTypes.default.array.isRequired,
diff --git a/dist/reducers/reducer_axes.js b/dist/reducers/reducer_axes.js
index 2d43ec8c..b9544a85 100644
--- a/dist/reducers/reducer_axes.js
+++ b/dist/reducers/reducer_axes.js
@@ -13,8 +13,7 @@ const initialState = {
     yUnit: ''
   }]
 };
-const updateAxis = function (state, payload) {
-  let isYAxis = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+const updateAxis = (state, payload, isYAxis = false) => {
   const {
     value,
     curveIndex
@@ -44,9 +43,7 @@ const updateAxis = function (state, payload) {
     axes
   });
 };
-const axesReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const axesReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.AXES.UPDATE_X_AXIS:
       return updateAxis(state, action.payload);
diff --git a/dist/reducers/reducer_curve.js b/dist/reducers/reducer_curve.js
index 4981ebb9..91c11de1 100644
--- a/dist/reducers/reducer_curve.js
+++ b/dist/reducers/reducer_curve.js
@@ -59,9 +59,7 @@ const setAllCurves = (state, action) => {
     listCurves: payload
   });
 };
-const curveReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const curveReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.CURVE.SELECT_WORKING_CURVE:
       return Object.assign({}, state, {
diff --git a/dist/reducers/reducer_detector.js b/dist/reducers/reducer_detector.js
index db8e3d56..203cf350 100644
--- a/dist/reducers/reducer_detector.js
+++ b/dist/reducers/reducer_detector.js
@@ -25,9 +25,7 @@ const updateOrAppendCurve = (curves, targetCurveIdx, newCurve) => {
   }
   return [...curves, newCurve];
 };
-const detectorReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const detectorReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.SEC.UPDATE_DETECTOR:
       const {
diff --git a/dist/reducers/reducer_edit_peak.js b/dist/reducers/reducer_edit_peak.js
index 80c7b990..35d38bff 100644
--- a/dist/reducers/reducer_edit_peak.js
+++ b/dist/reducers/reducer_edit_peak.js
@@ -202,9 +202,7 @@ const clearAllPeaks = (state, action) => {
     peaks: newPeaks
   });
 };
-const editPeakReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const editPeakReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.EDITPEAK.ADD_POSITIVE:
       return addToPos(state, action);
diff --git a/dist/reducers/reducer_forecast.js b/dist/reducers/reducer_forecast.js
index cecf7278..7dcb6c05 100644
--- a/dist/reducers/reducer_forecast.js
+++ b/dist/reducers/reducer_forecast.js
@@ -101,9 +101,7 @@ const updateNmrStatus = (state, action) => {
   });
   return newSt;
 };
-const forecastReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const forecastReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.FORECAST.INIT_STATUS:
       if (!action.payload) return state;
diff --git a/dist/reducers/reducer_integration.js b/dist/reducers/reducer_integration.js
index 0fd8b983..9d25b023 100644
--- a/dist/reducers/reducer_integration.js
+++ b/dist/reducers/reducer_integration.js
@@ -208,9 +208,7 @@ const clearAll = (state, action) => {
     selectedIdx: curveIdx
   });
 };
-const integrationReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const integrationReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.UI.SWEEP.SELECT_INTEGRATION:
       return addToStack(state, action);
diff --git a/dist/reducers/reducer_jcamp.js b/dist/reducers/reducer_jcamp.js
index a4d475f6..6c18ec0f 100644
--- a/dist/reducers/reducer_jcamp.js
+++ b/dist/reducers/reducer_jcamp.js
@@ -14,11 +14,10 @@ const initialState = {
     addOthersCb: false
   }]
 };
-const addOthers = (state, _ref) => {
-  let {
-    others,
-    addOthersCb
-  } = _ref;
+const addOthers = (state, {
+  others,
+  addOthersCb
+}) => {
   const {
     selectedIdx,
     jcamps
@@ -81,9 +80,7 @@ const toggleShow = (state, payload) => {
     jcamps
   });
 };
-const layoutReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const layoutReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.JCAMP.ADD_OTHERS:
       return addOthers(state, action.payload);
diff --git a/dist/reducers/reducer_layout.js b/dist/reducers/reducer_layout.js
index 95b82d53..c264e570 100644
--- a/dist/reducers/reducer_layout.js
+++ b/dist/reducers/reducer_layout.js
@@ -9,9 +9,7 @@ var _list_layout = require("../constants/list_layout");
 /* eslint-disable prefer-object-spread, default-param-last */
 
 const initialState = _list_layout.LIST_LAYOUT.C13;
-const layoutReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const layoutReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.LAYOUT.UPDATE:
       return action.payload;
diff --git a/dist/reducers/reducer_manager.js b/dist/reducers/reducer_manager.js
index e7535ed5..2de439dd 100644
--- a/dist/reducers/reducer_manager.js
+++ b/dist/reducers/reducer_manager.js
@@ -8,9 +8,7 @@ exports.default = void 0;
 // import { MANAGER } from '../constants/action_type';
 
 const initialState = {};
-const managerReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const managerReducer = (state = initialState, action) => {
   switch (action.type) {
     default:
       return state;
diff --git a/dist/reducers/reducer_meta.js b/dist/reducers/reducer_meta.js
index 6abbca9c..3b92cb0e 100644
--- a/dist/reducers/reducer_meta.js
+++ b/dist/reducers/reducer_meta.js
@@ -27,9 +27,7 @@ const updateMetaData = (state, action) => {
     dscMetaData
   });
 };
-const metaReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const metaReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.META.UPDATE_PEAKS_RDC:
       return Object.assign({}, state, action.payload);
diff --git a/dist/reducers/reducer_multiplicity.js b/dist/reducers/reducer_multiplicity.js
index 9785172f..651182e1 100644
--- a/dist/reducers/reducer_multiplicity.js
+++ b/dist/reducers/reducer_multiplicity.js
@@ -164,9 +164,7 @@ const clearAll = (state, action) => {
     multiplicities: newMultiplicities
   });
 };
-const multiplicityReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const multiplicityReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.EDITPEAK.SHIFT:
       return setShift(state, action);
@@ -191,6 +189,8 @@ const multiplicityReducer = function () {
       return clearAll(state, action);
     case _action_type.MANAGER.RESETALL:
       return state;
+    case _action_type.MANAGER.RESET_MULTIPLICITY:
+      return initialState;
     default:
       return _undo_redo_config.undoRedoActions.indexOf(action.type) >= 0 ? Object.assign({}, state) : state;
   }
diff --git a/dist/reducers/reducer_scan.js b/dist/reducers/reducer_scan.js
index e870a829..99fe706b 100644
--- a/dist/reducers/reducer_scan.js
+++ b/dist/reducers/reducer_scan.js
@@ -30,9 +30,7 @@ const toggleIsAuto = state => Object.assign({}, state, {
   isAuto: !state.isAuto,
   target: false
 });
-const scanReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const scanReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.SCAN.SET_TARGET:
     case _action_type.SCAN.RESET_TARGET:
diff --git a/dist/reducers/reducer_shift.js b/dist/reducers/reducer_shift.js
index 8d5511fc..37943c30 100644
--- a/dist/reducers/reducer_shift.js
+++ b/dist/reducers/reducer_shift.js
@@ -217,9 +217,7 @@ const addNegative = (state, action) => {
     selectedIdx: curveIdx
   });
 };
-const shiftReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const shiftReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.SHIFT.SET_REF:
       return setRef(state, action);
diff --git a/dist/reducers/reducer_simulation.js b/dist/reducers/reducer_simulation.js
index a74c426e..81d0df10 100644
--- a/dist/reducers/reducer_simulation.js
+++ b/dist/reducers/reducer_simulation.js
@@ -14,9 +14,7 @@ const resetAll = (state, action) => {
   const newState = action.payload;
   return Object.assign({}, state, newState);
 };
-const simulatioinReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const simulatioinReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.SIMULATION.RESET_ALL_RDC:
       return resetAll(state, action);
diff --git a/dist/reducers/reducer_status.js b/dist/reducers/reducer_status.js
index 12e2ecb7..e14b5f7c 100644
--- a/dist/reducers/reducer_status.js
+++ b/dist/reducers/reducer_status.js
@@ -10,9 +10,7 @@ var _action_type = require("../constants/action_type");
 const initialState = {
   btnSubmit: false
 };
-const statusReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const statusReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.STATUS.TOGGLEBTNSUBMIT:
       return Object.assign({}, state, {
diff --git a/dist/reducers/reducer_submit.js b/dist/reducers/reducer_submit.js
index 5d672703..6fc47bf8 100644
--- a/dist/reducers/reducer_submit.js
+++ b/dist/reducers/reducer_submit.js
@@ -20,9 +20,7 @@ const initialState = {
 const updateOperation = action => ({
   operation: action.payload || initialState.operation
 });
-const submitReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const submitReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.SUBMIT.TOGGLE_IS_ASCEND:
       return Object.assign({}, state, {
diff --git a/dist/reducers/reducer_threshold.js b/dist/reducers/reducer_threshold.js
index 821854d6..7fc7f727 100644
--- a/dist/reducers/reducer_threshold.js
+++ b/dist/reducers/reducer_threshold.js
@@ -197,9 +197,7 @@ const resetInitCommon = state => {
     list: newList
   });
 };
-const thresholdReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const thresholdReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.CURVE.SET_ALL_CURVES:
       return setListThreshold(state, action);
diff --git a/dist/reducers/reducer_ui.js b/dist/reducers/reducer_ui.js
index b1f6aff5..92a7090c 100644
--- a/dist/reducers/reducer_ui.js
+++ b/dist/reducers/reducer_ui.js
@@ -15,11 +15,11 @@ const initialState = {
     xExtent: false,
     yExtent: false
   },
-  jcampIdx: 0
+  sweepExtentByCurve: {},
+  jcampIdx: 0,
+  alignCompareX: true
 };
-const uiReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const uiReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.UI.VIEWER.SET_TYPE:
       return Object.assign({}, state, {
@@ -27,11 +27,18 @@ const uiReducer = function () {
       });
     case _action_type.UI.SWEEP.SET_TYPE:
       if (action.payload === _list_ui.LIST_UI_SWEEP_TYPE.ZOOMRESET) {
+        const curveIdx = typeof action.jcampIdx === 'number' ? action.jcampIdx : 0;
         return Object.assign({}, state, {
           sweepExtent: {
             xExtent: false,
             yExtent: false
-          }
+          },
+          sweepExtentByCurve: Object.assign({}, state.sweepExtentByCurve, {
+            [curveIdx]: {
+              xExtent: false,
+              yExtent: false
+            }
+          })
         });
       }
       return Object.assign({}, state, {
@@ -39,8 +46,19 @@ const uiReducer = function () {
         jcampIdx: action.jcampIdx
       });
     case _action_type.UI.SWEEP.SELECT_ZOOMIN:
+      {
+        const curveIdx = typeof action.curveIdx === 'number' ? action.curveIdx : 0;
+        const nextSweepExtentByCurve = Object.assign({}, state.sweepExtentByCurve, {
+          [curveIdx]: action.payload
+        });
+        return Object.assign({}, state, {
+          sweepExtent: action.payload,
+          sweepExtentByCurve: nextSweepExtentByCurve
+        });
+      }
+    case _action_type.UI.COMPARE.SET_ALIGN_X:
       return Object.assign({}, state, {
-        sweepExtent: action.payload
+        alignCompareX: action.payload
       });
     case _action_type.MANAGER.RESETALL:
       return initialState;
diff --git a/dist/reducers/reducer_voltammetry.js b/dist/reducers/reducer_voltammetry.js
index db2618c6..e28076ed 100644
--- a/dist/reducers/reducer_voltammetry.js
+++ b/dist/reducers/reducer_voltammetry.js
@@ -112,8 +112,7 @@ const getE12 = data => {
   }
   return null;
 };
-const addPeak = function (state, action) {
-  let isMax = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+const addPeak = (state, action, isMax = true) => {
   const {
     payload
   } = action;
@@ -161,8 +160,7 @@ const addPeak = function (state, action) {
   }
   return state;
 };
-const removePeak = function (state, action) {
-  let isMax = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+const removePeak = (state, action, isMax = true) => {
   const {
     payload
   } = action;
@@ -533,9 +531,7 @@ const selectRefFactor = (state, action) => {
   }
   return state;
 };
-const cyclicVoltaReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const cyclicVoltaReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.CYCLIC_VOLTA_METRY.ADD_PAIR_PEAKS:
       return addPairPeak(state, action);
diff --git a/dist/reducers/reducer_wavelength.js b/dist/reducers/reducer_wavelength.js
index 424df2a1..7c6de7ab 100644
--- a/dist/reducers/reducer_wavelength.js
+++ b/dist/reducers/reducer_wavelength.js
@@ -9,9 +9,7 @@ var _action_type = require("../constants/action_type");
 /* eslint-disable default-param-last */
 
 const initialState = _list_wavelength.LIST_WAVE_LENGTH[0];
-const wavelengthReducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  let action = arguments.length > 1 ? arguments[1] : undefined;
+const wavelengthReducer = (state = initialState, action) => {
   switch (action.type) {
     case _action_type.XRD.UPDATE_WAVE_LENGTH:
       return action.payload;
diff --git a/dist/sagas/saga_multiplicity.js b/dist/sagas/saga_multiplicity.js
index d0d73c9a..56645954 100644
--- a/dist/sagas/saga_multiplicity.js
+++ b/dist/sagas/saga_multiplicity.js
@@ -150,8 +150,7 @@ function* addUiPeakToStack(action) {
     payload
   });
 }
-const rmPeakFromStack = function (action, metaSt, mpySt) {
-  let curveIdx = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+const rmPeakFromStack = (action, metaSt, mpySt, curveIdx = 0) => {
   const {
     peak,
     xExtent
diff --git a/dist/sagas/saga_ui.js b/dist/sagas/saga_ui.js
index adf16e94..10411f11 100644
--- a/dist/sagas/saga_ui.js
+++ b/dist/sagas/saga_ui.js
@@ -41,7 +41,8 @@ function* selectUiSweep(action) {
     case _list_ui.LIST_UI_SWEEP_TYPE.ZOOMIN:
       yield (0, _effects.put)({
         type: _action_type.UI.SWEEP.SELECT_ZOOMIN,
-        payload
+        payload,
+        curveIdx
       });
       break;
     case _list_ui.LIST_UI_SWEEP_TYPE.ZOOMRESET:
@@ -91,6 +92,10 @@ function* selectUiSweep(action) {
 const getLayoutSt = state => state.layout;
 function* scrollUiWheel(action) {
   const layoutSt = yield (0, _effects.select)(getLayoutSt);
+  const curveSt = yield (0, _effects.select)(getCurveSt);
+  const {
+    curveIdx
+  } = curveSt;
   const {
     payload
   } = action;
@@ -156,7 +161,8 @@ function* scrollUiWheel(action) {
   }
   yield (0, _effects.put)({
     type: _action_type.UI.SWEEP.SELECT_ZOOMIN,
-    payload: nextExtent
+    payload: nextExtent,
+    curveIdx
   });
 }
 const getUiSweepType = state => state.ui.sweepType;
diff --git a/dist/third_party/jAnalyzer.js b/dist/third_party/jAnalyzer.js
index a307e5fb..7d25625b 100644
--- a/dist/third_party/jAnalyzer.js
+++ b/dist/third_party/jAnalyzer.js
@@ -22,7 +22,7 @@ var _default = exports.default = {
    * @param {object} signal
    * @private
    */
-  compilePattern: function (signal) {
+  compilePattern: function compilePattern(signal) {
     signal.multiplicity = 'm';
     // 1.1 symmetrize
     // It will add a set of peaks(signal.peaksComp) to the signal that will be used during
diff --git a/src/actions/ui.js b/src/actions/ui.js
index 46424f92..8525b3f0 100644
--- a/src/actions/ui.js
+++ b/src/actions/ui.js
@@ -40,10 +40,18 @@ const clickUiTarget = (payload, onPeak, voltammetryPeakIdx = 0, jcampIdx = 0, on
   }
 );
 
+const setUiAlignCompareX = (payload) => (
+  {
+    type: UI.COMPARE.SET_ALIGN_X,
+    payload,
+  }
+);
+
 export {
   setUiViewerType,
   setUiSweepType,
   selectUiSweep,
   scrollUiWheel,
   clickUiTarget,
+  setUiAlignCompareX,
 };
diff --git a/src/components/cmd_bar/02_zoom.js b/src/components/cmd_bar/02_zoom.js
index 22f3b339..39d09e7f 100644
--- a/src/components/cmd_bar/02_zoom.js
+++ b/src/components/cmd_bar/02_zoom.js
@@ -13,6 +13,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { setUiSweepType } from '../../actions/ui';
 import { MuButton, commonStyle, focusStyle } from './common';
 import { LIST_UI_SWEEP_TYPE } from '../../constants/list_ui';
+import AlignCompareX from './r10_align_compare_x';
 
 const styles = () => (
   Object.assign(
@@ -22,10 +23,10 @@ const styles = () => (
 );
 
 const Zoom = ({
-  classes, isfocusZoomSt, setUiSweepTypeAct,
+  classes, isfocusZoomSt, curveIdx, setUiSweepTypeAct,
 }) => {
-  const onSweepZoomIn = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMIN);
-  const onSweepZoomReset = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMRESET);
+  const onSweepZoomIn = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMIN, curveIdx);
+  const onSweepZoomReset = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMRESET, curveIdx);
 
   return (
     <span className={classes.group} data-testid="Zoom">
@@ -58,6 +59,7 @@ const Zoom = ({
           </MuButton>
         </span>
       </Tooltip>
+      <AlignCompareX compact />
     </span>
   );
 };
@@ -65,6 +67,7 @@ const Zoom = ({
 const mapStateToProps = (state, _) => ( // eslint-disable-line
   {
     isfocusZoomSt: state.ui.sweepType === LIST_UI_SWEEP_TYPE.ZOOMIN,
+    curveIdx: state.curve.curveIdx,
   }
 );
 
@@ -77,6 +80,7 @@ const mapDispatchToProps = (dispatch) => (
 Zoom.propTypes = {
   classes: PropTypes.object.isRequired,
   isfocusZoomSt: PropTypes.bool.isRequired,
+  curveIdx: PropTypes.number.isRequired,
   setUiSweepTypeAct: PropTypes.func.isRequired,
 };
 
diff --git a/src/components/cmd_bar/r10_align_compare_x.js b/src/components/cmd_bar/r10_align_compare_x.js
new file mode 100644
index 00000000..85a3b1a7
--- /dev/null
+++ b/src/components/cmd_bar/r10_align_compare_x.js
@@ -0,0 +1,76 @@
+/* eslint-disable prefer-object-spread, react/function-component-definition */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { connect } from 'react-redux';
+import { bindActionCreators, compose } from 'redux';
+
+import Tooltip from '@mui/material/Tooltip';
+import SwapHorizOutlinedIcon from '@mui/icons-material/SwapHorizOutlined';
+import withStyles from '@mui/styles/withStyles';
+
+import { setUiAlignCompareX } from '../../actions/ui';
+import { MuButton, commonStyle, focusStyle } from './common';
+
+const styles = () => (
+  Object.assign(
+    {},
+    commonStyle,
+  )
+);
+
+const AlignCompareX = ({
+  classes, alignCompareXSt, isMultiSpectraSt, setUiAlignCompareXAct, compact,
+}) => {
+  if (!isMultiSpectraSt) return null;
+
+  const onToggle = () => setUiAlignCompareXAct(!alignCompareXSt);
+
+  return (
+    <span className={compact ? undefined : classes.group} data-testid="AlignCompareX">
+      <Tooltip title={<span className="txt-sv-tp">Align X (compare)</span>}>
+        <MuButton
+          className={
+            classNames(
+              focusStyle(alignCompareXSt, classes),
+              'btn-sv-bar-align-compare-x',
+            )
+          }
+          onClick={onToggle}
+        >
+          <SwapHorizOutlinedIcon className={classes.icon} />
+        </MuButton>
+      </Tooltip>
+    </span>
+  );
+};
+
+const mapStateToProps = (state, _) => ( // eslint-disable-line
+  {
+    alignCompareXSt: state.ui.alignCompareX,
+    isMultiSpectraSt: (state.curve.listCurves || []).length > 1,
+  }
+);
+
+const mapDispatchToProps = (dispatch) => (
+  bindActionCreators({
+    setUiAlignCompareXAct: setUiAlignCompareX,
+  }, dispatch)
+);
+
+AlignCompareX.propTypes = {
+  classes: PropTypes.object.isRequired,
+  alignCompareXSt: PropTypes.bool.isRequired,
+  isMultiSpectraSt: PropTypes.bool.isRequired,
+  setUiAlignCompareXAct: PropTypes.func.isRequired,
+  compact: PropTypes.bool,
+};
+
+AlignCompareX.defaultProps = {
+  compact: false,
+};
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withStyles(styles),
+)(AlignCompareX);
diff --git a/src/components/d3_line/index.js b/src/components/d3_line/index.js
index d42c2796..ff17c294 100644
--- a/src/components/d3_line/index.js
+++ b/src/components/d3_line/index.js
@@ -140,23 +140,28 @@ class ViewerLine extends React.Component {
 }
 
 const mapStateToProps = (state, props) => (
-  {
-    seed: Topic2Seed(state, props),
-    peak: Feature2Peak(state, props),
-    freq: ToFrequency(state, props),
-    comparisons: GetComparisons(state, props),
-    tTrEndPts: ToThresEndPts(state, props),
-    tSfPeaks: ToShiftPeaks(state, props),
-    editPeakSt: state.editPeak.present,
-    layoutSt: state.layout,
-    integationSt: state.integration.present,
-    mtplySt: state.multiplicity.present,
-    sweepExtentSt: state.ui.sweepExtent,
-    isUiAddIntgSt: state.ui.sweepType === LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
-    isUiNoBrushSt: LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
-    wavelength: state.wavelength,
-    axesUnitsSt: state.axesUnits,
-  }
+  (() => {
+    const { curveIdx } = state.curve;
+    const sweepExtentByCurve = state.ui.sweepExtentByCurve || {};
+    const sweepExtentSt = sweepExtentByCurve[curveIdx] || { xExtent: false, yExtent: false };
+    return {
+      seed: Topic2Seed(state, props),
+      peak: Feature2Peak(state, props),
+      freq: ToFrequency(state, props),
+      comparisons: GetComparisons(state, props),
+      tTrEndPts: ToThresEndPts(state, props),
+      tSfPeaks: ToShiftPeaks(state, props),
+      editPeakSt: state.editPeak.present,
+      layoutSt: state.layout,
+      integationSt: state.integration.present,
+      mtplySt: state.multiplicity.present,
+      sweepExtentSt,
+      isUiAddIntgSt: state.ui.sweepType === LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
+      isUiNoBrushSt: LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
+      wavelength: state.wavelength,
+      axesUnitsSt: state.axesUnits,
+    };
+  })()
 );
 
 const mapDispatchToProps = (dispatch) => (
diff --git a/src/components/d3_multi/index.js b/src/components/d3_multi/index.js
index f2395ba4..7c1cbaf0 100644
--- a/src/components/d3_multi/index.js
+++ b/src/components/d3_multi/index.js
@@ -45,7 +45,7 @@ class ViewerMulti extends React.Component {
       seed, peak, cLabel, xLabel, yLabel, feature,
       tTrEndPts, tSfPeaks, editPeakSt, layoutSt,
       sweepExtentSt, isUiNoBrushSt,
-      isHidden, resetAllAct, cyclicvoltaSt,
+      isHidden, resetAllAct, cyclicvoltaSt, alignCompareXSt,
       integationSt, mtplySt, axesUnitsSt,
     } = this.props;
 
@@ -84,6 +84,7 @@ class ViewerMulti extends React.Component {
       cyclicvoltaSt,
       integationSt,
       mtplySt,
+      alignCompareX: alignCompareXSt,
     });
     drawLabel(this.rootKlass, cLabel, xxLabel, yyLabel);
     drawDisplay(this.rootKlass, isHidden);
@@ -96,7 +97,7 @@ class ViewerMulti extends React.Component {
       seed, peak, cLabel, xLabel, yLabel,
       tTrEndPts, tSfPeaks, editPeakSt, layoutSt,
       sweepExtentSt, isUiNoBrushSt,
-      isHidden, cyclicvoltaSt,
+      isHidden, cyclicvoltaSt, alignCompareXSt,
       integationSt, mtplySt, axesUnitsSt,
     } = this.props;
     this.normChange(prevProps);
@@ -133,6 +134,7 @@ class ViewerMulti extends React.Component {
       cyclicvoltaSt,
       integationSt,
       mtplySt,
+      alignCompareX: alignCompareXSt,
     });
     drawLabel(this.rootKlass, cLabel, xxLabel, yyLabel);
     drawDisplay(this.rootKlass, isHidden);
@@ -159,22 +161,28 @@ class ViewerMulti extends React.Component {
 }
 
 const mapStateToProps = (state, props) => (
-  {
-    curveSt: state.curve,
-    seed: Topic2Seed(state, props),
-    peak: Feature2Peak(state, props),
-    tTrEndPts: ToThresEndPts(state, props),
-    tSfPeaks: ToShiftPeaks(state, props),
-    editPeakSt: state.editPeak.present,
-    layoutSt: state.layout,
-    sweepExtentSt: state.ui.sweepExtent,
-    isUiNoBrushSt: LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
-    cyclicvoltaSt: state.cyclicvolta,
-    maxminPeakSt: Feature2MaxMinPeak(state, props),
-    integationSt: state.integration.present,
-    mtplySt: state.multiplicity.present,
-    axesUnitsSt: state.axesUnits,
-  }
+  (() => {
+    const { curveIdx } = state.curve;
+    const sweepExtentByCurve = state.ui.sweepExtentByCurve || {};
+    const sweepExtentSt = sweepExtentByCurve[curveIdx] || { xExtent: false, yExtent: false };
+    return {
+      curveSt: state.curve,
+      seed: Topic2Seed(state, props),
+      peak: Feature2Peak(state, props),
+      tTrEndPts: ToThresEndPts(state, props),
+      tSfPeaks: ToShiftPeaks(state, props),
+      editPeakSt: state.editPeak.present,
+      layoutSt: state.layout,
+      sweepExtentSt,
+      isUiNoBrushSt: LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
+      alignCompareXSt: state.ui.alignCompareX,
+      cyclicvoltaSt: state.cyclicvolta,
+      maxminPeakSt: Feature2MaxMinPeak(state, props),
+      integationSt: state.integration.present,
+      mtplySt: state.multiplicity.present,
+      axesUnitsSt: state.axesUnits,
+    };
+  })()
 );
 
 const mapDispatchToProps = (dispatch) => (
@@ -217,6 +225,7 @@ ViewerMulti.propTypes = {
   addCylicVoltaMinPeakAct: PropTypes.func.isRequired,
   cLabel: PropTypes.string,
   axesUnitsSt: PropTypes.object.isRequired,
+  alignCompareXSt: PropTypes.bool.isRequired,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ViewerMulti);
diff --git a/src/components/d3_multi/multi_focus.js b/src/components/d3_multi/multi_focus.js
index 0aa34ada..0a9d4c9c 100644
--- a/src/components/d3_multi/multi_focus.js
+++ b/src/components/d3_multi/multi_focus.js
@@ -96,6 +96,7 @@ class MultiFocus {
     this.onClickPecker = this.onClickPecker.bind(this);
     this.isFirefox = typeof InstallTrigger !== 'undefined';
     this.cyclicvoltaSt = null;
+    this.alignCompareX = true;
   }
 
   getGlobalXExtent() {
@@ -272,18 +273,25 @@ class MultiFocus {
     d3.selectAll('.line-clip-compare').remove();
     if (!this.otherLineData) return null;
 
-    const { yt } = TfRescale(this);
-    const globalXExtent = this.getGlobalXExtent();
-
-    const reverse = this.reverseXAxis(this.layout);
-    const xRange = reverse ? [this.w, 0] : [0, this.w];
-    const xtGlobal = d3.scaleLinear()
-      .domain([globalXExtent.xL, globalXExtent.xU])
-      .range(xRange);
-
-    const globalPathCall = d3.line()
-      .x((d) => xtGlobal(d.x))
-      .y((d) => yt(d.y));
+    const { xt, yt } = TfRescale(this);
+    let globalPathCall;
+
+    if (this.alignCompareX) {
+      const globalXExtent = this.getGlobalXExtent();
+      const reverse = this.reverseXAxis(this.layout);
+      const xRange = reverse ? [this.w, 0] : [0, this.w];
+      const xtGlobal = d3.scaleLinear()
+        .domain([globalXExtent.xL, globalXExtent.xU])
+        .range(xRange);
+
+      globalPathCall = d3.line()
+        .x((d) => xtGlobal(d.x))
+        .y((d) => yt(d.y));
+    } else {
+      globalPathCall = d3.line()
+        .x((d) => xt(d.x))
+        .y((d) => yt(d.y));
+    }
 
     this.otherLineData.forEach((entry, idx) => {
       const { data, color } = entry;
@@ -1044,6 +1052,7 @@ class MultiFocus {
     sweepExtentSt, isUiNoBrushSt,
     cyclicvoltaSt,
     integationSt, mtplySt,
+    alignCompareX,
   }) {
     this.svg = d3.select(this.rootKlass).select('.d3Svg');
     MountMainFrame(this, 'focus');
@@ -1057,6 +1066,7 @@ class MultiFocus {
     this.scales = InitScale(this, this.reverseXAxis(layoutSt));
     this.setTip();
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt, jcampIdx);
+    this.alignCompareX = alignCompareX;
     MountCompass(this);
 
     this.axis = MountAxis(this);
@@ -1090,6 +1100,7 @@ class MultiFocus {
     editPeakSt, layoutSt,
     sweepExtentSt, isUiNoBrushSt, cyclicvoltaSt,
     integationSt, mtplySt,
+    alignCompareX,
   }) {
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.scales = InitScale(this, this.reverseXAxis(layoutSt));
@@ -1100,6 +1111,7 @@ class MultiFocus {
     this.entities = entities;
 
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt, jcampIdx);
+    this.alignCompareX = alignCompareX;
 
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
diff --git a/src/components/d3_rect/index.js b/src/components/d3_rect/index.js
index bcc53ee3..823cb73f 100644
--- a/src/components/d3_rect/index.js
+++ b/src/components/d3_rect/index.js
@@ -101,15 +101,20 @@ class ViewerRect extends React.Component {
 }
 
 const mapStateToProps = (state, props) => (
-  {
-    seed: Topic2Seed(state, props),
-    peak: Feature2Peak(state, props),
-    tTrEndPts: ToThresEndPts(state, props),
-    tSfPeaks: ToShiftPeaks(state, props),
-    sweepExtentSt: state.ui.sweepExtent,
-    isUiAddIntgSt: state.ui.sweepType === LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
-    isUiNoBrushSt: LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
-  }
+  (() => {
+    const { curveIdx } = state.curve;
+    const sweepExtentByCurve = state.ui.sweepExtentByCurve || {};
+    const sweepExtentSt = sweepExtentByCurve[curveIdx] || { xExtent: false, yExtent: false };
+    return {
+      seed: Topic2Seed(state, props),
+      peak: Feature2Peak(state, props),
+      tTrEndPts: ToThresEndPts(state, props),
+      tSfPeaks: ToShiftPeaks(state, props),
+      sweepExtentSt,
+      isUiAddIntgSt: state.ui.sweepType === LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
+      isUiNoBrushSt: LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
+    };
+  })()
 );
 
 const mapDispatchToProps = (dispatch) => (
diff --git a/src/constants/action_type.js b/src/constants/action_type.js
index b24feee7..52a357b6 100644
--- a/src/constants/action_type.js
+++ b/src/constants/action_type.js
@@ -53,6 +53,9 @@ const UI = {
   VIEWER: {
     SET_TYPE: 'UI_VIEWER_SET_TYPE',
   },
+  COMPARE: {
+    SET_ALIGN_X: 'UI_COMPARE_SET_ALIGN_X',
+  },
   SWEEP: {
     SET_TYPE: 'UI_SWEEP_SET_TYPE',
     SELECT: 'UI_SWEEP_SELECT',
diff --git a/src/reducers/reducer_ui.js b/src/reducers/reducer_ui.js
index 91ca1959..db391ebe 100644
--- a/src/reducers/reducer_ui.js
+++ b/src/reducers/reducer_ui.js
@@ -9,7 +9,9 @@ const initialState = {
   viewer: LIST_UI_VIEWER_TYPE.SPECTRUM,
   sweepType: LIST_UI_SWEEP_TYPE.ZOOMIN,
   sweepExtent: { xExtent: false, yExtent: false },
+  sweepExtentByCurve: {},
   jcampIdx: 0,
+  alignCompareX: true,
 };
 
 const uiReducer = (state = initialState, action) => {
@@ -20,8 +22,14 @@ const uiReducer = (state = initialState, action) => {
       });
     case UI.SWEEP.SET_TYPE:
       if (action.payload === LIST_UI_SWEEP_TYPE.ZOOMRESET) {
+        const curveIdx = typeof action.jcampIdx === 'number' ? action.jcampIdx : 0;
         return Object.assign({}, state, {
           sweepExtent: { xExtent: false, yExtent: false },
+          sweepExtentByCurve: Object.assign(
+            {},
+            state.sweepExtentByCurve,
+            { [curveIdx]: { xExtent: false, yExtent: false } },
+          ),
         });
       }
       return Object.assign({}, state, {
@@ -29,8 +37,21 @@ const uiReducer = (state = initialState, action) => {
         jcampIdx: action.jcampIdx,
       });
     case UI.SWEEP.SELECT_ZOOMIN:
+    {
+      const curveIdx = typeof action.curveIdx === 'number' ? action.curveIdx : 0;
+      const nextSweepExtentByCurve = Object.assign(
+        {},
+        state.sweepExtentByCurve,
+        { [curveIdx]: action.payload },
+      );
       return Object.assign({}, state, {
         sweepExtent: action.payload,
+        sweepExtentByCurve: nextSweepExtentByCurve,
+      });
+    }
+    case UI.COMPARE.SET_ALIGN_X:
+      return Object.assign({}, state, {
+        alignCompareX: action.payload,
       });
     case MANAGER.RESETALL:
       return initialState;
diff --git a/src/sagas/saga_ui.js b/src/sagas/saga_ui.js
index 05f5d5c6..1e846415 100644
--- a/src/sagas/saga_ui.js
+++ b/src/sagas/saga_ui.js
@@ -30,6 +30,7 @@ function* selectUiSweep(action) {
       yield put({
         type: UI.SWEEP.SELECT_ZOOMIN,
         payload,
+        curveIdx,
       });
       break;
     case LIST_UI_SWEEP_TYPE.ZOOMRESET:
@@ -68,6 +69,8 @@ const getLayoutSt = (state) => state.layout;
 
 function* scrollUiWheel(action) {
   const layoutSt = yield select(getLayoutSt);
+  const curveSt = yield select(getCurveSt);
+  const { curveIdx } = curveSt;
   const { payload } = action;
   const { xExtent, yExtent, direction } = payload;
   const { yL, yU } = yExtent;
@@ -105,6 +108,7 @@ function* scrollUiWheel(action) {
   yield put({
     type: UI.SWEEP.SELECT_ZOOMIN,
     payload: nextExtent,
+    curveIdx,
   });
 }