@complat/react-spectra-editor 1.5.4 → 1.6.0

package/dist/actions/cyclic_voltammetry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setWorkWithMaxPeak = exports.setCylicVoltaRefFactor = exports.setCylicVoltaRef = exports.selectRefPeaks = exports.selectPairPeak = exports.removeCylicVoltaPecker = exports.removeCylicVoltaPairPeak = exports.removeCylicVoltaMinPeak = exports.removeCylicVoltaMaxPeak = exports.addNewCylicVoltaPairPeak = exports.addCylicVoltaPecker = exports.addCylicVoltaMinPeak = exports.addCylicVoltaMaxPeak = void 0;
+exports.toggleCyclicVoltaDensity = exports.setWorkWithMaxPeak = exports.setCylicVoltaRefFactor = exports.setCylicVoltaRef = exports.setCyclicVoltaAreaValue = exports.setCyclicVoltaAreaUnit = exports.selectRefPeaks = exports.selectPairPeak = exports.removeCylicVoltaPecker = exports.removeCylicVoltaPairPeak = exports.removeCylicVoltaMinPeak = exports.removeCylicVoltaMaxPeak = exports.addNewCylicVoltaPairPeak = exports.addCylicVoltaPecker = exports.addCylicVoltaMinPeak = exports.addCylicVoltaMaxPeak = void 0;
 var _action_type = require("../constants/action_type");
 const addNewCylicVoltaPairPeak = payload => ({
   type: _action_type.CYCLIC_VOLTA_METRY.ADD_PAIR_PEAKS,
@@ -69,4 +69,23 @@ const setCylicVoltaRef = payload => ({
   type: _action_type.CYCLIC_VOLTA_METRY.SET_REF,
   payload
 });
-exports.setCylicVoltaRef = setCylicVoltaRef;
+exports.setCylicVoltaRef = setCylicVoltaRef;
+const setCyclicVoltaAreaValue = value => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.SET_AREA_VALUE,
+  payload: {
+    value
+  }
+});
+exports.setCyclicVoltaAreaValue = setCyclicVoltaAreaValue;
+const setCyclicVoltaAreaUnit = unit => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.SET_AREA_UNIT,
+  payload: {
+    unit
+  }
+});
+exports.setCyclicVoltaAreaUnit = setCyclicVoltaAreaUnit;
+const toggleCyclicVoltaDensity = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.TOGGLE_DENSITY,
+  payload
+});
+exports.toggleCyclicVoltaDensity = toggleCyclicVoltaDensity;

package/dist/components/cmd_bar/index.js

@@ -24,6 +24,8 @@ 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 _r10_cv_density = _interopRequireDefault(require("./r10_cv_density"));
+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 */
@@ -37,34 +39,40 @@ const CmdBar = ({
   operations,
   editorOnly,
   jcampIdx,
-  hideThreshold
-}) => /*#__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
-  }), /*#__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__*/(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)(_r08_change_axes.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_r09_detector.default, {})]
-});
+  hideThreshold,
+  layoutSt
+}) => {
+  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, {
+      operations: operations,
+      feature: feature,
+      forecast: forecast,
+      editorOnly: editorOnly,
+      hideSwitch: false,
+      disabled: false
+    }), 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, {})]
+  });
+};
 const mapStateToProps = (state, _) => (
 // eslint-disable-line
-{});
+{
+  layoutSt: state.layout
+});
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch);
 CmdBar.propTypes = {
   classes: _propTypes.default.object.isRequired,
@@ -73,6 +81,7 @@ CmdBar.propTypes = {
   hasEdit: _propTypes.default.bool.isRequired,
   operations: _propTypes.default.array.isRequired,
   editorOnly: _propTypes.default.bool.isRequired,
+  layoutSt: _propTypes.default.string.isRequired,
   jcampIdx: _propTypes.default.any,
   hideThreshold: _propTypes.default.bool
 };

package/dist/components/cmd_bar/r05_submit_btn.js

@@ -16,14 +16,144 @@ var _styles = require("@mui/styles");
 var _chem = require("../../helpers/chem");
 var _common = require("./common");
 var _extractPeaksEdit = require("../../helpers/extractPeaksEdit");
+var _format = _interopRequireDefault(require("../../helpers/format"));
 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 */
 
 const styles = () => Object.assign({}, _common.commonStyle);
-const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, analysis, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt, detectorSt, dscMetaData) => () => {
-  operation({
+const getAxesSelection = (axesUnitsSt, curveIdx) => {
+  const axes = axesUnitsSt?.axes;
+  if (!Array.isArray(axes) || axes.length === 0) return {
+    xUnit: '',
+    yUnit: ''
+  };
+  const idx = Number.isFinite(curveIdx) ? curveIdx : 0;
+  return axes[idx] || axes[0] || {
+    xUnit: '',
+    yUnit: ''
+  };
+};
+const resolveAxisLabels = (xLabel, yLabel, axesUnitsSt, curveIdx) => {
+  const {
+    xUnit,
+    yUnit
+  } = getAxesSelection(axesUnitsSt, curveIdx);
+  return {
+    xLabel: xUnit === '' ? xLabel : xUnit,
+    yLabel: yUnit === '' ? yLabel : yUnit
+  };
+};
+const getBaseCurrentUnit = label => /mA/i.test(String(label)) ? 'mA' : 'A';
+const buildCvAxisYLabel = (yLabel, cyclicvoltaSt) => {
+  const baseUnit = getBaseCurrentUnit(yLabel);
+  const areaUnit = cyclicvoltaSt?.areaUnit || 'cm²';
+  if (cyclicvoltaSt?.useCurrentDensity) {
+    return `Current density in ${baseUnit}/${areaUnit}`;
+  }
+  return `Current in ${baseUnit}`;
+};
+const computeCvYScaleFactor = (feature, cyclicvoltaSt) => {
+  if (!cyclicvoltaSt?.useCurrentDensity) return 1.0;
+  const rawArea = (cyclicvoltaSt.areaValue === '' ? 1.0 : cyclicvoltaSt.areaValue) || 1.0;
+  const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
+  const safeArea = rawArea > 0 ? rawArea : 1.0;
+  const areaInCm2 = areaUnit === 'mm²' ? safeArea / 100.0 : safeArea;
+  let factor = 1.0 / areaInCm2;
+  const baseY = feature && feature.yUnit ? String(feature.yUnit) : 'A';
+  if (/mA/i.test(baseY)) {
+    factor *= 1000.0;
+  }
+  if (areaUnit === 'mm²') {
+    factor /= 100.0;
+  }
+  return factor;
+};
+const defaultThreshold = {
+  isEdit: true,
+  value: false,
+  upper: false,
+  lower: false
+};
+const pickFromList = (list, index, fallback = null) => Array.isArray(list) && list[index] !== undefined ? list[index] : fallback;
+const buildDstPayload = ({
+  feature,
+  curveIdx,
+  editPeakSt,
+  thresList,
+  shiftSt,
+  layoutSt,
+  scanSt,
+  integrationSt,
+  multiplicitySt,
+  allIntegrationSt,
+  aucValues,
+  waveLengthSt,
+  cyclicvoltaSt,
+  curveSt,
+  axesUnitsSt,
+  detectorSt,
+  dscMetaData,
+  isAscend,
+  isIntensity,
+  analysis,
+  decimalSt
+}) => {
+  const threshold = thresList?.[curveIdx] || thresList?.[0] || defaultThreshold;
+  const editPeakAtIndex = Object.assign({}, editPeakSt, {
+    selectedIdx: curveIdx
+  });
+  const peaksEdit = (0, _extractPeaksEdit.extractPeaksEdit)(feature, editPeakAtIndex, threshold, shiftSt, layoutSt, curveIdx);
+  const scan = (0, _chem.Convert2Scan)(feature, scanSt);
+  const thres = (0, _chem.Convert2Thres)(feature, threshold);
+  const integration = pickFromList(integrationSt?.integrations, curveIdx, integrationSt);
+  const multiplicity = pickFromList(multiplicitySt?.multiplicities, curveIdx, multiplicitySt);
+  const {
+    xLabel,
+    yLabel
+  } = resolveAxisLabels(feature?.xUnit, feature?.yUnit, axesUnitsSt, curveIdx);
+  const axisYLabel = _format.default.isCyclicVoltaLayout(layoutSt) ? buildCvAxisYLabel(yLabel, cyclicvoltaSt) : yLabel;
+  const axisDisplay = {
+    xLabel,
+    yLabel: axisYLabel
+  };
+  const cvDisplay = _format.default.isCyclicVoltaLayout(layoutSt) ? {
+    mode: cyclicvoltaSt?.useCurrentDensity ? 'density' : 'current',
+    yScaleFactor: computeCvYScaleFactor(feature, cyclicvoltaSt)
+  } : null;
+  const cyclicvoltaPayload = {
+    ...cyclicvoltaSt,
+    axisDisplay,
+    cvDisplay
+  };
+  const perCurveSt = Object.assign({}, curveSt, {
+    curveIdx
+  });
+  return {
+    peaks: peaksEdit,
+    layout: layoutSt,
+    shift: shiftSt,
+    scan,
+    thres,
+    isAscend,
+    isIntensity,
+    analysis,
+    decimal: decimalSt,
+    integration,
+    multiplicity,
+    allIntegration: allIntegrationSt,
+    aucValues,
+    waveLength: waveLengthSt,
+    cyclicvoltaSt: cyclicvoltaPayload,
+    curveSt: perCurveSt,
+    axesUnitsSt,
+    detectorSt,
+    dscMetaData
+  };
+};
+const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, analysis, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt, detectorSt, dscMetaData, curveList, editPeakSt, thresList, scanSt, feature) => () => {
+  const payload = {
     peaks: peaksEdit,
     layout: layoutSt,
     shift: shiftSt,
@@ -43,7 +173,41 @@ const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, lay
     axesUnitsSt,
     detectorSt,
     dscMetaData
+  };
+  const defaultCurves = feature ? [{
+    feature
+  }] : [];
+  const curves = Array.isArray(curveList) && curveList.length > 0 ? curveList : defaultCurves;
+  const fallbackIdx = Number.isFinite(curveSt?.curveIdx) ? curveSt.curveIdx : 0;
+  const indicesToSend = curves.length > 0 ? curves.map((_, index) => index) : [fallbackIdx];
+  payload.dst_list = indicesToSend.map(curveIdx => {
+    const curve = curves[curveIdx] || {};
+    const curveFeature = curve.feature || feature;
+    return buildDstPayload({
+      feature: curveFeature,
+      curveIdx,
+      editPeakSt,
+      thresList,
+      shiftSt,
+      layoutSt,
+      scanSt,
+      integrationSt,
+      multiplicitySt,
+      allIntegrationSt,
+      aucValues,
+      waveLengthSt,
+      cyclicvoltaSt,
+      curveSt,
+      axesUnitsSt,
+      detectorSt,
+      dscMetaData,
+      isAscend,
+      isIntensity,
+      analysis,
+      decimalSt
+    });
   });
+  operation(payload);
 };
 const BtnSubmit = ({
   classes,
@@ -53,6 +217,7 @@ const BtnSubmit = ({
   isIntensity,
   editPeakSt,
   thresSt,
+  thresList,
   layoutSt,
   shiftSt,
   scanSt,
@@ -64,6 +229,7 @@ const BtnSubmit = ({
   waveLengthSt,
   cyclicvoltaSt,
   curveSt,
+  curveList,
   axesUnitsSt,
   detectorSt,
   metaSt
@@ -76,6 +242,25 @@ const BtnSubmit = ({
   const {
     dscMetaData
   } = metaSt;
+  const isCvLayout = _format.default.isCyclicVoltaLayout(layoutSt);
+  const {
+    xLabel,
+    yLabel
+  } = resolveAxisLabels(feature?.xUnit, feature?.yUnit, axesUnitsSt, curveSt?.curveIdx);
+  const axisYLabel = isCvLayout ? buildCvAxisYLabel(yLabel, cyclicvoltaSt) : yLabel;
+  const axisDisplay = {
+    xLabel,
+    yLabel: axisYLabel
+  };
+  const cvDisplay = isCvLayout ? {
+    mode: cyclicvoltaSt?.useCurrentDensity ? 'density' : 'current',
+    yScaleFactor: computeCvYScaleFactor(feature, cyclicvoltaSt)
+  } : null;
+  const cyclicvoltaPayload = {
+    ...cyclicvoltaSt,
+    axisDisplay,
+    cvDisplay
+  };
   if (!operation) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -85,7 +270,7 @@ const BtnSubmit = ({
     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),
+      onClick: onClickCb(operation.value, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, forecastSt.predictions, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaPayload, curveSt, axesUnitsSt, detectorSt, dscMetaData, curveList, editPeakSt, thresList, scanSt, feature),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayCircleOutline.default, {
         className: classes.icon
       })
@@ -97,6 +282,7 @@ const mapStateToProps = (state, props) => (
 {
   editPeakSt: state.editPeak.present,
   thresSt: state.threshold.list[state.curve.curveIdx],
+  thresList: state.threshold.list,
   layoutSt: state.layout,
   shiftSt: state.shift,
   scanSt: state.scan,
@@ -108,6 +294,7 @@ const mapStateToProps = (state, props) => (
   waveLengthSt: state.wavelength,
   cyclicvoltaSt: state.cyclicvolta,
   curveSt: state.curve,
+  curveList: state.curve.listCurves,
   axesUnitsSt: state.axesUnits,
   detectorSt: state.detector,
   metaSt: state.meta
@@ -121,6 +308,7 @@ BtnSubmit.propTypes = {
   operation: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]).isRequired,
   editPeakSt: _propTypes.default.object.isRequired,
   thresSt: _propTypes.default.object.isRequired,
+  thresList: _propTypes.default.array.isRequired,
   layoutSt: _propTypes.default.string.isRequired,
   shiftSt: _propTypes.default.object.isRequired,
   scanSt: _propTypes.default.object.isRequired,
@@ -132,6 +320,7 @@ BtnSubmit.propTypes = {
   waveLengthSt: _propTypes.default.object.isRequired,
   cyclicvoltaSt: _propTypes.default.object.isRequired,
   curveSt: _propTypes.default.object,
+  curveList: _propTypes.default.array.isRequired,
   axesUnitsSt: _propTypes.default.object.isRequired,
   detectorSt: _propTypes.default.object.isRequired,
   metaSt: _propTypes.default.object.isRequired

package/dist/components/cmd_bar/r08_change_axes.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 _reactRedux = require("react-redux");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -17,6 +17,7 @@ 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");
+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, react/jsx-one-expression-per-line,
 react/function-component-definition,
 max-len, no-unused-vars, no-multiple-empty-lines */
@@ -99,18 +100,18 @@ const axisY = (classes, layoutSt, axesUnitsSt, updateYAxisAct, curveSt) => {
       yUnit: ''
     };
   }
-  const {
-    yUnit
-  } = selectedAxes;
+  const yUnit = '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldLayout),
     variant: "outlined",
+    disabled: true,
     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'),
+      disabled: true,
       children: options.map(item => {
         // eslint-disable-line
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
@@ -143,11 +144,29 @@ const ChangeAxes = ({
   axesUnitsSt,
   updateXAxisAct,
   updateYAxisAct
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-  className: classes.groupRight,
-  "data-testid": "ChangeAxes",
-  children: showSelect(classes, layoutSt, curveSt, axesUnitsSt, updateXAxisAct, updateYAxisAct)
-});
+}) => {
+  const {
+    curveIdx
+  } = curveSt;
+  const axes = axesUnitsSt?.axes || [];
+  (0, _react.useEffect)(() => {
+    if (layoutSt !== _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY) return;
+    const selectedAxes = axes[curveIdx] || {
+      yUnit: ''
+    };
+    if (selectedAxes.yUnit !== '') {
+      updateYAxisAct({
+        value: '',
+        curveIndex: curveIdx
+      });
+    }
+  }, [layoutSt, axes, curveIdx, updateYAxisAct]);
+  return /*#__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
 {

package/dist/components/cmd_bar/r10_cv_density.js

@@ -0,0 +1,180 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _redux = require("redux");
+var _material = require("@mui/material");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _list_layout = require("../../constants/list_layout");
+var _common = require("./common");
+var _cyclic_voltammetry = require("../../actions/cyclic_voltammetry");
+var _jsxRuntime = require("react/jsx-runtime");
+/* eslint-disable react/function-component-definition, react/jsx-one-expression-per-line,
+react/jsx-boolean-value */
+
+const styles = () => ({
+  ..._common.commonStyle,
+  fieldArea: {
+    width: 100
+  },
+  fieldUnit: {
+    width: 75
+  },
+  toggleGroup: {
+    height: 30,
+    marginLeft: 8
+  },
+  toggleBtn: {
+    fontSize: 10,
+    padding: '0 6px',
+    height: 30,
+    minHeight: 30,
+    lineHeight: '30px',
+    textTransform: 'none'
+  }
+});
+const units = ['cm²', 'mm²'];
+const CvDensityControls = ({
+  classes,
+  layoutSt,
+  areaValue,
+  areaUnit,
+  useCurrentDensity,
+  setAreaValueAct,
+  setAreaUnitAct,
+  toggleDensityAct
+}) => {
+  if (layoutSt !== _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY) return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {});
+  const handleAreaChange = e => {
+    const raw = e.target.value;
+    if (raw === '') {
+      setAreaValueAct('');
+      return;
+    }
+    const val = parseFloat(raw);
+    if (Number.isNaN(val)) return;
+    if (val < 0) return;
+    setAreaValueAct(val);
+  };
+  const handleAreaBlur = e => {
+    const raw = e.target.value;
+    const val = parseFloat(raw);
+    if (raw === '' || Number.isNaN(val) || val <= 0) {
+      setAreaValueAct(1.0);
+    }
+  };
+  const handleUnitChange = e => {
+    const newUnit = e.target.value;
+    const currVal = areaValue;
+    if (currVal !== '' && Number.isFinite(Number(currVal))) {
+      const num = Number(currVal);
+      const from = areaUnit;
+      const to = newUnit;
+      let converted = num;
+      if (from === 'cm²' && to === 'mm²') converted = num * 100.0;
+      if (from === 'mm²' && to === 'cm²') converted = num / 100.0;
+      setAreaValueAct(converted);
+    }
+    setAreaUnitAct(newUnit);
+  };
+  const handleToggle = (_, val) => {
+    if (val === null) return;
+    const shouldBeDensity = val === 'density';
+    if (shouldBeDensity !== useCurrentDensity) {
+      toggleDensityAct();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: classes.group,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+      className: (0, _classnames.default)(classes.fieldArea),
+      variant: "outlined",
+      disabled: !useCurrentDensity,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+        htmlFor: "cv-area",
+        className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+        children: "WE-ECSA"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.OutlinedInput, {
+        id: "cv-area",
+        label: "WE-ECSA",
+        type: "number",
+        inputProps: {
+          step: '0.0001',
+          min: '0'
+        },
+        value: areaValue,
+        onChange: handleAreaChange,
+        onBlur: handleAreaBlur,
+        className: (0, _classnames.default)(classes.txtInput, 'input-sv-bar-layout'),
+        disabled: !useCurrentDensity
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+      className: (0, _classnames.default)(classes.fieldUnit),
+      variant: "outlined",
+      disabled: !useCurrentDensity,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+        id: "cv-area-unit",
+        className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+        children: "Unit"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+        value: areaUnit,
+        onChange: handleUnitChange,
+        labelId: "cv-area-unit",
+        label: "Unit",
+        className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout'),
+        disabled: !useCurrentDensity,
+        children: units.map(u => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          value: u,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+            children: u
+          })
+        }, u))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ToggleButtonGroup, {
+      exclusive: true,
+      size: "small",
+      value: useCurrentDensity ? 'density' : 'current',
+      onChange: handleToggle,
+      className: (0, _classnames.default)(classes.selectInput, classes.toggleGroup, 'input-sv-bar-layout'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+        value: "current",
+        className: (0, _classnames.default)(classes.txtOpt, classes.toggleBtn),
+        children: "Current"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+        value: "density",
+        className: (0, _classnames.default)(classes.txtOpt, classes.toggleBtn),
+        children: "Current / Area"
+      })]
+    })]
+  });
+};
+CvDensityControls.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  layoutSt: _propTypes.default.string.isRequired,
+  areaValue: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  areaUnit: _propTypes.default.string.isRequired,
+  useCurrentDensity: _propTypes.default.bool.isRequired,
+  setAreaValueAct: _propTypes.default.func.isRequired,
+  setAreaUnitAct: _propTypes.default.func.isRequired,
+  toggleDensityAct: _propTypes.default.func.isRequired
+};
+const mapStateToProps = state => ({
+  layoutSt: state.layout,
+  areaValue: state.cyclicvolta.areaValue,
+  areaUnit: state.cyclicvolta.areaUnit,
+  useCurrentDensity: state.cyclicvolta.useCurrentDensity
+});
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  setAreaValueAct: _cyclic_voltammetry.setCyclicVoltaAreaValue,
+  setAreaUnitAct: _cyclic_voltammetry.setCyclicVoltaAreaUnit,
+  toggleDensityAct: _cyclic_voltammetry.toggleCyclicVoltaDensity
+}, dispatch);
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _withStyles.default)(styles)(CvDensityControls));