@complat/react-spectra-editor 0.10.13-alpha.5

package/dist/components/forecast/ir_viewer.js

@@ -0,0 +1,172 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactRedux = require('react-redux');
+
+var _redux = require('redux');
+
+var _styles = require('@material-ui/core/styles');
+
+var _Table = require('@material-ui/core/Table');
+
+var _Table2 = _interopRequireDefault(_Table);
+
+var _TableBody = require('@material-ui/core/TableBody');
+
+var _TableBody2 = _interopRequireDefault(_TableBody);
+
+var _Paper = require('@material-ui/core/Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+var _Grid = require('@material-ui/core/Grid');
+
+var _Grid2 = _interopRequireDefault(_Grid);
+
+var _comps = require('./comps');
+
+var _ir_comps = require('./ir_comps');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Styles = function Styles() {
+  return {
+    root: {
+      overflowX: 'hidden',
+      overflowY: 'auto'
+    },
+    container: {
+      minHeight: '400px'
+    },
+    svgRoot: {
+      margin: '10px 40px 0px 40px',
+      height: 'calc(70vh)',
+      overflowY: 'hidden'
+    },
+    tableRoot: {
+      margin: '10px 40px 0px 40px',
+      maxHeight: 'calc(70vh)',
+      overflowY: 'scroll'
+    },
+    title: {
+      textAlign: 'left'
+    },
+    btn: {
+      marginLeft: 40
+    },
+    reference: {
+      borderTop: '1px solid #cfd8dc',
+      margin: '10px 40px 0px 40px',
+      padding: 5
+    },
+    inputRoot: {
+      margin: '10px 40px 0px 40px'
+    },
+    txtLabel: {
+      fontSize: '12px'
+    },
+    submit: {
+      margin: '0 0 0 30px',
+      width: 300
+    }
+  };
+};
+
+var sectionTable = function sectionTable(classes, pds) {
+  var renderMsg = (0, _comps.notToRenderAnalysis)(pds);
+  if (renderMsg) return renderMsg;
+
+  if (!pds.output.result || !pds.output.result[0]) return null;
+
+  var fgs = pds.output.result[0].fgs;
+
+  if (!fgs) return null;
+  return _react2.default.createElement(
+    _Paper2.default,
+    { className: classes.tableRoot },
+    _react2.default.createElement(
+      _Table2.default,
+      { className: classes.table, size: 'small' },
+      (0, _ir_comps.IrTableHeader)(classes),
+      _react2.default.createElement(
+        _TableBody2.default,
+        null,
+        fgs.sort(function (a, b) {
+          return b.confidence - a.confidence;
+        }).map(function (fg, idx) {
+          return (0, _ir_comps.IrTableBodyRow)(classes, idx, fg);
+        })
+      )
+    )
+  );
+};
+
+var IrViewer = function IrViewer(_ref) {
+  var classes = _ref.classes,
+      molecule = _ref.molecule,
+      inputCb = _ref.inputCb,
+      forecastSt = _ref.forecastSt;
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _classnames2.default)(classes.root, 'card-forecast-viewer') },
+    _react2.default.createElement(
+      _Grid2.default,
+      { className: (0, _classnames2.default)(classes.container), container: true },
+      _react2.default.createElement(
+        _Grid2.default,
+        { item: true, xs: 4 },
+        _react2.default.createElement(
+          _Paper2.default,
+          { className: classes.svgRoot },
+          (0, _comps.sectionSvg)(classes, forecastSt.predictions)
+        )
+      ),
+      _react2.default.createElement(
+        _Grid2.default,
+        { item: true, xs: 8 },
+        sectionTable(classes, forecastSt.predictions)
+      )
+    ),
+    (0, _comps.sectionInput)(classes, molecule, inputCb)
+  );
+};
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return (// eslint-disable-line
+    {
+      forecastSt: state.forecast
+    }
+  );
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({}, dispatch);
+};
+
+IrViewer.propTypes = {
+  classes: _propTypes2.default.object.isRequired,
+  molecule: _propTypes2.default.string.isRequired,
+  inputCb: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
+  forecastSt: _propTypes2.default.object.isRequired
+};
+
+IrViewer.defaultProps = {
+  inputCb: false
+};
+
+exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(Styles))(IrViewer);

package/dist/components/forecast/nmr_comps.js

@@ -0,0 +1,253 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SectionReference = exports.NmrTableBodyRow = exports.NmrTableHeader = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactRedux = require('react-redux');
+
+var _redux = require('redux');
+
+var _Select = require('@material-ui/core/Select');
+
+var _Select2 = _interopRequireDefault(_Select);
+
+var _FormControl = require('@material-ui/core/FormControl');
+
+var _FormControl2 = _interopRequireDefault(_FormControl);
+
+var _MenuItem = require('@material-ui/core/MenuItem');
+
+var _MenuItem2 = _interopRequireDefault(_MenuItem);
+
+var _CheckCircleOutline = require('@material-ui/icons/CheckCircleOutline');
+
+var _CheckCircleOutline2 = _interopRequireDefault(_CheckCircleOutline);
+
+var _HighlightOff = require('@material-ui/icons/HighlightOff');
+
+var _HighlightOff2 = _interopRequireDefault(_HighlightOff);
+
+var _TableCell = require('@material-ui/core/TableCell');
+
+var _TableCell2 = _interopRequireDefault(_TableCell);
+
+var _TableHead = require('@material-ui/core/TableHead');
+
+var _TableHead2 = _interopRequireDefault(_TableHead);
+
+var _TableRow = require('@material-ui/core/TableRow');
+
+var _TableRow2 = _interopRequireDefault(_TableRow);
+
+var _comps = require('./comps');
+
+var _forecast = require('../../actions/forecast');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var baseSelectNmrStatus = function baseSelectNmrStatus(_ref) {
+  var idx = _ref.idx,
+      atom = _ref.atom,
+      status = _ref.status,
+      identity = _ref.identity,
+      setNmrStatusAct = _ref.setNmrStatusAct;
+
+  var theStatus = ['accept', 'reject'].includes(status) ? status : '';
+
+  return _react2.default.createElement(
+    _FormControl2.default,
+    null,
+    _react2.default.createElement(
+      _Select2.default,
+      {
+        value: theStatus,
+        onChange: function onChange(e) {
+          setNmrStatusAct({
+            predictions: {
+              idx: idx, atom: atom, identity: identity, value: e.target.value
+            },
+            svgs: []
+          });
+        }
+      },
+      _react2.default.createElement(
+        _MenuItem2.default,
+        { value: 'accept' },
+        _react2.default.createElement(_CheckCircleOutline2.default, { style: { color: '#4caf50' } })
+      ),
+      _react2.default.createElement(
+        _MenuItem2.default,
+        { value: 'reject' },
+        _react2.default.createElement(_HighlightOff2.default, { style: { color: '#e91e63' } })
+      ),
+      _react2.default.createElement(
+        _MenuItem2.default,
+        { value: '' },
+        _react2.default.createElement('span', null)
+      )
+    )
+  );
+};
+
+var bssMapStateToProps = function bssMapStateToProps(state, props) {
+  return (// eslint-disable-line
+    {}
+  );
+};
+
+var bssMapDispatchToProps = function bssMapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({
+    setNmrStatusAct: _forecast.setNmrStatus
+  }, dispatch);
+};
+
+baseSelectNmrStatus.propTypes = {
+  idx: _propTypes2.default.number.isRequired,
+  atom: _propTypes2.default.number.isRequired,
+  status: _propTypes2.default.string,
+  identity: _propTypes2.default.string.isRequired,
+  setNmrStatusAct: _propTypes2.default.func.isRequired
+};
+
+baseSelectNmrStatus.defaultProps = {
+  status: ''
+};
+
+var SelectNmrStatus = (0, _reactRedux.connect)(bssMapStateToProps, bssMapDispatchToProps)(baseSelectNmrStatus);
+
+var numFormat = function numFormat(input) {
+  return parseFloat(input).toFixed(2);
+};
+
+var realFormat = function realFormat(val, status) {
+  if (status === 'missing') {
+    return '- - -';
+  }
+  return numFormat(val);
+};
+
+var NmrTableHeader = function NmrTableHeader(classes) {
+  return _react2.default.createElement(
+    _TableHead2.default,
+    null,
+    _react2.default.createElement(
+      _TableRow2.default,
+      null,
+      _react2.default.createElement(
+        _TableCell2.default,
+        null,
+        (0, _comps.TxtLabel)(classes, 'Atom', 'txt-prd-table-title')
+      ),
+      _react2.default.createElement(
+        _TableCell2.default,
+        { align: 'right' },
+        (0, _comps.TxtLabel)(classes, 'Prediction (ppm)', 'txt-prd-table-title')
+      ),
+      _react2.default.createElement(
+        _TableCell2.default,
+        { align: 'right' },
+        (0, _comps.TxtLabel)(classes, 'Real (ppm)', 'txt-prd-table-title')
+      ),
+      _react2.default.createElement(
+        _TableCell2.default,
+        { align: 'right' },
+        (0, _comps.TxtLabel)(classes, 'Diff (ppm)', 'txt-prd-table-title')
+      ),
+      _react2.default.createElement(
+        _TableCell2.default,
+        { align: 'right' },
+        (0, _comps.TxtLabel)(classes, 'Machine', 'txt-prd-table-title')
+      ),
+      _react2.default.createElement(
+        _TableCell2.default,
+        { align: 'right' },
+        (0, _comps.TxtLabel)(classes, 'Owner', 'txt-prd-table-title')
+      )
+    )
+  );
+};
+
+var NmrTableBodyRow = function NmrTableBodyRow(classes, row, idx) {
+  return _react2.default.createElement(
+    _TableRow2.default,
+    { key: idx + '-' + row.atom },
+    _react2.default.createElement(
+      _TableCell2.default,
+      { component: 'th', scope: 'row' },
+      (0, _comps.TxtLabel)(classes, row.atom, 'txt-prd-table-content')
+    ),
+    _react2.default.createElement(
+      _TableCell2.default,
+      { align: 'right' },
+      (0, _comps.TxtLabel)(classes, numFormat(row.prediction), 'txt-prd-table-content')
+    ),
+    _react2.default.createElement(
+      _TableCell2.default,
+      { align: 'right' },
+      (0, _comps.TxtLabel)(classes, realFormat(row.real, row.status), 'txt-prd-table-content')
+    ),
+    _react2.default.createElement(
+      _TableCell2.default,
+      { align: 'right' },
+      (0, _comps.TxtLabel)(classes, realFormat(row.diff, row.status), 'txt-prd-table-content')
+    ),
+    _react2.default.createElement(
+      _TableCell2.default,
+      { align: 'right' },
+      (0, _comps.StatusIcon)(row.status)
+    ),
+    _react2.default.createElement(
+      _TableCell2.default,
+      { align: 'right' },
+      _react2.default.createElement(SelectNmrStatus, {
+        idx: idx,
+        atom: row.atom,
+        status: row.statusOwner,
+        identity: 'Owner'
+      })
+    )
+  );
+};
+
+var SectionReference = function SectionReference(classes) {
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _classnames2.default)(classes.reference) },
+    _react2.default.createElement(
+      'p',
+      null,
+      _react2.default.createElement(
+        'span',
+        null,
+        'NMR prediction source: '
+      ),
+      _react2.default.createElement(
+        'a',
+        {
+          href: 'https://www.ncbi.nlm.nih.gov/pubmed/15464159',
+          target: '_blank',
+          rel: 'noopener noreferrer'
+        },
+        'nmrshiftdb'
+      )
+    )
+  );
+};
+
+exports.NmrTableHeader = NmrTableHeader;
+exports.NmrTableBodyRow = NmrTableBodyRow;
+exports.SectionReference = SectionReference;

package/dist/components/forecast/nmr_viewer.js

@@ -0,0 +1,170 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactRedux = require('react-redux');
+
+var _redux = require('redux');
+
+var _styles = require('@material-ui/core/styles');
+
+var _Table = require('@material-ui/core/Table');
+
+var _Table2 = _interopRequireDefault(_Table);
+
+var _TableBody = require('@material-ui/core/TableBody');
+
+var _TableBody2 = _interopRequireDefault(_TableBody);
+
+var _Paper = require('@material-ui/core/Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+var _Grid = require('@material-ui/core/Grid');
+
+var _Grid2 = _interopRequireDefault(_Grid);
+
+var _comps = require('./comps');
+
+var _nmr_comps = require('./nmr_comps');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Styles = function Styles() {
+  return {
+    root: {
+      overflowX: 'hidden',
+      overflowY: 'auto'
+    },
+    container: {
+      minHeight: '400px'
+    },
+    svgRoot: {
+      margin: '10px 40px 0px 40px',
+      height: 'calc(70vh)',
+      overflowY: 'hidden'
+    },
+    tableRoot: {
+      margin: '10px 40px 0px 40px',
+      maxHeight: 'calc(70vh)',
+      overflowY: 'scroll'
+    },
+    title: {
+      textAlign: 'left'
+    },
+    btn: {
+      marginLeft: 40
+    },
+    reference: {
+      borderTop: '1px solid #cfd8dc',
+      margin: '10px 40px 0px 40px',
+      padding: 5
+    },
+    inputRoot: {
+      margin: '10px 40px 0px 40px'
+    },
+    txtLabel: {
+      fontSize: '12px'
+    },
+    submit: {
+      margin: '0 0 0 30px',
+      width: 300
+    }
+  };
+};
+
+var sectionTable = function sectionTable(classes, pds) {
+  var renderMsg = (0, _comps.notToRenderAnalysis)(pds);
+  if (renderMsg) return renderMsg;
+
+  var dict = pds.output.result[0];
+  if (!dict) return _react2.default.createElement('div', null);
+  return _react2.default.createElement(
+    _Paper2.default,
+    { className: classes.tableRoot },
+    _react2.default.createElement(
+      _Table2.default,
+      { className: classes.table, size: 'small' },
+      (0, _nmr_comps.NmrTableHeader)(classes),
+      _react2.default.createElement(
+        _TableBody2.default,
+        null,
+        dict.shifts.sort(function (a, b) {
+          return a.atom - b.atom;
+        }).map(function (row, idx) {
+          return (0, _nmr_comps.NmrTableBodyRow)(classes, row, idx);
+        })
+      )
+    )
+  );
+};
+
+var NmrViewer = function NmrViewer(_ref) {
+  var classes = _ref.classes,
+      molecule = _ref.molecule,
+      inputCb = _ref.inputCb,
+      forecastSt = _ref.forecastSt;
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _classnames2.default)(classes.root, 'card-forecast-viewer') },
+    _react2.default.createElement(
+      _Grid2.default,
+      { className: (0, _classnames2.default)(classes.container), container: true },
+      _react2.default.createElement(
+        _Grid2.default,
+        { item: true, xs: 4 },
+        _react2.default.createElement(
+          _Paper2.default,
+          { className: classes.svgRoot },
+          (0, _comps.sectionSvg)(classes, forecastSt.predictions)
+        )
+      ),
+      _react2.default.createElement(
+        _Grid2.default,
+        { item: true, xs: 8 },
+        sectionTable(classes, forecastSt.predictions)
+      )
+    ),
+    (0, _comps.sectionInput)(classes, molecule, inputCb),
+    (0, _nmr_comps.SectionReference)(classes)
+  );
+};
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return (// eslint-disable-line
+    {
+      forecastSt: state.forecast
+    }
+  );
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({}, dispatch);
+};
+
+NmrViewer.propTypes = {
+  classes: _propTypes2.default.object.isRequired,
+  molecule: _propTypes2.default.string.isRequired,
+  inputCb: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
+  forecastSt: _propTypes2.default.object.isRequired
+};
+
+NmrViewer.defaultProps = {
+  inputCb: false
+};
+
+exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(Styles))(NmrViewer);

package/dist/components/forecast/section_loading.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _CircularProgress = require('@material-ui/core/CircularProgress');
+
+var _CircularProgress2 = _interopRequireDefault(_CircularProgress);
+
+var _ErrorOutline = require('@material-ui/icons/ErrorOutline');
+
+var _ErrorOutline2 = _interopRequireDefault(_ErrorOutline);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var styleLoading = {
+  alignItems: 'center',
+  display: 'flex',
+  height: '100%',
+  justifyContent: 'center'
+};
+
+var SectionLoading = function (_React$Component) {
+  _inherits(SectionLoading, _React$Component);
+
+  function SectionLoading(props) {
+    _classCallCheck(this, SectionLoading);
+
+    var _this = _possibleConstructorReturn(this, (SectionLoading.__proto__ || Object.getPrototypeOf(SectionLoading)).call(this, props));
+
+    _this.state = {
+      loading: true
+    };
+    return _this;
+  }
+
+  _createClass(SectionLoading, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      setTimeout(function () {
+        return _this2.setState({ loading: false });
+      }, 5000);
+    }
+  }, {
+    key: 'renderLoading',
+    value: function renderLoading() {
+      return _react2.default.createElement(
+        'div',
+        { style: styleLoading },
+        _react2.default.createElement(_CircularProgress2.default, { style: { color: 'blue', fontSize: 50 } })
+      );
+    }
+  }, {
+    key: 'renderNotFound',
+    value: function renderNotFound() {
+      return _react2.default.createElement(
+        'div',
+        { style: styleLoading },
+        _react2.default.createElement(_ErrorOutline2.default, { style: { color: '#ffc107', fontSize: 50, margin: 20 } }),
+        _react2.default.createElement(
+          'h3',
+          null,
+          'Structure Not Found'
+        )
+      );
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var loading = this.state.loading;
+
+
+      return loading ? this.renderLoading() : this.renderNotFound();
+    }
+  }]);
+
+  return SectionLoading;
+}(_react2.default.Component);
+
+exports.default = SectionLoading;