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

package/dist/components/d3_rect/rect_focus.js

@@ -1,15 +1,10 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var d3 = _interopRequireWildcard(require("d3"));
 var _init = require("../../helpers/init");
 var _brush = _interopRequireDefault(require("../../helpers/brush"));
@@ -17,16 +12,17 @@ var _mount = require("../../helpers/mount");
 var _compass = require("../../helpers/compass");
 var _converter = require("../../helpers/converter");
 var _list_layout = require("../../constants/list_layout");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var RectFocus = /*#__PURE__*/function () {
-  function RectFocus(props) {
-    (0, _classCallCheck2.default)(this, RectFocus);
-    var W = props.W,
-      H = props.H,
-      clickUiTargetAct = props.clickUiTargetAct,
-      selectUiSweepAct = props.selectUiSweepAct,
-      scrollUiWheelAct = props.scrollUiWheelAct;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class RectFocus {
+  constructor(props) {
+    const {
+      W,
+      H,
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct
+    } = props;
     this.rootKlass = '.d3Rect';
     this.margin = {
       t: 5,
@@ -70,203 +66,162 @@ var RectFocus = /*#__PURE__*/function () {
     this.mergedPeaks = this.mergedPeaks.bind(this);
     this.isFirefox = typeof InstallTrigger !== 'undefined';
   }
-  (0, _createClass2.default)(RectFocus, [{
-    key: "setTip",
-    value: function setTip() {
-      this.tip = (0, _init.InitTip)();
-      this.root.call(this.tip);
-    }
-  }, {
-    key: "setDataParams",
-    value: function setDataParams(data, peaks, tTrEndPts, tSfPeaks) {
-      this.data = (0, _toConsumableArray2.default)(data);
-      this.dataPks = (0, _toConsumableArray2.default)(peaks);
-      this.tTrEndPts = tTrEndPts;
-      this.tSfPeaks = tSfPeaks;
-    }
-  }, {
-    key: "updatePathCall",
-    value: function updatePathCall(xt, yt) {
-      this.pathCall = d3.line().x(function (d) {
-        return xt(d.x);
-      }).y(function (d) {
-        return yt(d.y);
-      });
+  setTip() {
+    this.tip = (0, _init.InitTip)();
+    this.root.call(this.tip);
+  }
+  setDataParams(data, peaks, tTrEndPts, tSfPeaks) {
+    this.data = [...data];
+    this.dataPks = [...peaks];
+    this.tTrEndPts = tTrEndPts;
+    this.tSfPeaks = tSfPeaks;
+  }
+  updatePathCall(xt, yt) {
+    this.pathCall = d3.line().x(d => xt(d.x)).y(d => yt(d.y));
+  }
+  setConfig(sweepExtentSt) {
+    // Domain Calculate
+    let {
+      xExtent,
+      yExtent
+    } = sweepExtentSt || {
+      xExtent: false,
+      yExtent: false
+    };
+    if (!xExtent || !yExtent) {
+      const xes = d3.extent(this.data, d => d.x).sort((a, b) => a - b);
+      xExtent = {
+        xL: xes[0] - 10,
+        xU: xes[1] + 10
+      };
+      const btm = 0; // MS baseline is always 0.
+      const top = d3.max(this.data, d => d.y);
+      const height = top - btm;
+      yExtent = {
+        yL: btm - this.factor * height,
+        yU: top + this.factor * height
+      };
     }
-  }, {
-    key: "setConfig",
-    value: function setConfig(sweepExtentSt) {
-      // Domain Calculate
-      var _ref = sweepExtentSt || {
-          xExtent: false,
-          yExtent: false
-        },
-        xExtent = _ref.xExtent,
-        yExtent = _ref.yExtent;
-      if (!xExtent || !yExtent) {
-        var xes = d3.extent(this.data, function (d) {
-          return d.x;
-        }).sort(function (a, b) {
-          return a - b;
-        });
-        xExtent = {
-          xL: xes[0] - 10,
-          xU: xes[1] + 10
-        };
-        var btm = 0; // MS baseline is always 0.
-        var top = d3.max(this.data, function (d) {
-          return d.y;
-        });
-        var height = top - btm;
-        yExtent = {
-          yL: btm - this.factor * height,
-          yU: top + this.factor * height
-        };
-      }
-      this.scales.x.domain([xExtent.xL, xExtent.xU]);
-      this.scales.y.domain([yExtent.yL, yExtent.yU]);
+    this.scales.x.domain([xExtent.xL, xExtent.xU]);
+    this.scales.y.domain([yExtent.yL, yExtent.yU]);
 
-      // rescale for zoom
-      var _TfRescale = (0, _compass.TfRescale)(this),
-        xt = _TfRescale.xt,
-        yt = _TfRescale.yt;
+    // rescale for zoom
+    const {
+      xt,
+      yt
+    } = (0, _compass.TfRescale)(this);
 
-      // Axis Call
-      this.axisCall.x.scale(xt);
-      this.axisCall.y.scale(yt);
-      this.currentExtent = {
-        xExtent: xExtent,
-        yExtent: yExtent
+    // Axis Call
+    this.axisCall.x.scale(xt);
+    this.axisCall.y.scale(yt);
+    this.currentExtent = {
+      xExtent,
+      yExtent
+    };
+  }
+  posHeight(gnd, val) {
+    const h = gnd - val;
+    return h >= 0 ? h : 0;
+  }
+  barColor(y, yRef) {
+    return y >= yRef ? 'steelblue' : '#aaa';
+  }
+  drawBar() {
+    const {
+      xt,
+      yt
+    } = (0, _compass.TfRescale)(this);
+    this.updatePathCall(xt, yt);
+    const yRef = this.tTrEndPts[0].y;
+    const bars = this.bars.selectAll('rect').data(this.data);
+    bars.exit().attr('class', 'exit').remove();
+    const gnd = yt(0);
+    bars.enter().append('rect').attr('class', 'enter-bar').attr('width', 1.5).merge(bars).attr('fill', d => this.barColor(d.y, yRef)).attr('height', d => this.posHeight(gnd, yt(d.y))).attr('id', d => `mpp${Math.round(1000 * d.x)}`).attr('transform', d => `translate(${xt(d.x)}, ${yt(d.y)})`).on('mouseover', (d, i, n) => {
+      d3.select(`#mpp${Math.round(1000 * d.x)}`).attr('stroke-opacity', '1.0');
+      d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'blue');
+      const tipParams = {
+        d,
+        layout: this.layout
       };
+      this.tip.show(tipParams, n[i]);
+    }).on('mouseout', (d, i, n) => {
+      d3.select(`#mpp${Math.round(1000 * d.x)}`).attr('stroke-opacity', '1.0');
+      d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'red');
+      const tipParams = {
+        d,
+        layout: this.layout
+      };
+      this.tip.hide(tipParams, n[i]);
+    });
+  }
+  drawThres() {
+    if (this.tTrEndPts.length > 0) {
+      this.thresLine.attr('d', this.pathCall(this.tTrEndPts));
+      this.thresLine.attr('visibility', 'visible');
+    } else {
+      this.thresLine.attr('visibility', 'hidden');
     }
-  }, {
-    key: "posHeight",
-    value: function posHeight(gnd, val) {
-      var h = gnd - val;
-      return h >= 0 ? h : 0;
-    }
-  }, {
-    key: "barColor",
-    value: function barColor(y, yRef) {
-      return y >= yRef ? 'steelblue' : '#aaa';
-    }
-  }, {
-    key: "drawBar",
-    value: function drawBar() {
-      var _this = this;
-      var _TfRescale2 = (0, _compass.TfRescale)(this),
-        xt = _TfRescale2.xt,
-        yt = _TfRescale2.yt;
-      this.updatePathCall(xt, yt);
-      var yRef = this.tTrEndPts[0].y;
-      var bars = this.bars.selectAll('rect').data(this.data);
-      bars.exit().attr('class', 'exit').remove();
-      var gnd = yt(0);
-      bars.enter().append('rect').attr('class', 'enter-bar').attr('width', 1.5).merge(bars).attr('fill', function (d) {
-        return _this.barColor(d.y, yRef);
-      }).attr('height', function (d) {
-        return _this.posHeight(gnd, yt(d.y));
-      }).attr('id', function (d) {
-        return "mpp".concat(Math.round(1000 * d.x));
-      }).attr('transform', function (d) {
-        return "translate(".concat(xt(d.x), ", ").concat(yt(d.y), ")");
-      }).on('mouseover', function (d, i, n) {
-        d3.select("#mpp".concat(Math.round(1000 * d.x))).attr('stroke-opacity', '1.0');
-        d3.select("#bpt".concat(Math.round(1000 * d.x))).style('fill', 'blue');
-        var tipParams = {
-          d: d,
-          layout: _this.layout
-        };
-        _this.tip.show(tipParams, n[i]);
-      }).on('mouseout', function (d, i, n) {
-        d3.select("#mpp".concat(Math.round(1000 * d.x))).attr('stroke-opacity', '1.0');
-        d3.select("#bpt".concat(Math.round(1000 * d.x))).style('fill', 'red');
-        var tipParams = {
-          d: d,
-          layout: _this.layout
-        };
-        _this.tip.hide(tipParams, n[i]);
-      });
-    }
-  }, {
-    key: "drawThres",
-    value: function drawThres() {
-      if (this.tTrEndPts.length > 0) {
-        this.thresLine.attr('d', this.pathCall(this.tTrEndPts));
-        this.thresLine.attr('visibility', 'visible');
-      } else {
-        this.thresLine.attr('visibility', 'hidden');
-      }
-    }
-  }, {
-    key: "drawGrid",
-    value: function drawGrid() {
-      this.grid.x.call(this.axisCall.x.tickSize(-this.h, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
-      this.grid.y.call(this.axisCall.y.tickSize(-this.w, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
-    }
-  }, {
-    key: "mergedPeaks",
-    value: function mergedPeaks(editPeakSt) {
-      if (!editPeakSt) return this.dataPks;
-      this.dataPks = (0, _converter.PksEdit)(this.dataPks, editPeakSt);
-      return this.dataPks;
-    }
-  }, {
-    key: "create",
-    value: function create(_ref2) {
-      var filterSeed = _ref2.filterSeed,
-        filterPeak = _ref2.filterPeak,
-        tTrEndPts = _ref2.tTrEndPts,
-        tSfPeaks = _ref2.tSfPeaks,
-        sweepExtentSt = _ref2.sweepExtentSt,
-        isUiAddIntgSt = _ref2.isUiAddIntgSt,
-        isUiNoBrushSt = _ref2.isUiNoBrushSt;
-      this.svg = d3.select('.d3Svg');
-      (0, _mount.MountMainFrame)(this, 'focus');
-      (0, _mount.MountClip)(this);
-      this.root = d3.select(this.rootKlass).selectAll('.focus-main');
-      this.setTip();
-      this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks);
-      (0, _compass.MountCompass)(this);
-      this.axis = (0, _mount.MountAxis)(this);
-      var _MountThresLine = (0, _mount.MountThresLine)(this, 'green');
-      var _MountThresLine2 = (0, _slicedToArray2.default)(_MountThresLine, 1);
-      this.thresLine = _MountThresLine2[0];
-      this.grid = (0, _mount.MountGrid)(this);
-      this.ref = (0, _mount.MountRef)(this);
-      this.bars = (0, _mount.MountBars)(this);
-      (0, _mount.MountAxisLabelX)(this);
-      (0, _mount.MountAxisLabelY)(this);
-      if (this.data && this.data.length > 0) {
-        this.setConfig(sweepExtentSt);
-        this.drawBar();
-        this.drawThres();
-        this.drawGrid();
-      }
-      (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt);
+  }
+  drawGrid() {
+    this.grid.x.call(this.axisCall.x.tickSize(-this.h, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
+    this.grid.y.call(this.axisCall.y.tickSize(-this.w, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
+  }
+  mergedPeaks(editPeakSt) {
+    if (!editPeakSt) return this.dataPks;
+    this.dataPks = (0, _converter.PksEdit)(this.dataPks, editPeakSt);
+    return this.dataPks;
+  }
+  create(_ref) {
+    let {
+      filterSeed,
+      filterPeak,
+      tTrEndPts,
+      tSfPeaks,
+      sweepExtentSt,
+      isUiAddIntgSt,
+      isUiNoBrushSt
+    } = _ref;
+    this.svg = d3.select('.d3Svg');
+    (0, _mount.MountMainFrame)(this, 'focus');
+    (0, _mount.MountClip)(this);
+    this.root = d3.select(this.rootKlass).selectAll('.focus-main');
+    this.setTip();
+    this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks);
+    (0, _compass.MountCompass)(this);
+    this.axis = (0, _mount.MountAxis)(this);
+    [this.thresLine] = (0, _mount.MountThresLine)(this, 'green');
+    this.grid = (0, _mount.MountGrid)(this);
+    this.ref = (0, _mount.MountRef)(this);
+    this.bars = (0, _mount.MountBars)(this);
+    (0, _mount.MountAxisLabelX)(this);
+    (0, _mount.MountAxisLabelY)(this);
+    if (this.data && this.data.length > 0) {
+      this.setConfig(sweepExtentSt);
+      this.drawBar();
+      this.drawThres();
+      this.drawGrid();
     }
-  }, {
-    key: "update",
-    value: function update(_ref3) {
-      var filterSeed = _ref3.filterSeed,
-        filterPeak = _ref3.filterPeak,
-        tTrEndPts = _ref3.tTrEndPts,
-        tSfPeaks = _ref3.tSfPeaks,
-        sweepExtentSt = _ref3.sweepExtentSt,
-        isUiAddIntgSt = _ref3.isUiAddIntgSt,
-        isUiNoBrushSt = _ref3.isUiNoBrushSt;
-      this.root = d3.select(this.rootKlass).selectAll('.focus-main');
-      this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks);
-      if (this.data && this.data.length > 0) {
-        this.setConfig(sweepExtentSt);
-        this.drawBar();
-        this.drawThres();
-        this.drawGrid();
-      }
-      (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt);
+    (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt);
+  }
+  update(_ref2) {
+    let {
+      filterSeed,
+      filterPeak,
+      tTrEndPts,
+      tSfPeaks,
+      sweepExtentSt,
+      isUiAddIntgSt,
+      isUiNoBrushSt
+    } = _ref2;
+    this.root = d3.select(this.rootKlass).selectAll('.focus-main');
+    this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks);
+    if (this.data && this.data.length > 0) {
+      this.setConfig(sweepExtentSt);
+      this.drawBar();
+      this.drawThres();
+      this.drawGrid();
     }
-  }]);
-  return RectFocus;
-}();
-var _default = RectFocus;
-exports.default = _default;
+    (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt);
+  }
+}
+var _default = exports.default = RectFocus;

package/dist/components/forecast/comps.js

@@ -22,7 +22,7 @@ var _section_loading = _interopRequireDefault(require("./section_loading"));
 /* eslint-disable react/function-component-definition, react/destructuring-assignment,
 max-len */
 
-var titleStyle = {
+const titleStyle = {
   backgroundColor: '#f5f5f5',
   border: '2px solid #e3e3e3',
   borderRadius: '10px',
@@ -33,17 +33,17 @@ var titleStyle = {
   textAlign: 'center',
   width: '70%'
 };
-var txtStyle = {
+const txtStyle = {
   lineHeight: '20px'
 };
-var TxtLabel = function TxtLabel(classes, label) {
-  var extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-label';
+const TxtLabel = function (classes, label) {
+  let extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-label';
   return /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.txtLabel, extClsName)
   }, label);
 };
 exports.TxtLabel = TxtLabel;
-var StatusIcon = function StatusIcon(status) {
+const StatusIcon = status => {
   switch (status) {
     case 'accept':
       return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
@@ -105,16 +105,16 @@ var StatusIcon = function StatusIcon(status) {
   }
 };
 exports.StatusIcon = StatusIcon;
-var ConfidenceLabel = function ConfidenceLabel(classes, confidence) {
-  var extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-label';
+const ConfidenceLabel = function (classes, confidence) {
+  let extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-label';
   if (!confidence) return /*#__PURE__*/_react.default.createElement("span", null, " - - ");
-  var confidenceDp = parseFloat(Math.round(confidence * 100) / 100).toFixed(2);
+  const confidenceDp = parseFloat(Math.round(confidence * 100) / 100).toFixed(2);
   return /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.txtLabel, extClsName)
-  }, "".concat(confidenceDp, " %"));
+  }, `${confidenceDp} %`);
 };
 exports.ConfidenceLabel = ConfidenceLabel;
-var sectionInput = function sectionInput(classes, molecule, inputFuncCb) {
+const sectionInput = (classes, molecule, inputFuncCb) => {
   if (!inputFuncCb) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.inputRoot)
@@ -135,61 +135,53 @@ var sectionInput = function sectionInput(classes, molecule, inputFuncCb) {
   }))));
 };
 exports.sectionInput = sectionInput;
-var SectionRunning = function SectionRunning() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: titleStyle
-  }, /*#__PURE__*/_react.default.createElement("h2", {
-    style: txtStyle
-  }, /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
-    style: {
-      color: 'blue',
-      fontSize: 50
-    }
-  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "The server is making predictions...")));
-};
-var SectionMissMatch = function SectionMissMatch() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: titleStyle
-  }, /*#__PURE__*/_react.default.createElement("h2", {
-    style: txtStyle
-  }, /*#__PURE__*/_react.default.createElement(_ErrorOutline.default, {
-    style: {
-      color: 'red',
-      fontSize: 50
-    }
-  }), /*#__PURE__*/_react.default.createElement("p", {
-    className: "txt-predict-fail"
-  }, "Peak & Element count mismatch!"), /*#__PURE__*/_react.default.createElement("p", {
-    className: "txt-predict-fail"
-  }, /*#__PURE__*/_react.default.createElement("sup", null, "1"), "H multiplicity count should not be more than the proton group count. Multiplicity must be assigned manulally before predictions."), /*#__PURE__*/_react.default.createElement("p", {
-    className: "txt-predict-fail"
-  }, /*#__PURE__*/_react.default.createElement("sup", null, "13"), "C peak count should not be more than the carbon count, and solvent peaks should be excluded.")));
-};
-var SectionNoService = function SectionNoService() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: titleStyle
-  }, /*#__PURE__*/_react.default.createElement("h2", {
-    style: txtStyle
-  }, /*#__PURE__*/_react.default.createElement(_CloudOff.default, {
-    style: {
-      color: 'red',
-      fontSize: 50
-    }
-  }), /*#__PURE__*/_react.default.createElement("p", null, "Service is not available."), /*#__PURE__*/_react.default.createElement("p", null, "Please try it again later.")));
-};
-var SectionUnknown = function SectionUnknown() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: titleStyle
-  }, /*#__PURE__*/_react.default.createElement("h2", {
-    style: txtStyle
-  }, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
-    style: {
-      color: 'purple',
-      fontSize: 50
-    }
-  }), /*#__PURE__*/_react.default.createElement("p", null, "Unknown state.")));
-};
-var notToRenderAnalysis = function notToRenderAnalysis(pds) {
+const SectionRunning = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: titleStyle
+}, /*#__PURE__*/_react.default.createElement("h2", {
+  style: txtStyle
+}, /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+  style: {
+    color: 'blue',
+    fontSize: 50
+  }
+}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "The server is making predictions...")));
+const SectionMissMatch = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: titleStyle
+}, /*#__PURE__*/_react.default.createElement("h2", {
+  style: txtStyle
+}, /*#__PURE__*/_react.default.createElement(_ErrorOutline.default, {
+  style: {
+    color: 'red',
+    fontSize: 50
+  }
+}), /*#__PURE__*/_react.default.createElement("p", {
+  className: "txt-predict-fail"
+}, "Peak & Element count mismatch!"), /*#__PURE__*/_react.default.createElement("p", {
+  className: "txt-predict-fail"
+}, /*#__PURE__*/_react.default.createElement("sup", null, "1"), "H multiplicity count should not be more than the proton group count. Multiplicity must be assigned manulally before predictions."), /*#__PURE__*/_react.default.createElement("p", {
+  className: "txt-predict-fail"
+}, /*#__PURE__*/_react.default.createElement("sup", null, "13"), "C peak count should not be more than the carbon count, and solvent peaks should be excluded.")));
+const SectionNoService = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: titleStyle
+}, /*#__PURE__*/_react.default.createElement("h2", {
+  style: txtStyle
+}, /*#__PURE__*/_react.default.createElement(_CloudOff.default, {
+  style: {
+    color: 'red',
+    fontSize: 50
+  }
+}), /*#__PURE__*/_react.default.createElement("p", null, "Service is not available."), /*#__PURE__*/_react.default.createElement("p", null, "Please try it again later.")));
+const SectionUnknown = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: titleStyle
+}, /*#__PURE__*/_react.default.createElement("h2", {
+  style: txtStyle
+}, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
+  style: {
+    color: 'purple',
+    fontSize: 50
+  }
+}), /*#__PURE__*/_react.default.createElement("p", null, "Unknown state.")));
+const notToRenderAnalysis = pds => {
   if (pds.running) return /*#__PURE__*/_react.default.createElement(SectionRunning, null);
   if (!pds.outline || !pds.outline.code) return /*#__PURE__*/_react.default.createElement("div", null);
   if (pds.outline.code >= 500) return /*#__PURE__*/_react.default.createElement(SectionNoService, null);
@@ -198,11 +190,11 @@ var notToRenderAnalysis = function notToRenderAnalysis(pds) {
   return false;
 };
 exports.notToRenderAnalysis = notToRenderAnalysis;
-var sectionSvg = function sectionSvg(classes, predictions) {
-  var renderMsg = notToRenderAnalysis(predictions);
+const sectionSvg = (classes, predictions) => {
+  const renderMsg = notToRenderAnalysis(predictions);
   if (renderMsg) return null;
   if (!predictions.output) return null;
-  var targetSvg = predictions.output.result[0].svgs[0];
+  const targetSvg = predictions.output.result[0].svgs[0];
   if (!targetSvg) return /*#__PURE__*/_react.default.createElement(_section_loading.default, null);
   return /*#__PURE__*/_react.default.createElement(_reactSvgFileZoomPan.default, {
     svg: targetSvg,