feat: WIP clear all default peaks

Author: Lan Le

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

@@ -11,11 +11,51 @@ const store = mockStore({
   ui:{ sweepType: LIST_UI_SWEEP_TYPE.ZOOMIN },
   layout: LIST_LAYOUT.MS,
   curve: { curveIdx: 0 },
+  editPeak: {
+    present: {
+      selectedIdx: 0,
+      peaks: [
+        {
+          prevOffset: 0,
+          pos: [],
+          neg: [],
+        },
+      ],
+    }
+  },
+  threshold: {
+    isEdit: true,
+    value: false,
+    upper: false,
+    lower: false,
+  },
+  shift: { shifts: [] },
+  cyclicvolta: {}
 });
 const nmrStore = mockStore({
   ui:{ sweepType: LIST_UI_SWEEP_TYPE.ZOOMIN },
   layout: LIST_LAYOUT.H1,
   curve: { curveIdx: 0 },
+  editPeak: {
+    present: {
+      selectedIdx: 0,
+      peaks: [
+        {
+          prevOffset: 0,
+          pos: [],
+          neg: [],
+        },
+      ],
+    }
+  },
+  threshold: {
+    isEdit: true,
+    value: false,
+    upper: false,
+    lower: false,
+  },
+  shift: { shifts: [] },
+  cyclicvolta: {}
 });
 
 const dispatchMock = () => Promise.resolve({});
@@ -33,7 +73,7 @@ describe('<Peak />', () => {
   it('render when has Set reference button', async () => {
     const renderer = 
       <AppWrapper store={nmrStore}>
-        <Peak />
+        <Peak feature={{}} />
       </AppWrapper>
     ;
     const { queryByTestId } = render(renderer);
@@ -45,7 +85,7 @@ describe('<Peak />', () => {
   it('render when does not hav Set reference button', async () => {
     const renderer = 
       <AppWrapper store={store}>
-        <Peak />
+        <Peak feature={{}} />
       </AppWrapper>
     ;
     const { queryByTestId } = render(renderer);

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

@@ -75,9 +75,9 @@ describe('Test redux reducer for edit peak', () => {
 
   it('Clear all peaks', () => {
     action.type = EDITPEAK.CLEAR_ALL
-    action.payload = { curveIdx: 0 }
+    action.payload = { curveIdx: 0, dataPeaks: [{x: 5, y: 6}] }
     peaksState = { peaks: [{pos: [{x: 1, y: 2}, {x: 3, y: 4}]}], selectedIdx: 0 }
-    const expectedValue = {peaks: [{neg: [], pos: [], prevOffset: 0}], selectedIdx: 0}
+    const expectedValue = {peaks: [{neg: [{x: 1, y: 2}, {x: 3, y: 4}, {x: 5, y: 6}], pos: []}], selectedIdx: 0}
     const newState = editPeakReducer(peaksState, action)
     expect(newState).toEqual(expectedValue)
   })

src/components/cmd_bar/03_peak.js

@@ -17,6 +17,7 @@ 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';
+import { extractPeaksEdit } from '../../helpers/extractPeaksEdit';
 
 const styles = () => (
   Object.assign(
@@ -32,13 +33,15 @@ const Peak = ({
   isFocusSetRefSt, disableSetRefSt,
   isHandleMaxAndMinPeaksSt,
   cyclicVotaSt, curveSt,
-  clearAllPeaksAct,
+  clearAllPeaksAct, feature,
+  editPeakSt, thresSt, shiftSt, layoutSt,
 }) => {
   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 });
+  const dataPeaks = extractPeaksEdit(feature, editPeakSt, thresSt, shiftSt, layoutSt);
+  const onClearAll = () => clearAllPeaksAct({ curveIdx, dataPeaks });
   if (isHandleMaxAndMinPeaksSt) {
     const { spectraList } = cyclicVotaSt;
     const spectra = spectraList[curveIdx];
@@ -120,7 +123,7 @@ const Peak = ({
   );
 };
 
-const mapStateToProps = (state, _) => ( // eslint-disable-line
+const mapStateToProps = (state, props) => ( // eslint-disable-line
   {
     isFocusAddPeakSt: state.ui.sweepType === LIST_UI_SWEEP_TYPE.PEAK_ADD || state.ui.sweepType === LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_MAX_PEAK || state.ui.sweepType === LIST_UI_SWEEP_TYPE.CYCLIC_VOLTA_ADD_MIN_PEAK,
     disableAddPeakSt: Cfg.btnCmdAddPeak(state.layout),
@@ -131,6 +134,10 @@ const mapStateToProps = (state, _) => ( // eslint-disable-line
     isHandleMaxAndMinPeaksSt: !Cfg.hidePanelCyclicVolta(state.layout),
     cyclicVotaSt: state.cyclicvolta,
     curveSt: state.curve,
+    editPeakSt: state.editPeak.present,
+    thresSt: state.threshold,
+    layoutSt: state.layout,
+    shiftSt: state.shift,
   }
 );
 
@@ -154,6 +161,11 @@ Peak.propTypes = {
   cyclicVotaSt: PropTypes.object.isRequired,
   curveSt: PropTypes.object.isRequired,
   clearAllPeaksAct: PropTypes.func.isRequired,
+  feature: PropTypes.object.isRequired,
+  editPeakSt: PropTypes.object.isRequired,
+  thresSt: PropTypes.object.isRequired,
+  layoutSt: PropTypes.string.isRequired,
+  shiftSt: PropTypes.object.isRequired,
 };
 
 export default compose(

src/components/cmd_bar/index.js

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

src/reducers/reducer_edit_peak.js

@@ -142,20 +142,21 @@ const processShift = (state, action) => {
 };
 
 const clearAllPeaks = (state, action) => {
-  const { curveIdx } = action.payload;
+  const { curveIdx, dataPeaks } = action.payload;
   const { peaks } = state;
   const selectedEditPeaks = peaks[curveIdx];
 
   const { pos } = selectedEditPeaks;
 
-  const newSelectedEditPeaks = Object.assign({}, selectedEditPeaks, { pos: [], neg: [...pos] });
+  const newSelectedEditPeaks = Object.assign({}, selectedEditPeaks, {
+    pos: [], neg: [...pos, ...dataPeaks],
+  });
   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);