@complat/react-spectra-editor 1.7.0 → 1.8.0

package/dist/components/cmd_bar/03_peak.js

@@ -20,6 +20,8 @@ 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 _hplc_ms = require("../../actions/hplc_ms");
+var _list_layout = require("../../constants/list_layout");
 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,
@@ -36,32 +38,37 @@ const Peak = ({
   isFocusSetRefSt,
   disableSetRefSt,
   isHandleMaxAndMinPeaksSt,
-  cyclicVotaSt,
+  cyclicVoltaState,
   curveSt,
   clearAllPeaksAct,
   feature,
   editPeakSt,
   thresSt,
   shiftSt,
-  layoutSt
+  layoutSt,
+  clearAllPeaksHplcMsAct
 }) => {
   let onSweepPeakAdd = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.PEAK_ADD);
-  let onSweepPeakDELETE = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.PEAK_DELETE);
+  let onSweepPeakDelete = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.PEAK_DELETE);
   let onSweepAnchorShift = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.ANCHOR_SHIFT);
   const {
     curveIdx
   } = curveSt;
   const onClearAll = () => {
-    const dataPeaks = (0, _extractPeaksEdit.extractAutoPeaks)(feature, thresSt, shiftSt, layoutSt);
-    clearAllPeaksAct({
-      curveIdx,
-      dataPeaks
-    });
+    if (layoutSt === _list_layout.LIST_LAYOUT.LC_MS) {
+      clearAllPeaksHplcMsAct();
+    } else {
+      const dataPeaks = (0, _extractPeaksEdit.extractAutoPeaks)(feature, thresSt, shiftSt, layoutSt);
+      clearAllPeaksAct({
+        curveIdx,
+        dataPeaks
+      });
+    }
   };
   if (isHandleMaxAndMinPeaksSt) {
     const {
       spectraList
-    } = cyclicVotaSt;
+    } = cyclicVoltaState;
     const spectra = spectraList[curveIdx];
     if (spectra) {
       const {
@@ -69,10 +76,10 @@ const Peak = ({
       } = spectra;
       if (isWorkMaxPeak) {
         onSweepPeakAdd = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_MAX_PEAK, curveIdx);
-        onSweepPeakDELETE = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_MAX_PEAK, curveIdx);
+        onSweepPeakDelete = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_MAX_PEAK, curveIdx);
       } else {
         onSweepPeakAdd = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_MIN_PEAK, curveIdx);
-        onSweepPeakDELETE = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_MIN_PEAK, curveIdx);
+        onSweepPeakDelete = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_MIN_PEAK, curveIdx);
       }
       onSweepAnchorShift = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_SET_REF, curveIdx);
     }
@@ -105,7 +112,7 @@ const Peak = ({
         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-"
@@ -153,7 +160,7 @@ const mapStateToProps = (state, props) => (
   isFocusSetRefSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.ANCHOR_SHIFT || state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_SET_REF,
   disableSetRefSt: _cfg.default.btnCmdSetRef(state.layout),
   isHandleMaxAndMinPeaksSt: !_cfg.default.hidePanelCyclicVolta(state.layout),
-  cyclicVotaSt: state.cyclicvolta,
+  cyclicVoltaState: state.cyclicvolta,
   curveSt: state.curve,
   editPeakSt: state.editPeak.present,
   thresSt: state.threshold.list[state.curve.curveIdx],
@@ -162,7 +169,8 @@ const mapStateToProps = (state, props) => (
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   setUiSweepTypeAct: _ui.setUiSweepType,
-  clearAllPeaksAct: _edit_peak.clearAllPeaks
+  clearAllPeaksAct: _edit_peak.clearAllPeaks,
+  clearAllPeaksHplcMsAct: _hplc_ms.clearAllPeaksHplcMs
 }, dispatch);
 Peak.propTypes = {
   classes: _propTypes.default.object.isRequired,
@@ -174,13 +182,14 @@ Peak.propTypes = {
   disableSetRefSt: _propTypes.default.bool.isRequired,
   setUiSweepTypeAct: _propTypes.default.func.isRequired,
   isHandleMaxAndMinPeaksSt: _propTypes.default.bool.isRequired,
-  cyclicVotaSt: _propTypes.default.object.isRequired,
+  cyclicVoltaState: _propTypes.default.object.isRequired,
   curveSt: _propTypes.default.object.isRequired,
   clearAllPeaksAct: _propTypes.default.func.isRequired,
   feature: _propTypes.default.object.isRequired,
   editPeakSt: _propTypes.default.object.isRequired,
   thresSt: _propTypes.default.object.isRequired,
   layoutSt: _propTypes.default.string.isRequired,
-  shiftSt: _propTypes.default.object.isRequired
+  shiftSt: _propTypes.default.object.isRequired,
+  clearAllPeaksHplcMsAct: _propTypes.default.func.isRequired
 };
 var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _withStyles.default)(styles))(Peak);

package/dist/components/cmd_bar/04_integration.js

@@ -16,22 +16,34 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _react2 = _interopRequireDefault(require("@mdi/react"));
 var _js = require("@mdi/js");
 var _integration = require("../../actions/integration");
+var _hplc_ms = require("../../actions/hplc_ms");
 var _ui = require("../../actions/ui");
 var _list_ui = require("../../constants/list_ui");
+var _integration_draft = require("../../helpers/integration_draft.js");
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _tri_btn = _interopRequireDefault(require("./tri_btn"));
 var _common = require("./common");
 var _format = _interopRequireDefault(require("../../helpers/format"));
+var _list_layout = require("../../constants/list_layout");
 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 */
 
+// eslint-disable-line import/extensions
+
 const styles = () => Object.assign({
   field: {
     width: 80
   },
-  txtIcon: {}
+  txtIcon: {},
+  cancelBtn: {
+    borderColor: '#d32f2f',
+    color: '#d32f2f',
+    '&:hover': {
+      backgroundColor: '#ffebee'
+    }
+  }
 }, _common.commonStyle);
 const iconSize = '16px';
 const setFactor = (classes, isDisable, integrationSt, setIntegrationFkrAct, curveIdx) => {
@@ -82,25 +94,58 @@ const iconColor = criteria => criteria ? '#fff' : '#000';
 const Integration = ({
   classes,
   ignoreRef,
+  showIntegSplitToolsSt,
   isDisableSt,
   isFocusAddIntgSt,
   isFocusRmIntgSt,
   isFocusSetRefSt,
+  isFocusSplitIntgSt,
+  isFocusVisualSplitIntgSt,
   setUiSweepTypeAct,
   setIntegrationFkrAct,
   clearIntegrationAllAct,
   curveSt,
-  integrationSt
+  integrationSt,
+  clearIntegrationAllHplcMsAct,
+  layoutSt
 }) => {
-  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);
   const {
     curveIdx
   } = curveSt;
-  const onClearAll = () => clearIntegrationAllAct({
-    curveIdx
-  });
+  const onCancelTool = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.ZOOMIN, curveIdx);
+  const onSweepIntegtAdd = () => {
+    if (isFocusAddIntgSt) {
+      (0, _integration_draft.clearPendingIntegrationDraft)();
+      onCancelTool();
+      return;
+    }
+    setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_ADD, curveIdx);
+  };
+  const onSweepIntegtRm = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_RM);
+  const onSweepIntegtSR = () => setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_SET_REF);
+  const onClearAll = () => {
+    if (layoutSt === _list_layout.LIST_LAYOUT.LC_MS) {
+      clearIntegrationAllHplcMsAct();
+    } else {
+      clearIntegrationAllAct({
+        curveIdx
+      });
+    }
+  };
+  const onSweepIntegtSplit = () => {
+    if (isFocusSplitIntgSt) {
+      onCancelTool();
+      return;
+    }
+    setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_SPLIT, curveIdx);
+  };
+  const onSweepIntegtVisualSplit = () => {
+    if (isFocusVisualSplitIntgSt) {
+      onCancelTool();
+      return;
+    }
+    setUiSweepTypeAct(_list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_VISUAL_SPLIT, curveIdx);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     className: classes.group,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
@@ -110,15 +155,15 @@ const 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'),
+          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: _js.mdiMathIntegral,
+            path: isFocusAddIntgSt ? _js.mdiClose : _js.mdiMathIntegral,
             size: iconSize,
-            color: iconColor(isFocusAddIntgSt || isDisableSt),
+            color: isFocusAddIntgSt ? '#d32f2f' : iconColor(isDisableSt),
             className: (0, _classnames.default)(classes.iconMdi, 'icon-sv-bar-addint')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          }), isFocusAddIntgSt ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: (0, _classnames.default)(classes.txt, classes.txtIcon, 'txt-sv-bar-addint'),
             children: "+"
           })]
@@ -145,7 +190,7 @@ const Integration = ({
           })]
         })
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    }), ignoreRef ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "txt-sv-tp",
         children: "Set Integration Reference"
@@ -163,7 +208,51 @@ const Integration = ({
           })
         })
       })
-    }), !ignoreRef ? setFactor(classes, isDisableSt, integrationSt, setIntegrationFkrAct, curveIdx) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tri_btn.default, {
+    }), showIntegSplitToolsSt ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "txt-sv-tp",
+          children: "Split 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),
+              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'),
+              children: "/"
+            })]
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "txt-sv-tp",
+          children: "Visual Split 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),
+              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'),
+              children: "|"
+            })]
+          })
+        })
+      })]
+    }) : null, !ignoreRef ? setFactor(classes, isDisableSt, integrationSt, setIntegrationFkrAct, curveIdx) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tri_btn.default, {
       content: {
         tp: 'Clear All Integration'
       },
@@ -187,14 +276,19 @@ const mapStateToProps = (state, props) => (
   isFocusAddIntgSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
   isFocusRmIntgSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_RM,
   isFocusSetRefSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_SET_REF,
+  isFocusSplitIntgSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_SPLIT,
+  isFocusVisualSplitIntgSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_VISUAL_SPLIT,
   ignoreRef: _format.default.isHplcUvVisLayout(state.layout),
+  showIntegSplitToolsSt: _cfg.default.showIntegSplitTools(state.layout),
   curveSt: state.curve,
-  integrationSt: state.integration.present
+  integrationSt: state.integration.present,
+  layoutSt: state.layout
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   setUiSweepTypeAct: _ui.setUiSweepType,
   setIntegrationFkrAct: _integration.setIntegrationFkr,
-  clearIntegrationAllAct: _integration.clearIntegrationAll
+  clearIntegrationAllAct: _integration.clearIntegrationAll,
+  clearIntegrationAllHplcMsAct: _hplc_ms.clearIntegrationAllHplcMs
 }, dispatch);
 Integration.propTypes = {
   classes: _propTypes.default.object.isRequired,
@@ -202,11 +296,16 @@ Integration.propTypes = {
   isFocusAddIntgSt: _propTypes.default.bool.isRequired,
   isFocusRmIntgSt: _propTypes.default.bool.isRequired,
   isFocusSetRefSt: _propTypes.default.bool.isRequired,
+  isFocusSplitIntgSt: _propTypes.default.bool.isRequired,
+  isFocusVisualSplitIntgSt: _propTypes.default.bool.isRequired,
   ignoreRef: _propTypes.default.bool.isRequired,
+  showIntegSplitToolsSt: _propTypes.default.bool.isRequired,
   setUiSweepTypeAct: _propTypes.default.func.isRequired,
   setIntegrationFkrAct: _propTypes.default.func.isRequired,
   clearIntegrationAllAct: _propTypes.default.func.isRequired,
+  clearIntegrationAllHplcMsAct: _propTypes.default.func.isRequired,
   curveSt: _propTypes.default.object.isRequired,
-  integrationSt: _propTypes.default.object.isRequired
+  integrationSt: _propTypes.default.object.isRequired,
+  layoutSt: _propTypes.default.string.isRequired
 };
 var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _withStyles.default)(styles)(Integration));

package/dist/components/cmd_bar/08_peak_group.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _redux = require("redux");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Troubleshoot = _interopRequireDefault(require("@mui/icons-material/Troubleshoot"));
+var _ui = require("../../actions/ui");
+var _common = require("./common");
+var _list_ui = require("../../constants/list_ui");
+var _format = _interopRequireDefault(require("../../helpers/format"));
+var _jsxRuntime = require("react/jsx-runtime");
+/* eslint-disable prefer-object-spread, react/function-component-definition */
+
+const styles = () => Object.assign({}, _common.commonStyle);
+const PeakGroup = ({
+  classes,
+  feature,
+  isSelectingGroupSt,
+  setUiSweepTypeAct,
+  graphIndex
+}) => {
+  if (!feature || !feature.operation) {
+    return null;
+  }
+  const {
+    operation
+  } = feature;
+  const {
+    layout
+  } = operation || {};
+  if (!layout || !_format.default.isLCMsLayout(layout)) {
+    return null;
+  }
+  const onSelectPeakGroup = () => {
+    const payload = {
+      graphIndex,
+      sweepType: _list_ui.LIST_UI_SWEEP_TYPE.PEAK_GROUP_SELECT
+    };
+    setUiSweepTypeAct(payload);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: classes.group,
+    "data-testid": "Zoom",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Select peak group"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: (0, _classnames.default)((0, _common.focusStyle)(isSelectingGroupSt, classes), 'btn-sv-bar-zoomin'),
+        onClick: onSelectPeakGroup,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Troubleshoot.default, {
+          className: (0, _classnames.default)(classes.icon, classes.iconWp)
+        })
+      })
+    })
+  });
+};
+const mapStateToProps = (state, _) => (
+// eslint-disable-line
+{
+  isSelectingGroupSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.PEAK_GROUP_SELECT
+});
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  setUiSweepTypeAct: _ui.setUiSweepType
+}, dispatch);
+PeakGroup.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  feature: _propTypes.default.object.isRequired,
+  isSelectingGroupSt: _propTypes.default.bool.isRequired,
+  setUiSweepTypeAct: _propTypes.default.func.isRequired,
+  graphIndex: _propTypes.default.number.isRequired
+};
+var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _withStyles.default)(styles))(PeakGroup);

package/dist/components/cmd_bar/collapsible_toolbar_group.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.COLLAPSE_THRESHOLD = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _styles = require("@mui/styles");
+var _common = require("./common");
+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, react/require-default-props,
+react/jsx-props-no-spreading */
+
+const COLLAPSE_THRESHOLD = exports.COLLAPSE_THRESHOLD = 4;
+const styles = () => ({
+  groupItemsShell: {
+    display: 'inline-flex',
+    overflow: 'hidden',
+    transition: 'max-width 260ms ease, opacity 200ms ease'
+  },
+  groupItemsCollapsed: {
+    maxWidth: 0,
+    opacity: 0
+  },
+  groupItemsExpanded: {
+    maxWidth: 720,
+    opacity: 1
+  },
+  groupItemsTrack: {
+    alignItems: 'flex-end',
+    display: 'inline-flex',
+    flexWrap: 'nowrap',
+    gap: _common.TOOLBAR_GROUP_GAP,
+    whiteSpace: 'nowrap'
+  },
+  groupChevron: {
+    fontSize: 20,
+    transition: 'transform 220ms ease'
+  },
+  groupChevronExpanded: {
+    transform: 'rotate(90deg)'
+  }
+});
+const countItems = children => _react.default.Children.toArray(children).length;
+const CollapsibleToolbarGroup = ({
+  classes,
+  className,
+  children,
+  collapseThreshold,
+  ...rest
+}) => {
+  const itemCount = countItems(children);
+  const isCollapsible = itemCount > collapseThreshold;
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  if (!isCollapsible) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: className,
+      ...rest,
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: className,
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: expanded ? 'Collapse' : 'Expand',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: "btn-sv-bar-group-toggle",
+          onClick: () => setExpanded(prev => !prev),
+          "aria-expanded": expanded,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChevronRight.default, {
+            className: (0, _classnames.default)(classes.groupChevron, expanded && classes.groupChevronExpanded)
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)(classes.groupItemsShell, expanded ? classes.groupItemsExpanded : classes.groupItemsCollapsed),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: classes.groupItemsTrack,
+        children: children
+      })
+    })]
+  });
+};
+CollapsibleToolbarGroup.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  className: _propTypes.default.string,
+  children: _propTypes.default.node,
+  collapseThreshold: _propTypes.default.number
+};
+CollapsibleToolbarGroup.defaultProps = {
+  collapseThreshold: COLLAPSE_THRESHOLD
+};
+var _default = exports.default = (0, _styles.withStyles)(styles)(CollapsibleToolbarGroup);

package/dist/components/cmd_bar/common.js

@@ -26,18 +26,19 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
     color: 'black'
   }
 }));
-const MuButton = props => {
+const MuButton = exports.MuButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const classes = useStyles();
   const {
     className,
     ...other
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    ref: ref,
     className: (0, _classnames.default)(classes.muiBtn, className),
     ...other
   });
-};
-exports.MuButton = MuButton;
+});
+MuButton.displayName = 'MuButton';
 const commonStyle = exports.commonStyle = {
   card: {
     margin: '0 0 5px 52px',

package/dist/components/cmd_bar/index.js

@@ -30,7 +30,39 @@ 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 styles = () => Object.assign({}, {
+  cardFlex: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    columnGap: 8,
+    rowGap: 4
+  },
+  lcMsToolbarLeft: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    columnGap: 4,
+    rowGap: 4,
+    flex: '1 1 auto',
+    minWidth: 0
+  },
+  lcMsToolbarRight: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    flex: '0 1 auto',
+    minWidth: 0
+  },
+  lcMsToolbarRightCluster: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    columnGap: 8,
+    rowGap: 4
+  }
+}, _common.commonStyle);
 const CmdBar = ({
   classes,
   feature,
@@ -40,19 +72,16 @@ const CmdBar = ({
   editorOnly,
   jcampIdx,
   hideThreshold,
-  layoutSt
+  hideMainEditTools,
+  layoutSt,
+  prependLcMsToolbar
 }) => {
   const isCvLayout = _format.default.isCyclicVoltaLayout(layoutSt);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: classes.card,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_viewer.default, {
-      editorOnly: editorOnly
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_zoom.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_peak.default, {
-      jcampIdx: jcampIdx,
-      feature: feature
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_pecker.default, {
-      jcampIdx: jcampIdx
-    }), isCvLayout ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_integration.default, {}), isCvLayout ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiplicity.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_undo_redo.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r04_submit.default, {
+  const rightCluster = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_r01_layout.default, {
+      feature: feature,
+      hasEdit: hasEdit
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r04_submit.default, {
       operations: operations,
       feature: feature,
       forecast: forecast,
@@ -62,18 +91,42 @@ const CmdBar = ({
     }), hideThreshold ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_r03_threshold.default, {
       feature: feature,
       hasEdit: hasEdit
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r01_layout.default, {
-      feature: feature,
-      hasEdit: hasEdit
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r07_wavelength_btn.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r10_cv_density.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r08_change_axes.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r09_detector.default, {})]
   });
+  if (prependLcMsToolbar) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${classes.card} ${classes.cardFlex}`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.lcMsToolbarLeft,
+        children: prependLcMsToolbar
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.lcMsToolbarRight,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.lcMsToolbarRightCluster,
+          children: rightCluster
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.card,
+    children: [hideMainEditTools ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_viewer.default, {
+        editorOnly: editorOnly
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_zoom.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_peak.default, {
+        jcampIdx: jcampIdx,
+        feature: feature
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_pecker.default, {
+        jcampIdx: jcampIdx
+      }), isCvLayout ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_integration.default, {}), isCvLayout ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiplicity.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_undo_redo.default, {})]
+    }), rightCluster]
+  });
 };
 const mapStateToProps = (state, _) => (
 // eslint-disable-line
 {
   layoutSt: state.layout
 });
-const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch);
 CmdBar.propTypes = {
   classes: _propTypes.default.object.isRequired,
   feature: _propTypes.default.object.isRequired,
@@ -83,6 +136,11 @@ CmdBar.propTypes = {
   editorOnly: _propTypes.default.bool.isRequired,
   layoutSt: _propTypes.default.string.isRequired,
   jcampIdx: _propTypes.default.any,
-  hideThreshold: _propTypes.default.bool
+  hideThreshold: _propTypes.default.bool,
+  hideMainEditTools: _propTypes.default.bool,
+  prependLcMsToolbar: _propTypes.default.node
+};
+CmdBar.defaultProps = {
+  prependLcMsToolbar: null
 };
-var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _withStyles.default)(styles))(CmdBar);
+var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, null), (0, _withStyles.default)(styles))(CmdBar);