@complat/react-spectra-editor 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/LICENSE +21 -662
  3. package/README.md +5 -0
  4. package/dist/__tests__/fixtures/lc_ms_jcamp.js +2329 -0
  5. package/dist/__tests__/fixtures/lc_ms_jcamp_2.js +2874 -0
  6. package/dist/__tests__/fixtures/lc_ms_jcamp_mz_chemstation.js +3242 -0
  7. package/dist/__tests__/fixtures/lc_ms_jcamp_tic_chemstation.js +854 -0
  8. package/dist/__tests__/fixtures/lc_ms_jcamp_tic_neg.js +1233 -0
  9. package/dist/__tests__/fixtures/lc_ms_jcamp_tic_pos.js +1233 -0
  10. package/dist/__tests__/fixtures/lc_ms_jcamp_uvvis.js +48908 -0
  11. package/dist/__tests__/fixtures/lc_ms_jcamp_uvvis_chemstation.js +15424 -0
  12. package/dist/__tests__/units/components/cmd_bar/r05_submit_btn.test.js +158 -3
  13. package/dist/__tests__/units/components/d3_line_rect.test.js +85 -0
  14. package/dist/__tests__/units/components/d3_multi/multi_focus.test.js +43 -0
  15. package/dist/__tests__/units/components/hplc_viewer.test.js +123 -0
  16. package/dist/__tests__/units/components/panel/info.test.js +55 -15
  17. package/dist/__tests__/units/features/lc-ms/parsing/lcmsCategory.test.js +73 -0
  18. package/dist/__tests__/units/features/lc-ms/submit/peaks.test.js +310 -0
  19. package/dist/actions/curve.js +5 -2
  20. package/dist/actions/hplc_ms.js +66 -0
  21. package/dist/actions/integration.js +17 -2
  22. package/dist/actions/ui.js +39 -11
  23. package/dist/app.js +21 -8
  24. package/dist/components/cmd_bar/01_viewer.js +15 -11
  25. package/dist/components/cmd_bar/03_peak.js +25 -16
  26. package/dist/components/cmd_bar/04_integration.js +116 -17
  27. package/dist/components/cmd_bar/08_peak_group.js +83 -0
  28. package/dist/components/cmd_bar/collapsible_toolbar_group.js +101 -0
  29. package/dist/components/cmd_bar/common.js +4 -3
  30. package/dist/components/cmd_bar/index.js +76 -18
  31. package/dist/components/cmd_bar/r01_layout.js +6 -0
  32. package/dist/components/cmd_bar/r02_scan.js +15 -11
  33. package/dist/components/cmd_bar/r03_threshold.js +19 -3
  34. package/dist/components/cmd_bar/r04_submit.js +61 -6
  35. package/dist/components/cmd_bar/r05_submit_btn.js +60 -13
  36. package/dist/components/cmd_bar/r06_predict_btn.js +4 -4
  37. package/dist/components/cmd_bar/r07_wavelength_btn.js +10 -9
  38. package/dist/components/cmd_bar/r09_detector.js +2 -2
  39. package/dist/components/cmd_bar/tri_btn.js +4 -1
  40. package/dist/components/common/draw.js +6 -5
  41. package/dist/components/d3_line/index.js +70 -15
  42. package/dist/components/d3_line/line_focus.js +104 -67
  43. package/dist/components/d3_line_rect/index.js +836 -0
  44. package/dist/components/d3_line_rect/line_focus.js +526 -0
  45. package/dist/components/d3_line_rect/multi_focus.js +433 -0
  46. package/dist/components/d3_line_rect/rect_focus.js +247 -0
  47. package/dist/components/d3_multi/index.js +154 -163
  48. package/dist/components/d3_multi/multi_focus.js +117 -68
  49. package/dist/components/d3_rect/index.js +6 -0
  50. package/dist/components/d3_rect/rect_focus.js +17 -5
  51. package/dist/components/hplc_viewer.js +169 -0
  52. package/dist/components/lc_ms_uv_tools_bar.js +175 -0
  53. package/dist/components/multi_jcamps_viewer.js +17 -5
  54. package/dist/components/panel/compare.js +84 -62
  55. package/dist/components/panel/cyclic_voltamery_data.js +15 -14
  56. package/dist/components/panel/graph_selection.js +32 -30
  57. package/dist/components/panel/index.js +28 -22
  58. package/dist/components/panel/info.js +90 -31
  59. package/dist/constants/action_type.js +23 -2
  60. package/dist/constants/list_graph.js +16 -0
  61. package/dist/constants/list_layout.js +2 -1
  62. package/dist/constants/list_ui.js +5 -2
  63. package/dist/features/lc-ms/entities/extractEntityLCMS.js +187 -0
  64. package/dist/features/lc-ms/parsing/chemstation.js +108 -0
  65. package/dist/features/lc-ms/parsing/index.js +46 -0
  66. package/dist/features/lc-ms/parsing/lcmsCategory.js +44 -0
  67. package/dist/features/lc-ms/parsing/lcmsJcampInfo.js +18 -0
  68. package/dist/features/lc-ms/parsing/lcmsMsPage.js +241 -0
  69. package/dist/features/lc-ms/parsing/pageValue.js +27 -0
  70. package/dist/features/lc-ms/submit/index.js +24 -0
  71. package/dist/features/lc-ms/submit/peaks.js +66 -0
  72. package/dist/features/lc-ms/ui/wavelengthSelect.js +54 -0
  73. package/dist/fn.js +4 -1
  74. package/dist/helpers/brush.js +74 -19
  75. package/dist/helpers/calc.js +4 -2
  76. package/dist/helpers/cfg.js +5 -4
  77. package/dist/helpers/chem.js +449 -71
  78. package/dist/helpers/compass.js +181 -17
  79. package/dist/helpers/extractEntityLCMS.js +24 -0
  80. package/dist/helpers/extractParams.js +118 -33
  81. package/dist/helpers/extractPeaksEdit.js +29 -9
  82. package/dist/helpers/format.js +189 -4
  83. package/dist/helpers/init.js +25 -5
  84. package/dist/helpers/integration.js +130 -17
  85. package/dist/helpers/integration_draft.js +43 -0
  86. package/dist/helpers/integration_focus.js +155 -0
  87. package/dist/helpers/integration_jcamp.js +68 -0
  88. package/dist/helpers/integration_split.js +202 -0
  89. package/dist/helpers/mount.js +8 -1
  90. package/dist/helpers/sweep.js +39 -0
  91. package/dist/index.js +284 -26
  92. package/dist/layer_content.js +17 -3
  93. package/dist/layer_init.js +124 -14
  94. package/dist/layer_prism.js +31 -5
  95. package/dist/reducers/index.js +3 -1
  96. package/dist/reducers/reducer_curve.js +54 -36
  97. package/dist/reducers/reducer_hplc_ms/hydrate.js +289 -0
  98. package/dist/reducers/reducer_hplc_ms/index.js +122 -0
  99. package/dist/reducers/reducer_hplc_ms/persistence.js +74 -0
  100. package/dist/reducers/reducer_hplc_ms/tic.js +70 -0
  101. package/dist/reducers/reducer_hplc_ms/utils.js +70 -0
  102. package/dist/reducers/reducer_hplc_ms/uvvis.js +377 -0
  103. package/dist/reducers/reducer_integration.js +265 -7
  104. package/dist/reducers/reducer_layout.js +1 -1
  105. package/dist/reducers/reducer_submit.js +2 -1
  106. package/dist/reducers/reducer_ui.js +149 -13
  107. package/dist/reducers/undo_redo_config.js +2 -2
  108. package/dist/sagas/saga_lcms_ui.js +85 -0
  109. package/dist/sagas/saga_ui.js +177 -74
  110. package/dist/setupTests.js +5 -5
  111. package/package.json +10 -7
@@ -63,10 +63,12 @@ const GraphSelectionPanel = ({
63
63
  if (subLayoutsInfo) {
64
64
  subLayoutValues = Object.keys(subLayoutsInfo);
65
65
  }
66
+ const subLayoutKey = subLayoutValues.join('|');
66
67
  const [selectedSubLayout, setSelectedSublayout] = (0, _react.useState)(subLayoutValues[0]);
68
+ const resolvedSelectedSubLayout = subLayoutValues.includes(selectedSubLayout) ? selectedSubLayout : subLayoutValues[0] || false;
67
69
  (0, _react.useEffect)(() => {
68
70
  setSelectedSublayout(subLayoutValues[0]);
69
- }, subLayoutValues);
71
+ }, [subLayoutKey]);
70
72
  if (!curveSt) {
71
73
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {});
72
74
  }
@@ -89,27 +91,23 @@ const GraphSelectionPanel = ({
89
91
  };
90
92
  let itemsSubLayout = [];
91
93
  if (selectedSubLayout && subLayoutValues.length > 1) {
92
- const subLayout = subLayoutsInfo[selectedSubLayout];
93
- try {
94
- itemsSubLayout = subLayout.map((spectra, idx) => {
95
- const spectraIdx = spectra.curveIdx;
96
- const {
97
- color
98
- } = spectra;
99
- let filename = '';
100
- if (entityFileNames && spectraIdx < entityFileNames.length) {
101
- filename = entityFileNames[spectraIdx];
102
- }
103
- return {
104
- name: `${idx + 1}.`,
105
- idx: spectraIdx,
106
- color,
107
- filename
108
- };
109
- });
110
- } catch (e) {
111
- console.log(e); //eslint-disable-line
112
- }
94
+ const subLayout = subLayoutsInfo?.[resolvedSelectedSubLayout];
95
+ itemsSubLayout = Array.isArray(subLayout) ? subLayout.map((spectra, idx) => {
96
+ const spectraIdx = spectra.curveIdx;
97
+ const {
98
+ color
99
+ } = spectra;
100
+ let filename = '';
101
+ if (entityFileNames && spectraIdx < entityFileNames.length) {
102
+ filename = entityFileNames[spectraIdx];
103
+ }
104
+ return {
105
+ name: `${idx + 1}.`,
106
+ idx: spectraIdx,
107
+ color,
108
+ filename
109
+ };
110
+ }) : [];
113
111
  }
114
112
  const items = listCurves.map((spectra, idx) => {
115
113
  const {
@@ -144,7 +142,7 @@ const GraphSelectionPanel = ({
144
142
  className: "txt-panel-header",
145
143
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
146
144
  className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title'),
147
- children: "Graph selection"
145
+ children: "Graph selections"
148
146
  })
149
147
  })
150
148
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), layoutSt === _list_layout.LIST_LAYOUT.AIF ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
@@ -155,9 +153,9 @@ const GraphSelectionPanel = ({
155
153
  label: "Show all curves"
156
154
  }) : null, subLayoutValues && subLayoutValues.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
157
155
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, {
158
- value: selectedSubLayout,
156
+ value: resolvedSelectedSubLayout,
159
157
  onChange: onChangeTabSubLayout,
160
- children: subLayoutValues.map((subLayout, i) => {
158
+ children: subLayoutValues.map(subLayout => {
161
159
  let subLayoutName = '';
162
160
  switch (subLayout.toUpperCase()) {
163
161
  case 'G/MOL':
@@ -178,7 +176,7 @@ const GraphSelectionPanel = ({
178
176
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, {
179
177
  value: subLayout,
180
178
  label: subLayoutName
181
- }, i);
179
+ }, subLayout);
182
180
  })
183
181
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
184
182
  children: itemsSubLayout.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
@@ -248,13 +246,17 @@ const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
248
246
  }, dispatch);
249
247
  GraphSelectionPanel.propTypes = {
250
248
  classes: _propTypes.default.object.isRequired,
251
- expand: _propTypes.default.bool.isRequired,
249
+ expand: _propTypes.default.bool,
252
250
  layoutSt: _propTypes.default.string.isRequired,
253
- onExapnd: _propTypes.default.func.isRequired,
251
+ onExapnd: _propTypes.default.func,
252
+ onExpand: _propTypes.default.func,
254
253
  curveSt: _propTypes.default.object.isRequired,
255
254
  selectCurveAct: _propTypes.default.func.isRequired,
256
- entityFileNames: _propTypes.default.array.isRequired,
257
- subLayoutsInfo: _propTypes.default.array,
255
+ entityFileNames: _propTypes.default.array,
256
+ subLayoutsInfo: _propTypes.default.object,
258
257
  toggleShowAllCurveAct: _propTypes.default.func.isRequired
259
258
  };
259
+ GraphSelectionPanel.defaultProps = {
260
+ entityFileNames: []
261
+ };
260
262
  var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(GraphSelectionPanel));
@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
9
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
11
  var _reactRedux = require("react-redux");
12
- var _redux = require("redux");
13
12
  var _styles = require("@mui/material/styles");
14
13
  var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
15
14
  var _info = _interopRequireDefault(require("./info"));
@@ -19,8 +18,9 @@ var _multiplicity = _interopRequireDefault(require("./multiplicity"));
19
18
  var _cyclic_voltamery_data = _interopRequireDefault(require("./cyclic_voltamery_data"));
20
19
  var _graph_selection = _interopRequireDefault(require("./graph_selection"));
21
20
  var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
21
+ var _format = _interopRequireDefault(require("../../helpers/format"));
22
22
  var _jsxRuntime = require("react/jsx-runtime");
23
- /* eslint-disable react/prop-types, react/require-default-props */
23
+ /* eslint-disable react/prop-types, react/require-default-props, max-len */
24
24
 
25
25
  const theme = (0, _styles.createTheme)({
26
26
  typography: {
@@ -50,7 +50,7 @@ class PanelViewer extends _react.default.Component {
50
50
  this.state = {
51
51
  expand: 'info'
52
52
  };
53
- this.onExapnd = this.onExapnd.bind(this);
53
+ this.onToggleExpand = this.onToggleExpand.bind(this);
54
54
  this.handleDescriptionChanged = this.handleDescriptionChanged.bind(this);
55
55
  }
56
56
  handleDescriptionChanged(content, delta, source, editor) {
@@ -59,7 +59,7 @@ class PanelViewer extends _react.default.Component {
59
59
  this.props.onDescriptionChanged(contentChanged); // eslint-disable-line
60
60
  }
61
61
  }
62
- onExapnd(input) {
62
+ onToggleExpand(input) {
63
63
  const {
64
64
  expand
65
65
  } = this.state;
@@ -87,18 +87,20 @@ class PanelViewer extends _react.default.Component {
87
87
  userManualLink,
88
88
  subLayoutsInfo,
89
89
  exactMass,
90
+ entities,
90
91
  hideCyclicVolta
91
92
  } = this.props;
92
- const onExapndInfo = () => this.onExapnd('info');
93
- const onExapndPeak = () => this.onExapnd('peak');
94
- const onExapndMpy = () => this.onExapnd('mpy');
95
- const onExapndCompare = () => this.onExapnd('compare');
96
- const onExapndCyclicVolta = () => this.onExapnd('cyclicvolta');
97
- const onExapndGraphSelection = () => this.onExapnd('graph');
93
+ const onExpandInfo = () => this.onToggleExpand('info');
94
+ const onExpandPeak = () => this.onToggleExpand('peak');
95
+ const onExpandMpy = () => this.onToggleExpand('mpy');
96
+ const onExpandCompare = () => this.onToggleExpand('compare');
97
+ const onExpandCyclicVolta = () => this.onToggleExpand('cyclicvolta');
98
+ const onExpandGraphSelection = () => this.onToggleExpand('graph');
98
99
  const {
99
100
  listCurves
100
101
  } = curveSt;
101
- const hideGraphSelection = listCurves === false || listCurves === undefined;
102
+ const curveCount = Array.isArray(listCurves) ? listCurves.length : 0;
103
+ const hideGraphSelection = curveCount <= 1 || _format.default.isLCMsLayout(layoutSt);
102
104
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
103
105
  className: (0, _classnames.default)(classes.panels),
104
106
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledEngineProvider, {
@@ -109,33 +111,34 @@ class PanelViewer extends _react.default.Component {
109
111
  jcampIdx: jcampIdx,
110
112
  entityFileNames: entityFileNames,
111
113
  expand: expand === 'graph',
112
- onExapnd: onExapndGraphSelection,
114
+ onExpand: onExpandGraphSelection,
113
115
  subLayoutsInfo: subLayoutsInfo
114
116
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_info.default, {
117
+ entities: entities,
115
118
  feature: feature,
116
119
  integration: integration,
117
120
  editorOnly: editorOnly,
118
121
  expand: expand === 'info',
119
122
  molSvg: molSvg,
120
123
  exactMass: exactMass,
121
- onExapnd: onExapndInfo,
124
+ onExpand: onExpandInfo,
122
125
  descriptions: descriptions,
123
126
  canChangeDescription: canChangeDescription,
124
127
  onDescriptionChanged: this.handleDescriptionChanged
125
128
  }), _cfg.default.hidePanelPeak(layoutSt) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_peaks.default, {
126
129
  expand: expand === 'peak',
127
- onExapnd: onExapndPeak
130
+ onExapnd: onExpandPeak
128
131
  }), _cfg.default.hidePanelMpy(layoutSt) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiplicity.default, {
129
132
  expand: expand === 'mpy',
130
- onExapnd: onExapndMpy
131
- }), _cfg.default.hidePanelCompare(layoutSt) || listCurves.length > 1 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_compare.default, {
133
+ onExapnd: onExpandMpy
134
+ }), _cfg.default.hidePanelCompare(layoutSt) || curveCount > 1 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_compare.default, {
132
135
  expand: expand === 'compare',
133
- onExapnd: onExapndCompare
136
+ onExapnd: onExpandCompare
134
137
  }), _cfg.default.hidePanelCyclicVolta(layoutSt) || hideCyclicVolta ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_cyclic_voltamery_data.default, {
135
138
  jcampIdx: jcampIdx,
136
139
  feature: feature,
137
140
  expand: expand === 'cyclicvolta',
138
- onExapnd: onExapndCyclicVolta,
141
+ onExapnd: onExpandCyclicVolta,
139
142
  userManualLink: userManualLink ? userManualLink.cv : undefined
140
143
  })]
141
144
  })
@@ -149,11 +152,10 @@ const mapStateToProps = (state, _) => (
149
152
  layoutSt: state.layout,
150
153
  curveSt: state.curve
151
154
  });
152
- const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch);
153
155
  PanelViewer.propTypes = {
154
156
  classes: _propTypes.default.object.isRequired,
155
157
  feature: _propTypes.default.object.isRequired,
156
- integration: _propTypes.default.object.isRequired,
158
+ integration: _propTypes.default.object,
157
159
  editorOnly: _propTypes.default.bool.isRequired,
158
160
  molSvg: _propTypes.default.string.isRequired,
159
161
  descriptions: _propTypes.default.array.isRequired,
@@ -165,8 +167,12 @@ PanelViewer.propTypes = {
165
167
  curveSt: _propTypes.default.object.isRequired,
166
168
  subLayoutsInfo: _propTypes.default.object,
167
169
  exactMass: _propTypes.default.string,
168
- hideCyclicVolta: _propTypes.default.bool
170
+ hideCyclicVolta: _propTypes.default.bool,
171
+ entities: _propTypes.default.array
172
+ };
173
+ PanelViewer.defaultProps = {
174
+ integration: {}
169
175
  };
170
176
  var _default = exports.default = (0, _reactRedux.connect)(
171
177
  // eslint-disable-line
172
- mapStateToProps, mapDispatchToProps)((0, _withStyles.default)(styles)(PanelViewer)); // eslint-disable-line
178
+ mapStateToProps, null)((0, _withStyles.default)(styles)(PanelViewer)); // eslint-disable-line
@@ -21,6 +21,7 @@ var _jsxRuntime = require("react/jsx-runtime");
21
21
  /* eslint-disable no-mixed-operators, react/function-component-definition,
22
22
  react/require-default-props, max-len */
23
23
 
24
+ const ELECTRON_MASS = 0.000548579909065;
24
25
  const styles = () => ({
25
26
  chip: {
26
27
  margin: '1px 0 1px 0'
@@ -74,11 +75,16 @@ const styles = () => ({
74
75
  },
75
76
  rowOddSim: {
76
77
  backgroundColor: '#fff',
77
- height: 108,
78
+ height: 'auto',
79
+ minHeight: 36,
78
80
  lineHeight: '24px',
79
- overflowY: 'hidden',
81
+ overflow: 'visible',
80
82
  overflowWrap: 'word-break'
81
83
  },
84
+ simPlaceholder: {
85
+ color: 'rgba(0, 0, 0, 0.54)',
86
+ fontStyle: 'italic'
87
+ },
82
88
  tHead: {
83
89
  fontWeight: 'bold',
84
90
  float: 'left',
@@ -111,12 +117,21 @@ const styles = () => ({
111
117
  }
112
118
  });
113
119
  const simTitle = () => 'Simulated signals from NMRshiftDB';
114
- const simContent = nmrSimPeaks => nmrSimPeaks && nmrSimPeaks.sort((a, b) => a - b).join(', ');
120
+ const simContent = nmrSimPeaks => {
121
+ if (!Array.isArray(nmrSimPeaks) || nmrSimPeaks.length === 0) return '';
122
+ return [...nmrSimPeaks].sort((a, b) => a - b).join(', ');
123
+ };
124
+ const simPlaceholder = () => 'No simulated signals available.';
115
125
  const normalizeQuillValue = val => {
116
126
  if (!val) return '';
117
127
  if (val === '<p><br></p>' || val === '<p></p>') return '';
118
128
  return val;
119
129
  };
130
+ const formatMsExactMass = exactMass => {
131
+ const neutralMass = parseFloat(exactMass);
132
+ if (Number.isNaN(neutralMass)) return null;
133
+ return (neutralMass - ELECTRON_MASS).toFixed(6);
134
+ };
120
135
  const chemSubStyle = {
121
136
  fontSize: '0.85em',
122
137
  position: 'relative',
@@ -150,12 +165,9 @@ const handleDescriptionChanged = (content, delta, source, editor, onDescriptionC
150
165
  if (!onDescriptionChanged) return;
151
166
  onDescriptionChanged(normalizeQuillValue(content), delta, source, editor);
152
167
  };
153
- const aucValue = integration => {
154
- if (!integration) {
155
- return '';
156
- }
168
+ const aucValue = (integration, hplcMsSt) => {
157
169
  const values = [];
158
- const stackIntegration = integration.stack;
170
+ const stackIntegration = integration?.stack;
159
171
  if (Array.isArray(stackIntegration)) {
160
172
  let sumVal = 0.0;
161
173
  stackIntegration.forEach(inte => {
@@ -173,7 +185,23 @@ const aucValue = integration => {
173
185
  }
174
186
  });
175
187
  }
176
- return values.join(', ');
188
+ const spectraList = hplcMsSt?.uvvis?.spectraList || [];
189
+ const listWaveLength = hplcMsSt?.uvvis?.listWaveLength || [];
190
+ spectraList.forEach((spectrum, idx) => {
191
+ const wavelength = listWaveLength[idx];
192
+ const integrations = spectrum?.integrations || [];
193
+ if (integrations.length > 0) {
194
+ const sumArea = integrations.reduce((sum, integ) => sum + (integ.absoluteArea ?? integ.area ?? 0), 0);
195
+ const integrationStrings = integrations.map(integ => {
196
+ const rawArea = integ.absoluteArea ?? integ.area ?? 0;
197
+ const areaVal = rawArea.toFixed(2);
198
+ const percent = sumArea > 0 ? (rawArea * 100 / sumArea).toFixed(2) : '0.00';
199
+ return `${areaVal} (${percent}%)`;
200
+ });
201
+ values.push(`[${wavelength} nm]: ${integrationStrings.join(', ')}`);
202
+ }
203
+ });
204
+ return values.join('\n');
177
205
  };
178
206
  const SECData = ({
179
207
  classes,
@@ -242,8 +270,11 @@ const SECData = ({
242
270
  SECData.propTypes = {
243
271
  classes: _propTypes.default.object.isRequired,
244
272
  layout: _propTypes.default.string.isRequired,
245
- detector: _propTypes.default.object.isRequired,
246
- secData: _propTypes.default.object.isRequired
273
+ detector: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
274
+ secData: _propTypes.default.object
275
+ };
276
+ SECData.defaultProps = {
277
+ detector: ''
247
278
  };
248
279
  const DSCData = ({
249
280
  classes,
@@ -301,7 +332,7 @@ const DSCData = ({
301
332
  DSCData.propTypes = {
302
333
  classes: _propTypes.default.object.isRequired,
303
334
  layout: _propTypes.default.string.isRequired,
304
- dscMetaData: _propTypes.default.object.isRequired,
335
+ dscMetaData: _propTypes.default.object,
305
336
  updateAction: _propTypes.default.func.isRequired
306
337
  };
307
338
  const InfoPanel = ({
@@ -317,14 +348,17 @@ const InfoPanel = ({
317
348
  shiftSt,
318
349
  curveSt,
319
350
  exactMass,
320
- onExapnd,
351
+ onExpand,
321
352
  canChangeDescription,
322
353
  onDescriptionChanged,
323
354
  detectorSt,
324
355
  metaSt,
325
- updateDSCMetaDataAct
356
+ updateDSCMetaDataAct,
357
+ hplcMsSt,
358
+ entities
326
359
  }) => {
327
360
  if (!feature) return null;
361
+ const msExactMass = _format.default.isMsLayout(layoutSt) && exactMass ? formatMsExactMass(exactMass) : null;
328
362
  const {
329
363
  title,
330
364
  observeFrequency,
@@ -338,11 +372,14 @@ const InfoPanel = ({
338
372
  curveIdx
339
373
  } = curveSt;
340
374
  const {
341
- curves
342
- } = detectorSt;
375
+ curves = []
376
+ } = detectorSt || {};
377
+ const currentEntity = Array.isArray(entities) ? entities[curveIdx] : null;
378
+ const entityTitle = currentEntity?.entity?.title || currentEntity?.title || currentEntity?.spectra?.[0]?.title || currentEntity?.entity?.spectra?.[0]?.title || '';
379
+ const displayTitle = title || entityTitle;
343
380
  const getSelectedDetectorForCurve = (_detectorSt, targetCurveIdx) => {
344
381
  const targetCurve = curves.find(curve => curve.curveIdx === targetCurveIdx);
345
- return targetCurve ? targetCurve.selectedDetector.name : '';
382
+ return targetCurve?.selectedDetector?.name || '';
346
383
  };
347
384
  let selectedDetector = getSelectedDetectorForCurve(detectorSt, curveIdx);
348
385
 
@@ -363,10 +400,11 @@ const InfoPanel = ({
363
400
  if (integration) {
364
401
  originStack = integration.originStack; // eslint-disable-line
365
402
  }
403
+ const simulatedSignals = simContent(simulationSt.nmrSimPeaks);
366
404
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
367
405
  "data-testid": "PanelInfo",
368
406
  expanded: expand,
369
- onChange: onExapnd,
407
+ onChange: onExpand,
370
408
  disableGutters: true,
371
409
  sx: {
372
410
  '&.MuiAccordion-root.Mui-expanded': {
@@ -399,7 +437,7 @@ const InfoPanel = ({
399
437
  children: "Title : "
400
438
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
401
439
  className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
402
- children: title
440
+ children: displayTitle
403
441
  })]
404
442
  }), _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
405
443
  className: (0, _classnames.default)(classes.rowRoot, classes.rowEven),
@@ -419,14 +457,14 @@ const InfoPanel = ({
419
457
  className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
420
458
  children: renderReadableSubscript(showSolvName)
421
459
  })]
422
- }) : null, _format.default.isMsLayout(layoutSt) && exactMass ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
460
+ }) : null, msExactMass ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
423
461
  className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
424
462
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
425
463
  className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
426
- children: "Exact mass: "
464
+ children: "Exact mass (M+): "
427
465
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
428
466
  className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
429
- children: `${parseFloat(exactMass).toFixed(6)} g/mol`
467
+ children: `${msExactMass} g/mol`
430
468
  })]
431
469
  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(SECData, {
432
470
  classes: classes,
@@ -475,12 +513,30 @@ const InfoPanel = ({
475
513
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
476
514
  className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim),
477
515
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
478
- className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt'),
479
- children: simContent(simulationSt.nmrSimPeaks)
516
+ className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, !simulatedSignals && classes.simPlaceholder, 'txt-sv-panel-txt'),
517
+ children: simulatedSignals || simPlaceholder()
480
518
  })
481
519
  })]
482
520
  }) : null]
483
- })]
521
+ }), _format.default.isLCMsLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
522
+ className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim),
523
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
524
+ className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
525
+ children: "Area under curve (AUC):"
526
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
527
+ className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt'),
528
+ style: {
529
+ maxHeight: '80px',
530
+ overflowY: 'auto',
531
+ overflowX: 'hidden',
532
+ wordBreak: 'break-word',
533
+ marginBottom: '100px'
534
+ },
535
+ children: aucValue(integration, hplcMsSt).split('\n').map((line, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
536
+ children: line
537
+ }, idx))
538
+ })]
539
+ }) : null]
484
540
  });
485
541
  };
486
542
  const mapStateToProps = (state, props) => (
@@ -491,7 +547,8 @@ const mapStateToProps = (state, props) => (
491
547
  shiftSt: state.shift,
492
548
  curveSt: state.curve,
493
549
  detectorSt: state.detector,
494
- metaSt: state.meta
550
+ metaSt: state.meta,
551
+ hplcMsSt: state.hplcMs
495
552
  });
496
553
  const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
497
554
  updateDSCMetaDataAct: _meta.updateDSCMetaData
@@ -499,22 +556,24 @@ const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
499
556
  InfoPanel.propTypes = {
500
557
  classes: _propTypes.default.object.isRequired,
501
558
  expand: _propTypes.default.bool.isRequired,
502
- feature: _propTypes.default.object.isRequired,
503
- integration: _propTypes.default.object.isRequired,
559
+ feature: _propTypes.default.object,
560
+ integration: _propTypes.default.object,
504
561
  editorOnly: _propTypes.default.bool.isRequired,
505
562
  molSvg: _propTypes.default.string.isRequired,
506
563
  descriptions: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]).isRequired,
507
564
  layoutSt: _propTypes.default.string.isRequired,
508
- simulationSt: _propTypes.default.array.isRequired,
565
+ simulationSt: _propTypes.default.object.isRequired,
509
566
  shiftSt: _propTypes.default.object.isRequired,
510
567
  curveSt: _propTypes.default.object.isRequired,
511
- onExapnd: _propTypes.default.func.isRequired,
568
+ onExpand: _propTypes.default.func,
512
569
  canChangeDescription: _propTypes.default.bool.isRequired,
513
570
  onDescriptionChanged: _propTypes.default.func,
514
571
  exactMass: _propTypes.default.string,
515
572
  detectorSt: _propTypes.default.object.isRequired,
516
573
  metaSt: _propTypes.default.object.isRequired,
517
- updateDSCMetaDataAct: _propTypes.default.func.isRequired
574
+ updateDSCMetaDataAct: _propTypes.default.func.isRequired,
575
+ hplcMsSt: _propTypes.default.object.isRequired,
576
+ entities: _propTypes.default.array
518
577
  };
519
578
  var _default = exports.default = (0, _reactRedux.connect)(
520
579
  // eslint-disable-line
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.XRD = exports.UI = exports.THRESHOLD = exports.SUBMIT = exports.STATUS = exports.SIMULATION = exports.SHIFT = exports.SEC = exports.SCAN = exports.MULTIPLICITY = exports.META = exports.MANAGER = exports.LAYOUT = exports.JCAMP = exports.INTEGRATION = exports.FORECAST = exports.EDITPEAK = exports.CYCLIC_VOLTA_METRY = exports.CURVE = exports.AXES = void 0;
6
+ exports.XRD = exports.UI = exports.THRESHOLD = exports.SUBMIT = exports.STATUS = exports.SIMULATION = exports.SHIFT = exports.SEC = exports.SCAN = exports.MULTIPLICITY = exports.META = exports.MANAGER = exports.LAYOUT = exports.JCAMP = exports.INTEGRATION = exports.HPLC_MS = exports.FORECAST = exports.EDITPEAK = exports.CYCLIC_VOLTA_METRY = exports.CURVE = exports.AXES = void 0;
7
7
  const THRESHOLD = exports.THRESHOLD = {
8
8
  UPDATE_VALUE: 'THRESHOLD_UPDATE_VALUE',
9
9
  RESET_VALUE: 'THRESHOLD_RESET_VALUE',
@@ -56,6 +56,7 @@ const UI = exports.UI = {
56
56
  SET_TYPE: 'UI_SWEEP_SET_TYPE',
57
57
  SELECT: 'UI_SWEEP_SELECT',
58
58
  SELECT_ZOOMIN: 'UI_SWEEP_SELECT_ZOOMIN',
59
+ SELECT_ZOOMIN_SUBVIEW: 'UI_SWEEP_SELECT_ZOOMIN',
59
60
  SELECT_ZOOMRESET: 'UI_SWEEP_SELECT_ZOOMRESET',
60
61
  SELECT_INTEGRATION: 'UI_SWEEP_SELECT_INTEGRATION',
61
62
  SELECT_MULTIPLICITY: 'UI_SWEEP_SELECT_MULTIPLICITY',
@@ -63,6 +64,9 @@ const UI = exports.UI = {
63
64
  },
64
65
  WHEEL: {
65
66
  SCROLL: 'UI_WHEEL_SCROLL'
67
+ },
68
+ SUB_VIEWER: {
69
+ DISPLAY_VIEWER_AT: 'DISPLAY_VIEWER_AT'
66
70
  }
67
71
  };
68
72
  const FORECAST = exports.FORECAST = {
@@ -83,7 +87,10 @@ const INTEGRATION = exports.INTEGRATION = {
83
87
  SET_FKR: 'INTEGRATION_SET_FKR',
84
88
  RESET_ALL_RDC: 'INTEGRATION_RESET_ALL_RDC',
85
89
  CLEAR_ALL: 'INTEGRATION_CLEAR_ALL',
86
- SWEEP: 'INTEGRATION_SWEEP'
90
+ SWEEP: 'INTEGRATION_SWEEP',
91
+ SPLIT: 'INTEGRATION_SPLIT',
92
+ ADD_VISUAL_SPLIT: 'INTEGRATION_ADD_VISUAL_SPLIT',
93
+ RM_VISUAL_SPLIT: 'INTEGRATION_RM_VISUAL_SPLIT'
87
94
  };
88
95
  const SIMULATION = exports.SIMULATION = {
89
96
  RESET_ALL_RDC: 'SIMULATION_RESET_ALL_RDC'
@@ -150,4 +157,18 @@ const AXES = exports.AXES = {
150
157
  };
151
158
  const SEC = exports.SEC = {
152
159
  UPDATE_DETECTOR: 'UPDATE_DETECTOR'
160
+ };
161
+ const HPLC_MS = exports.HPLC_MS = {
162
+ SET_LCMS_INTEGRATIONS_EXPORT: 'HPLC_MS_SET_LCMS_INTEGRATIONS_EXPORT',
163
+ UPDATE_UVVIS_WAVE_LENGTH: 'UPDATE_UVVIS_WAVE_LENGTH',
164
+ SELECT_TIC_CURVE: 'SELECT_TIC_CURVE',
165
+ UPDATE_HPLCMS_INTEGRATIONS: 'UPDATE_HPLCMS_INTEGRATIONS',
166
+ UPDATE_CURRENT_PAGE_VALUE: 'UPDATE_CURRENT_PAGE_VALUE',
167
+ UVVIS_UNDO: 'HPLC_MS_UVVIS_UNDO',
168
+ UVVIS_REDO: 'HPLC_MS_UVVIS_REDO',
169
+ UPDATE_HPLCMS_PEAKS: 'UPDATE_HPLCMS_PEAKS',
170
+ REMOVE_HPLCMS_PEAK: 'REMOVE_HPLCMS_PEAK',
171
+ CLEAR_INTEGRATION_ALL_HPLCMS: 'CLEAR_INTEGRATION_ALL_HPLCMS',
172
+ CLEAR_ALL_PEAKS_HPLCMS: 'CLEAR_ALL_PEAKS_HPLCMS',
173
+ CLEAR_STATE: 'HPLC_MS_CLEAR_STATE'
153
174
  };
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.LIST_ROOT_SVG_GRAPH = exports.LIST_BRUSH_SVG_GRAPH = void 0;
7
+ const LIST_ROOT_SVG_GRAPH = exports.LIST_ROOT_SVG_GRAPH = {
8
+ LINE: 'd3Line',
9
+ RECT: 'd3Rect',
10
+ MULTI: 'd3Multi'
11
+ };
12
+ const LIST_BRUSH_SVG_GRAPH = exports.LIST_BRUSH_SVG_GRAPH = {
13
+ LINE: 'd3Svg',
14
+ RECT: 'd3SvgRect',
15
+ MULTI: 'd3SvgMulti'
16
+ };
@@ -27,5 +27,6 @@ const LIST_LAYOUT = exports.LIST_LAYOUT = {
27
27
  DLS_ACF: 'DLS ACF',
28
28
  DLS_INTENSITY: 'DLS intensity',
29
29
  DSC: 'DIFFERENTIAL SCANNING CALORIMETRY',
30
- GC: 'GAS CHROMATOGRAPHY'
30
+ GC: 'GAS CHROMATOGRAPHY',
31
+ LC_MS: 'LC/MS'
31
32
  };
@@ -15,6 +15,8 @@ const LIST_UI_SWEEP_TYPE = exports.LIST_UI_SWEEP_TYPE = {
15
15
  INTEGRATION_RM: 'integration remove',
16
16
  INTEGRATION_REF: 'integration reference',
17
17
  INTEGRATION_SET_REF: 'integration set ref',
18
+ INTEGRATION_SPLIT: 'integration split',
19
+ INTEGRATION_VISUAL_SPLIT: 'integration visual split',
18
20
  MULTIPLICITY_SWEEP_ADD: 'multiplicity sweep add',
19
21
  MULTIPLICITY_ONE_CLICK: 'multiplicity one click',
20
22
  MULTIPLICITY_ONE_RM: 'multiplicity one remove',
@@ -30,6 +32,7 @@ const LIST_UI_SWEEP_TYPE = exports.LIST_UI_SWEEP_TYPE = {
30
32
  CYCLIC_VOLTA_RM_MIN_PEAK: 'cyclic voltammetry remove min peak',
31
33
  CYCLIC_VOLTA_ADD_PECKER: 'cyclic voltammetry add pecker',
32
34
  CYCLIC_VOLTA_RM_PECKER: 'cyclic voltammetry remove pecker',
33
- CYCLIC_VOLTA_SET_REF: 'cyclic voltammetry set ref'
35
+ CYCLIC_VOLTA_SET_REF: 'cyclic voltammetry set ref',
36
+ PEAK_GROUP_SELECT: 'peak group select'
34
37
  };
35
- const LIST_NON_BRUSH_TYPES = exports.LIST_NON_BRUSH_TYPES = [LIST_UI_SWEEP_TYPE.PEAK_ADD, LIST_UI_SWEEP_TYPE.PEAK_DELETE, LIST_UI_SWEEP_TYPE.ANCHOR_SHIFT, LIST_UI_SWEEP_TYPE.INTEGRATION_RM, LIST_UI_SWEEP_TYPE.INTEGRATION_SET_REF, LIST_UI_SWEEP_TYPE.MULTIPLICITY_PEAK_ADD, LIST_UI_SWEEP_TYPE.MULTIPLICITY_PEAK_RM, LIST_UI_SWEEP_TYPE.MULTIPLICITY_ONE_CLICK, LIST_UI_SWEEP_TYPE.MULTIPLICITY_ONE_RM, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_MAX_PEAK, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_MAX_PEAK, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_MIN_PEAK, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_MIN_PEAK, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_PECKER, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_PECKER, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_SET_REF];
38
+ const LIST_NON_BRUSH_TYPES = exports.LIST_NON_BRUSH_TYPES = [LIST_UI_SWEEP_TYPE.PEAK_ADD, LIST_UI_SWEEP_TYPE.PEAK_DELETE, LIST_UI_SWEEP_TYPE.ANCHOR_SHIFT, LIST_UI_SWEEP_TYPE.INTEGRATION_RM, LIST_UI_SWEEP_TYPE.INTEGRATION_SET_REF, LIST_UI_SWEEP_TYPE.INTEGRATION_SPLIT, LIST_UI_SWEEP_TYPE.INTEGRATION_VISUAL_SPLIT, LIST_UI_SWEEP_TYPE.MULTIPLICITY_PEAK_ADD, LIST_UI_SWEEP_TYPE.MULTIPLICITY_PEAK_RM, LIST_UI_SWEEP_TYPE.MULTIPLICITY_ONE_CLICK, LIST_UI_SWEEP_TYPE.MULTIPLICITY_ONE_RM, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_MAX_PEAK, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_MAX_PEAK, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_MIN_PEAK, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_MIN_PEAK, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_PECKER, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_PECKER, LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_SET_REF, LIST_UI_SWEEP_TYPE.PEAK_GROUP_SELECT];