@complat/react-spectra-editor 0.11.3 → 0.11.4-beta.0

package/dist/components/panel/compare_bk.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));

package/dist/components/panel/info_bk.js

@@ -0,0 +1,341 @@
+'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('@complat/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(integration) {
+  if (!integration) {
+    return "";
+  }
+  var values = [];
+  var stackIntegration = integration.stack;
+  if (Array.isArray(stackIntegration)) {
+    var sumVal = 0.0;
+    stackIntegration.forEach(function (inte) {
+      if (inte.absoluteArea) {
+        sumVal += inte.absoluteArea;
+      }
+    });
+    sumVal = sumVal.toFixed(2);
+    stackIntegration.forEach(function (inte) {
+      if (inte.absoluteArea) {
+        var areaVal = inte.absoluteArea.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.isHplcUvVisLayout(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') },
+          '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(integration)
+        )
+      ) : 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));