feat WIP: update handle select tic

Author: Lan Le

src/actions/hplcms.js

@@ -9,7 +9,7 @@ const selectWavelength = (payload) => (
 
 const changeTic = (payload) => (
   {
-    type: HPLC_MS.UPDATE_UVVIS_WAVE_LENGTH,
+    type: HPLC_MS.SELECT_TIC_CURVE,
     payload,
   }
 );

src/components/d3_line_rect/index.js

@@ -13,7 +13,8 @@ import {
 } from '../../helpers/chem';
 import { resetAll } from '../../actions/manager';
 import { selectUiSweep, scrollUiWheel, clickUiTarget } from '../../actions/ui';
-import { selectWavelength } from '../../actions/hplcms';
+import { selectWavelength, changeTic } from '../../actions/hplcms';
+import { selectCurve } from '../../actions/curve';
 import RectFocus from './rect_focus';
 import MultiFocus from './multi_focus';
 import LineFocus from './line_focus';
@@ -30,7 +31,8 @@ const W = Math.round(window.innerWidth * 0.90 * 9 / 12); // ROI
 const H = Math.round(window.innerHeight * 0.90 * 0.85 / 3); // ROI
 
 const waveLengthSelect = (classes, hplcMsSt, updateWaveLengthAct) => {
-  const { listWaveLength, selectedWaveLength } = hplcMsSt;
+  const { uvvis } = hplcMsSt;
+  const { listWaveLength, selectedWaveLength } = uvvis;
   const options = listWaveLength.map((d) => (
     <MenuItem value={d} key={d}>
       <span className={classNames(classes.txtOpt, 'option-sv-bar-decimal')}>
@@ -60,6 +62,38 @@ const waveLengthSelect = (classes, hplcMsSt, updateWaveLengthAct) => {
   );
 };
 
+const ticSelect = (classes, hplcMsSt, updateTicAct) => {
+  const { tic } = hplcMsSt;
+  const { isNegative } = tic;
+  const listTIC = [{ name: 'PLUS', value: 0 }, { name: 'MINUS', value: 1 }];
+  const options = listTIC.map((d) => (
+    <MenuItem value={d.value} key={d.value}>
+      <span className={classNames(classes.txtOpt, 'option-sv-bar-decimal')}>
+        {d.name}
+      </span>
+    </MenuItem>
+  ));
+
+  return (
+    <FormControl
+      className={classNames(classes.fieldDecimal)}
+      variant="outlined"
+    >
+      <InputLabel id="select-decimal-label" className={classNames(classes.selectLabel, 'select-sv-bar-label')}>
+        TIC
+      </InputLabel>
+      <Select
+        labelId="select-decimal-label"
+        label="Decimal"
+        value={isNegative ? 1 : 0}
+        onChange={updateTicAct}
+        className={classNames(classes.selectInput, 'input-sv-bar-decimal')}
+      >
+        { options }
+      </Select>
+    </FormControl>
+  );
+};
 class ViewerLineRect extends React.Component {
   constructor(props) {
     super(props);
@@ -97,6 +131,8 @@ class ViewerLineRect extends React.Component {
       resetAllAct,
     } = this.props;
     drawDestroy(this.rootKlassMulti);
+    drawDestroy(this.rootKlassLine);
+    drawDestroy(this.rootKlassRect);
     resetAllAct(feature);
 
     const uvvisViewFeature = this.extractUvvisView();
@@ -155,6 +191,26 @@ class ViewerLineRect extends React.Component {
     } = this.props;
     this.normChange(prevProps);
 
+    const uvvisViewFeature = this.extractUvvisView();
+    if (uvvisViewFeature) {
+      const { data } = uvvisViewFeature;
+      const currentData = data[0];
+      const { x, y } = currentData;
+      const uvvisSeed = x.map((d, index) => {
+        const s = { x: d, y: y[index] };
+        return s;
+      });
+      this.lineFocus.update({
+        filterSeed: uvvisSeed,
+        filterPeak: [],
+        tTrEndPts,
+        isUiNoBrushSt: true,
+        sweepExtentSt: sweepExtentSubViewSt,
+      });
+      drawLabel(this.rootKlassLine, null, 'M/Z', 'Intensity');
+      drawDisplay(this.rootKlassLine, false);
+    }
+
     const filterSeed = seed;
 
     this.multiFocus.update({
@@ -208,14 +264,16 @@ class ViewerLineRect extends React.Component {
     const {
       features,
     } = extractParams(subEntities[0], 0, 1);
-    const { wavelengthIdx } = hplcMsSt;
+    const { uvvis } = hplcMsSt;
+    const { wavelengthIdx } = uvvis;
     return features[wavelengthIdx];
   }
 
   extractSubView() {
-    const { uiSt, subEntities, curveSt } = this.props;
-    const { curveIdx } = curveSt;
-    const entityIdx = curveIdx === 0 ? 1 : 2;
+    const { uiSt, subEntities, hplcMsSt } = this.props;
+    const { tic } = hplcMsSt;
+    const { isNegative } = tic;
+    const entityIdx = isNegative ? 2 : 1;
     const { subViewerAt } = uiSt;
     let selectFeature = null;
 
@@ -235,13 +293,22 @@ class ViewerLineRect extends React.Component {
   }
 
   render() {
-    const { hplcMsSt, selectWavelengthAct } = this.props;
+    const {
+      hplcMsSt, selectWavelengthAct, updateTicAct, selectCurveAct,
+    } = this.props;
+    const handleTicChanged = (event) => {
+      updateTicAct(event);
+      selectCurveAct(event.target.value);
+    };
     return (
       <div>
         {
           waveLengthSelect(classNames, hplcMsSt, selectWavelengthAct)
         }
         <div className={LIST_ROOT_SVG_GRAPH.LINE} />
+        {
+          ticSelect(classNames, hplcMsSt, handleTicChanged)
+        }
         <div className={LIST_ROOT_SVG_GRAPH.MULTI} />
         <Zoom isSubView />
         <div className={LIST_ROOT_SVG_GRAPH.RECT} />
@@ -271,6 +338,8 @@ const mapDispatchToProps = (dispatch) => (
     selectUiSweepAct: selectUiSweep,
     scrollUiWheelAct: scrollUiWheel,
     selectWavelengthAct: selectWavelength,
+    updateTicAct: changeTic,
+    selectCurveAct: selectCurve,
   }, dispatch)
 );
 
@@ -297,6 +366,8 @@ ViewerLineRect.propTypes = {
   isHidden: PropTypes.bool.isRequired,
   hplcMsSt: PropTypes.bool.isRequired,
   selectWavelengthAct: PropTypes.func.isRequired,
+  updateTicAct: PropTypes.func.isRequired,
+  selectCurveAct: PropTypes.func.isRequired,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ViewerLineRect);

src/components/panel/index.js

@@ -1,4 +1,4 @@
-/* eslint-disable react/prop-types, react/require-default-props */
+/* eslint-disable react/prop-types, react/require-default-props, max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -18,6 +18,7 @@ import MultiplicityPanel from './multiplicity';
 import CyclicVoltammetryPanel from './cyclic_voltamery_data';
 import GraphSelectionPanel from './graph_selection';
 import Cfg from '../../helpers/cfg';
+import Format from '../../helpers/format';
 
 const theme = createTheme({
   typography: {
@@ -82,7 +83,7 @@ class PanelViewer extends React.Component {
     const onExapndGraphSelection = () => this.onExapnd('graph');
 
     const { listCurves } = curveSt;
-    const hideGraphSelection = listCurves === false || listCurves === undefined;
+    const hideGraphSelection = listCurves === false || listCurves === undefined || Format.isLCMsLayout(layoutSt);
 
     return (
       <div className={classNames(classes.panels)}>

src/constants/action_type.js

@@ -168,6 +168,7 @@ const SEC = {
 
 const HPLC_MS = {
   UPDATE_UVVIS_WAVE_LENGTH: 'UPDATE_UVVIS_WAVE_LENGTH',
+  SELECT_TIC_CURVE: 'SELECT_TIC_CURVE',
 };
 
 export {

src/reducers/reducer_hplc_ms.js

@@ -3,9 +3,14 @@ import { HPLC_MS, CURVE } from '../constants/action_type';
 import Format from '../helpers/format';
 
 const initialState = {
-  listWaveLength: null,
-  selectedWaveLength: null,
-  wavelengthIdx: 0,
+  uvvis: {
+    listWaveLength: null,
+    selectedWaveLength: null,
+    wavelengthIdx: 0,
+  },
+  tic: {
+    isNegative: false,
+  },
 };
 
 const updateHPLCData = (state, action) => {
@@ -18,24 +23,48 @@ const updateHPLCData = (state, action) => {
     const uvvisCurve = payload[2];
     const { features } = uvvisCurve;
     const listWaveLength = features.map((fe) => fe.pageValue);
-    return Object.assign({}, state, {
+    const { uvvis } = state;
+    const newUvvis = Object.assign({}, uvvis, {
       listWaveLength,
       selectedWaveLength: listWaveLength[0],
     });
+    return Object.assign({}, state, {
+      uvvis: newUvvis,
+    });
   }
   return state;
 };
 
 const updateWaveLength = (state, action) => {
   const { payload } = action;
-  const { listWaveLength } = state;
   if (payload) {
     const { value } = payload.target;
+    const { uvvis } = state;
+    const { listWaveLength } = uvvis;
     const wavelengthIdx = listWaveLength.indexOf(value);
-    return Object.assign({}, state, {
+    const newUvvis = Object.assign({}, uvvis, {
       selectedWaveLength: value,
       wavelengthIdx,
     });
+    return Object.assign({}, state, {
+      uvvis: newUvvis,
+    });
+  }
+  return state;
+};
+
+const updateTic = (state, action) => {
+  const { payload } = action;
+  if (payload) {
+    const { value } = payload.target;
+    const { tic } = state;
+    const isNegative = value === 1;
+    const newTic = Object.assign({}, tic, {
+      isNegative,
+    });
+    return Object.assign({}, state, {
+      tic: newTic,
+    });
   }
   return state;
 };
@@ -46,6 +75,8 @@ const hplcmsReducer = (state = initialState, action) => {
       return updateHPLCData(state, action);
     case HPLC_MS.UPDATE_UVVIS_WAVE_LENGTH:
       return updateWaveLength(state, action);
+    case HPLC_MS.SELECT_TIC_CURVE:
+      return updateTic(state, action);
     default:
       return state;
   }