@complat/react-spectra-editor 1.0.1 → 1.1.0

package/README.md

@@ -38,6 +38,21 @@ $ yarn start
 
 [demo & step-by-step manual](https://github.com/ComPlat/react-spectra-editor/blob/master/DEMO_MANUAL.md)
 
+### Testing
+#### Unit test
+```
+$ yarn test
+```
+
+#### E2E test
+```
+$ yarn start
+```
+
+Open another terminal
+```
+$ yarn e2e
+```
 
 
 ## Acknowledgments

package/dist/__tests__/units/components/common/comps.test.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _comps = require("../../../../components/common/comps");
+require("@testing-library/jest-dom");
+describe('common/comps', () => {
+  it('.TabLabel()', () => {
+    const labelStr = 'test label';
+    function TestComponent(_ref) {
+      let {} = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "test-div"
+      }, (0, _comps.TabLabel)({
+        tabLabel: 'mytestclass'
+      }, labelStr));
+    }
+    const {
+      queryByTestId,
+      queryByText
+    } = (0, _react.render)( /*#__PURE__*/React.createElement(TestComponent, null));
+    const renderedComponent = queryByTestId('test-div');
+    expect(renderedComponent).toBeInTheDocument();
+    const renderedLabel = queryByText(labelStr);
+    expect(renderedLabel).toHaveClass('mytestclass txt-tab-label');
+  });
+});

package/dist/__tests__/units/components/common/draw.test.js

@@ -4,26 +4,192 @@ var _react = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _draw = require("../../../../components/common/draw");
 var _react2 = require("react");
+var d3 = _interopRequireWildcard(require("d3"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 describe('common/draw', () => {
-  it('.drawMain()', () => {
-    function TestComponent(_ref) {
-      let {} = _ref;
-      (0, _react2.useEffect)(() => {
-        (0, _draw.drawMain)('.testsvg', 100, 100);
-      }, []);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "testsvg",
-        "data-testid": "testsvg"
-      });
+  describe('.drawMain()', () => {
+    it('d3 draw main svg view box', () => {
+      function TestComponent(_ref) {
+        let {} = _ref;
+        (0, _react2.useEffect)(() => {
+          (0, _draw.drawMain)('.testsvg', 100, 100);
+        }, []);
+        return /*#__PURE__*/React.createElement("div", {
+          className: "testsvg",
+          "data-testid": "testsvg"
+        });
+      }
+      const {
+        queryByTestId
+      } = (0, _react.render)( /*#__PURE__*/React.createElement(TestComponent, null));
+      const renderResult = queryByTestId('testsvg');
+      expect(renderResult).toBeInTheDocument();
+      const svgElement = document.querySelector('svg');
+      expect(svgElement).toHaveClass('d3Svg');
+      expect(svgElement).toHaveAttribute('preserveAspectRatio', 'xMinYMin meet');
+      expect(svgElement).toHaveAttribute('viewBox', '0 0 100 100');
+    });
+  });
+  describe('.drawLabel()', () => {
+    const rootClass = '.testsvg';
+    const xLabelText = 'x label';
+    const yLabelText = 'y label';
+    const cLabelText = 'c label';
+    function drawMyText() {
+      let hasMarker = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      d3.select(rootClass).append('svg').attr('class', 'd3Svg');
+      d3.select('.d3Svg').append('text').attr('class', 'xLabel');
+      d3.select('.d3Svg').append('text').attr('class', 'yLabel');
+      if (hasMarker) {
+        d3.select('.d3Svg').append('text').attr('class', 'mark-text');
+      }
     }
-    const {
-      queryByTestId
-    } = (0, _react.render)( /*#__PURE__*/React.createElement(TestComponent, null));
-    const renderResult = queryByTestId('testsvg');
-    expect(renderResult).toBeInTheDocument();
-    const svgElement = document.querySelector('svg');
-    expect(svgElement).toHaveClass('d3Svg');
-    expect(svgElement).toHaveAttribute('preserveAspectRatio', 'xMinYMin meet');
-    expect(svgElement).toHaveAttribute('viewBox', '0 0 100 100');
+    it('d3 draw only axes label', () => {
+      function TestComponent(_ref2) {
+        let {} = _ref2;
+        (0, _react2.useEffect)(() => {
+          drawMyText(false);
+          (0, _draw.drawLabel)(rootClass, null, xLabelText, yLabelText);
+        }, []);
+        return /*#__PURE__*/React.createElement("div", {
+          className: "testsvg",
+          "data-testid": "testsvg"
+        });
+      }
+      const {
+        queryByText
+      } = (0, _react.render)( /*#__PURE__*/React.createElement(TestComponent, null));
+      const xLabel = queryByText(xLabelText);
+      expect(xLabel).toBeInTheDocument();
+      expect(xLabel).toHaveClass('xLabel');
+      const yLabel = queryByText(yLabelText);
+      expect(yLabel).toBeInTheDocument();
+      expect(yLabel).toHaveClass('yLabel');
+    });
+    it('d3 draw labels witg c label', () => {
+      function TestComponent(_ref3) {
+        let {} = _ref3;
+        (0, _react2.useEffect)(() => {
+          drawMyText(true);
+          (0, _draw.drawLabel)(rootClass, cLabelText, xLabelText, yLabelText);
+        }, []);
+        return /*#__PURE__*/React.createElement("div", {
+          className: "testsvg",
+          "data-testid": "testsvg"
+        });
+      }
+      const {
+        queryByText
+      } = (0, _react.render)( /*#__PURE__*/React.createElement(TestComponent, null));
+      const xLabel = queryByText(xLabelText);
+      expect(xLabel).toBeInTheDocument();
+      expect(xLabel).toHaveClass('xLabel');
+      const yLabel = queryByText(yLabelText);
+      expect(yLabel).toBeInTheDocument();
+      expect(yLabel).toHaveClass('yLabel');
+      const cLabel = queryByText(cLabelText);
+      expect(cLabel).toBeInTheDocument();
+      expect(cLabel).toHaveClass('mark-text');
+    });
+  });
+  describe('.drawDisplay()', () => {
+    it('set display as hidden', () => {
+      function TestComponent(_ref4) {
+        let {} = _ref4;
+        (0, _react2.useEffect)(() => {
+          (0, _draw.drawMain)('.testsvg', 100, 100);
+          (0, _draw.drawDisplay)('.testsvg', true);
+        }, []);
+        return /*#__PURE__*/React.createElement("div", {
+          className: "testsvg",
+          "data-testid": "testsvg"
+        });
+      }
+      (0, _react.render)( /*#__PURE__*/React.createElement(TestComponent, null));
+      const svgElement = document.querySelector('svg');
+      expect(svgElement).toHaveStyle('width: 0');
+    });
+    it('set display to show', () => {
+      function TestComponent(_ref5) {
+        let {} = _ref5;
+        (0, _react2.useEffect)(() => {
+          (0, _draw.drawMain)('.testsvg', 100, 100);
+          (0, _draw.drawDisplay)('.testsvg', false);
+        }, []);
+        return /*#__PURE__*/React.createElement("div", {
+          className: "testsvg",
+          "data-testid": "testsvg"
+        });
+      }
+      (0, _react.render)( /*#__PURE__*/React.createElement(TestComponent, null));
+      const svgElement = document.querySelector('svg');
+      expect(svgElement).toHaveStyle('width: 100%');
+    });
+  });
+  describe('.drawDestroy()', () => {
+    it('d3 remove all svg', () => {
+      function TestComponent(_ref6) {
+        let {} = _ref6;
+        (0, _react2.useEffect)(() => {
+          (0, _draw.drawMain)('.testsvg', 100, 100);
+          (0, _draw.drawDestroy)('.testsvg');
+        }, []);
+        return /*#__PURE__*/React.createElement("div", {
+          className: "testsvg",
+          "data-testid": "testsvg"
+        });
+      }
+      (0, _react.render)( /*#__PURE__*/React.createElement(TestComponent, null));
+      const svgElement = document.querySelector('svg');
+      expect(svgElement).not.toBeInTheDocument();
+    });
+  });
+  describe('.drawArrowOnCurve()', () => {
+    it('d3 remove all arrows on curves', () => {
+      function TestComponent(_ref7) {
+        let {} = _ref7;
+        (0, _react2.useEffect)(() => {
+          (0, _draw.drawMain)('.testsvg', 100, 100);
+          d3.select('.d3Svg').append('defs').append('marker');
+          (0, _draw.drawArrowOnCurve)('.testsvg', true);
+        }, []);
+        return /*#__PURE__*/React.createElement("div", {
+          className: "testsvg",
+          "data-testid": "testsvg"
+        });
+      }
+      (0, _react.render)( /*#__PURE__*/React.createElement(TestComponent, null));
+      const svgElement = document.querySelector('marker');
+      expect(svgElement).not.toBeInTheDocument();
+    });
+    it('d3 draw arrows on curves', () => {
+      function TestComponent(_ref8) {
+        let {} = _ref8;
+        (0, _react2.useEffect)(() => {
+          (0, _draw.drawMain)('.testsvg', 100, 100);
+          d3.select('.d3Svg').append('defs').append('marker');
+          (0, _draw.drawArrowOnCurve)('.testsvg', false);
+        }, []);
+        return /*#__PURE__*/React.createElement("div", {
+          className: "testsvg",
+          "data-testid": "testsvg"
+        });
+      }
+      (0, _react.render)( /*#__PURE__*/React.createElement(TestComponent, null));
+      const arrowLeft = document.querySelector('marker');
+      expect(arrowLeft).toBeInTheDocument();
+      expect(arrowLeft).toHaveAttribute('id', 'arrow-left');
+      expect(arrowLeft).toHaveAttribute('viewBox', '0 0 10 10');
+      expect(arrowLeft).toHaveAttribute('refX', '5');
+      expect(arrowLeft).toHaveAttribute('refY', '5');
+      expect(arrowLeft).toHaveAttribute('markerWidth', '6');
+      expect(arrowLeft).toHaveAttribute('markerHeight', '6');
+      expect(arrowLeft).toHaveAttribute('orient', 'auto');
+      expect(arrowLeft).toHaveAttribute('fill', '#00AA0099');
+      const path = arrowLeft.querySelector('path');
+      expect(path).toBeInTheDocument();
+      expect(path).toHaveAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
+    });
   });
 });

package/dist/__tests__/units/components/panel/info.test.js

@@ -22,7 +22,16 @@ const store = mockStore({
   shift: {
     shifts: []
   },
-  simulation: {}
+  simulation: {},
+  detector: {
+    curves: [{
+      curveIdx: 0,
+      selectedDetector: {
+        name: 'Refractive index',
+        label: 'RI'
+      }
+    }]
+  }
 });
 const failedStore = mockStore({});
 const dispatchMock = () => Promise.resolve({});

package/dist/actions/detector.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateDetector = void 0;
+var _action_type = require("../constants/action_type");
+/* eslint-disable import/prefer-default-export */
+
+const updateDetector = payload => ({
+  type: _action_type.SEC.UPDATE_DETECTOR,
+  payload
+});
+exports.updateDetector = updateDetector;

package/dist/actions/manager.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resetInitNmr = exports.resetInitMs = exports.resetInitCommonWithIntergation = exports.resetInitCommon = exports.resetAll = void 0;
+exports.resetInitNmr = exports.resetInitMs = exports.resetInitCommonWithIntergation = exports.resetInitCommon = exports.resetDetector = exports.resetAll = void 0;
 var _action_type = require("../constants/action_type");
 const resetAll = payload => ({
   type: _action_type.MANAGER.RESETALL,
@@ -29,6 +29,10 @@ const resetInitCommonWithIntergation = payload => ({
   type: _action_type.MANAGER.RESET_INIT_COMMON_WITH_INTERGATION,
   payload
 });
+exports.resetInitCommonWithIntergation = resetInitCommonWithIntergation;
+const resetDetector = () => ({
+  type: _action_type.MANAGER.RESET_DETECTOR
+});
 
 // eslint-disable-line
-exports.resetInitCommonWithIntergation = resetInitCommonWithIntergation;
+exports.resetDetector = resetDetector;

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

@@ -104,7 +104,7 @@ const Integration = _ref => {
       className: "txt-sv-tp"
     }, "Add Integration")
   }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddIntgSt, classes)),
+    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddIntgSt, classes), 'btn-add-inter'),
     disabled: isDisableSt,
     onClick: onSweepIntegtAdd
   }, /*#__PURE__*/_react.default.createElement(_react2.default, {
@@ -119,7 +119,7 @@ const Integration = _ref => {
       className: "txt-sv-tp"
     }, "Remove Integration")
   }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmIntgSt, classes)),
+    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmIntgSt, classes), 'btn-remove-inter'),
     disabled: isDisableSt,
     onClick: onSweepIntegtRm
   }, /*#__PURE__*/_react.default.createElement(_react2.default, {
@@ -134,7 +134,7 @@ const Integration = _ref => {
       className: "txt-sv-tp"
     }, "Set Integration Reference")
   }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusSetRefSt, classes)),
+    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusSetRefSt, classes), 'btn-set-inter-ref'),
     disabled: isDisableSt,
     onClick: onSweepIntegtSR
   }, /*#__PURE__*/_react.default.createElement(_react2.default, {

package/dist/components/cmd_bar/07_pecker.js

@@ -102,7 +102,7 @@ const Pecker = _ref => {
       className: "txt-sv-tp"
     }, "Add Pecker")
   }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddPeckerSt, classes), 'btn-sv-bar-addpeak'),
+    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusAddPeckerSt, classes), 'btn-sv-bar-addpecker'),
     onClick: onSweepPeckerAdd
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-addpeak')
@@ -111,7 +111,7 @@ const Pecker = _ref => {
       className: "txt-sv-tp"
     }, "Remove Pecker")
   }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
-    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmPeckerSt, classes), 'btn-sv-bar-rmpeak'),
+    className: (0, _classnames.default)((0, _common.focusStyle)(isFocusRmPeckerSt, classes), 'btn-sv-bar-rmpecker'),
     onClick: onSweepPeckerDELETE
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.txt, 'txt-sv-bar-rmpeak')

package/dist/components/cmd_bar/index.js

@@ -23,6 +23,7 @@ var _r04_submit = _interopRequireDefault(require("./r04_submit"));
 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"));
 /* eslint-disable prefer-object-spread, function-paren-newline,
 react/function-component-definition, react/require-default-props */
 
@@ -59,7 +60,7 @@ const CmdBar = _ref => {
   }), /*#__PURE__*/_react.default.createElement(_r01_layout.default, {
     feature: feature,
     hasEdit: hasEdit
-  }), /*#__PURE__*/_react.default.createElement(_r07_wavelength_btn.default, null), /*#__PURE__*/_react.default.createElement(_r08_change_axes.default, null));
+  }), /*#__PURE__*/_react.default.createElement(_r07_wavelength_btn.default, null), /*#__PURE__*/_react.default.createElement(_r08_change_axes.default, null), /*#__PURE__*/_react.default.createElement(_r09_detector.default, null));
 };
 const mapStateToProps = (state, _) => (
 // eslint-disable-line

package/dist/components/cmd_bar/r05_submit_btn.js

@@ -21,7 +21,7 @@ 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) => () => {
+const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, analysis, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt, detectorSt) => () => {
   operation({
     peaks: peaksEdit,
     layout: layoutSt,
@@ -39,7 +39,8 @@ const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, lay
     waveLength: waveLengthSt,
     cyclicvoltaSt,
     curveSt,
-    axesUnitsSt
+    axesUnitsSt,
+    detectorSt
   });
 };
 const BtnSubmit = _ref => {
@@ -62,7 +63,8 @@ const BtnSubmit = _ref => {
     waveLengthSt,
     cyclicvoltaSt,
     curveSt,
-    axesUnitsSt
+    axesUnitsSt,
+    detectorSt
   } = _ref;
   const peaksEdit = (0, _extractPeaksEdit.extractPeaksEdit)(feature, editPeakSt, thresSt, shiftSt, layoutSt);
   // const disBtn = peaksEdit.length === 0 || statusSt.btnSubmit || disabled;
@@ -77,7 +79,7 @@ const BtnSubmit = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
     className: (0, _classnames.default)('btn-sv-bar-submit'),
     color: "primary",
-    onClick: onClickCb(operation.value, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, forecastSt.predictions, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt)
+    onClick: onClickCb(operation.value, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, forecastSt.predictions, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt, detectorSt)
   }, /*#__PURE__*/_react.default.createElement(_PlayCircleOutline.default, {
     className: classes.icon
   })));
@@ -98,7 +100,8 @@ const mapStateToProps = (state, props) => (
   waveLengthSt: state.wavelength,
   cyclicvoltaSt: state.cyclicvolta,
   curveSt: state.curve,
-  axesUnitsSt: state.axesUnits
+  axesUnitsSt: state.axesUnits,
+  detectorSt: state.detector
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch);
 BtnSubmit.propTypes = {
@@ -120,6 +123,7 @@ BtnSubmit.propTypes = {
   waveLengthSt: _propTypes.default.object.isRequired,
   cyclicvoltaSt: _propTypes.default.object.isRequired,
   curveSt: _propTypes.default.object,
-  axesUnitsSt: _propTypes.default.object.isRequired
+  axesUnitsSt: _propTypes.default.object.isRequired,
+  detectorSt: _propTypes.default.object.isRequired
 };
 var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(styles))(BtnSubmit);

package/dist/components/cmd_bar/r09_detector.js

@@ -0,0 +1,99 @@
+"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 _detector = require("../../actions/detector");
+var _format = _interopRequireDefault(require("../../helpers/format"));
+var _common = require("./common");
+var _list_detectors = require("../../constants/list_detectors");
+/* eslint-disable prefer-object-spread, react/jsx-one-expression-per-line,
+react/function-component-definition */
+
+const styles = () => Object.assign({
+  fieldShift: {
+    width: 160
+  },
+  fieldLayout: {
+    width: 100
+  }
+}, _common.commonStyle);
+const detectorSelect = (classes, detectorSt, curveSt, layoutSt, updateDetectorAct) => {
+  if (!_format.default.isSECLayout(layoutSt)) {
+    return /*#__PURE__*/_react.default.createElement("i", null);
+  }
+  const {
+    curveIdx
+  } = curveSt;
+  const {
+    curves
+  } = detectorSt;
+  const getSelectedDetectorForCurve = (_detectorSt, targetCurveIdx) => {
+    const targetCurve = curves.find(curve => curve.curveIdx === targetCurveIdx);
+    return targetCurve ? targetCurve.selectedDetector : '';
+  };
+  const selectedDetector = getSelectedDetectorForCurve(detectorSt, curveIdx);
+  const onChange = e => updateDetectorAct({
+    curveIdx,
+    selectedDetector: e.target.value
+  });
+  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+    className: (0, _classnames.default)(classes.fieldLayout)
+  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
+    id: "select-detector-label",
+    className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label')
+  }, "Detector"), /*#__PURE__*/_react.default.createElement(_material.Select, {
+    labelId: "select-detector-label",
+    label: "Detector",
+    value: selectedDetector,
+    onChange: onChange,
+    className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout')
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: ""
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
+  })), _list_detectors.LIST_DETECTORS.map(item => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: item
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
+  }, item.name)))));
+};
+const Detector = _ref => {
+  let {
+    classes,
+    detectorSt,
+    curveSt,
+    layoutSt,
+    updateDetectorAct
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.groupRight
+  }, detectorSelect(classes, detectorSt, curveSt, layoutSt, updateDetectorAct));
+};
+const mapStateToProps = (state, _props) => (
+// eslint-disable-line
+{
+  detectorSt: state.detector,
+  curveSt: state.curve,
+  layoutSt: state.layout
+});
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  updateDetectorAct: _detector.updateDetector
+}, dispatch);
+Detector.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  layoutSt: _propTypes.default.string.isRequired,
+  curveSt: _propTypes.default.object.isRequired,
+  updateDetectorAct: _propTypes.default.func.isRequired,
+  detectorSt: _propTypes.default.object.isRequired
+};
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _withStyles.default)(styles)(Detector));