feat: WIP add remove all peaks button

Author: Lan Le

src/__tests__/units/actions/edit_peak.test.tsx

@@ -1,4 +1,4 @@
-import { rmFromNegList, rmFromPosList } from "../../../actions/edit_peak";
+import { rmFromNegList, rmFromPosList, clearAllPeaks } from "../../../actions/edit_peak";
 import { EDITPEAK } from "../../../constants/action_type";
 
 describe('Test redux action for edit peaks', () => {
@@ -15,4 +15,11 @@ describe('Test redux action for edit peaks', () => {
     expect(type).toEqual(EDITPEAK.RM_NEGATIVE)
     expect(payload).toEqual(peak)
   })
+
+  it('Remove all peaks', () => {
+    const curveIdx = 0
+    const { type, payload } = clearAllPeaks(curveIdx)
+    expect(type).toEqual(EDITPEAK.CLEAR_ALL)
+    expect(payload).toEqual(curveIdx)
+  })
 })

src/__tests__/units/components/cmd_bar/03_peak.test.js

@@ -10,10 +10,12 @@ const mockStore = configureStore([]);
 const store = mockStore({
   ui:{ sweepType: LIST_UI_SWEEP_TYPE.ZOOMIN },
   layout: LIST_LAYOUT.MS,
+  curve: { curveIdx: 0 },
 });
 const nmrStore = mockStore({
   ui:{ sweepType: LIST_UI_SWEEP_TYPE.ZOOMIN },
   layout: LIST_LAYOUT.H1,
+  curve: { curveIdx: 0 },
 });
 
 const dispatchMock = () => Promise.resolve({});
@@ -37,7 +39,7 @@ describe('<Peak />', () => {
     const { queryByTestId } = render(renderer);
     const renderResult = queryByTestId('Peak');
     expect(renderResult).toBeInTheDocument();
-    expect(renderResult.childElementCount).toEqual(3);
+    expect(renderResult.childElementCount).toEqual(4);
   });
 
   it('render when does not hav Set reference button', async () => {
@@ -49,6 +51,6 @@ describe('<Peak />', () => {
     const { queryByTestId } = render(renderer);
     const renderResult = queryByTestId('Peak');
     expect(renderResult).toBeInTheDocument();
-    expect(renderResult.childElementCount).toEqual(2);
+    expect(renderResult.childElementCount).toEqual(3);
   });
 })

src/__tests__/units/reducers/reducer_edit_peak.test.tsx

@@ -1,8 +1,84 @@
 import undoableEditPeakReducer from "../../../reducers/reducer_edit_peak";
+import { EDITPEAK, MANAGER } from "../../../constants/action_type";
+import { editPeakReducer } from "../../../reducers/reducer_edit_peak";
 
 describe('Test redux reducer for edit peak', () => {
-  // TODO: need more test implementation
-  it('Just a dump test', () => {
-    expect(1).toEqual(1)
+  interface PeaksState {
+    selectedIdx: number,
+    peaks: Object[]
+  }
+
+  interface PeaksAction {
+    type: string
+    payload: any
+  }
+
+  let peaksState: PeaksState
+  let action: PeaksAction
+
+  beforeEach(() => {
+    peaksState = { peaks: [], selectedIdx: 0 }
+    action = { type: "", payload: null }
+  })
+
+  it('Get default state', () => {
+    const newState = undoableEditPeakReducer(peaksState, action)
+    expect(newState.present).toEqual(peaksState)
+  })
+
+  it('Add new peak to positive peaks', () => {
+    action.type = EDITPEAK.ADD_POSITIVE
+    action.payload = { dataToAdd: {x: 1, y: 2}, curveIdx: 0 }
+
+    const newState = editPeakReducer(peaksState, action)
+    const expectedValue = [action.payload.dataToAdd]
+    expect(newState.peaks[0].pos).toEqual(expectedValue)
+  })
+
+  it('Add new peak to negative peaks', () => {
+    action.type = EDITPEAK.ADD_NEGATIVE
+    action.payload = { dataToAdd: {x: 1, y: 2}, curveIdx: 0 }
+
+    const newState = editPeakReducer(peaksState, action)
+    const expectedValue = [action.payload.dataToAdd]
+    expect(newState.peaks[0].neg).toEqual(expectedValue)
+  })
+
+  it('Remove a peak from positive peaks', () => {
+    action.type = EDITPEAK.RM_POSITIVE
+    action.payload = {x: 1, y: 2}
+
+    peaksState = { peaks: [{pos: [{x: 1, y: 2}, {x: 3, y: 4}]}], selectedIdx: 0 }
+
+    const newState = editPeakReducer(peaksState, action)
+    const expectedValue = [{x: 3, y: 4}]
+    expect(newState.peaks[0].pos).toEqual(expectedValue)
+  })
+
+  it('Remove a peak from negative peaks', () => {
+    action.type = EDITPEAK.RM_NEGATIVE
+    action.payload = {x: 1, y: 2}
+
+    peaksState = { peaks: [{neg: [{x: 1, y: 2}, {x: 3, y: 4}]}], selectedIdx: 0 }
+
+    const newState = editPeakReducer(peaksState, action)
+    const expectedValue = [{x: 3, y: 4}]
+    expect(newState.peaks[0].neg).toEqual(expectedValue)
+  })
+
+  it('Reset to default value', () => {
+    action.type = MANAGER.RESETALL
+    const expectedValue = {peaks: [{neg: [], pos: [], prevOffset: 0}], selectedIdx: 0}
+    const newState = editPeakReducer(peaksState, action)
+    expect(newState).toEqual(expectedValue)
+  })
+
+  it('Clear all peaks', () => {
+    action.type = EDITPEAK.CLEAR_ALL
+    action.payload = { curveIdx: 0 }
+    peaksState = { peaks: [{pos: [{x: 1, y: 2}, {x: 3, y: 4}]}], selectedIdx: 0 }
+    const expectedValue = {peaks: [{neg: [], pos: [], prevOffset: 0}], selectedIdx: 0}
+    const newState = editPeakReducer(peaksState, action)
+    expect(newState).toEqual(expectedValue)
   })
 })

src/actions/edit_peak.js

@@ -14,7 +14,15 @@ const rmFromNegList = (payload) => (
   }
 );
 
+const clearAllPeaks = (payload) => (
+  {
+    type: EDITPEAK.CLEAR_ALL,
+    payload,
+  }
+);
+
 export {
   rmFromPosList,
   rmFromNegList,
+  clearAllPeaks,
 };

src/components/cmd_bar/03_peak.js

@@ -15,6 +15,8 @@ import { setUiSweepType } from '../../actions/ui';
 import Cfg from '../../helpers/cfg';
 import { MuButton, commonStyle, focusStyle } from './common';
 import { LIST_UI_SWEEP_TYPE } from '../../constants/list_ui';
+import TriBtn from './tri_btn';
+import { clearAllPeaks } from '../../actions/edit_peak';
 
 const styles = () => (
   Object.assign(
@@ -30,12 +32,14 @@ const Peak = ({
   isFocusSetRefSt, disableSetRefSt,
   isHandleMaxAndMinPeaksSt,
   cyclicVotaSt, curveSt,
+  clearAllPeaksAct,
 }) => {
   let onSweepPeakAdd = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.PEAK_ADD);
   let onSweepPeakDELETE = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.PEAK_DELETE);
   let onSweepAnchorShift = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ANCHOR_SHIFT);
+  const { curveIdx } = curveSt;
+  const onClearAll = () => clearAllPeaksAct({ curveIdx });
   if (isHandleMaxAndMinPeaksSt) {
-    const { curveIdx } = curveSt;
     const { spectraList } = cyclicVotaSt;
     const spectra = spectraList[curveIdx];
     if (spectra) {
@@ -85,6 +89,13 @@ const Peak = ({
           </MuButton>
         </span>
       </Tooltip>
+      <TriBtn
+        content={{ tp: 'Clear All Peaks' }}
+        cb={onClearAll}
+      >
+        <span className={classNames(classes.txt, 'txt-sv-bar-rmallpeaks')}>P</span>
+        <span className={classNames(classes.txt, classes.txtIcon, 'txt-sv-bar-rmallpeaks')}>x</span>
+      </TriBtn>
       {
         !disableSetRefSt ? (
           <Tooltip title={<span className="txt-sv-tp">Set Reference</span>}>
@@ -126,6 +137,7 @@ const mapStateToProps = (state, _) => ( // eslint-disable-line
 const mapDispatchToProps = (dispatch) => (
   bindActionCreators({
     setUiSweepTypeAct: setUiSweepType,
+    clearAllPeaksAct: clearAllPeaks,
   }, dispatch)
 );
 
@@ -141,6 +153,7 @@ Peak.propTypes = {
   isHandleMaxAndMinPeaksSt: PropTypes.bool.isRequired,
   cyclicVotaSt: PropTypes.object.isRequired,
   curveSt: PropTypes.object.isRequired,
+  clearAllPeaksAct: PropTypes.func.isRequired,
 };
 
 export default compose(

src/constants/action_type.js

@@ -12,6 +12,7 @@ const EDITPEAK = {
   RM_NEGATIVE: 'RM_FROM_NEGATIVE_EDITPEAK_LIST',
   RM_POSITIVE: 'RM_FROM_POSITIVE_EDITPEAK_LIST',
   SHIFT: 'EDITPEAK_SHIFT',
+  CLEAR_ALL: 'EDITPEAK_CLEAR_ALL',
 };
 
 const STATUS = {

src/reducers/reducer_edit_peak.js

@@ -141,7 +141,21 @@ const processShift = (state, action) => {
   return Object.assign({}, state, { peaks: newPeaks });
 };
 
+const clearAllPeaks = (state, action) => {
+  const { curveIdx } = action.payload;
+  const { peaks } = state;
+  const selectedEditPeaks = peaks[curveIdx];
+
+  const { pos } = selectedEditPeaks;
+
+  const newSelectedEditPeaks = Object.assign({}, selectedEditPeaks, { pos: [], neg: [...pos] });
+  const newPeaks = [...peaks];
+  newPeaks[curveIdx] = newSelectedEditPeaks;
+  return Object.assign({}, state, { peaks: newPeaks });
+};
+
 const editPeakReducer = (state = initialState, action) => {
+  console.log(action);
   switch (action.type) {
     case EDITPEAK.ADD_POSITIVE:
       return addToPos(state, action);
@@ -153,6 +167,8 @@ const editPeakReducer = (state = initialState, action) => {
       return rmFromNeg(state, action);
     case EDITPEAK.SHIFT:
       return processShift(state, action);
+    case EDITPEAK.CLEAR_ALL:
+      return clearAllPeaks(state, action);
     case MANAGER.RESETALL:
       return {
         selectedIdx: 0,
@@ -176,4 +192,8 @@ const undoableEditPeakReducer = undoable(
   undoRedoConfig,
 );
 
+export {
+  editPeakReducer,
+};
+
 export default undoableEditPeakReducer;

src/reducers/undo_redo_config.js

@@ -6,7 +6,7 @@ import {
 const undoRedoActions = [
   EDITPEAK.ADD_POSITIVE, EDITPEAK.ADD_NEGATIVE,
   EDITPEAK.RM_POSITIVE, EDITPEAK.RM_NEGATIVE,
-  EDITPEAK.SHIFT,
+  EDITPEAK.SHIFT, EDITPEAK.CLEAR_ALL,
   MANAGER.RESETALL, MANAGER.RESETSHIFT, MANAGER.RESET_INIT_COMMON, MANAGER.RESET_INIT_NMR,
   MANAGER.RESET_INIT_MS, MANAGER.RESET_INIT_COMMON_WITH_INTERGATION,
   UI.SWEEP.SELECT_INTEGRATION,
@@ -26,12 +26,12 @@ const undoRedoConfig = {
   ignoreInitialState: true,
   filter: includeAction(undoRedoActions),
   clearHistoryType: [
-    EDITPEAK.SHIFT,
+    EDITPEAK.SHIFT, EDITPEAK.CLEAR_ALL,
     MANAGER.RESETALL, MANAGER.RESETSHIFT, MANAGER.RESET_INIT_COMMON, MANAGER.RESET_INIT_NMR,
     MANAGER.RESET_INIT_MS, MANAGER.RESET_INIT_COMMON_WITH_INTERGATION,
   ],
   neverSkipReducer: [
-    EDITPEAK.SHIFT,
+    EDITPEAK.SHIFT, EDITPEAK.CLEAR_ALL,
     MANAGER.RESETALL, MANAGER.RESETSHIFT, MANAGER.RESET_INIT_COMMON, MANAGER.RESET_INIT_NMR,
     MANAGER.RESET_INIT_MS, MANAGER.RESET_INIT_COMMON_WITH_INTERGATION,
   ],