feat WIP: add dropdown wavelength

src/actions/hplcms.js

@@ -0,0 +1,12 @@
+import { HPLC_MS } from '../constants/action_type';
+
+const selectWavelength = (payload) => (
+  {
+    type: HPLC_MS.UPDATE_UVVIS_WAVE_LENGTH,
+    payload,
+  }
+);
+
+export {
+  selectWavelength,
+};

src/components/d3_line_rect/index.js

@@ -3,6 +3,10 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {
+  Select, MenuItem, FormControl, InputLabel,
+} from '@mui/material';
 
 import {
   Topic2Seed, ToThresEndPts,
@@ -24,6 +28,36 @@ import Zoom from '../cmd_bar/02_zoom';
 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, listWaveLength, value, updateWaveLengthAct) => {
+  const options = listWaveLength.map((d) => (
+    <MenuItem value={d} key={d}>
+      <span className={classNames(classes.txtOpt, 'option-sv-bar-decimal')}>
+        {d}
+      </span>
+    </MenuItem>
+  ));
+
+  return (
+    <FormControl
+      className={classNames(classes.fieldDecimal)}
+      variant="outlined"
+    >
+      <InputLabel id="select-decimal-label" className={classNames(classes.selectLabel, 'select-sv-bar-label')}>
+        Wavelength
+      </InputLabel>
+      <Select
+        labelId="select-decimal-label"
+        label="Decimal"
+        value={value}
+        onChange={updateWaveLengthAct}
+        className={classNames(classes.selectInput, 'input-sv-bar-decimal')}
+      >
+        { options }
+      </Select>
+    </FormControl>
+  );
+};
+
 class ViewerLineRect extends React.Component {
   constructor(props) {
     super(props);
@@ -32,6 +66,11 @@ class ViewerLineRect extends React.Component {
       clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, entities,
     } = props;
 
+    this.state = {
+      listWaveLength: [],
+      selectedWaveLength: null,
+    };
+
     this.rootKlassLine = `.${LIST_ROOT_SVG_GRAPH.LINE}`;
     this.lineFocus = new LineFocus({
       W, H, entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
@@ -172,6 +211,8 @@ class ViewerLineRect extends React.Component {
     const {
       features,
     } = extractParams(subEntities[0], 0, 1);
+    const listWaveLength = features.map((ft) => ft.pageValue);
+    this.setState({ listWaveLength, selectedWaveLength: listWaveLength[0] });
     return features[0];
   }
 
@@ -198,8 +239,16 @@ class ViewerLineRect extends React.Component {
   }
 
   render() {
+    const { listWaveLength, selectedWaveLength } = this.state;
+    const changeWaveLength = (event) => {
+      const { value } = event.target;
+      this.setState({ selectedWaveLength: value });
+    };
     return (
       <div>
+        {
+          waveLengthSelect(classNames, listWaveLength, selectedWaveLength, changeWaveLength)
+        }
         <div className={LIST_ROOT_SVG_GRAPH.LINE} />
         <div className={LIST_ROOT_SVG_GRAPH.MULTI} />
         <Zoom isSubView />

src/components/hplc_viewer.js

@@ -5,9 +5,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
-
-import Grid from '@mui/material/Grid';
 import { withStyles } from '@mui/styles';
+import {
+  Grid,
+} from '@mui/material';
 
 import PanelViewer from './panel/index';
 import CmdBar from './cmd_bar/index';

src/constants/action_type.js

@@ -166,8 +166,13 @@ const SEC = {
   UPDATE_DETECTOR: 'UPDATE_DETECTOR',
 };
 
+const HPLC_MS = {
+  UPDATE_UVVIS_WAVE_LENGTH: 'UPDATE_UVVIS_WAVE_LENGTH',
+};
+
 export {
   THRESHOLD, EDITPEAK, STATUS, MANAGER, LAYOUT, SHIFT, SCAN,
   UI, FORECAST, SUBMIT, INTEGRATION, MULTIPLICITY, META,
   SIMULATION, JCAMP, XRD, CYCLIC_VOLTA_METRY, CURVE, AXES, SEC,
+  HPLC_MS,
 };

src/constants/list_ui.js

@@ -1,6 +1,5 @@
 const LIST_UI_VIEWER_TYPE = {
   SPECTRUM: 'spectrum',
-  SUB_SPECTRUM: 'sub spectrum',
   ANALYSIS: 'analysis',
 };
 

src/reducers/index.js

@@ -19,6 +19,7 @@ import cyclicVoltaReducer from './reducer_voltammetry';
 import curveReducer from './reducer_curve';
 import axesReducer from './reducer_axes';
 import detectorReducer from './reducer_detector';
+import hplcmsReducer from './reducer_hplc_ms';
 
 const rootReducer = combineReducers({
   threshold: thresholdReducer,
@@ -41,6 +42,7 @@ const rootReducer = combineReducers({
   curve: curveReducer,
   axesUnits: axesReducer,
   detector: detectorReducer,
+  hplcMs: hplcmsReducer,
 });
 
 export default rootReducer;

src/reducers/reducer_hplc_ms.js

@@ -0,0 +1,19 @@
+/* eslint-disable prefer-object-spread, default-param-last */
+import { HPLC_MS } from '../constants/action_type';
+
+const initialState = {
+  waveLength: null,
+};
+
+const hplcmsReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case HPLC_MS.UPDATE_UVVIS_WAVE_LENGTH:
+      return Object.assign({}, state, {
+        waveLength: action.payload,
+      });
+    default:
+      return state;
+  }
+};
+
+export default hplcmsReducer;

src/sagas/saga_ui.js

@@ -3,7 +3,7 @@ import { put, takeEvery, select } from 'redux-saga/effects';
 import {
   UI, EDITPEAK, SHIFT, INTEGRATION, MULTIPLICITY, CYCLIC_VOLTA_METRY,
 } from '../constants/action_type';
-import { LIST_UI_SWEEP_TYPE, LIST_UI_VIEWER_TYPE } from '../constants/list_ui';
+import { LIST_UI_SWEEP_TYPE } from '../constants/list_ui';
 import { LIST_LAYOUT } from '../constants/list_layout';
 import { LIST_BRUSH_SVG_GRAPH } from '../constants/list_graph';
 
@@ -234,10 +234,6 @@ function* clickUiTarget(action) {
       type: UI.SUB_VIEWER.DISPLAY_VIEWER_AT,
       payload,
     });
-    yield put({
-      type: UI.VIEWER.SET_TYPE,
-      payload: LIST_UI_VIEWER_TYPE.SUB_SPECTRUM,
-    });
   }
 }