@complat/react-spectra-editor 1.0.0-rc2 → 1.0.0-rc20.patch-1

package/dist/components/forecast/ir_comps.js

@@ -25,19 +25,21 @@ prefer-object-spread */
 
 // import SmaToSvg from '../common/chem';
 
-var baseSelectIrStatus = function baseSelectIrStatus(_ref) {
-  var sma = _ref.sma,
-    status = _ref.status,
-    identity = _ref.identity,
-    setIrStatusAct = _ref.setIrStatusAct;
-  var theStatus = ['accept', 'reject'].includes(status) ? status : '';
+const baseSelectIrStatus = _ref => {
+  let {
+    sma,
+    status,
+    identity,
+    setIrStatusAct
+  } = _ref;
+  const theStatus = ['accept', 'reject'].includes(status) ? status : '';
   return /*#__PURE__*/_react.default.createElement(_FormControl.default, null, /*#__PURE__*/_react.default.createElement(_Select.default, {
     value: theStatus,
-    onChange: function onChange(e) {
+    onChange: e => {
       setIrStatusAct({
         predictions: {
-          sma: sma,
-          identity: identity,
+          sma,
+          identity,
           value: e.target.value
         },
         svgs: []
@@ -59,17 +61,12 @@ var baseSelectIrStatus = function baseSelectIrStatus(_ref) {
     value: ""
   }, /*#__PURE__*/_react.default.createElement("span", null))));
 };
-var bssMapStateToProps = function bssMapStateToProps(state, props) {
-  return (
-    // eslint-disable-line
-    {}
-  );
-};
-var bssMapDispatchToProps = function bssMapDispatchToProps(dispatch) {
-  return (0, _redux.bindActionCreators)({
-    setIrStatusAct: _forecast.setIrStatus
-  }, dispatch);
-};
+const bssMapStateToProps = (state, props) => (
+// eslint-disable-line
+{});
+const bssMapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  setIrStatusAct: _forecast.setIrStatus
+}, dispatch);
 baseSelectIrStatus.propTypes = {
   sma: _propTypes.default.string.isRequired,
   status: _propTypes.default.string,
@@ -79,20 +76,18 @@ baseSelectIrStatus.propTypes = {
 baseSelectIrStatus.defaultProps = {
   status: ''
 };
-var SelectIrStatus = (0, _reactRedux.connect)(bssMapStateToProps, bssMapDispatchToProps)(baseSelectIrStatus);
-var IrTableHeader = function IrTableHeader(classes) {
-  return /*#__PURE__*/_react.default.createElement(_TableHead.default, null, /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, null), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "left"
-  }, (0, _comps.TxtLabel)(classes, 'FG SMARTS', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, 'Machine Confidence', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, 'Machine', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, 'Owner', 'txt-prd-table-title'))));
-};
+const SelectIrStatus = (0, _reactRedux.connect)(bssMapStateToProps, bssMapDispatchToProps)(baseSelectIrStatus);
+const IrTableHeader = classes => /*#__PURE__*/_react.default.createElement(_TableHead.default, null, /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, null), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "left"
+}, (0, _comps.TxtLabel)(classes, 'FG SMARTS', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, 'Machine Confidence', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, 'Machine', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, 'Owner', 'txt-prd-table-title'))));
 exports.IrTableHeader = IrTableHeader;
-var colorStyles = [{
+const colorStyles = [{
   backgroundColor: '#FFFF00'
 }, {
   backgroundColor: '#87CEFA'
@@ -109,9 +104,9 @@ var colorStyles = [{
 }, {
   backgroundColor: '#F5F5DC'
 }];
-var colorLabel = function colorLabel(classes, idx) {
-  var extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-label';
-  var style = Object.assign({}, colorStyles[idx % 8], {
+const colorLabel = function (classes, idx) {
+  let extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-label';
+  const style = Object.assign({}, colorStyles[idx % 8], {
     width: 20,
     borderRadius: 20,
     textAlign: 'center'
@@ -122,24 +117,22 @@ var colorLabel = function colorLabel(classes, idx) {
     className: (0, _classnames.default)(classes.txtLabel, extClsName)
   }, idx + 1));
 };
-var IrTableBodyRow = function IrTableBodyRow(classes, idx, fg) {
-  return /*#__PURE__*/_react.default.createElement(_TableRow.default, {
-    key: "".concat(idx, "-").concat(fg.name)
-  }, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    component: "th",
-    scope: "row"
-  }, colorLabel(classes, idx)), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "left"
-  }, (0, _comps.TxtLabel)(classes, fg.sma, 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.ConfidenceLabel)(classes, fg.confidence, 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.StatusIcon)(fg.status)), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, /*#__PURE__*/_react.default.createElement(SelectIrStatus, {
-    sma: fg.sma,
-    status: fg.statusOwner,
-    identity: "Owner"
-  })));
-};
+const IrTableBodyRow = (classes, idx, fg) => /*#__PURE__*/_react.default.createElement(_TableRow.default, {
+  key: `${idx}-${fg.name}`
+}, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  component: "th",
+  scope: "row"
+}, colorLabel(classes, idx)), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "left"
+}, (0, _comps.TxtLabel)(classes, fg.sma, 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.ConfidenceLabel)(classes, fg.confidence, 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.StatusIcon)(fg.status)), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, /*#__PURE__*/_react.default.createElement(SelectIrStatus, {
+  sma: fg.sma,
+  status: fg.statusOwner,
+  identity: "Owner"
+})));
 exports.IrTableBodyRow = IrTableBodyRow;

package/dist/components/forecast/ir_viewer.js

@@ -17,70 +17,69 @@ var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 var _comps = require("./comps");
 var _ir_comps = require("./ir_comps");
-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);
+const Styles = () => ({
+  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
+  }
+});
+const sectionTable = (classes, pds) => {
+  const 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;
+  const {
+    fgs
+  } = pds.output.result[0];
   if (!fgs) return null;
   return /*#__PURE__*/_react.default.createElement(_Paper.default, {
     className: classes.tableRoot
   }, /*#__PURE__*/_react.default.createElement(_Table.default, {
     className: classes.table,
     size: "small"
-  }, (0, _ir_comps.IrTableHeader)(classes), /*#__PURE__*/_react.default.createElement(_TableBody.default, null, fgs.sort(function (a, b) {
-    return b.confidence - a.confidence;
-  }).map(function (fg, idx) {
-    return (0, _ir_comps.IrTableBodyRow)(classes, idx, fg);
-  }))));
+  }, (0, _ir_comps.IrTableHeader)(classes), /*#__PURE__*/_react.default.createElement(_TableBody.default, null, fgs.sort((a, b) => b.confidence - a.confidence).map((fg, idx) => (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;
+const IrViewer = _ref => {
+  let {
+    // eslint-disable-line
+    classes,
+    molecule,
+    inputCb,
+    forecastSt
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.root, 'card-forecast-viewer')
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
@@ -96,17 +95,12 @@ var IrViewer = function IrViewer(_ref) {
     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);
-};
+const mapStateToProps = (state, props) => (
+// eslint-disable-line
+{
+  forecastSt: state.forecast
+});
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch);
 IrViewer.propTypes = {
   classes: _propTypes.default.object.isRequired,
   molecule: _propTypes.default.string.isRequired,
@@ -116,5 +110,4 @@ IrViewer.propTypes = {
 IrViewer.defaultProps = {
   inputCb: false
 };
-var _default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(Styles))(IrViewer);
-exports.default = _default;
+var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(Styles))(IrViewer);

package/dist/components/forecast/nmr_comps.js

@@ -22,21 +22,24 @@ var _comps = require("./comps");
 var _forecast = require("../../actions/forecast");
 /* eslint-disable react/function-component-definition, react/destructuring-assignment */
 
-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 : '';
+const baseSelectNmrStatus = _ref => {
+  let {
+    // eslint-disable-line
+    idx,
+    atom,
+    status,
+    identity,
+    setNmrStatusAct
+  } = _ref;
+  const theStatus = ['accept', 'reject'].includes(status) ? status : '';
   return /*#__PURE__*/_react.default.createElement(_FormControl.default, null, /*#__PURE__*/_react.default.createElement(_Select.default, {
     value: theStatus,
-    onChange: function onChange(e) {
+    onChange: e => {
       setNmrStatusAct({
         predictions: {
-          idx: idx,
-          atom: atom,
-          identity: identity,
+          idx,
+          atom,
+          identity,
           value: e.target.value
         },
         svgs: []
@@ -58,17 +61,12 @@ var baseSelectNmrStatus = function baseSelectNmrStatus(_ref) {
     value: ""
   }, /*#__PURE__*/_react.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);
-};
+const bssMapStateToProps = (state, props) => (
+// eslint-disable-line
+{});
+const bssMapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  setNmrStatusAct: _forecast.setNmrStatus
+}, dispatch);
 baseSelectNmrStatus.propTypes = {
   idx: _propTypes.default.number.isRequired,
   atom: _propTypes.default.number.isRequired,
@@ -79,64 +77,56 @@ baseSelectNmrStatus.propTypes = {
 baseSelectNmrStatus.defaultProps = {
   status: ''
 };
-var SelectNmrStatus = (0, _reactRedux.connect)(
+const SelectNmrStatus = (0, _reactRedux.connect)(
 // eslint-disable-line
 bssMapStateToProps, bssMapDispatchToProps)(baseSelectNmrStatus); // eslint-disable-line
 
-var numFormat = function numFormat(input) {
-  return parseFloat(input).toFixed(2);
-};
-var realFormat = function realFormat(val, status) {
+const numFormat = input => parseFloat(input).toFixed(2);
+const realFormat = (val, status) => {
   if (status === 'missing') {
     return '- - -';
   }
   return numFormat(val);
 };
-var NmrTableHeader = function NmrTableHeader(classes) {
-  return /*#__PURE__*/_react.default.createElement(_TableHead.default, null, /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, null, (0, _comps.TxtLabel)(classes, 'Atom', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, 'Prediction (ppm)', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, 'Real (ppm)', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, 'Diff (ppm)', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, 'Machine', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, 'Owner', 'txt-prd-table-title'))));
-};
+const NmrTableHeader = classes => /*#__PURE__*/_react.default.createElement(_TableHead.default, null, /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, null, (0, _comps.TxtLabel)(classes, 'Atom', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, 'Prediction (ppm)', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, 'Real (ppm)', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, 'Diff (ppm)', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, 'Machine', 'txt-prd-table-title')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, 'Owner', 'txt-prd-table-title'))));
 exports.NmrTableHeader = NmrTableHeader;
-var NmrTableBodyRow = function NmrTableBodyRow(classes, row, idx) {
-  return /*#__PURE__*/_react.default.createElement(_TableRow.default, {
-    key: "".concat(idx, "-").concat(row.atom)
-  }, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    component: "th",
-    scope: "row"
-  }, (0, _comps.TxtLabel)(classes, row.atom, 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, numFormat(row.prediction), 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, realFormat(row.real, row.status), 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.TxtLabel)(classes, realFormat(row.diff, row.status), 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, (0, _comps.StatusIcon)(row.status)), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    align: "right"
-  }, /*#__PURE__*/_react.default.createElement(SelectNmrStatus, {
-    idx: idx,
-    atom: row.atom,
-    status: row.statusOwner,
-    identity: "Owner"
-  })));
-};
+const NmrTableBodyRow = (classes, row, idx) => /*#__PURE__*/_react.default.createElement(_TableRow.default, {
+  key: `${idx}-${row.atom}`
+}, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  component: "th",
+  scope: "row"
+}, (0, _comps.TxtLabel)(classes, row.atom, 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, numFormat(row.prediction), 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, realFormat(row.real, row.status), 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.TxtLabel)(classes, realFormat(row.diff, row.status), 'txt-prd-table-content')), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, (0, _comps.StatusIcon)(row.status)), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  align: "right"
+}, /*#__PURE__*/_react.default.createElement(SelectNmrStatus, {
+  idx: idx,
+  atom: row.atom,
+  status: row.statusOwner,
+  identity: "Owner"
+})));
 exports.NmrTableBodyRow = NmrTableBodyRow;
-var SectionReference = function SectionReference(classes) {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.reference)
-  }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("span", null, "NMR prediction source: "), /*#__PURE__*/_react.default.createElement("a", {
-    href: "https://www.ncbi.nlm.nih.gov/pubmed/15464159",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, "nmrshiftdb")));
-};
+const SectionReference = classes => /*#__PURE__*/_react.default.createElement("div", {
+  className: (0, _classnames.default)(classes.reference)
+}, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("span", null, "NMR prediction source: "), /*#__PURE__*/_react.default.createElement("a", {
+  href: "https://www.ncbi.nlm.nih.gov/pubmed/15464159",
+  target: "_blank",
+  rel: "noopener noreferrer"
+}, "nmrshiftdb")));
 exports.SectionReference = SectionReference;

package/dist/components/forecast/nmr_viewer.js

@@ -17,69 +17,66 @@ var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 var _comps = require("./comps");
 var _nmr_comps = require("./nmr_comps");
-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);
+const Styles = () => ({
+  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
+  }
+});
+const sectionTable = (classes, pds) => {
+  const renderMsg = (0, _comps.notToRenderAnalysis)(pds);
   if (renderMsg) return renderMsg;
-  var dict = pds.output.result[0];
+  const dict = pds.output.result[0];
   if (!dict) return /*#__PURE__*/_react.default.createElement("div", null);
   return /*#__PURE__*/_react.default.createElement(_Paper.default, {
     className: classes.tableRoot
   }, /*#__PURE__*/_react.default.createElement(_Table.default, {
     className: classes.table,
     size: "small"
-  }, (0, _nmr_comps.NmrTableHeader)(classes), /*#__PURE__*/_react.default.createElement(_TableBody.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);
-  }))));
+  }, (0, _nmr_comps.NmrTableHeader)(classes), /*#__PURE__*/_react.default.createElement(_TableBody.default, null, dict.shifts.sort((a, b) => a.atom - b.atom).map((row, idx) => (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;
+const NmrViewer = _ref => {
+  let {
+    // eslint-disable-line
+    classes,
+    molecule,
+    inputCb,
+    forecastSt
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.root, 'card-forecast-viewer')
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
@@ -95,17 +92,12 @@ var NmrViewer = function NmrViewer(_ref) {
     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);
-};
+const mapStateToProps = (state, props) => (
+// eslint-disable-line
+{
+  forecastSt: state.forecast
+});
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch);
 NmrViewer.propTypes = {
   classes: _propTypes.default.object.isRequired,
   molecule: _propTypes.default.string.isRequired,
@@ -115,5 +107,4 @@ NmrViewer.propTypes = {
 NmrViewer.defaultProps = {
   inputCb: false
 };
-var _default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(Styles))(NmrViewer);
-exports.default = _default;
+var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(Styles))(NmrViewer);