feat: add UI test file for lcms layout

src/__tests__/fixtures/lc_ms_jcamp.js

@@ -0,0 +1,59 @@
+const lcmsJcamp = `
+##TITLE= LC-MS analysis of Phenol, 2-Chlorphenol, and o-Kresol
+##JCAMP-DX= 5.00   $$ ISAS JCAMP-DX program (V.1.0)
+##DATA TYPE= LC/MS
+##DATA CLASS= NTUPLES
+##ORIGIN= H. Mayer, ISAS Dortmund
+##OWNER= COPYRIGHT (C) 1993 by ISAS Dortmund, FRG
+##SPECTROMETER/DATA SYSTEM= Finnigan MAT Magnum
+##.SPECTROMETER TYPE= TRAP
+##.INLET= GC
+##.IONIZATION MODE= EI+
+##$CSSCANAUTOTARGET= 2
+##$CSSCANEDITTARGET= 3
+##$CSSCANCOUNT= 5
+##$CSTHRESHOLD= 0.07
+##NTUPLES= MASS SPECTRUM
+##VAR_NAME= MASS, INTENSITY, RETENTION TIME,
+##SYMBOL= X, Y, T
+##VAR_TYPE= INDEPENDENT, DEPENDENT, INDEPENDENT
+##VAR_FORM= AFFN, AFFN, AFFN
+##VAR_DIM= , , 3
+##UNITS= M/Z, RELATIVE ABUNDANCE, SECONDS
+##FIRST= , , 272
+##LAST= , , 333
+##PAGE= T= 272
+##NPOINTS= 18
+##DATA TABLE= (XY..XY), PEAKS
+50, 2.52; 51, 9.32; 52, 7.42; 53, 1.30; 54, 5.46; 61, 4.07
+62, 5.46; 63, 11.17; 64, 2.52; 65, 39.72; 66, 63.70; 67, 4.13
+68, 1.22; 77, 1.89; 79, 1.63; 93, 2.13; 94, 100.00; 95, 8.09
+##PAGE= T= 301
+##NPOINTS= 26
+##DATA TABLE= (XY..XY), PEAKS
+50, 5.84; 51, 9.55; 52, 4.19; 53, 1.12; 54, 12.67; 60, 3.80
+61, 10.16; 62, 13.47; 63, 58.30; 64, 60.43; 65, 33.02; 66, 4.32
+72, 1.70; 75, 1.62; 91, 1.03; 92, 24.95; 93, 4.20; 94, 1.25
+99, 7.20; 100, 19.83; 101, 3.45; 102, 6.47; 128, 100.00; 129, 6.52
+130, 32.45; 131, 2.13
+##PAGE= T= 333
+##NPOINTS= 26
+##DATA TABLE= (XY..XY), PEAKS
+50, 3.93; 51, 22.60; 52, 29.96; 53, 12.27; 54, 19.93; 55, 4.24
+56, 3.64; 61, 3.55; 62, 5.12; 63, 14.49; 64, 2.36; 65, 4.70
+66, 2.57; 68, 1.25; 76, 1.57; 77, 53.08; 78, 12.56; 79, 64.79
+80, 30.92; 81, 4.33; 90.01221, 50.26; 90.01222, 54.82; 90.01223, 59.30; 107, 91.80
+108, 100.00; 109, 8.55
+##PAGE= T= 410
+##NPOINTS= 5
+##DATA TABLE= (XY..XY), PEAKS
+30, 100; 55, 150; 70, 200; 75, 220; 100, 50;
+##PAGE= T= 550
+##NPOINTS= 5
+##DATA TABLE= (XY..XY), PEAKS
+30, 400; 55, 200; 70, 180; 75, 160; 100, 50;
+##END NTUPLES= MASS SPECTRUM
+##END=
+`;
+
+export default lcmsJcamp;

src/components/cmd_bar/r01_layout.js

@@ -160,6 +160,9 @@ const layoutSelect = (classes, layoutSt, updateLayoutAct) => {
         <MenuItem value={LIST_LAYOUT.MS}>
           <span className={classNames(classes.txtOpt, 'option-sv-bar-layout')}>MS</span>
         </MenuItem>
+        <MenuItem value={LIST_LAYOUT.LC_MS}>
+          <span className={classNames(classes.txtOpt, 'option-sv-bar-layout')}>LC/MS</span>
+        </MenuItem>
         <MenuItem value={LIST_LAYOUT.CYCLIC_VOLTAMMETRY}>
           <span className={classNames(classes.txtOpt, 'option-sv-bar-layout')}>CV (CYCLIC VOLTAMMETRY)</span>
         </MenuItem>

src/components/d3_line_rect/index.js

@@ -0,0 +1,146 @@
+/* eslint-disable no-mixed-operators */
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import PropTypes from 'prop-types';
+
+import {
+  Topic2Seed, Feature2Peak, ToThresEndPts, ToShiftPeaks,
+} from '../../helpers/chem';
+import { resetAll } from '../../actions/manager';
+import { selectUiSweep, scrollUiWheel, clickUiTarget } from '../../actions/ui';
+import RectFocus from './rect_focus';
+import {
+  drawMain, drawLabel, drawDisplay, drawDestroy,
+} from '../common/draw';
+import { LIST_UI_SWEEP_TYPE, LIST_NON_BRUSH_TYPES } from '../../constants/list_ui';
+
+const W = Math.round(window.innerWidth * 0.90 * 9 / 12); // ROI
+const H = Math.round(window.innerHeight * 0.90 * 0.85); // ROI
+
+class ViewerLineRect extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const { clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct } = props;
+    this.rootKlass = '.d3Rect';
+    this.focus = new RectFocus({
+      W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
+    });
+
+    this.normChange = this.normChange.bind(this);
+  }
+
+  componentDidMount() {
+    const {
+      seed, peak, cLabel, xLabel, yLabel, feature,
+      tTrEndPts, tSfPeaks, isHidden,
+      sweepExtentSt, isUiAddIntgSt, isUiNoBrushSt,
+      resetAllAct,
+    } = this.props;
+    drawDestroy(this.rootKlass);
+    resetAllAct(feature);
+
+    const filterSeed = seed;
+    const filterPeak = peak;
+
+    drawMain(this.rootKlass, W, H);
+    this.focus.create({
+      filterSeed,
+      filterPeak,
+      tTrEndPts,
+      tSfPeaks,
+      sweepExtentSt,
+      isUiAddIntgSt,
+      isUiNoBrushSt,
+    });
+    drawLabel(this.rootKlass, cLabel, xLabel, yLabel);
+    drawDisplay(this.rootKlass, isHidden);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      seed, peak,
+      tTrEndPts, tSfPeaks, isHidden,
+      sweepExtentSt, isUiAddIntgSt, isUiNoBrushSt,
+    } = this.props;
+    this.normChange(prevProps);
+
+    const filterSeed = seed;
+    const filterPeak = peak;
+
+    this.focus.update({
+      filterSeed,
+      filterPeak,
+      tTrEndPts,
+      tSfPeaks,
+      sweepExtentSt,
+      isUiAddIntgSt,
+      isUiNoBrushSt,
+    });
+    drawDisplay(this.rootKlass, isHidden);
+  }
+
+  componentWillUnmount() {
+    drawDestroy(this.rootKlass);
+  }
+
+  normChange(prevProps) {
+    const { feature, resetAllAct } = this.props;
+    const oldFeature = prevProps.feature;
+    if (oldFeature !== feature) {
+      resetAllAct(feature);
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="d3Line" />
+        <div className="d3Rect" />
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, props) => (
+  {
+    seed: Topic2Seed(state, props),
+    peak: Feature2Peak(state, props),
+    tTrEndPts: ToThresEndPts(state, props),
+    tSfPeaks: ToShiftPeaks(state, props),
+    sweepExtentSt: state.ui.sweepExtent,
+    isUiAddIntgSt: state.ui.sweepType === LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
+    isUiNoBrushSt: LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
+  }
+);
+
+const mapDispatchToProps = (dispatch) => (
+  bindActionCreators({
+    resetAllAct: resetAll,
+    clickUiTargetAct: clickUiTarget,
+    selectUiSweepAct: selectUiSweep,
+    scrollUiWheelAct: scrollUiWheel,
+  }, dispatch)
+);
+
+ViewerLineRect.propTypes = {
+  seed: PropTypes.array.isRequired,
+  peak: PropTypes.array.isRequired,
+  cLabel: PropTypes.string.isRequired,
+  xLabel: PropTypes.string.isRequired,
+  yLabel: PropTypes.string.isRequired,
+  feature: PropTypes.object.isRequired,
+  tTrEndPts: PropTypes.array.isRequired,
+  tSfPeaks: PropTypes.array.isRequired,
+  sweepExtentSt: PropTypes.object.isRequired,
+  isUiAddIntgSt: PropTypes.bool.isRequired,
+  isUiNoBrushSt: PropTypes.bool.isRequired,
+  resetAllAct: PropTypes.func.isRequired,
+  clickUiTargetAct: PropTypes.func.isRequired,
+  selectUiSweepAct: PropTypes.func.isRequired,
+  scrollUiWheelAct: PropTypes.func.isRequired,
+  isHidden: PropTypes.bool.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ViewerLineRect);