@complat/react-spectra-editor 1.0.0 → 1.0.1-alpha.2

package/dist/__tests__/units/components/panel/info.test.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _info = _interopRequireDefault(require("../../../../components/panel/info"));
+var _reduxMockStore = _interopRequireDefault(require("redux-mock-store"));
+var _reactRedux = require("react-redux");
+require("@testing-library/jest-dom");
+var _list_layout = require("../../../../constants/list_layout");
+var _material = require("@mui/material");
+var _styles = require("@mui/styles");
+const mockStore = (0, _reduxMockStore.default)([]);
+const store = mockStore({
+  curve: {
+    listCurves: [{
+      feature: {}
+    }],
+    curveIdx: 0
+  },
+  layout: _list_layout.LIST_LAYOUT.H1,
+  shift: {
+    shifts: []
+  },
+  simulation: {}
+});
+const failedStore = mockStore({});
+const dispatchMock = () => Promise.resolve({});
+store.dispatch = jest.fn(dispatchMock);
+const theme = (0, _material.createTheme)({
+  typography: {
+    useNextVariants: true
+  }
+});
+const feature = {};
+describe("<InfoPanel />", () => {
+  let AppWrapper;
+  beforeEach(() => {
+    AppWrapper = _ref => {
+      let {
+        store,
+        children
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+        store: store
+      }, " ", children, " ");
+    };
+  });
+  test('Cannot render info panel', () => {
+    const renderer = /*#__PURE__*/_react.default.createElement(AppWrapper, {
+      store: store
+    }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react.default.createElement(_info.default, {
+      expand: false,
+      onExapnd: () => {}
+    })));
+    const {
+      queryByTestId
+    } = (0, _react2.render)(renderer);
+    expect(queryByTestId('PanelInfo')).not.toBeInTheDocument();
+  });
+  test('Render info panel', () => {
+    const renderer = /*#__PURE__*/_react.default.createElement(AppWrapper, {
+      store: store
+    }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react.default.createElement(_info.default, {
+      expand: false,
+      onExapnd: () => {},
+      feature: feature
+    })));
+    const {
+      queryByTestId
+    } = (0, _react2.render)(renderer);
+    expect(queryByTestId('PanelInfo')).toBeInTheDocument();
+  });
+});

package/dist/app.js

@@ -56,6 +56,7 @@ const SpectraEditor = _ref => {
     molSvg,
     editorOnly,
     descriptions,
+    theoryMass,
     canChangeDescription,
     onDescriptionChanged,
     multiEntities,
@@ -82,6 +83,7 @@ const SpectraEditor = _ref => {
     molSvg: molSvg,
     multiMolSvgs: multiMolSvgs,
     editorOnly: editorOnly,
+    theoryMass: theoryMass,
     canChangeDescription: canChangeDescription,
     onDescriptionChanged: onDescriptionChanged
   })));
@@ -103,7 +105,8 @@ SpectraEditor.propTypes = {
   editorOnly: _propTypes.default.bool,
   canChangeDescription: _propTypes.default.bool,
   onDescriptionChanged: _propTypes.default.func,
-  userManualLink: _propTypes.default.object
+  userManualLink: _propTypes.default.object,
+  theoryMass: _propTypes.default.string
 };
 SpectraEditor.defaultProps = {
   others: {
@@ -119,6 +122,7 @@ SpectraEditor.defaultProps = {
   operations: [],
   descriptions: [],
   molSvg: '',
+  theoryMass: '',
   multiMolSvgs: [],
   editorOnly: false,
   canChangeDescription: false,

package/dist/components/cmd_bar/r06_predict_btn.js

@@ -59,7 +59,6 @@ const onClickFail = (layoutSt, simuCount, realCount) => {
   const feature = _format.default.is13CLayout(layoutSt) ? 'peak' : 'multiplet';
   return () => alert(`Selected ${feature} count (${realCount}) must be larger than 0, and must be eqal or less than simulated count (${simuCount}).`); // eslint-disable-line
 };
-
 const onClickReady = (forecast, peaksEdit, layoutSt, scan, shiftSt, thres, analysis, integrationSt, multiplicitySt, setUiViewerTypeAct, curveSt) => {
   const {
     btnCb
@@ -67,7 +66,6 @@ const onClickReady = (forecast, peaksEdit, layoutSt, scan, shiftSt, thres, analy
   if (!btnCb) {
     return () => alert('[Developer Warning] You need to implement btnCb in forecast!'); // eslint-disable-line
   }
-
   return () => {
     setUiViewerTypeAct(_list_ui.LIST_UI_VIEWER_TYPE.ANALYSIS);
     return btnCb({
@@ -90,7 +88,6 @@ const onClicUnknown = (feature, forecast, peaksEdit, layoutSt, scan, shiftSt, th
   if (!refreshCb) {
     return () => alert('[Developer Warning] You need to implement refreshCb in forecast!'); // eslint-disable-line
   }
-
   return () => refreshCb({
     peaks: peaksEdit,
     layout: layoutSt,

package/dist/components/d3_line/line_focus.js

@@ -130,7 +130,6 @@ class LineFocus {
       sameRef // eslint-disable-line
     });
   }
-
   resetShouldUpdate(prevEpSt, prevItSt, prevMySt) {
     const {
       xt,
@@ -157,7 +156,6 @@ class LineFocus {
       prevData // eslint-disable-line
     });
   }
-
   setTip() {
     this.tip = (0, _init.InitTip)();
     this.root.call(this.tip);

package/dist/components/d3_multi/multi_focus.js

@@ -129,7 +129,6 @@ class MultiFocus {
       sameData // eslint-disable-line
     });
   }
-
   resetShouldUpdate(prevEpSt) {
     const {
       xt,
@@ -154,7 +153,6 @@ class MultiFocus {
       prevData // eslint-disable-line
     });
   }
-
   setTip() {
     this.tip = (0, _init.InitTip)();
     this.root.call(this.tip);

package/dist/components/multi_jcamps_viewer.js

@@ -62,6 +62,7 @@ class MultiJcampsViewer extends _react.default.Component {
       entities,
       userManualLink,
       molSvg,
+      theoryMass,
       layoutSt
     } = this.props;
     if (!entities || entities.length === 0) return /*#__PURE__*/_react.default.createElement("div", null);
@@ -104,6 +105,7 @@ class MultiJcampsViewer extends _react.default.Component {
       userManualLink: userManualLink,
       feature: feature,
       molSvg: molSvg,
+      theoryMass: theoryMass,
       subLayoutsInfo: seperatedSubLayouts,
       descriptions: "",
       canChangeDescription: () => {},
@@ -140,7 +142,8 @@ MultiJcampsViewer.propTypes = {
   operations: _propTypes.default.func.isRequired,
   userManualLink: _propTypes.default.object,
   entities: _propTypes.default.array,
-  layoutSt: _propTypes.default.string.isRequired
+  layoutSt: _propTypes.default.string.isRequired,
+  theoryMass: _propTypes.default.string
 };
 MultiJcampsViewer.defaultProps = {
   multiEntities: [],

package/dist/components/panel/compare.js

@@ -51,7 +51,7 @@ const styles = theme => ({
   tRow: {
     height: 28,
     '&:nth-of-type(even)': {
-      backgroundColor: theme.palette.background.default
+      backgroundColor: theme.palette ? theme.palette.background.default : '#d3d3d3'
     }
   },
   rmBtn: {

package/dist/components/panel/graph_selection.js

@@ -109,7 +109,6 @@ const GraphSelectionPanel = _ref => {
       console.log(e); //eslint-disable-line
     }
   }
-
   const items = listCurves.map((spectra, idx) => {
     const {
       color
@@ -196,7 +195,6 @@ const GraphSelectionPanel = _ref => {
   }), item.filename !== '' ? /*#__PURE__*/_react.default.createElement("span", null, "File: ", item.filename) : null // eslint-disable-line
   ))))));
 };
-
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {

package/dist/components/panel/index.js

@@ -21,11 +21,16 @@ var _graph_selection = _interopRequireDefault(require("./graph_selection"));
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 /* eslint-disable react/prop-types, react/require-default-props */
 
-const theme = (0, _styles.createTheme)((0, _styles.adaptV4Theme)({
+const theme = (0, _styles.createTheme)({
   typography: {
     useNextVariants: true
+  },
+  palette: {
+    background: {
+      default: '#D3D3D3'
+    }
   }
-}));
+});
 const styles = () => ({
   panels: {
     maxHeight: 'calc(90vh - 220px)',
@@ -53,7 +58,6 @@ class PanelViewer extends _react.default.Component {
       this.props.onDescriptionChanged(contentChanged); // eslint-disable-line
     }
   }
-
   onExapnd(input) {
     const {
       expand
@@ -80,7 +84,8 @@ class PanelViewer extends _react.default.Component {
       entityFileNames,
       curveSt,
       userManualLink,
-      subLayoutsInfo
+      subLayoutsInfo,
+      theoryMass
     } = this.props;
     const onExapndInfo = () => this.onExapnd('info');
     const onExapndPeak = () => this.onExapnd('peak');
@@ -110,6 +115,7 @@ class PanelViewer extends _react.default.Component {
       editorOnly: editorOnly,
       expand: expand === 'info',
       molSvg: molSvg,
+      theoryMass: theoryMass,
       onExapnd: onExapndInfo,
       descriptions: descriptions,
       canChangeDescription: canChangeDescription,
@@ -152,7 +158,8 @@ PanelViewer.propTypes = {
   entityFileNames: _propTypes.default.array,
   userManualLink: _propTypes.default.object,
   curveSt: _propTypes.default.object.isRequired,
-  subLayoutsInfo: _propTypes.default.object
+  subLayoutsInfo: _propTypes.default.object,
+  theoryMass: _propTypes.default.string
 };
 var _default = exports.default = (0, _reactRedux.connect)(
 // eslint-disable-line

package/dist/components/panel/info.js

@@ -62,7 +62,7 @@ const styles = () => ({
     backgroundColor: '#fff',
     height: 108,
     lineHeight: '24px',
-    overflowY: 'scroll',
+    overflowY: 'hidden',
     overflowWrap: 'word-break'
   },
   tHead: {
@@ -77,15 +77,13 @@ const styles = () => ({
     marginRight: 3
   },
   quill: {
-    backgroundColor: '#fafafa',
-    border: '1px solid #eee',
     fontSize: '0.8rem',
     fontFamily: 'Helvetica',
-    padding: '0 10px 0 10px',
     textAlign: 'left'
   }
 });
 const simTitle = () => 'Simulated signals from NMRshiftDB';
+const valueFromAnalysisTitle = () => 'Values obtained from the analysis';
 const simContent = nmrSimPeaks => nmrSimPeaks && nmrSimPeaks.sort((a, b) => a - b).join(', ');
 const aucValue = integration => {
   if (!integration) {
@@ -125,6 +123,7 @@ const InfoPanel = _ref => {
     simulationSt,
     shiftSt,
     curveSt,
+    theoryMass,
     onExapnd,
     canChangeDescription,
     onDescriptionChanged
@@ -151,8 +150,8 @@ const InfoPanel = _ref => {
   if (integration) {
     originStack = integration.originStack; // eslint-disable-line
   }
-
   return /*#__PURE__*/_react.default.createElement(_material.Accordion, {
+    "data-testid": "PanelInfo",
     expanded: expand,
     onChange: onExapnd,
     className: (0, _classnames.default)(classes.panel),
@@ -180,13 +179,19 @@ const InfoPanel = _ref => {
     className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
   }, "Freq : "), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, parseInt(observeFrequency, 10) || ' - ')) : null, _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
+  }, `${parseInt(observeFrequency, 10)} Hz` || ' - ')) : null, _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
   }, "Solv : "), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, showSolvName)) : null, !molSvg ? null : /*#__PURE__*/_react.default.createElement(_reactSvgFileZoomPan.default, {
+  }, showSolvName)) : null, _format.default.isMsLayout(layoutSt) && theoryMass ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
+  }, "Theoretical mass: "), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
+  }, `${parseFloat(theoryMass).toFixed(6)} g/mol`)) : null, !molSvg ? null : /*#__PURE__*/_react.default.createElement(_reactSvgFileZoomPan.default, {
     svg: molSvg,
     duration: 300,
     resize: true
@@ -196,15 +201,19 @@ const InfoPanel = _ref => {
     className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
   }, "Area under curve (AUC):"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt')
-  }, aucValue(integration))) : null), !_format.default.isCyclicVoltaLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement(_reactQuill.default, {
-    className: (0, _classnames.default)(classes.quill, 'card-sv-quill'),
+  }, aucValue(integration))) : null), !_format.default.isCyclicVoltaLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
+  }, valueFromAnalysisTitle(), ":"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_reactQuill.default, {
+    className: (0, _classnames.default)(classes.quill, 'txt-sv-panel-txt'),
     value: descriptions,
     modules: {
       toolbar: false
     },
     onChange: onDescriptionChanged,
     readOnly: canChangeDescription !== undefined ? !canChangeDescription : true
-  }) : null, /*#__PURE__*/_react.default.createElement("div", null, !editorOnly && _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
+  })) : null, /*#__PURE__*/_react.default.createElement("div", null, !editorOnly && _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim)
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
@@ -235,7 +244,8 @@ InfoPanel.propTypes = {
   curveSt: _propTypes.default.object.isRequired,
   onExapnd: _propTypes.default.func.isRequired,
   canChangeDescription: _propTypes.default.bool.isRequired,
-  onDescriptionChanged: _propTypes.default.func
+  onDescriptionChanged: _propTypes.default.func,
+  theoryMass: _propTypes.default.string
 };
 var _default = exports.default = (0, _reactRedux.connect)(
 // eslint-disable-line

package/dist/components/panel/multiplicity.js

@@ -63,7 +63,7 @@ const styles = theme => ({
   tRow: {
     height: 28,
     '&:nth-of-type(even)': {
-      backgroundColor: theme.palette.background.default
+      backgroundColor: theme.palette ? theme.palette.background.default : '#d3d3d3'
     }
   },
   rmBtn: {

package/dist/components/panel/peaks.js

@@ -63,7 +63,7 @@ const styles = theme => ({
   tRow: {
     height: 28,
     '&:nth-of-type(even)': {
-      backgroundColor: theme.palette.background.default
+      backgroundColor: theme.palette ? theme.palette.background.default : '#d3d3d3'
     }
   },
   rmBtn: {

package/dist/helpers/chem.js

@@ -821,7 +821,6 @@ const ExtractJcamp = source => {
     xy: true,
     keepRecordsRegExp: /(\$CSTHRESHOLD|\$CSSCANAUTOTARGET|\$CSSCANEDITTARGET|\$CSSCANCOUNT|\$CSSOLVENTNAME|\$CSSOLVENTVALUE|\$CSSOLVENTX|\$CSCATEGORY|\$CSITAREA|\$CSITFACTOR|\$OBSERVEDINTEGRALS|\$OBSERVEDMULTIPLETS|\$OBSERVEDMULTIPLETSPEAKS|\.SOLVENTNAME|\.OBSERVEFREQUENCY|\$CSSIMULATIONPEAKS|\$CSUPPERTHRESHOLD|\$CSLOWERTHRESHOLD|\$CSCYCLICVOLTAMMETRYDATA|UNITS|SYMBOL|CSAUTOMETADATA)/ // eslint-disable-line
   });
-
   const layout = readLayout(jcamp);
   const peakUp = !_format.default.isIrLayout(layout);
   const spectra = _format.default.isMsLayout(layout) ? extrSpectraMs(jcamp, layout) : extrSpectraNi(jcamp, layout);

package/dist/index.js

@@ -460,7 +460,6 @@ class DemoWriteIr extends _react.default.Component {
     }
     /*eslint-disable */
   }
-
   predictOp(_ref6) {
     let {
       multiplicity,
@@ -708,6 +707,7 @@ class DemoWriteIr extends _react.default.Component {
       canChangeDescription: true,
       onDescriptionChanged: this.onDescriptionChanged,
       molSvg: molSvg,
+      theoryMass: '123.0',
       userManualLink: {
         cv: "https://www.chemotion.net/chemotionsaurus/docs/eln/chemspectra/cvanalysis"
       },

package/dist/layer_init.js

@@ -128,6 +128,7 @@ class LayerInit extends _react.default.Component {
       descriptions,
       molSvg,
       editorOnly,
+      theoryMass,
       canChangeDescription,
       onDescriptionChanged,
       multiEntities,
@@ -146,6 +147,7 @@ class LayerInit extends _react.default.Component {
         entityFileNames: entityFileNames,
         userManualLink: userManualLink,
         molSvg: molSvg,
+        theoryMass: theoryMass,
         operations: operations
       });
     } else if (_format.default.isCyclicVoltaLayout(layout)) {
@@ -155,6 +157,7 @@ class LayerInit extends _react.default.Component {
         entityFileNames: entityFileNames,
         userManualLink: userManualLink,
         molSvg: molSvg,
+        theoryMass: theoryMass,
         operations: operations
       });
     }
@@ -168,6 +171,7 @@ class LayerInit extends _react.default.Component {
       descriptions: descriptions,
       molSvg: molSvg,
       editorOnly: editorOnly,
+      theoryMass: theoryMass,
       canChangeDescription: canChangeDescription,
       onDescriptionChanged: onDescriptionChanged
     });
@@ -198,6 +202,7 @@ LayerInit.propTypes = {
   yLabel: _propTypes.default.string.isRequired,
   molSvg: _propTypes.default.string.isRequired,
   editorOnly: _propTypes.default.bool.isRequired,
+  theoryMass: _propTypes.default.string.isRequired,
   forecast: _propTypes.default.object.isRequired,
   operations: _propTypes.default.array.isRequired,
   descriptions: _propTypes.default.array.isRequired,

package/dist/layer_prism.js

@@ -32,6 +32,7 @@ const LayerPrism = _ref => {
     descriptions,
     molSvg,
     editorOnly,
+    theoryMass,
     thresSt,
     scanSt,
     uiSt,
@@ -102,6 +103,7 @@ const LayerPrism = _ref => {
     integration: integration,
     editorOnly: editorOnly,
     molSvg: molSvg,
+    theoryMass: theoryMass,
     descriptions: descriptions,
     canChangeDescription: canChangeDescription,
     onDescriptionChanged: onDescriptionChanged
@@ -122,6 +124,7 @@ LayerPrism.propTypes = {
   yLabel: _propTypes.default.string.isRequired,
   molSvg: _propTypes.default.string.isRequired,
   editorOnly: _propTypes.default.bool.isRequired,
+  theoryMass: _propTypes.default.string,
   forecast: _propTypes.default.object.isRequired,
   operations: _propTypes.default.array.isRequired,
   descriptions: _propTypes.default.array.isRequired,

package/dist/reducers/reducer_status.js

@@ -19,13 +19,11 @@ const statusReducer = function () {
         btnSubmit: false
       } // !state.btnSubmit
       );
-
     case _action_type.STATUS.TOGGLEBTNALL:
       return Object.assign({}, state, {
         btnSubmit: false
       } // !state.btnSubmit
       );
-
     case _action_type.STATUS.ENABLEBTNALL:
     case _action_type.EDITPEAK.ADDPOSITIVE:
     case _action_type.EDITPEAK.RMPOSITIVE:

package/dist/sagas/saga_multiplicity.js

@@ -188,7 +188,6 @@ const rmPeakFromStack = function (action, metaSt, mpySt) {
       multiplicities
     }); // eslint-disable-line
   }
-
   const noSmExtext = newStack.map(k => k.xExtent.xL === xExtent.xL && k.xExtent.xU === xExtent.xU ? 1 : 0).reduce((a, s) => a + s) === 0;
   const newSmExtext = noSmExtext ? newStack[0].xExtent : xExtent;
   const newSelectedMulti = Object.assign({}, selectedMulti, {
@@ -201,7 +200,6 @@ const rmPeakFromStack = function (action, metaSt, mpySt) {
     multiplicities: newMultiplicities
   }); // eslint-disable-line
 };
-
 function* rmPanelPeakFromStack(action) {
   const metaSt = yield (0, _effects.select)(getMetaSt);
   const mpySt = yield (0, _effects.select)(getMultiplicitySt);
@@ -296,7 +294,6 @@ function* resetInitNmr(action) {
   //   payload,
   // });
 }
-
 function* resetOne(action) {
   const xExtent = action.payload;
   const metaSt = yield (0, _effects.select)(getMetaSt);

package/dist/third_party/jAnalyzer.js

@@ -200,7 +200,6 @@ function abstractPattern(signal, Jc) {
     //   pattern = 'br s';
     // }
   }
-
   return pattern;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@complat/react-spectra-editor",
-  "version": "1.0.0",
+  "version": "1.0.1-alpha.2",
   "description": "An editor to View and Edit Chemical Spectra data (NMR, IR and MS, CV, UIVIS, XRD).",
   "repository": {
     "type": "git",