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

package/dist/components/panel/index.js

@@ -0,0 +1,191 @@
+'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 _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactRedux = require('react-redux');
+
+var _redux = require('redux');
+
+var _styles = require('@material-ui/core/styles');
+
+var _info = require('./info');
+
+var _info2 = _interopRequireDefault(_info);
+
+var _peaks = require('./peaks');
+
+var _peaks2 = _interopRequireDefault(_peaks);
+
+var _compare = require('./compare');
+
+var _compare2 = _interopRequireDefault(_compare);
+
+var _multiplicity = require('./multiplicity');
+
+var _multiplicity2 = _interopRequireDefault(_multiplicity);
+
+var _cfg = require('../../helpers/cfg');
+
+var _cfg2 = _interopRequireDefault(_cfg);
+
+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 theme = (0, _styles.createMuiTheme)({
+  typography: {
+    useNextVariants: true
+  }
+});
+
+var styles = function styles() {
+  return {
+    panels: {
+      maxHeight: 'calc(90vh - 220px)', // ROI
+      display: 'table',
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      margin: '5px 0 0 0',
+      padding: '0 0 0 0',
+      width: '100%'
+    }
+  };
+};
+
+var PanelViewer = function (_React$Component) {
+  _inherits(PanelViewer, _React$Component);
+
+  function PanelViewer(props) {
+    _classCallCheck(this, PanelViewer);
+
+    var _this = _possibleConstructorReturn(this, (PanelViewer.__proto__ || Object.getPrototypeOf(PanelViewer)).call(this, props));
+
+    _this.state = {
+      expand: 'info'
+    };
+
+    _this.onExapnd = _this.onExapnd.bind(_this);
+    _this.handleDescriptionChanged = _this.handleDescriptionChanged.bind(_this);
+    return _this;
+  }
+
+  _createClass(PanelViewer, [{
+    key: 'onExapnd',
+    value: function onExapnd(input) {
+      var expand = this.state.expand;
+
+      var nextExpand = input === expand ? '' : input;
+      this.setState({ expand: nextExpand });
+    }
+  }, {
+    key: 'handleDescriptionChanged',
+    value: function handleDescriptionChanged(content, delta, source, editor) {
+      if (source === 'user') {
+        var contentChanged = editor.getContents();
+        this.props.onDescriptionChanged(contentChanged);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var expand = this.state.expand;
+      var _props = this.props,
+          classes = _props.classes,
+          feature = _props.feature,
+          integration = _props.integration,
+          editorOnly = _props.editorOnly,
+          molSvg = _props.molSvg,
+          descriptions = _props.descriptions,
+          layoutSt = _props.layoutSt,
+          canChangeDescription = _props.canChangeDescription;
+
+      var onExapndInfo = function onExapndInfo() {
+        return _this2.onExapnd('info');
+      };
+      var onExapndPeak = function onExapndPeak() {
+        return _this2.onExapnd('peak');
+      };
+      var onExapndMpy = function onExapndMpy() {
+        return _this2.onExapnd('mpy');
+      };
+      var onExapndCompare = function onExapndCompare() {
+        return _this2.onExapnd('compare');
+      };
+
+      return _react2.default.createElement(
+        'div',
+        { className: (0, _classnames2.default)(classes.panels) },
+        _react2.default.createElement(
+          _styles.MuiThemeProvider,
+          {
+            theme: theme
+          },
+          _react2.default.createElement(_info2.default, {
+            feature: feature,
+            integration: integration,
+            editorOnly: editorOnly,
+            expand: expand === 'info',
+            molSvg: molSvg,
+            onExapnd: onExapndInfo,
+            descriptions: descriptions,
+            canChangeDescription: canChangeDescription,
+            onDescriptionChanged: this.handleDescriptionChanged
+          }),
+          _cfg2.default.hidePanelPeak(layoutSt) ? null : _react2.default.createElement(_peaks2.default, { expand: expand === 'peak', onExapnd: onExapndPeak }),
+          _cfg2.default.hidePanelMpy(layoutSt) ? null : _react2.default.createElement(_multiplicity2.default, { expand: expand === 'mpy', onExapnd: onExapndMpy }),
+          _cfg2.default.hidePanelCompare(layoutSt) ? null : _react2.default.createElement(_compare2.default, { expand: expand === 'compare', onExapnd: onExapndCompare })
+        )
+      );
+    }
+  }]);
+
+  return PanelViewer;
+}(_react2.default.Component);
+
+var mapStateToProps = function mapStateToProps(state, _) {
+  return (// eslint-disable-line
+    {
+      layoutSt: state.layout
+    }
+  );
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({}, dispatch);
+};
+
+PanelViewer.propTypes = {
+  classes: _propTypes2.default.object.isRequired,
+  feature: _propTypes2.default.object.isRequired,
+  integration: _propTypes2.default.object.isRequired,
+  editorOnly: _propTypes2.default.bool.isRequired,
+  molSvg: _propTypes2.default.string.isRequired,
+  descriptions: _propTypes2.default.array.isRequired,
+  layoutSt: _propTypes2.default.string.isRequired,
+  canChangeDescription: _propTypes2.default.bool.isRequired,
+  onDescriptionChanged: _propTypes2.default.func
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(PanelViewer));

package/dist/components/panel/info.js

@@ -0,0 +1,335 @@
+'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 _reactSvgFileZoomPan = require('react-svg-file-zoom-pan');
+
+var _reactSvgFileZoomPan2 = _interopRequireDefault(_reactSvgFileZoomPan);
+
+var _reactQuill = require('react-quill');
+
+var _reactQuill2 = _interopRequireDefault(_reactQuill);
+
+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 _Divider = require('@material-ui/core/Divider');
+
+var _Divider2 = _interopRequireDefault(_Divider);
+
+var _Typography = require('@material-ui/core/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _styles = require('@material-ui/core/styles');
+
+var _format = require('../../helpers/format');
+
+var _format2 = _interopRequireDefault(_format);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles() {
+  return {
+    chip: {
+      margin: '1px 0 1px 0'
+    },
+    panel: {
+      backgroundColor: '#eee',
+      display: 'table-row'
+    },
+    panelSummary: {
+      backgroundColor: '#eee',
+      height: 32
+    },
+    panelDetail: {
+      backgroundColor: '#fff',
+      maxHeight: 'calc(90vh - 220px)', // ROI
+      overflow: 'auto'
+    },
+    table: {
+      width: 'auto'
+    },
+    rowRoot: {
+      border: '1px solid #eee',
+      height: 36,
+      lineHeight: '36px',
+      overflow: 'hidden',
+      paddingLeft: 24,
+      textAlign: 'left'
+    },
+    rowOdd: {
+      backgroundColor: '#fff',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    },
+    rowEven: {
+      backgroundColor: '#fafafa',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    },
+    rowOddSim: {
+      backgroundColor: '#fff',
+      height: 108,
+      lineHeight: '24px',
+      overflowY: 'scroll',
+      overflowWrap: 'word-break'
+    },
+    tHead: {
+      fontWeight: 'bold',
+      float: 'left',
+      fontSize: '0.8rem',
+      fontFamily: 'Helvetica'
+    },
+    tTxt: {
+      fontSize: '0.8rem',
+      fontFamily: 'Helvetica',
+      marginRight: 3
+    },
+    quill: {
+      backgroundColor: '#fafafa',
+      border: '1px solid #eee',
+      fontSize: '0.8rem',
+      fontFamily: 'Helvetica',
+      padding: '0 10px 0 10px',
+      textAlign: 'left'
+    }
+  };
+};
+
+var simTitle = function simTitle() {
+  return 'Simulated signals from NMRshiftDB';
+};
+
+var simContent = function simContent(nmrSimPeaks) {
+  return nmrSimPeaks && nmrSimPeaks.sort(function (a, b) {
+    return a - b;
+  }).join(', ');
+};
+
+var aucValue = function aucValue(stackIntegration) {
+  var values = [];
+  if (Array.isArray(stackIntegration)) {
+    var sumVal = 0.0;
+    stackIntegration.forEach(function (inte) {
+      if (inte.area) {
+        sumVal += inte.area;
+      }
+    });
+    sumVal = sumVal.toFixed(2);
+    stackIntegration.forEach(function (inte) {
+      var areaVal = inte.area.toFixed(2);
+      var percent = (areaVal * 100 / sumVal).toFixed(2);
+      var valStr = areaVal + " (" + percent + "%)";
+      values.push(valStr);
+    });
+  }
+  return values.join(", ");
+};
+
+var InfoPanel = function InfoPanel(_ref) {
+  var classes = _ref.classes,
+      expand = _ref.expand,
+      feature = _ref.feature,
+      integration = _ref.integration,
+      editorOnly = _ref.editorOnly,
+      molSvg = _ref.molSvg,
+      descriptions = _ref.descriptions,
+      layoutSt = _ref.layoutSt,
+      simulationSt = _ref.simulationSt,
+      shiftNameSt = _ref.shiftNameSt,
+      onExapnd = _ref.onExapnd,
+      canChangeDescription = _ref.canChangeDescription,
+      onDescriptionChanged = _ref.onDescriptionChanged;
+
+  if (!feature) return null;
+  var title = feature.title,
+      observeFrequency = feature.observeFrequency,
+      solventName = feature.solventName;
+
+  var showSolvName = shiftNameSt === '- - -' ? solventName : shiftNameSt;
+
+  var originStack = null;
+  if (integration) {
+    originStack = integration.originStack;
+  }
+
+  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') },
+          'Info'
+        )
+      )
+    ),
+    _react2.default.createElement(_Divider2.default, null),
+    _react2.default.createElement(
+      'div',
+      { className: (0, _classnames2.default)(classes.panelDetail) },
+      _react2.default.createElement(
+        'div',
+        { className: (0, _classnames2.default)(classes.rowRoot, classes.rowOdd) },
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt') },
+          'Title : '
+        ),
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.tTxt, 'txt-sv-panel-txt') },
+          title
+        )
+      ),
+      _format2.default.isNmrLayout(layoutSt) ? _react2.default.createElement(
+        'div',
+        { className: (0, _classnames2.default)(classes.rowRoot, classes.rowEven) },
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt') },
+          'Freq : '
+        ),
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.tTxt, 'txt-sv-panel-txt') },
+          parseInt(observeFrequency, 10) || ' - '
+        )
+      ) : null,
+      _format2.default.isNmrLayout(layoutSt) ? _react2.default.createElement(
+        'div',
+        { className: (0, _classnames2.default)(classes.rowRoot, classes.rowOdd) },
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt') },
+          'Solv : '
+        ),
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.tTxt, 'txt-sv-panel-txt') },
+          showSolvName
+        )
+      ) : null,
+      !molSvg ? null : _react2.default.createElement(_reactSvgFileZoomPan2.default, {
+        svg: molSvg,
+        duration: 300,
+        resize: true
+      }),
+      _format2.default.isUvVisLayout(layoutSt) || _format2.default.isHplcUvVisLayout ? _react2.default.createElement(
+        'div',
+        { className: (0, _classnames2.default)(classes.rowRoot, classes.rowOddSim) },
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt') },
+          'Area under curve (AUC):'
+        ),
+        _react2.default.createElement('br', null),
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt') },
+          aucValue(originStack)
+        )
+      ) : null
+    ),
+    _react2.default.createElement(_reactQuill2.default, {
+      className: (0, _classnames2.default)(classes.quill, 'card-sv-quill'),
+      value: descriptions,
+      modules: { toolbar: false },
+      onChange: onDescriptionChanged,
+      readOnly: canChangeDescription !== undefined ? !canChangeDescription : true
+    }),
+    _react2.default.createElement(
+      'div',
+      null,
+      !editorOnly && _format2.default.isNmrLayout(layoutSt) ? _react2.default.createElement(
+        'div',
+        { className: (0, _classnames2.default)(classes.rowRoot, classes.rowOddSim) },
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt') },
+          simTitle(),
+          ':'
+        ),
+        _react2.default.createElement('br', null),
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt') },
+          simContent(simulationSt.nmrSimPeaks)
+        )
+      ) : null
+    )
+  );
+};
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return (// eslint-disable-line
+    {
+      layoutSt: state.layout,
+      simulationSt: state.simulation,
+      shiftNameSt: state.shift.ref.name
+    }
+  );
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({}, dispatch);
+};
+
+InfoPanel.propTypes = {
+  classes: _propTypes2.default.object.isRequired,
+  expand: _propTypes2.default.bool.isRequired,
+  feature: _propTypes2.default.object.isRequired,
+  integration: _propTypes2.default.object.isRequired,
+  editorOnly: _propTypes2.default.bool.isRequired,
+  molSvg: _propTypes2.default.string.isRequired,
+  descriptions: _propTypes2.default.array.isRequired,
+  layoutSt: _propTypes2.default.string.isRequired,
+  simulationSt: _propTypes2.default.array.isRequired,
+  shiftNameSt: _propTypes2.default.string.isRequired,
+  onExapnd: _propTypes2.default.func.isRequired,
+  canChangeDescription: _propTypes2.default.bool.isRequired,
+  onDescriptionChanged: _propTypes2.default.func
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(InfoPanel));