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

package/dist/components/forecast_viewer.js

@@ -0,0 +1,190 @@
+'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 _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactRedux = require('react-redux');
+
+var _redux = require('redux');
+
+var _styles = require('@material-ui/core/styles');
+
+var _index = require('./d3_line/index');
+
+var _index2 = _interopRequireDefault(_index);
+
+var _nmr_viewer = require('./forecast/nmr_viewer');
+
+var _nmr_viewer2 = _interopRequireDefault(_nmr_viewer);
+
+var _ir_viewer = require('./forecast/ir_viewer');
+
+var _ir_viewer2 = _interopRequireDefault(_ir_viewer);
+
+var _forecast = require('../actions/forecast');
+
+var _ui = require('../actions/ui');
+
+var _list_ui = require('../constants/list_ui');
+
+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 styles = function styles() {
+  return {
+    root: {
+      flexGrow: 1
+    },
+    appBar: {
+      backgroundColor: '#fff',
+      boxShadow: 'none'
+    },
+    tabLabel: {
+      fontSize: '14px'
+    }
+  };
+};
+
+var ForecastViewer = function (_React$Component) {
+  _inherits(ForecastViewer, _React$Component);
+
+  function ForecastViewer(props) {
+    _classCallCheck(this, ForecastViewer);
+
+    var _this = _possibleConstructorReturn(this, (ForecastViewer.__proto__ || Object.getPrototypeOf(ForecastViewer)).call(this, props));
+
+    _this.initForecastReducer = _this.initForecastReducer.bind(_this);
+    return _this;
+  }
+
+  _createClass(ForecastViewer, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.initForecastReducer();
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      var forecast = this.props.forecast;
+
+
+      var prevForecast = forecast;
+      var nextForecast = prevProps.forecast;
+      if (prevForecast !== nextForecast) {
+        this.initForecastReducer();
+      }
+    }
+  }, {
+    key: 'initForecastReducer',
+    value: function initForecastReducer() {
+      var _props = this.props,
+          forecast = _props.forecast,
+          initForecastStatusAct = _props.initForecastStatusAct,
+          setUiViewerTypeAct = _props.setUiViewerTypeAct;
+
+      initForecastStatusAct(forecast);
+      if (forecast && forecast.predictions) {
+        var _forecast$predictions = forecast.predictions,
+            running = _forecast$predictions.running,
+            refreshed = _forecast$predictions.refreshed;
+
+        if (running || refreshed) setUiViewerTypeAct(_list_ui.LIST_UI_VIEWER_TYPE.ANALYSIS);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          classes = _props2.classes,
+          topic = _props2.topic,
+          feature = _props2.feature,
+          cLabel = _props2.cLabel,
+          xLabel = _props2.xLabel,
+          yLabel = _props2.yLabel,
+          forecast = _props2.forecast,
+          isNmr = _props2.isNmr,
+          isIr = _props2.isIr,
+          uiSt = _props2.uiSt,
+          comparisonsSt = _props2.comparisonsSt;
+      var viewer = uiSt.viewer;
+      var inputCb = forecast.inputCb,
+          molecule = forecast.molecule;
+
+
+      return _react2.default.createElement(
+        'div',
+        { className: classes.root },
+        _react2.default.createElement(_index2.default, {
+          topic: topic,
+          feature: feature,
+          cLabel: cLabel,
+          xLabel: xLabel,
+          yLabel: yLabel,
+          comparisons: comparisonsSt,
+          isHidden: viewer !== _list_ui.LIST_UI_VIEWER_TYPE.SPECTRUM
+        }),
+        viewer === _list_ui.LIST_UI_VIEWER_TYPE.ANALYSIS && isNmr && _react2.default.createElement(_nmr_viewer2.default, {
+          molecule: molecule,
+          inputCb: inputCb
+        }),
+        viewer === _list_ui.LIST_UI_VIEWER_TYPE.ANALYSIS && isIr && _react2.default.createElement(_ir_viewer2.default, {
+          molecule: molecule,
+          inputCb: inputCb
+        })
+      );
+    }
+  }]);
+
+  return ForecastViewer;
+}(_react2.default.Component);
+
+var mapStateToProps = function mapStateToProps(state, _) {
+  return (// eslint-disable-line
+    {
+      uiSt: state.ui,
+      comparisonsSt: state.jcamp.others
+    }
+  );
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({
+    initForecastStatusAct: _forecast.initForecastStatus,
+    setUiViewerTypeAct: _ui.setUiViewerType
+  }, dispatch);
+};
+
+ForecastViewer.propTypes = {
+  classes: _propTypes2.default.object.isRequired,
+  topic: _propTypes2.default.object.isRequired,
+  feature: _propTypes2.default.object.isRequired,
+  cLabel: _propTypes2.default.string.isRequired,
+  xLabel: _propTypes2.default.string.isRequired,
+  yLabel: _propTypes2.default.string.isRequired,
+  forecast: _propTypes2.default.object.isRequired,
+  isNmr: _propTypes2.default.bool.isRequired,
+  isIr: _propTypes2.default.bool.isRequired,
+  isUvvis: _propTypes2.default.bool.isRequired,
+  uiSt: _propTypes2.default.object.isRequired,
+  comparisonsSt: _propTypes2.default.array.isRequired,
+  initForecastStatusAct: _propTypes2.default.func.isRequired,
+  setUiViewerTypeAct: _propTypes2.default.func.isRequired
+};
+
+exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(styles))(ForecastViewer);

package/dist/components/panel/compare.js

@@ -0,0 +1,370 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+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 _reactDropzone = require('react-dropzone');
+
+var _reactDropzone2 = _interopRequireDefault(_reactDropzone);
+
+var _ExpansionPanel = require('@material-ui/core/ExpansionPanel');
+
+var _ExpansionPanel2 = _interopRequireDefault(_ExpansionPanel);
+
+var _ExpansionPanelSummary = require('@material-ui/core/ExpansionPanelSummary');
+
+var _ExpansionPanelSummary2 = _interopRequireDefault(_ExpansionPanelSummary);
+
+var _ExpandMore = require('@material-ui/icons/ExpandMore');
+
+var _ExpandMore2 = _interopRequireDefault(_ExpandMore);
+
+var _HighlightOff = require('@material-ui/icons/HighlightOff');
+
+var _HighlightOff2 = _interopRequireDefault(_HighlightOff);
+
+var _Table = require('@material-ui/core/Table');
+
+var _Table2 = _interopRequireDefault(_Table);
+
+var _TableBody = require('@material-ui/core/TableBody');
+
+var _TableBody2 = _interopRequireDefault(_TableBody);
+
+var _TableCell = require('@material-ui/core/TableCell');
+
+var _TableCell2 = _interopRequireDefault(_TableCell);
+
+var _TableRow = require('@material-ui/core/TableRow');
+
+var _TableRow2 = _interopRequireDefault(_TableRow);
+
+var _Divider = require('@material-ui/core/Divider');
+
+var _Divider2 = _interopRequireDefault(_Divider);
+
+var _Typography = require('@material-ui/core/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _Tooltip = require('@material-ui/core/Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+var _VisibilityOutlined = require('@material-ui/icons/VisibilityOutlined');
+
+var _VisibilityOutlined2 = _interopRequireDefault(_VisibilityOutlined);
+
+var _VisibilityOffOutlined = require('@material-ui/icons/VisibilityOffOutlined');
+
+var _VisibilityOffOutlined2 = _interopRequireDefault(_VisibilityOffOutlined);
+
+var _styles = require('@material-ui/core/styles');
+
+var _format = require('../../helpers/format');
+
+var _format2 = _interopRequireDefault(_format);
+
+var _jcamp = require('../../actions/jcamp');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles(theme) {
+  return {
+    panel: {
+      backgroundColor: '#eee',
+      display: 'table-row'
+    },
+    panelSummary: {
+      backgroundColor: '#eee',
+      height: 32
+    },
+    txtBadge: {},
+    panelDetail: {
+      backgroundColor: '#fff',
+      maxHeight: 'calc(90vh - 220px)', // ROI
+      overflow: 'auto'
+    },
+    table: {
+      width: '100%'
+    },
+    tTxt: {
+      padding: 0
+    },
+    tTxtHide: {
+      color: '#D5D8DC'
+    },
+    tRow: {
+      height: 28,
+      '&:nth-of-type(even)': {
+        backgroundColor: theme.palette.background.default
+      }
+    },
+    rmBtn: {
+      color: 'red',
+      padding: '0 5px 0 5px',
+      '&:hover': {
+        borderRadius: 12,
+        backgroundColor: 'red',
+        color: 'white'
+      }
+    },
+    showBtn: {
+      color: 'steelblue',
+      padding: '0 5px 0 5px',
+      '&:hover': {
+        borderRadius: 12,
+        backgroundColor: 'steelblue',
+        color: 'white'
+      }
+    },
+    hideBtn: {
+      color: 'gray',
+      padding: '0 5px 0 5px',
+      '&:hover': {
+        borderRadius: 12,
+        backgroundColor: 'gray',
+        color: 'white'
+      }
+    },
+    square: {
+      textAlign: 'center !important'
+    },
+    baseDD: {
+      backgroundColor: 'white',
+      border: '1px dashed black',
+      borderRadius: 5,
+      height: 26,
+      lineHeight: '26px',
+      margin: '7px 0 7px 0',
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      width: '90%'
+    },
+    enableDD: {
+      border: '2px dashed #000',
+      color: '#000'
+    },
+    disableDD: {
+      border: '2px dashed #aaa',
+      color: '#aaa'
+    },
+    tpCard: {},
+    tpMoreTxt: {
+      padding: '0 0 0 60px'
+    },
+    tpLabel: {
+      fontSize: 16
+    }
+  };
+};
+
+var msgDefault = 'Add spectra to compare.';
+
+var tpHint = function tpHint(classes) {
+  return _react2.default.createElement(
+    'span',
+    { className: (0, _classnames2.default)(classes.tpCard) },
+    _react2.default.createElement(
+      'p',
+      { className: (0, _classnames2.default)(classes.tpLabel, 'txt-sv-tp') },
+      '- Accept *.dx, *.jdx, *.JCAMP,'
+    ),
+    _react2.default.createElement(
+      'p',
+      { className: (0, _classnames2.default)(classes.tpLabel, 'txt-sv-tp') },
+      '- Max 5 spectra.'
+    )
+  );
+};
+
+var content = function content(classes, desc) {
+  return _react2.default.createElement(
+    _Tooltip2.default,
+    {
+      title: tpHint(classes),
+      placement: 'bottom'
+    },
+    _react2.default.createElement(
+      'span',
+      { className: (0, _classnames2.default)(classes.tpLabel, 'txt-sv-tp') },
+      desc
+    )
+  );
+};
+
+var inputOthers = function inputOthers(classes, addOthersCbSt) {
+  var fileName = '';
+  var desc = fileName || msgDefault;
+  var onDrop = function onDrop(jcamps) {
+    if (!addOthersCbSt) return;
+    addOthersCbSt({ jcamps: jcamps });
+  };
+
+  return _react2.default.createElement(
+    _reactDropzone2.default,
+    {
+      className: 'dropbox',
+      onDrop: onDrop
+    },
+    function (_ref) {
+      var getRootProps = _ref.getRootProps,
+          getInputProps = _ref.getInputProps;
+      return _react2.default.createElement(
+        'div',
+        _extends({}, getRootProps(), {
+          className: (0, _classnames2.default)(classes.baseDD)
+        }),
+        _react2.default.createElement('input', getInputProps()),
+        content(classes, desc)
+      );
+    }
+  );
+};
+
+var compareList = function compareList(classes, othersSt, rmOthersOneAct, toggleShowAct) {
+  var rows = othersSt.map(function (o, idx) {
+    return {
+      idx: idx,
+      title: o.spectra[0].title,
+      color: _format2.default.compareColors(idx),
+      rmCb: function rmCb() {
+        return rmOthersOneAct(idx);
+      },
+      isShow: o.show,
+      toggleShowCb: function toggleShowCb() {
+        return toggleShowAct(idx);
+      }
+    };
+  });
+
+  return _react2.default.createElement(
+    _Table2.default,
+    { className: classes.table },
+    _react2.default.createElement(
+      _TableBody2.default,
+      null,
+      rows.map(function (row) {
+        return _react2.default.createElement(
+          _TableRow2.default,
+          { key: row.idx, className: classes.tRow, hover: true },
+          _react2.default.createElement(
+            _TableCell2.default,
+            {
+              align: 'right',
+              className: (0, _classnames2.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+              style: { backgroundColor: row.color }
+            },
+            row.idx + 1
+          ),
+          _react2.default.createElement(
+            _TableCell2.default,
+            { align: 'right', className: (0, _classnames2.default)(classes.tTxt, 'txt-sv-panel-txt', row.isShow ? null : classes.tTxtHide) },
+            row.title
+          ),
+          _react2.default.createElement(
+            _TableCell2.default,
+            { align: 'right', className: (0, _classnames2.default)(classes.tTxt, 'txt-sv-panel-txt') },
+            row.isShow ? _react2.default.createElement(_VisibilityOutlined2.default, {
+              onClick: row.toggleShowCb,
+              className: classes.showBtn
+            }) : _react2.default.createElement(_VisibilityOffOutlined2.default, {
+              onClick: row.toggleShowCb,
+              className: classes.hideBtn
+            }),
+            _react2.default.createElement(_HighlightOff2.default, { onClick: row.rmCb, className: classes.rmBtn })
+          )
+        );
+      })
+    )
+  );
+};
+
+var ComparePanel = function ComparePanel(_ref2) {
+  var classes = _ref2.classes,
+      expand = _ref2.expand,
+      onExapnd = _ref2.onExapnd,
+      othersSt = _ref2.othersSt,
+      addOthersCbSt = _ref2.addOthersCbSt,
+      rmOthersOneAct = _ref2.rmOthersOneAct,
+      toggleShowAct = _ref2.toggleShowAct;
+  return _react2.default.createElement(
+    _ExpansionPanel2.default,
+    {
+      expanded: expand,
+      onChange: onExapnd,
+      className: (0, _classnames2.default)(classes.panel),
+      TransitionProps: { unmountOnExit: true } // increase ExpansionPanel performance
+    },
+    _react2.default.createElement(
+      _ExpansionPanelSummary2.default,
+      {
+        expandIcon: _react2.default.createElement(_ExpandMore2.default, null),
+        className: (0, _classnames2.default)(classes.panelSummary)
+      },
+      _react2.default.createElement(
+        _Typography2.default,
+        { className: 'txt-panel-header' },
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.txtBadge, 'txt-sv-panel-title') },
+          'Spectra Comparisons'
+        )
+      )
+    ),
+    _react2.default.createElement(_Divider2.default, null),
+    inputOthers(classes, addOthersCbSt),
+    _react2.default.createElement(
+      'div',
+      { className: (0, _classnames2.default)(classes.panelDetail) },
+      compareList(classes, othersSt, rmOthersOneAct, toggleShowAct)
+    )
+  );
+};
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return (// eslint-disable-line
+    {
+      othersSt: state.jcamp.others,
+      addOthersCbSt: state.jcamp.addOthersCb
+    }
+  );
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({
+    rmOthersOneAct: _jcamp.rmOthersOne,
+    toggleShowAct: _jcamp.toggleShow
+  }, dispatch);
+};
+
+ComparePanel.propTypes = {
+  classes: _propTypes2.default.object.isRequired,
+  expand: _propTypes2.default.bool.isRequired,
+  onExapnd: _propTypes2.default.func.isRequired,
+  othersSt: _propTypes2.default.array.isRequired,
+  addOthersCbSt: _propTypes2.default.func.isRequired,
+  rmOthersOneAct: _propTypes2.default.func.isRequired,
+  toggleShowAct: _propTypes2.default.func.isRequired
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(ComparePanel));