feat: support multi-spectrum comparison in SpectraEditor

dist/actions/threshold.js

@@ -10,9 +10,9 @@ const updateThresholdValue = payload => ({
   payload
 });
 exports.updateThresholdValue = updateThresholdValue;
-const resetThresholdValue = () => ({
+const resetThresholdValue = (payload = false) => ({
   type: _action_type.THRESHOLD.RESET_VALUE,
-  payload: false
+  payload
 });
 exports.resetThresholdValue = resetThresholdValue;
 const toggleThresholdIsEdit = payload => ({

dist/actions/ui.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setUiViewerType = exports.setUiSweepType = exports.selectUiSweep = exports.scrollUiWheel = exports.displaySubViewerAt = exports.clickUiTarget = void 0;
+exports.setUiViewerType = exports.setUiSweepType = exports.selectUiSweep = exports.scrollUiWheel = exports.restoreSweepExtent = exports.displaySubViewerAt = exports.clickUiTarget = void 0;
 var _action_type = require("../constants/action_type");
 var _list_ui = require("../constants/list_ui");
 var _integration_draft = require("../helpers/integration_draft.js");
@@ -45,15 +45,25 @@ const scrollUiWheel = payload => ({
   payload
 });
 exports.scrollUiWheel = scrollUiWheel;
-const clickUiTarget = (payload, onPeak, voltammetryPeakIdx = 0, jcampIdx = 0, onPecker = false, sourceHint = null) => ({
-  type: _action_type.UI.CLICK_TARGET,
-  payload,
-  onPeak,
-  voltammetryPeakIdx,
-  jcampIdx,
-  onPecker,
-  sourceHint
+const restoreSweepExtent = payload => ({
+  type: _action_type.UI.SWEEP.SELECT_ZOOMIN,
+  payload
 });
+exports.restoreSweepExtent = restoreSweepExtent;
+const clickUiTarget = (payload, onPeak, voltammetryPeakIdx, jcampIdx, onPecker, sourceHint) => {
+  const action = {
+    type: _action_type.UI.CLICK_TARGET,
+    payload,
+    onPeak,
+    voltammetryPeakIdx: voltammetryPeakIdx ?? 0,
+    onPecker: onPecker ?? false,
+    sourceHint: sourceHint ?? null
+  };
+  if (Number.isFinite(jcampIdx)) {
+    action.jcampIdx = jcampIdx;
+  }
+  return action;
+};
 exports.clickUiTarget = clickUiTarget;
 const displaySubViewerAt = payload => ({
   type: _action_type.UI.SUB_VIEWER.DISPLAY_VIEWER_AT,

dist/app.js

@@ -72,6 +72,8 @@ const SpectraEditor = ({
   multiMolSvgs,
   entityFileNames,
   userManualLink,
+  curveIdx,
+  sweepExtent,
   onLcmsPageRequest
 }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRedux.Provider, {
   store: store,
@@ -80,6 +82,8 @@ const SpectraEditor = ({
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layer_init.default, {
       entity: entity,
       multiEntities: multiEntities,
+      curveIdx: curveIdx,
+      sweepExtent: sweepExtent,
       entityFileNames: entityFileNames,
       userManualLink: userManualLink,
       others: others,
@@ -103,6 +107,8 @@ exports.SpectraEditor = SpectraEditor;
 SpectraEditor.propTypes = {
   entity: _propTypes.default.object.isRequired,
   multiEntities: _propTypes.default.array,
+  curveIdx: _propTypes.default.number,
+  sweepExtent: _propTypes.default.object,
   entityFileNames: _propTypes.default.array,
   others: _propTypes.default.object,
   cLabel: _propTypes.default.string,

dist/components/cmd_bar/01_viewer.js

@@ -49,19 +49,16 @@ const Viewer = ({
           })
         })
       })
-    }), hideCmdAnaViewerSt ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    }), hideCmdAnaViewerSt || disableCmdAnaViewerSt ? 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)("span", {
-        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
-          })
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: (0, _classnames.default)((0, _common.focusStyle)(isfocusAnalysisSt, classes), 'btn-sv-bar-analysis'),
+        onClick: onViewAnalysis,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpellcheckOutlined.default, {
+          className: classes.icon
         })
       })
     })]

dist/components/cmd_bar/03_peak.js

@@ -65,6 +65,13 @@ const Peak = ({
       });
     }
   };
+  const showAddPeak = !disableAddPeakSt;
+  const showRmPeak = !disableRmPeakSt;
+  const showSetRef = !disableSetRefSt;
+  const showClearAll = !disableRmPeakSt;
+  if (!showAddPeak && !showRmPeak && !showSetRef && !showClearAll) {
+    return null;
+  }
   if (isHandleMaxAndMinPeaksSt) {
     const {
       spectraList
@@ -87,60 +94,57 @@ const Peak = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     className: classes.group,
     "data-testid": "Peak",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    children: [showAddPeak ? /*#__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, {
+    }) : null, showRmPeak ? /*#__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,
+          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, {
+    }) : null, showClearAll ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tri_btn.default, {
       content: {
         tp: 'Clear All Peaks'
       },
       cb: onClearAll,
-      isClearAllDisabled: disableRmPeakSt,
+      isClearAllDisabled: false,
       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, {
+    }) : null, showSetRef ? /*#__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

dist/components/cmd_bar/04_integration.js

@@ -46,7 +46,7 @@ const styles = () => Object.assign({
   }
 }, _common.commonStyle);
 const iconSize = '16px';
-const setFactor = (classes, isDisable, integrationSt, setIntegrationFkrAct, curveIdx) => {
+const setFactor = (classes, integrationSt, setIntegrationFkrAct, curveIdx) => {
   const onFactorChanged = e => {
     e.target.blur();
     setIntegrationFkrAct({
@@ -72,7 +72,6 @@ const setFactor = (classes, isDisable, integrationSt, setIntegrationFkrAct, curv
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
     className: classes.field,
-    disabled: isDisable,
     id: "intg-factor-name",
     type: "number",
     value: refFactor,
@@ -146,6 +145,9 @@ const Integration = ({
     }
     setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_VISUAL_SPLIT, curveIdx);
   };
+  if (isDisableSt) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     className: classes.group,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
@@ -156,12 +158,11 @@ const Integration = ({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_common.MuButton, {
           className: (0, _classnames.default)(isFocusAddIntgSt ? classes.cancelBtn : (0, _common.focusStyle)(false, classes), 'btn-add-inter'),
-          disabled: isDisableSt,
           onClick: onSweepIntegtAdd,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
             path: isFocusAddIntgSt ? _js.mdiClose : _js.mdiMathIntegral,
             size: iconSize,
-            color: isFocusAddIntgSt ? '#d32f2f' : iconColor(isDisableSt),
+            color: iconColor(isFocusAddIntgSt),
             className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-addint')
           }), isFocusAddIntgSt ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-addint'),
@@ -177,33 +178,31 @@ const 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),
+            color: iconColor(isFocusRmIntgSt),
             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: "-"
           })]
         })
       })
-    }), ignoreRef ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    }), /*#__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),
+            color: iconColor(isFocusSetRefSt),
             className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-refint')
           })
         })
@@ -217,12 +216,11 @@ const Integration = ({
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_common.MuButton, {
             className: (0, _classnames.default)(isFocusSplitIntgSt ? classes.cancelBtn : (0, _common.focusStyle)(false, classes), 'btn-split-inter'),
-            disabled: isDisableSt,
             onClick: onSweepIntegtSplit,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
               path: isFocusSplitIntgSt ? _js.mdiClose : _js.mdiMathIntegral,
               size: iconSize,
-              color: isFocusSplitIntgSt ? '#d32f2f' : iconColor(isDisableSt),
+              color: isFocusSplitIntgSt ? '#d32f2f' : iconColor(false),
               className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-splitint')
             }), isFocusSplitIntgSt ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-splitint'),
@@ -238,12 +236,11 @@ const Integration = ({
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_common.MuButton, {
             className: (0, _classnames.default)(isFocusVisualSplitIntgSt ? classes.cancelBtn : (0, _common.focusStyle)(false, classes), 'btn-visual-split-inter'),
-            disabled: isDisableSt,
             onClick: onSweepIntegtVisualSplit,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
               path: isFocusVisualSplitIntgSt ? _js.mdiClose : _js.mdiMathIntegral,
               size: iconSize,
-              color: isFocusVisualSplitIntgSt ? '#d32f2f' : iconColor(isDisableSt),
+              color: isFocusVisualSplitIntgSt ? '#d32f2f' : iconColor(false),
               className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-visualsplitint')
             }), isFocusVisualSplitIntgSt ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-visualsplitint'),
@@ -252,15 +249,15 @@ const Integration = ({
           })
         })
       })]
-    }) : null, !ignoreRef ? setFactor(classes, isDisableSt, integrationSt, setIntegrationFkrAct, curveIdx) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tri_btn.default, {
+    }) : null, !ignoreRef ? setFactor(classes, 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),
+        color: iconColor(false),
         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'),

dist/components/cmd_bar/05_multiplicity.js

@@ -29,10 +29,8 @@ const Multiplicity = ({
   isFocusAddMpySt,
   disableAddMpySt,
   isFocusRmMpySt,
-  disableRmMpySt,
   isFocusAddPeakSt,
   isFocusRmPeakSt,
-  disableMpyPeakSt,
   setUiSweepTypeAct,
   clearMpyAllAct,
   curveSt
@@ -47,6 +45,9 @@ const Multiplicity = ({
   const onClearAll = () => clearMpyAllAct({
     curveIdx
   });
+  if (disableAddMpySt) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     className: classes.group,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
@@ -57,7 +58,6 @@ const 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'),
@@ -73,7 +73,6 @@ const 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'),
@@ -89,7 +88,6 @@ const 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'),
@@ -105,22 +103,19 @@ const 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, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tri_btn.default, {
       content: {
         tp: 'Clear All Multiplicity'
       },
       cb: onClearAll,
+      isClearAllDisabled: false,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmallmpy'),
         children: "Jx"