Skip to content

Commit 6d03dad

Browse files
baolanlequangbaolanlequang
authored
feat: display sec metadata on info panel (#214)
1 parent eb33ad6 commit 6d03dad

4 files changed

Lines changed: 157 additions & 74 deletions

File tree

‎dist/components/panel/info.js‎

Lines changed: 65 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore
1717
var _styles = require("@mui/styles");
1818
var _format = _interopRequireDefault(require("../../helpers/format"));
1919
/* eslint-disable no-mixed-operators, react/function-component-definition,
20-
react/require-default-props */
20+
react/require-default-props, max-len */
2121

2222
const styles = () => ({
2323
chip: {
@@ -109,7 +109,61 @@ const aucValue = integration => {
109109
}
110110
return values.join(', ');
111111
};
112-
const InfoPanel = _ref => {
112+
const SECData = _ref => {
113+
let {
114+
classes,
115+
layout,
116+
detector,
117+
secData
118+
} = _ref;
119+
if (_format.default.isSECLayout(layout) && secData !== undefined) {
120+
const {
121+
d,
122+
mn,
123+
mp,
124+
mw
125+
} = secData;
126+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
127+
className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
128+
}, /*#__PURE__*/_react.default.createElement("span", {
129+
className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
130+
}, "Detector: "), /*#__PURE__*/_react.default.createElement("span", {
131+
className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
132+
}, detector)), /*#__PURE__*/_react.default.createElement("div", {
133+
className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
134+
}, /*#__PURE__*/_react.default.createElement("span", {
135+
className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
136+
}, "D: "), /*#__PURE__*/_react.default.createElement("span", {
137+
className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
138+
}, d)), /*#__PURE__*/_react.default.createElement("div", {
139+
className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
140+
}, /*#__PURE__*/_react.default.createElement("span", {
141+
className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
142+
}, "MN: "), /*#__PURE__*/_react.default.createElement("span", {
143+
className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
144+
}, mn)), /*#__PURE__*/_react.default.createElement("div", {
145+
className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
146+
}, /*#__PURE__*/_react.default.createElement("span", {
147+
className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
148+
}, "MP: "), /*#__PURE__*/_react.default.createElement("span", {
149+
className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
150+
}, mp)), /*#__PURE__*/_react.default.createElement("div", {
151+
className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
152+
}, /*#__PURE__*/_react.default.createElement("span", {
153+
className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
154+
}, "MW: "), /*#__PURE__*/_react.default.createElement("span", {
155+
className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
156+
}, mw)));
157+
}
158+
return null;
159+
};
160+
SECData.propTypes = {
161+
classes: _propTypes.default.object.isRequired,
162+
layout: _propTypes.default.string.isRequired,
163+
detector: _propTypes.default.object.isRequired,
164+
secData: _propTypes.default.object.isRequired
165+
};
166+
const InfoPanel = _ref2 => {
113167
let {
114168
classes,
115169
expand,
@@ -127,12 +181,13 @@ const InfoPanel = _ref => {
127181
canChangeDescription,
128182
onDescriptionChanged,
129183
detectorSt
130-
} = _ref;
184+
} = _ref2;
131185
if (!feature) return null;
132186
const {
133187
title,
134188
observeFrequency,
135-
solventName
189+
solventName,
190+
secData
136191
} = feature;
137192
const {
138193
curveIdx
@@ -204,13 +259,12 @@ const InfoPanel = _ref => {
204259
className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
205260
}, "Theoretical mass: "), /*#__PURE__*/_react.default.createElement("span", {
206261
className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
207-
}, `${parseFloat(theoryMass).toFixed(6)} g/mol`)) : null, _format.default.isSECLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
208-
className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
209-
}, /*#__PURE__*/_react.default.createElement("span", {
210-
className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
211-
}, "Detector: "), /*#__PURE__*/_react.default.createElement("span", {
212-
className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
213-
}, selectedDetector)) : null, !molSvg ? null : /*#__PURE__*/_react.default.createElement(_reactSvgFileZoomPan.default, {
262+
}, `${parseFloat(theoryMass).toFixed(6)} g/mol`)) : null, /*#__PURE__*/_react.default.createElement(SECData, {
263+
classes: classes,
264+
layout: layoutSt,
265+
detector: selectedDetector,
266+
secData: secData
267+
}), !molSvg ? null : /*#__PURE__*/_react.default.createElement(_reactSvgFileZoomPan.default, {
214268
svg: molSvg,
215269
duration: 300,
216270
resize: true

‎dist/helpers/chem.js‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ var _list_layout = require("../constants/list_layout");
1414
var _integration = require("./integration");
1515
/* eslint-disable
1616
no-mixed-operators, react/function-component-definition,
17-
prefer-object-spread, camelcase, no-plusplus, prefer-destructuring */
17+
prefer-object-spread, camelcase, no-plusplus, prefer-destructuring,
18+
max-len */
1819

1920
const getTopic = (_, props) => props.topic;
2021
const getFeature = (_, props) => props.feature;
@@ -271,32 +272,6 @@ const Convert2MaxMinPeak = (layout, feature, offset) => {
271272
peaks.refIndex = refIndex;
272273
return peaks;
273274
}
274-
275-
// // let upperThresVal = upperThres;
276-
// // if (!upperThresVal) {
277-
// // upperThresVal = 1.0;
278-
// // }
279-
280-
// // let lowerThresVal = lowerThres;
281-
// // if (!lowerThresVal) {
282-
// // lowerThresVal = 1.0;
283-
// // }
284-
285-
// // const yUpperThres = parseFloat(upperThresVal) / 100.0 * maxY;
286-
// // const yLowerThres = parseFloat(lowerThresVal) / 100.0 * minY;
287-
288-
// // const corrOffset = offset || 0.0;
289-
// // for (let i = 0; i < data.y.length; i += 1) {
290-
// // const y = data.y[i];
291-
// // const overUpperThres = y >= yUpperThres;
292-
// // const belowThres = y <= yLowerThres;
293-
// // const x = data.x[i] - corrOffset;
294-
// // if (overUpperThres) {
295-
// // peaks.max.push({ x, y });
296-
// // } else if (belowThres) {
297-
// // peaks.min.push({ x, y });
298-
// // }
299-
// // }
300275
return peaks;
301276
};
302277
exports.Convert2MaxMinPeak = Convert2MaxMinPeak;
@@ -773,9 +748,30 @@ const extrFeaturesCylicVolta = (jcamp, layout, peakUp) => {
773748
const lowerThres = _format.default.isXRDLayout(layout) ? 100 : calcLowerThres(s);
774749
const cpo = buildPeakFeature(jcamp, layout, peakUp, s, 100, upperThres, lowerThres);
775750
const bnd = getBoundary(s);
776-
const detector = _format.default.isSECLayout(layout) && jcamp.info.$DETECTOR ? jcamp.info.$DETECTOR : '';
751+
let detector = '';
752+
let secData = null;
753+
if (_format.default.isSECLayout(layout)) {
754+
const {
755+
info
756+
} = jcamp;
757+
detector = info.$DETECTOR ? info.$DETECTOR : '';
758+
const {
759+
D,
760+
MN,
761+
MP,
762+
MW
763+
} = info;
764+
secData = {
765+
d: D,
766+
mn: MN,
767+
mp: MP,
768+
mw: MW
769+
};
770+
}
771+
// const detector = Format.isSECLayout(layout) && jcamp.info.$DETECTOR ? jcamp.info.$DETECTOR : '';
777772
return Object.assign({}, base, cpo, bnd, {
778-
detector
773+
detector,
774+
secData
779775
});
780776
}).filter(r => r != null);
781777
return features;
@@ -822,7 +818,7 @@ const extractTemperature = jcamp => {
822818
const ExtractJcamp = source => {
823819
const jcamp = _jcampconverter.default.convert(source, {
824820
xy: true,
825-
keepRecordsRegExp: /(\$CSTHRESHOLD|\$CSSCANAUTOTARGET|\$CSSCANEDITTARGET|\$CSSCANCOUNT|\$CSSOLVENTNAME|\$CSSOLVENTVALUE|\$CSSOLVENTX|\$CSCATEGORY|\$CSITAREA|\$CSITFACTOR|\$OBSERVEDINTEGRALS|\$OBSERVEDMULTIPLETS|\$OBSERVEDMULTIPLETSPEAKS|\.SOLVENTNAME|\.OBSERVEFREQUENCY|\$CSSIMULATIONPEAKS|\$CSUPPERTHRESHOLD|\$CSLOWERTHRESHOLD|\$CSCYCLICVOLTAMMETRYDATA|UNITS|SYMBOL|CSAUTOMETADATA|\$DETECTOR)/ // eslint-disable-line
821+
keepRecordsRegExp: /(\$CSTHRESHOLD|\$CSSCANAUTOTARGET|\$CSSCANEDITTARGET|\$CSSCANCOUNT|\$CSSOLVENTNAME|\$CSSOLVENTVALUE|\$CSSOLVENTX|\$CSCATEGORY|\$CSITAREA|\$CSITFACTOR|\$OBSERVEDINTEGRALS|\$OBSERVEDMULTIPLETS|\$OBSERVEDMULTIPLETSPEAKS|\.SOLVENTNAME|\.OBSERVEFREQUENCY|\$CSSIMULATIONPEAKS|\$CSUPPERTHRESHOLD|\$CSLOWERTHRESHOLD|\$CSCYCLICVOLTAMMETRYDATA|UNITS|SYMBOL|CSAUTOMETADATA|\$DETECTOR|MN|MW|D|MP)/ // eslint-disable-line
826822
});
827823
const layout = readLayout(jcamp);
828824
const peakUp = !_format.default.isIrLayout(layout);

‎src/components/panel/info.js‎

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable no-mixed-operators, react/function-component-definition,
2-
react/require-default-props */
2+
react/require-default-props, max-len */
33
import React from 'react';
44
import PropTypes from 'prop-types';
55
import classNames from 'classnames';
@@ -113,13 +113,57 @@ const aucValue = (integration) => {
113113
return values.join(', ');
114114
};
115115

116+
const SECData = ({
117+
classes, layout, detector, secData,
118+
}) => {
119+
if (Format.isSECLayout(layout) && secData !== undefined) {
120+
const {
121+
d, mn, mp, mw,
122+
} = secData;
123+
return (
124+
<div>
125+
<div className={classNames(classes.rowRoot, classes.rowOdd)}>
126+
<span className={classNames(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')}>Detector: </span>
127+
<span className={classNames(classes.tTxt, 'txt-sv-panel-txt')}>{detector}</span>
128+
</div>
129+
<div className={classNames(classes.rowRoot, classes.rowEven)}>
130+
<span className={classNames(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')}>D: </span>
131+
<span className={classNames(classes.tTxt, 'txt-sv-panel-txt')}>{d}</span>
132+
</div>
133+
<div className={classNames(classes.rowRoot, classes.rowOdd)}>
134+
<span className={classNames(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')}>MN: </span>
135+
<span className={classNames(classes.tTxt, 'txt-sv-panel-txt')}>{mn}</span>
136+
</div>
137+
<div className={classNames(classes.rowRoot, classes.rowEven)}>
138+
<span className={classNames(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')}>MP: </span>
139+
<span className={classNames(classes.tTxt, 'txt-sv-panel-txt')}>{mp}</span>
140+
</div>
141+
<div className={classNames(classes.rowRoot, classes.rowOdd)}>
142+
<span className={classNames(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')}>MW: </span>
143+
<span className={classNames(classes.tTxt, 'txt-sv-panel-txt')}>{mw}</span>
144+
</div>
145+
</div>
146+
);
147+
}
148+
return null;
149+
};
150+
151+
SECData.propTypes = {
152+
classes: PropTypes.object.isRequired,
153+
layout: PropTypes.string.isRequired,
154+
detector: PropTypes.object.isRequired,
155+
secData: PropTypes.object.isRequired,
156+
};
157+
116158
const InfoPanel = ({
117159
classes, expand, feature, integration, editorOnly, molSvg, descriptions,
118160
layoutSt, simulationSt, shiftSt, curveSt, theoryMass,
119161
onExapnd, canChangeDescription, onDescriptionChanged, detectorSt,
120162
}) => {
121163
if (!feature) return null;
122-
const { title, observeFrequency, solventName } = feature;
164+
const {
165+
title, observeFrequency, solventName, secData,
166+
} = feature;
123167
const { curveIdx } = curveSt;
124168
const { curves } = detectorSt;
125169

@@ -203,7 +247,7 @@ const InfoPanel = ({
203247
)
204248
: null
205249
}
206-
{
250+
{/* {
207251
Format.isSECLayout(layoutSt)
208252
? (
209253
<div className={classNames(classes.rowRoot, classes.rowOdd)}>
@@ -212,7 +256,8 @@ const InfoPanel = ({
212256
</div>
213257
)
214258
: null
215-
}
259+
} */}
260+
<SECData classes={classes} layout={layoutSt} detector={selectedDetector} secData={secData} />
216261
{
217262
!molSvg
218263
? null

‎src/helpers/chem.js‎

Lines changed: 17 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable
22
no-mixed-operators, react/function-component-definition,
3-
prefer-object-spread, camelcase, no-plusplus, prefer-destructuring */
3+
prefer-object-spread, camelcase, no-plusplus, prefer-destructuring,
4+
max-len */
45
import Jcampconverter from 'jcampconverter';
56
import { createSelector } from 'reselect';
67

@@ -232,31 +233,6 @@ const Convert2MaxMinPeak = (layout, feature, offset) => { // eslint-disable-lin
232233
return peaks;
233234
}
234235

235-
// // let upperThresVal = upperThres;
236-
// // if (!upperThresVal) {
237-
// // upperThresVal = 1.0;
238-
// // }
239-
240-
// // let lowerThresVal = lowerThres;
241-
// // if (!lowerThresVal) {
242-
// // lowerThresVal = 1.0;
243-
// // }
244-
245-
// // const yUpperThres = parseFloat(upperThresVal) / 100.0 * maxY;
246-
// // const yLowerThres = parseFloat(lowerThresVal) / 100.0 * minY;
247-
248-
// // const corrOffset = offset || 0.0;
249-
// // for (let i = 0; i < data.y.length; i += 1) {
250-
// // const y = data.y[i];
251-
// // const overUpperThres = y >= yUpperThres;
252-
// // const belowThres = y <= yLowerThres;
253-
// // const x = data.x[i] - corrOffset;
254-
// // if (overUpperThres) {
255-
// // peaks.max.push({ x, y });
256-
// // } else if (belowThres) {
257-
// // peaks.min.push({ x, y });
258-
// // }
259-
// // }
260236
return peaks;
261237
};
262238

@@ -734,8 +710,20 @@ const extrFeaturesCylicVolta = (jcamp, layout, peakUp) => {
734710
const lowerThres = Format.isXRDLayout(layout) ? 100 : calcLowerThres(s);
735711
const cpo = buildPeakFeature(jcamp, layout, peakUp, s, 100, upperThres, lowerThres);
736712
const bnd = getBoundary(s);
737-
const detector = Format.isSECLayout(layout) && jcamp.info.$DETECTOR ? jcamp.info.$DETECTOR : '';
738-
return Object.assign({}, base, cpo, bnd, { detector });
713+
let detector = '';
714+
let secData = null;
715+
if (Format.isSECLayout(layout)) {
716+
const { info } = jcamp;
717+
detector = info.$DETECTOR ? info.$DETECTOR : '';
718+
const {
719+
D, MN, MP, MW,
720+
} = info;
721+
secData = {
722+
d: D, mn: MN, mp: MP, mw: MW,
723+
};
724+
}
725+
// const detector = Format.isSECLayout(layout) && jcamp.info.$DETECTOR ? jcamp.info.$DETECTOR : '';
726+
return Object.assign({}, base, cpo, bnd, { detector, secData });
739727
}).filter((r) => r != null);
740728

741729
return features;
@@ -789,7 +777,7 @@ const ExtractJcamp = (source) => {
789777
source,
790778
{
791779
xy: true,
792-
keepRecordsRegExp: /(\$CSTHRESHOLD|\$CSSCANAUTOTARGET|\$CSSCANEDITTARGET|\$CSSCANCOUNT|\$CSSOLVENTNAME|\$CSSOLVENTVALUE|\$CSSOLVENTX|\$CSCATEGORY|\$CSITAREA|\$CSITFACTOR|\$OBSERVEDINTEGRALS|\$OBSERVEDMULTIPLETS|\$OBSERVEDMULTIPLETSPEAKS|\.SOLVENTNAME|\.OBSERVEFREQUENCY|\$CSSIMULATIONPEAKS|\$CSUPPERTHRESHOLD|\$CSLOWERTHRESHOLD|\$CSCYCLICVOLTAMMETRYDATA|UNITS|SYMBOL|CSAUTOMETADATA|\$DETECTOR)/, // eslint-disable-line
780+
keepRecordsRegExp: /(\$CSTHRESHOLD|\$CSSCANAUTOTARGET|\$CSSCANEDITTARGET|\$CSSCANCOUNT|\$CSSOLVENTNAME|\$CSSOLVENTVALUE|\$CSSOLVENTX|\$CSCATEGORY|\$CSITAREA|\$CSITFACTOR|\$OBSERVEDINTEGRALS|\$OBSERVEDMULTIPLETS|\$OBSERVEDMULTIPLETSPEAKS|\.SOLVENTNAME|\.OBSERVEFREQUENCY|\$CSSIMULATIONPEAKS|\$CSUPPERTHRESHOLD|\$CSLOWERTHRESHOLD|\$CSCYCLICVOLTAMMETRYDATA|UNITS|SYMBOL|CSAUTOMETADATA|\$DETECTOR|MN|MW|D|MP)/, // eslint-disable-line
793781
},
794782
);
795783
const layout = readLayout(jcamp);

0 commit comments

Comments
 (0)