feat WIP: handle click on group of peaks

src/components/cmd_bar/08_peak_group.js

@@ -10,9 +10,10 @@ import ZoomInOutlinedIcon from '@mui/icons-material/ZoomInOutlined';
 import FindReplaceOutlinedIcon from '@mui/icons-material/FindReplaceOutlined';
 import Tooltip from '@mui/material/Tooltip';
 
-import { setUiSweepType } from '../../actions/ui';
+import { setUiSweepType, setUiViewerType } from '../../actions/ui';
 import { MuButton, commonStyle, focusStyle } from './common';
-import { LIST_UI_SWEEP_TYPE } from '../../constants/list_ui';
+import { LIST_UI_SWEEP_TYPE, LIST_UI_VIEWER_TYPE } from '../../constants/list_ui';
+import Format from '../../helpers/format';
 
 const styles = () => (
   Object.assign(
@@ -22,10 +23,15 @@ const styles = () => (
 );
 
 const PeakGroup = ({
-  classes, isSelectingGroupSt, setUiSweepTypeAct,
+  classes, feature, isSelectingGroupSt, setUiSweepTypeAct, setUiViewerTypeAct,
 }) => {
+  const { operation } = feature;
+  const { layout } = operation;
+  if (!Format.isLCMsLayout(layout)) {
+    return null;
+  }
   const onSelectPeakGroup = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.PEAK_GROUP_SELECT);
-  const onUndoSelectPeakGroup = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.UNDO_PEAK_GROUP_SELECT);
+  const onUndoSelectPeakGroup = () => setUiViewerTypeAct(LIST_UI_VIEWER_TYPE.SPECTRUM);
 
   return (
     <span className={classes.group} data-testid="Zoom">
@@ -67,13 +73,16 @@ const mapStateToProps = (state, _) => ( // eslint-disable-line
 const mapDispatchToProps = (dispatch) => (
   bindActionCreators({
     setUiSweepTypeAct: setUiSweepType,
+    setUiViewerTypeAct: setUiViewerType,
   }, dispatch)
 );
 
 PeakGroup.propTypes = {
   classes: PropTypes.object.isRequired,
+  feature: PropTypes.object.isRequired,
   isSelectingGroupSt: PropTypes.bool.isRequired,
   setUiSweepTypeAct: PropTypes.func.isRequired,
+  setUiViewerTypeAct: PropTypes.func.isRequired,
 };
 
 export default compose(

src/components/cmd_bar/index.js

@@ -39,7 +39,7 @@ const CmdBar = ({
   <div className={classes.card}>
     <Viewer editorOnly={editorOnly} />
     <Zoom />
-    <PeakGroup />
+    <PeakGroup feature={feature} />
     <Peak jcampIdx={jcampIdx} feature={feature} />
     <Pecker jcampIdx={jcampIdx} />
     <Integration />

src/components/d3_line_rect/index.js

@@ -14,7 +14,7 @@ import LineFocus from './line_focus';
 import {
   drawMain, drawLabel, drawDisplay, drawDestroy,
 } from '../common/draw';
-import { LIST_UI_SWEEP_TYPE, LIST_NON_BRUSH_TYPES } from '../../constants/list_ui';
+import { LIST_UI_SWEEP_TYPE, LIST_NON_BRUSH_TYPES, LIST_UI_VIEWER_TYPE } 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
@@ -94,10 +94,13 @@ class ViewerLineRect extends React.Component {
   }
 
   render() {
+    const { uiSt } = this.props;
+    const { viewer } = uiSt;
+    const showSubViewer = viewer === LIST_UI_VIEWER_TYPE.SUB_SPECTRUM;
     return (
       <div>
-        <div className="d3Line" />
-        <div className="d3Rect" />
+        <div className="d3Line" hidden={showSubViewer} />
+        <div className="d3Rect" hidden={!showSubViewer} />
       </div>
     );
   }
@@ -110,6 +113,7 @@ const mapStateToProps = (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,
+    uiSt: state.ui,
   }
 );
 
@@ -138,6 +142,7 @@ ViewerLineRect.propTypes = {
   selectUiSweepAct: PropTypes.func.isRequired,
   scrollUiWheelAct: PropTypes.func.isRequired,
   isHidden: PropTypes.bool.isRequired,
+  uiSt: PropTypes.object.isRequired,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ViewerLineRect);

src/constants/list_ui.js

@@ -1,5 +1,6 @@
 const LIST_UI_VIEWER_TYPE = {
   SPECTRUM: 'spectrum',
+  SUB_SPECTRUM: 'sub spectrum',
   ANALYSIS: 'analysis',
 };
 
@@ -27,7 +28,6 @@ const LIST_UI_SWEEP_TYPE = {
   CYCLIC_VOLTA_RM_PECKER: 'cyclic voltammetry remove pecker',
   CYCLIC_VOLTA_SET_REF: 'cyclic voltammetry set ref',
   PEAK_GROUP_SELECT: 'peak group select',
-  UNDO_PEAK_GROUP_SELECT: 'undo peak group select',
 };
 
 const LIST_NON_BRUSH_TYPES = [
@@ -48,7 +48,6 @@ const LIST_NON_BRUSH_TYPES = [
   LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_RM_PECKER,
   LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_SET_REF,
   LIST_UI_SWEEP_TYPE.PEAK_GROUP_SELECT,
-  LIST_UI_SWEEP_TYPE.UNDO_PEAK_GROUP_SELECT,
 ];
 
 export {

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 } from '../constants/list_ui';
+import { LIST_UI_SWEEP_TYPE, LIST_UI_VIEWER_TYPE } from '../constants/list_ui';
 import { LIST_LAYOUT } from '../constants/list_layout';
 
 const getUiSt = (state) => state.ui;
@@ -118,8 +118,6 @@ function* clickUiTarget(action) {
 
   const curveSt = yield select(getCurveSt);
   const { curveIdx } = curveSt;
-  const layoutSt = yield select(getLayoutSt);
-  console.log('layoutSt', layoutSt, payload, uiSweepType);
 
   if (uiSweepType === LIST_UI_SWEEP_TYPE.PEAK_ADD && !onPeak) {
     yield put({
@@ -210,13 +208,11 @@ function* clickUiTarget(action) {
       payload: { index: voltammetryPeakIdx, jcampIdx: curveIdx },
     });
   } else if (uiSweepType === LIST_UI_SWEEP_TYPE.PEAK_GROUP_SELECT) {
-    console.log('LIST_UI_SWEEP_TYPE.PEAK_GROUP_SELECT');
-    // yield put({
-    //   type: CYCLIC_VOLTA_METRY.SET_REF,
-    //   payload: { index: voltammetryPeakIdx, jcampIdx: curveIdx },
-    // });
-  } else if (uiSweepType === LIST_UI_SWEEP_TYPE.UNDO_PEAK_GROUP_SELECT) {
-    console.log('LIST_UI_SWEEP_TYPE.UNDO_PEAK_GROUP_SELECT');
+    console.log('PEAK_GROUP_SELECT', payload);
+    yield put({
+      type: UI.VIEWER.SET_TYPE,
+      payload: LIST_UI_VIEWER_TYPE.SUB_SPECTRUM,
+    });
   }
 }