@complat/react-spectra-editor 1.7.0 → 1.8.0

package/dist/components/hplc_viewer.js

@@ -0,0 +1,169 @@
+"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 _reactRedux = require("react-redux");
+var _redux = require("redux");
+var _styles = require("@mui/styles");
+var _material = require("@mui/material");
+var _index = _interopRequireDefault(require("./panel/index"));
+var _index2 = _interopRequireDefault(require("./cmd_bar/index"));
+var _index3 = _interopRequireDefault(require("./d3_line_rect/index"));
+var _lc_ms_uv_tools_bar = _interopRequireDefault(require("./lc_ms_uv_tools_bar"));
+var _extractEntityLCMS = require("../helpers/extractEntityLCMS");
+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 */
+
+const styles = () => ({
+  root: {
+    flexGrow: 1
+  },
+  appBar: {
+    backgroundColor: '#fff',
+    boxShadow: 'none'
+  },
+  tabLabel: {
+    fontSize: '14px'
+  }
+});
+class HPLCViewer extends _react.default.Component {
+  // eslint-disable-line
+  render() {
+    const {
+      classes,
+      curveState,
+      operations,
+      entityFileNames,
+      entities,
+      userManualLink,
+      molSvg,
+      theoryMass,
+      integrationState,
+      hplcMsState,
+      descriptions,
+      canChangeDescription,
+      onDescriptionChanged,
+      editorOnly,
+      forecast,
+      onLcmsPageRequest
+    } = this.props;
+    if (!entities || entities.length === 0) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
+    const {
+      curveIdx
+    } = curveState;
+    const entity = entities[curveIdx];
+    if (!entity) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
+    const {
+      feature,
+      topic
+    } = entity || {};
+    const {
+      ticEntities,
+      uvvisEntities,
+      mzEntities
+    } = (0, _extractEntityLCMS.splitAndReindexEntities)(entities);
+    const displayFeature = feature || entities[0]?.feature || entities[0]?.features?.[0] || {};
+    const hasEdit = !!displayFeature?.data?.[0]?.x?.length;
+    const {
+      integrations
+    } = integrationState;
+    const currentIntegration = integrations[curveIdx];
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.root,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
+        feature: displayFeature,
+        hasEdit: hasEdit,
+        forecast: forecast || {},
+        operations: operations,
+        editorOnly: editorOnly,
+        hideThreshold: true,
+        hideMainEditTools: true,
+        prependLcMsToolbar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lc_ms_uv_tools_bar.default, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "react-spectrum-editor",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          container: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+            item: true,
+            xs: 9,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, {
+              ticEntities: ticEntities,
+              uvvisEntities: uvvisEntities,
+              mzEntities: mzEntities,
+              topic: topic,
+              xLabel: displayFeature?.xUnit || '',
+              yLabel: displayFeature?.yUnit || '',
+              feature: displayFeature,
+              jcampIdx: curveIdx,
+              hplcMsSt: hplcMsState,
+              isHidden: false,
+              omitUvvisToolbarRow: true,
+              onLcmsPageRequest: onLcmsPageRequest
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+            item: true,
+            xs: 3,
+            align: "center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
+              entities: entities,
+              jcampIdx: curveIdx,
+              entityFileNames: entityFileNames,
+              userManualLink: userManualLink,
+              feature: displayFeature,
+              molSvg: molSvg,
+              theoryMass: theoryMass,
+              descriptions: descriptions,
+              integration: currentIntegration,
+              canChangeDescription: canChangeDescription,
+              onDescriptionChanged: onDescriptionChanged,
+              editorOnly: editorOnly
+            })
+          })]
+        })
+      })]
+    });
+  }
+}
+const mapStateToProps = state => ({
+  curveState: state.curve,
+  entities: state.curve.listCurves,
+  integrationState: state.integration.present,
+  hplcMsState: state.hplcMs
+});
+HPLCViewer.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  entityFileNames: _propTypes.default.array.isRequired,
+  molSvg: _propTypes.default.string.isRequired,
+  curveState: _propTypes.default.object.isRequired,
+  operations: _propTypes.default.array.isRequired,
+  forecast: _propTypes.default.object,
+  userManualLink: _propTypes.default.object,
+  entities: _propTypes.default.array,
+  theoryMass: _propTypes.default.string,
+  integrationState: _propTypes.default.object.isRequired,
+  hplcMsState: _propTypes.default.object.isRequired,
+  descriptions: _propTypes.default.array.isRequired,
+  canChangeDescription: _propTypes.default.bool.isRequired,
+  onDescriptionChanged: _propTypes.default.func,
+  onLcmsPageRequest: _propTypes.default.func,
+  editorOnly: _propTypes.default.bool.isRequired
+};
+HPLCViewer.defaultProps = {
+  entityFileNames: [],
+  molSvg: '',
+  cLabel: '',
+  xLabel: '',
+  yLabel: '',
+  entities: [],
+  forecast: {},
+  onDescriptionChanged: () => {},
+  onLcmsPageRequest: null
+};
+var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps), (0, _styles.withStyles)(styles))(HPLCViewer);

package/dist/components/lc_ms_uv_tools_bar.js

@@ -0,0 +1,175 @@
+"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 _reactRedux = require("react-redux");
+var _redux = require("redux");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _material = require("@mui/material");
+var _ZoomInOutlined = _interopRequireDefault(require("@mui/icons-material/ZoomInOutlined"));
+var _FindReplaceOutlined = _interopRequireDefault(require("@mui/icons-material/FindReplaceOutlined"));
+var _Undo = _interopRequireDefault(require("@mui/icons-material/Undo"));
+var _Redo = _interopRequireDefault(require("@mui/icons-material/Redo"));
+var _common = require("./cmd_bar/common");
+var _integration = _interopRequireDefault(require("./cmd_bar/04_integration"));
+var _peak = _interopRequireDefault(require("./cmd_bar/03_peak"));
+var _ui = require("../actions/ui");
+var _hplc_ms = require("../actions/hplc_ms");
+var _list_ui = require("../constants/list_ui");
+var _wavelengthSelect = _interopRequireDefault(require("../features/lc-ms/ui/wavelengthSelect"));
+var _jsxRuntime = require("react/jsx-runtime");
+/* eslint-disable no-mixed-operators, prefer-object-spread, react/function-component-definition */
+
+const styles = () => Object.assign({}, _common.commonStyle);
+const zoomView = (classes, graphIndex, uiSt, zoomInAct) => {
+  const onSweepZoomIn = () => {
+    zoomInAct({
+      graphIndex,
+      sweepType: _list_ui.LIST_UI_SWEEP_TYPE.ZOOMIN
+    });
+  };
+  const onSweepZoomReset = () => {
+    zoomInAct({
+      graphIndex,
+      sweepType: _list_ui.LIST_UI_SWEEP_TYPE.ZOOMRESET
+    });
+    zoomInAct({
+      graphIndex,
+      sweepType: _list_ui.LIST_UI_SWEEP_TYPE.ZOOMIN
+    });
+  };
+  const {
+    zoom
+  } = uiSt;
+  const {
+    sweepTypes
+  } = zoom;
+  const isZoomFocus = sweepTypes[graphIndex] === _list_ui.LIST_UI_SWEEP_TYPE.ZOOMIN;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: classes.group,
+    "data-testid": "Zoom",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Zoom In"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: (0, _classnames.default)((0, _common.focusStyle)(isZoomFocus, 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)(_material.Tooltip, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "txt-sv-tp",
+        children: "Reset Zoom"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+        className: "btn-sv-bar-zoomreset",
+        onClick: onSweepZoomReset,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FindReplaceOutlined.default, {
+          className: classes.icon
+        })
+      })
+    })]
+  });
+};
+const wavelengthSelect = (classes, hplcMsSt, updateWavelengthAct) => (0, _wavelengthSelect.default)(classes, hplcMsSt, updateWavelengthAct, {
+  labelId: 'lcms-select-wavelength-label',
+  label: 'Wavelength (nm)'
+});
+const LcMsUvToolsBar = ({
+  classes,
+  uiSt,
+  hplcMsSt,
+  feature,
+  zoomInAct,
+  selectWavelengthAct,
+  uvvisUndoAct,
+  uvvisRedoAct
+}) => {
+  const handleWavelengthChange = event => {
+    selectWavelengthAct(event);
+  };
+  const hist = hplcMsSt?.uvvisEditHistory || {
+    past: [],
+    future: []
+  };
+  const canUndo = hist.past && hist.past.length > 0;
+  const canRedo = hist.future && hist.future.length > 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [zoomView(classes, 0, uiSt, zoomInAct), wavelengthSelect(classes, hplcMsSt, handleWavelengthChange), /*#__PURE__*/(0, _jsxRuntime.jsx)(_integration.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_peak.default, {
+      feature: feature || {}
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: classes.group,
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "txt-sv-tp",
+          children: "Undo"
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: "btn-sv-bar-uvvis-undo",
+          disabled: !canUndo,
+          onClick: () => uvvisUndoAct(),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Undo.default, {
+            className: classes.icon
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "txt-sv-tp",
+          children: "Redo"
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.MuButton, {
+          className: "btn-sv-bar-uvvis-redo",
+          disabled: !canRedo,
+          onClick: () => uvvisRedoAct(),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Redo.default, {
+            className: classes.icon
+          })
+        })
+      })]
+    })]
+  });
+};
+const mapStateToProps = state => {
+  const {
+    curveIdx,
+    listCurves
+  } = state.curve;
+  const entity = listCurves[curveIdx];
+  const displayFeature = entity?.feature || listCurves[0]?.feature || listCurves[0]?.features?.[0] || {};
+  return {
+    uiSt: state.ui,
+    hplcMsSt: state.hplcMs,
+    feature: displayFeature
+  };
+};
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  zoomInAct: _ui.setUiSweepType,
+  selectWavelengthAct: _hplc_ms.selectWavelength,
+  uvvisUndoAct: _hplc_ms.uvvisUndo,
+  uvvisRedoAct: _hplc_ms.uvvisRedo
+}, dispatch);
+LcMsUvToolsBar.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  uiSt: _propTypes.default.object.isRequired,
+  hplcMsSt: _propTypes.default.object.isRequired,
+  feature: _propTypes.default.object.isRequired,
+  zoomInAct: _propTypes.default.func.isRequired,
+  selectWavelengthAct: _propTypes.default.func.isRequired,
+  uvvisUndoAct: _propTypes.default.func.isRequired,
+  uvvisRedoAct: _propTypes.default.func.isRequired
+};
+var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _withStyles.default)(styles))(LcMsUvToolsBar);

package/dist/components/multi_jcamps_viewer.js

@@ -97,7 +97,9 @@ class MultiJcampsViewer extends _react.default.Component {
       integrationSt,
       descriptions,
       canChangeDescription,
-      onDescriptionChanged
+      onDescriptionChanged,
+      forecast,
+      editorOnly
     } = this.props;
     if (!entities || entities.length === 0) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
     const separateCondition = _format.default.isGCLayout(layoutSt) ? 'yUnit' : 'xUnit';
@@ -114,13 +116,18 @@ class MultiJcampsViewer extends _react.default.Component {
       integrations
     } = integrationSt;
     const currentIntegration = integrations[curveIdx];
+    const hasEdit = !!feature?.data?.[0]?.x?.length;
+    const xLabel = feature?.xUnit || '';
+    const yLabel = feature?.yUnit || '';
     const isCyclicVolta = _format.default.isCyclicVoltaLayout(layoutSt);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes.root,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
         feature: feature,
+        hasEdit: hasEdit,
+        forecast: forecast || {},
         operations: operations,
-        editorOnly: true,
+        editorOnly: editorOnly,
         hideThreshold: !_format.default.isNmrLayout(layoutSt)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classnames.default)('react-spectrum-editor', isCyclicVolta && classes.cvEditor),
@@ -136,8 +143,8 @@ class MultiJcampsViewer extends _react.default.Component {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, {
                 entities: entities,
                 topic: topic,
-                xLabel: feature.xUnit,
-                yLabel: feature.yUnit,
+                xLabel: xLabel,
+                yLabel: yLabel,
                 feature: feature
               })
             }), isCyclicVolta ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -162,6 +169,7 @@ class MultiJcampsViewer extends _react.default.Component {
               subLayoutsInfo: seperatedSubLayouts,
               integration: currentIntegration,
               descriptions: descriptions,
+              editorOnly: editorOnly,
               canChangeDescription: canChangeDescription,
               onDescriptionChanged: onDescriptionChanged,
               hideCyclicVolta: isCyclicVolta
@@ -199,7 +207,9 @@ MultiJcampsViewer.propTypes = {
   addNewCylicVoltaPairPeakAct: _propTypes.default.func.isRequired,
   addCylicVoltaMaxPeakAct: _propTypes.default.func.isRequired,
   addCylicVoltaMinPeakAct: _propTypes.default.func.isRequired,
-  operations: _propTypes.default.func.isRequired,
+  operations: _propTypes.default.array.isRequired,
+  forecast: _propTypes.default.object,
+  editorOnly: _propTypes.default.bool,
   userManualLink: _propTypes.default.object,
   entities: _propTypes.default.array,
   layoutSt: _propTypes.default.string.isRequired,
@@ -217,6 +227,8 @@ MultiJcampsViewer.defaultProps = {
   xLabel: '',
   yLabel: '',
   entities: [],
+  forecast: {},
+  editorOnly: false,
   descriptions: [],
   canChangeDescription: false
 };

package/dist/components/panel/compare.js

@@ -10,7 +10,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactRedux = require("react-redux");
 var _redux = require("redux");
-var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
 var _material = require("@mui/material");
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _HighlightOff = _interopRequireDefault(require("@mui/icons-material/HighlightOff"));
@@ -130,38 +129,35 @@ const content = (classes, desc) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.T
     children: desc
   })
 });
-const inputOthers = (classes, jcampSt) => {
-  const {
-    selectedIdx,
-    jcamps
-  } = jcampSt;
-  const selectedJcamp = jcamps[selectedIdx];
-  const {
-    addOthersCb
-  } = selectedJcamp;
-  const fileName = '';
-  const desc = fileName || msgDefault;
-  const onDrop = jcampFiles => {
-    if (!addOthersCb) return;
-    addOthersCb({
-      jcamps: jcampFiles
-    });
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDropzone.default, {
-    className: "dropbox",
-    onDrop: onDrop,
-    children: ({
-      getRootProps,
-      getInputProps
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      ...getRootProps(),
-      className: (0, _classnames.default)(classes.baseDD),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        ...getInputProps()
-      }), content(classes, desc)]
-    })
-  });
-};
+const inputOthers = (classes, desc, onDropFiles, onFileChange, inputRef) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  className: (0, _classnames.default)(classes.baseDD),
+  role: "button",
+  tabIndex: 0,
+  onClick: () => inputRef.current?.click(),
+  onKeyDown: event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      inputRef.current?.click();
+    }
+  },
+  onDragOver: event => {
+    event.preventDefault();
+  },
+  onDrop: event => {
+    event.preventDefault();
+    onDropFiles(event.dataTransfer?.files);
+  },
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    ref: inputRef,
+    type: "file",
+    multiple: true,
+    accept: ".dx,.jdx,.jcamp,.JCAMP",
+    style: {
+      display: 'none'
+    },
+    onChange: onFileChange
+  }), content(classes, desc)]
+});
 const compareList = (classes, jcampSt, rmOthersOneAct, toggleShowAct) => {
   const {
     selectedIdx,
@@ -221,37 +217,63 @@ const ComparePanel = ({
   jcampSt,
   rmOthersOneAct,
   toggleShowAct
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
-  expanded: expand,
-  onChange: onExapnd,
-  disableGutters: true,
-  sx: {
-    '&.MuiAccordion-root.Mui-expanded': {
-      margin: 0
-    },
-    '&:before': {
-      display: 'none'
+}) => {
+  const inputRef = _react.default.useRef(null);
+  const {
+    selectedIdx,
+    jcamps
+  } = jcampSt;
+  const selectedJcamp = jcamps[selectedIdx];
+  const {
+    addOthersCb
+  } = selectedJcamp;
+  const desc = msgDefault;
+  const onDropFiles = filesLike => {
+    if (!addOthersCb) return;
+    const droppedFiles = Array.from(filesLike || []);
+    if (droppedFiles.length === 0) return;
+    addOthersCb({
+      jcamps: droppedFiles
+    });
+  };
+  const onFileChange = event => {
+    onDropFiles(event.target.files);
+    if (inputRef.current) {
+      inputRef.current.value = '';
     }
-  },
-  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"
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
+    expanded: expand,
+    onChange: onExapnd,
+    disableGutters: true,
+    sx: {
+      '&.MuiAccordion-root.Mui-expanded': {
+        margin: 0
+      },
+      '&:before': {
+        display: 'none'
+      }
+    },
+    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)
-  })]
-});
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), inputOthers(classes, desc, onDropFiles, onFileChange, inputRef), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(classes.panelDetail),
+      children: compareList(classes, jcampSt, rmOthersOneAct, toggleShowAct)
+    })]
+  });
+};
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {

package/dist/components/panel/cyclic_voltamery_data.js

@@ -146,7 +146,7 @@ const styles = () => ({
 });
 const CyclicVoltammetryPanel = ({
   classes,
-  cyclicVotaSt,
+  cyclicVoltaState,
   feature,
   addNewPairPeakAct,
   setWorkWithMaxPeakAct,
@@ -161,24 +161,25 @@ const CyclicVoltammetryPanel = ({
   const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
   const {
     spectraList
-  } = cyclicVotaSt;
+  } = cyclicVoltaState;
   const spectra = spectraList[jcampIdx];
   let list = [];
   if (spectra !== undefined) {
     list = spectra.list;
   }
-  const formatCurrent = (y, feature, cyclicVotaSt) => {
+  const formatCurrent = (y, feature, cyclicVoltaState) => {
     const baseY = feature && feature.yUnit ? String(feature.yUnit) : 'A';
     const isMilli = /mA/i.test(baseY);
-    const useDensity = cyclicVotaSt && cyclicVotaSt.useCurrentDensity;
-    const rawArea = (cyclicVotaSt && cyclicVotaSt.areaValue === '' ? 1.0 : cyclicVotaSt?.areaValue) || 1.0;
-    const areaUnit = cyclicVotaSt && cyclicVotaSt.areaUnit ? cyclicVotaSt.areaUnit : 'cm²';
+    const useDensity = cyclicVoltaState && cyclicVoltaState.useCurrentDensity;
+    const rawArea = (cyclicVoltaState && cyclicVoltaState.areaValue === '' ? 1.0 : cyclicVoltaState?.areaValue) || 1.0;
+    const areaUnit = cyclicVoltaState && cyclicVoltaState.areaUnit ? cyclicVoltaState.areaUnit : 'cm²';
     const safeArea = rawArea > 0 ? rawArea : 1.0;
+    const areaInCm2 = areaUnit === 'mm²' ? safeArea / 100.0 : safeArea;
     let val = y;
     let unit = isMilli ? 'mA' : 'A';
     if (useDensity) {
-      val = y / safeArea;
-      unit = `${unit}/${areaUnit}`;
+      val = y / areaInCm2;
+      unit = `${unit}/cm²`;
     }
     if (isMilli) {
       val *= 1000.0;
@@ -226,9 +227,9 @@ const CyclicVoltammetryPanel = ({
   };
   const rows = list.map((o, idx) => ({
     idx,
-    max: o.max ? `E: ${_format.default.strNumberFixedLength(parseFloat(o.max.x), 3)} V,\nI: ${formatCurrent(o.max.y, feature, cyclicVotaSt)}` : 'nd',
-    min: o.min ? `E: ${_format.default.strNumberFixedLength(parseFloat(o.min.x), 3)} V,\nI: ${formatCurrent(o.min.y, feature, cyclicVotaSt)}` : 'nd',
-    pecker: o.pecker ? `${formatCurrent(o.pecker.y, feature, cyclicVotaSt)}` : 'nd',
+    max: o.max ? `E: ${_format.default.strNumberFixedLength(parseFloat(o.max.x), 3)} V,\nI: ${formatCurrent(o.max.y, feature, cyclicVoltaState)}` : 'nd',
+    min: o.min ? `E: ${_format.default.strNumberFixedLength(parseFloat(o.min.x), 3)} V,\nI: ${formatCurrent(o.min.y, feature, cyclicVoltaState)}` : 'nd',
+    pecker: o.pecker ? `${formatCurrent(o.pecker.y, feature, cyclicVoltaState)}` : 'nd',
     delta: `${getDelta(o)} mV`,
     ratio: getRatio(feature, o),
     e12: typeof o.e12 === 'number' ? `${_format.default.strNumberFixedLength(o.e12, 3)} V` : 'nd',
@@ -262,7 +263,7 @@ const CyclicVoltammetryPanel = ({
           className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title'),
           children: "Voltammetry data"
         }), ' - ', /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          children: ["Mode: ", cyclicVotaSt.useCurrentDensity ? 'Current Density' : 'Current']
+          children: ["Mode: ", cyclicVoltaState.useCurrentDensity ? 'Current Density' : 'Current']
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: classes.cvModeWarning,
           children: "WE-ECSA must be set when switching to Current Density."
@@ -436,7 +437,7 @@ const CyclicVoltammetryPanel = ({
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {
-  cyclicVotaSt: state.cyclicvolta,
+  cyclicVoltaState: state.cyclicvolta,
   sweepTypeSt: state.ui.sweepType
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
@@ -450,7 +451,7 @@ const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
 CyclicVoltammetryPanel.propTypes = {
   classes: _propTypes.default.object.isRequired,
   feature: _propTypes.default.object.isRequired,
-  cyclicVotaSt: _propTypes.default.object.isRequired,
+  cyclicVoltaState: _propTypes.default.object.isRequired,
   addNewPairPeakAct: _propTypes.default.func.isRequired,
   setWorkWithMaxPeakAct: _propTypes.default.func.isRequired,
   selectPairPeakAct: _propTypes.default.func.isRequired,