diff --git a/dist/components/cmd_bar/03_peak.js b/dist/components/cmd_bar/03_peak.js index 9b52924e..baa9d3a9 100644 --- a/dist/components/cmd_bar/03_peak.js +++ b/dist/components/cmd_bar/03_peak.js @@ -135,7 +135,7 @@ const mapStateToProps = (state, props) => ( cyclicVotaSt: state.cyclicvolta, curveSt: state.curve, editPeakSt: state.editPeak.present, - thresSt: state.threshold, + thresSt: state.threshold.list[state.curve.curveIdx], layoutSt: state.layout, shiftSt: state.shift }); diff --git a/dist/components/cmd_bar/r03_threshold.js b/dist/components/cmd_bar/r03_threshold.js index cc5f6835..294c33c5 100644 --- a/dist/components/cmd_bar/r03_threshold.js +++ b/dist/components/cmd_bar/r03_threshold.js @@ -32,12 +32,24 @@ const txtPercent = () => /*#__PURE__*/_react.default.createElement(_material.Inp }, /*#__PURE__*/_react.default.createElement("span", { className: "txt-percent" }, "%")); -const setThreshold = (classes, thresVal, updateThresholdValueAct) => { - const onBlur = e => updateThresholdValueAct(e.target.value); - const onChange = e => updateThresholdValueAct(e.target.value); +const setThreshold = (classes, thresVal, updateThresholdValueAct, curveSt) => { + const { + curveIdx + } = curveSt; + const onBlur = e => updateThresholdValueAct({ + value: e.target.value, + curveIdx + }); + const onChange = e => updateThresholdValueAct({ + value: e.target.value, + curveIdx + }); const onEnterPress = e => { if (e.key === 'Enter') { - updateThresholdValueAct(e.target.value); + updateThresholdValueAct({ + value: e.target.value, + curveIdx + }); } }; return /*#__PURE__*/_react.default.createElement(_material.FormControl, { @@ -78,6 +90,7 @@ const Threshold = _ref => { hideThresSt, thresValSt, isEditSt, + curveSt, updateThresholdValueAct, resetThresholdValueAct, toggleThresholdIsEditAct @@ -85,7 +98,7 @@ const Threshold = _ref => { const thresVal = thresValSt || feature.thresRef; return /*#__PURE__*/_react.default.createElement("span", { className: classes.groupRight - }, setThreshold(classes, thresVal, updateThresholdValueAct), /*#__PURE__*/_react.default.createElement(_material.Tooltip, { + }, setThreshold(classes, thresVal, updateThresholdValueAct, curveSt), /*#__PURE__*/_react.default.createElement(_material.Tooltip, { title: /*#__PURE__*/_react.default.createElement("span", { className: "txt-sv-tp" }, "Restore Threshold") @@ -109,8 +122,9 @@ const mapStateToProps = (state, props) => ( // eslint-disable-line { hideThresSt: _cfg.default.hideCmdThres(state.layout), - isEditSt: state.threshold.isEdit, - thresValSt: parseFloat(state.threshold.value) || 0 + isEditSt: state.threshold.list[state.curve.curveIdx].isEdit, + thresValSt: parseFloat(state.threshold.list[state.curve.curveIdx].value) || 0, + curveSt: state.curve }); const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({ updateThresholdValueAct: _threshold.updateThresholdValue, @@ -124,6 +138,7 @@ Threshold.propTypes = { hideThresSt: _propTypes.default.bool.isRequired, isEditSt: _propTypes.default.bool.isRequired, thresValSt: _propTypes.default.number.isRequired, + curveSt: _propTypes.default.object.isRequired, updateThresholdValueAct: _propTypes.default.func.isRequired, resetThresholdValueAct: _propTypes.default.func.isRequired, toggleThresholdIsEditAct: _propTypes.default.func.isRequired diff --git a/dist/components/cmd_bar/r05_submit_btn.js b/dist/components/cmd_bar/r05_submit_btn.js index 769e5cce..c6e1cf4c 100644 --- a/dist/components/cmd_bar/r05_submit_btn.js +++ b/dist/components/cmd_bar/r05_submit_btn.js @@ -93,7 +93,7 @@ const mapStateToProps = (state, props) => ( // eslint-disable-line { editPeakSt: state.editPeak.present, - thresSt: state.threshold, + thresSt: state.threshold.list[state.curve.curveIdx], layoutSt: state.layout, shiftSt: state.shift, scanSt: state.scan, diff --git a/dist/components/cmd_bar/r06_predict_btn.js b/dist/components/cmd_bar/r06_predict_btn.js index c0b3c877..0040036d 100644 --- a/dist/components/cmd_bar/r06_predict_btn.js +++ b/dist/components/cmd_bar/r06_predict_btn.js @@ -194,7 +194,7 @@ const mapStateToProps = (state, props) => ( editPeakSt: state.editPeak.present, scanSt: state.scan, shiftSt: state.shift, - thresSt: state.threshold, + thresSt: state.threshold.list[state.curve.curveIdx], integrationSt: state.integration.present, multiplicitySt: state.multiplicity.present, curveSt: state.curve diff --git a/dist/helpers/chem.js b/dist/helpers/chem.js index 2910ad2e..bf7cc1cd 100644 --- a/dist/helpers/chem.js +++ b/dist/helpers/chem.js @@ -164,7 +164,7 @@ const convertFrequency = (layout, feature) => { return parseFloat(freq) || false; }; const ToFrequency = exports.ToFrequency = (0, _reselect.createSelector)(getLayout, getFeature, convertFrequency); -const getThreshold = state => state.threshold ? state.threshold.value * 1.0 : false; +const getThreshold = state => state.threshold ? state.threshold.list[state.curve.curveIdx].value * 1.0 : false; const Convert2Peak = function (feature, threshold, offset) { let upThreshold = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; let lowThreshold = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; diff --git a/dist/layer_prism.js b/dist/layer_prism.js index d393887f..12bc2af0 100644 --- a/dist/layer_prism.js +++ b/dist/layer_prism.js @@ -113,7 +113,7 @@ const mapStateToProps = (state, props) => ( // eslint-disable-line { scanSt: state.scan, - thresSt: state.threshold, + thresSt: state.threshold.list[state.curve.curveIdx], uiSt: state.ui }); const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch); diff --git a/dist/reducers/reducer_threshold.js b/dist/reducers/reducer_threshold.js index a748e146..4ed4122a 100644 --- a/dist/reducers/reducer_threshold.js +++ b/dist/reducers/reducer_threshold.js @@ -8,43 +8,202 @@ var _action_type = require("../constants/action_type"); /* eslint-disable prefer-object-spread, default-param-last */ const initialState = { - isEdit: true, - value: false, - upper: false, - lower: false + selectedIdx: 0, + list: [{ + isEdit: true, + value: false, + upper: false, + lower: false + }] +}; + +// const defaultThresHold = { +// isEdit: true, +// value: false, +// upper: false, +// lower: false, +// }; + +const setThresHoldValue = (state, action) => { + const { + payload + } = action; + const { + list, + selectedIdx + } = state; + if (payload) { + const { + value, + curveIdx + } = payload; + const selectedThres = list[curveIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { + value + }); + const newListThres = [...list]; + newListThres[curveIdx] = newSelectedThres; + return Object.assign({}, state, { + list: newListThres, + selectedIdx: curveIdx + }); + } + const selectedThres = list[selectedIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { + value: payload + }); + const newListThres = [...list]; + newListThres[selectedIdx] = newSelectedThres; + return Object.assign({}, state, { + list: newListThres + }); +}; +const setThresHoldUpper = (state, action) => { + const { + payload + } = action; + const { + list, + selectedIdx + } = state; + if (payload) { + const { + value, + curveIdx + } = payload; + const selectedThres = list[curveIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { + upper: value + }); + const newListThres = [...list]; + newListThres[curveIdx] = newSelectedThres; + return Object.assign({}, state, { + list: newListThres, + selectedIdx: curveIdx + }); + } + const selectedThres = list[selectedIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { + upper: payload + }); + const newListThres = [...list]; + newListThres[selectedIdx] = newSelectedThres; + return Object.assign({}, state, { + list: newListThres + }); +}; +const setThresHoldLower = (state, action) => { + const { + payload + } = action; + const { + list, + selectedIdx + } = state; + if (payload) { + const { + value, + curveIdx + } = payload; + const selectedThres = list[curveIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { + lower: value + }); + const newListThres = [...list]; + newListThres[curveIdx] = newSelectedThres; + return Object.assign({}, state, { + list: newListThres, + selectedIdx: curveIdx + }); + } + const selectedThres = list[selectedIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { + lower: payload + }); + const newListThres = [...list]; + newListThres[selectedIdx] = newSelectedThres; + return Object.assign({}, state, { + list: newListThres + }); +}; +const setThresHoldIsEdit = state => { + const { + list, + selectedIdx + } = state; + const selectedThres = list[selectedIdx]; + const { + isEdit + } = selectedThres; + const newSelectedThres = Object.assign({}, selectedThres, { + isEdit: !isEdit + }); + const newListThres = [...list]; + newListThres[selectedIdx] = newSelectedThres; + return Object.assign({}, state, { + list: newListThres + }); +}; +const resetAll = (state, action) => { + const { + payload + } = action; + const { + list + } = state; + const newList = list.map(() => ({ + isEdit: false, + value: payload && payload.thresRef, + upper: false, + lower: false + })); + return Object.assign({}, state, { + selectedIdx: 0, + list: newList + }); +}; +const setListThreshold = (state, action) => { + const { + payload + } = action; + const { + list + } = state; + if (payload && payload.length > list.length) { + const newList = payload.map(() => ({ + isEdit: true, + value: false, + upper: false, + lower: false + })); + return Object.assign({}, state, { + list: newList + }); + } + return state; }; const thresholdReducer = function () { let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState; let action = arguments.length > 1 ? arguments[1] : undefined; switch (action.type) { + case _action_type.CURVE.SET_ALL_CURVES: + return setListThreshold(state, action); case _action_type.THRESHOLD.UPDATE_VALUE: - return Object.assign({}, state, { - value: action.payload - }); + return setThresHoldValue(state, action); case _action_type.THRESHOLD.UPDATE_UPPER_VALUE: - return Object.assign({}, state, { - upper: action.payload - }); + return setThresHoldUpper(state, action); case _action_type.THRESHOLD.UPDATE_LOWER_VALUE: - return Object.assign({}, state, { - lower: action.payload - }); + return setThresHoldLower(state, action); case _action_type.THRESHOLD.RESET_VALUE: - return Object.assign({}, state, { - value: action.payload - }); + return setThresHoldValue(state, action); case _action_type.THRESHOLD.TOGGLE_ISEDIT: - return Object.assign({}, state, { - isEdit: !state.isEdit - }); + return setThresHoldIsEdit(state); case _action_type.MANAGER.RESET_INIT_COMMON: return Object.assign({}, state, { isEdit: true }); case _action_type.MANAGER.RESETALL: - return Object.assign({}, state, { - value: action.payload && action.payload.thresRef - }); + return resetAll(state, action); default: return state; } diff --git a/src/__tests__/units/components/cmd_bar/03_peak.test.js b/src/__tests__/units/components/cmd_bar/03_peak.test.js index 5cfcdcf3..32463fa3 100644 --- a/src/__tests__/units/components/cmd_bar/03_peak.test.js +++ b/src/__tests__/units/components/cmd_bar/03_peak.test.js @@ -24,10 +24,15 @@ const store = mockStore({ } }, threshold: { - isEdit: true, - value: false, - upper: false, - lower: false, + selectedIdx: 0, + list: [ + { + isEdit: true, + value: false, + upper: false, + lower: false, + } + ], }, shift: { shifts: [] }, cyclicvolta: {} @@ -49,10 +54,15 @@ const nmrStore = mockStore({ } }, threshold: { - isEdit: true, - value: false, - upper: false, - lower: false, + selectedIdx: 0, + list: [ + { + isEdit: true, + value: false, + upper: false, + lower: false, + } + ], }, shift: { shifts: [] }, cyclicvolta: {} diff --git a/src/__tests__/units/helpers/chem.test.tsx b/src/__tests__/units/helpers/chem.test.tsx index 8a968faa..743fad87 100644 --- a/src/__tests__/units/helpers/chem.test.tsx +++ b/src/__tests__/units/helpers/chem.test.tsx @@ -201,7 +201,7 @@ describe('Test for chem helper', () => { const state = { curve: { curveIdx: 0 }, shift: { shifts: [] }, - layout: LIST_LAYOUT.H1, threshold: { value: 55 } } // threshold at 55% + layout: LIST_LAYOUT.H1, threshold: { selectedIdx: 0, list: [{ value: 55 }]} } // threshold at 55% const props = { feature: { data: [{ x: [1, 2], y: [1, 2] }], operation: { layout: LIST_LAYOUT.H1 }, maxY: 2, peakUp: true }} const peaks = Feature2Peak(state, props) expect(peaks).toEqual([{x: 2, y: 2}]) @@ -223,7 +223,10 @@ describe('Test for chem helper', () => { describe('Test get threshold position in the render view', () => { it('Get threshold position', () => { - const state = { shift: { ref: null }, layout: '1H', threshold: {value: 55} } // threshold at 55% + const state = { + shift: { ref: null }, layout: '1H', + curve: { curveIdx: 0 }, + threshold: { selectedIdx: 0, list: [{ value: 55 }]} } // threshold at 55% const props = { feature: { data: [{ x: [1, 2], y: [1, 2] }], operation: { layout: '1H'}, maxY: 2, maxX: 2, minX: 1, peakUp: true }} const thresholdsAt = ToThresEndPts(state, props) expect(thresholdsAt).toEqual([{"x": -199, "y": 1.1}, {"x": 202, "y": 1.1}]) diff --git a/src/components/cmd_bar/03_peak.js b/src/components/cmd_bar/03_peak.js index ca534ec8..ddcee5e1 100644 --- a/src/components/cmd_bar/03_peak.js +++ b/src/components/cmd_bar/03_peak.js @@ -138,7 +138,7 @@ const mapStateToProps = (state, props) => ( // eslint-disable-line cyclicVotaSt: state.cyclicvolta, curveSt: state.curve, editPeakSt: state.editPeak.present, - thresSt: state.threshold, + thresSt: state.threshold.list[state.curve.curveIdx], layoutSt: state.layout, shiftSt: state.shift, } diff --git a/src/components/cmd_bar/r03_threshold.js b/src/components/cmd_bar/r03_threshold.js index a76991e0..2d64324a 100644 --- a/src/components/cmd_bar/r03_threshold.js +++ b/src/components/cmd_bar/r03_threshold.js @@ -42,13 +42,14 @@ const txtPercent = () => ( ); const setThreshold = ( - classes, thresVal, updateThresholdValueAct, + classes, thresVal, updateThresholdValueAct, curveSt, ) => { - const onBlur = (e) => updateThresholdValueAct(e.target.value); - const onChange = (e) => updateThresholdValueAct(e.target.value); + const { curveIdx } = curveSt; + const onBlur = (e) => updateThresholdValueAct({ value: e.target.value, curveIdx }); + const onChange = (e) => updateThresholdValueAct({ value: e.target.value, curveIdx }); const onEnterPress = (e) => { if (e.key === 'Enter') { - updateThresholdValueAct(e.target.value); + updateThresholdValueAct({ value: e.target.value, curveIdx }); } }; @@ -88,14 +89,14 @@ const restoreTp = (hasEdit, isEdit) => ( const Threshold = ({ classes, feature, hasEdit, - hideThresSt, thresValSt, isEditSt, + hideThresSt, thresValSt, isEditSt, curveSt, updateThresholdValueAct, resetThresholdValueAct, toggleThresholdIsEditAct, }) => { const thresVal = thresValSt || feature.thresRef; return ( - { setThreshold(classes, thresVal, updateThresholdValueAct) } + { setThreshold(classes, thresVal, updateThresholdValueAct, curveSt) } Restore Threshold}> ( // eslint-disable-line { hideThresSt: Cfg.hideCmdThres(state.layout), - isEditSt: state.threshold.isEdit, - thresValSt: parseFloat(state.threshold.value) || 0, + isEditSt: state.threshold.list[state.curve.curveIdx].isEdit, + thresValSt: parseFloat(state.threshold.list[state.curve.curveIdx].value) || 0, + curveSt: state.curve, } ); @@ -155,6 +157,7 @@ Threshold.propTypes = { hideThresSt: PropTypes.bool.isRequired, isEditSt: PropTypes.bool.isRequired, thresValSt: PropTypes.number.isRequired, + curveSt: PropTypes.object.isRequired, updateThresholdValueAct: PropTypes.func.isRequired, resetThresholdValueAct: PropTypes.func.isRequired, toggleThresholdIsEditAct: PropTypes.func.isRequired, diff --git a/src/components/cmd_bar/r05_submit_btn.js b/src/components/cmd_bar/r05_submit_btn.js index b992f359..c1c21491 100644 --- a/src/components/cmd_bar/r05_submit_btn.js +++ b/src/components/cmd_bar/r05_submit_btn.js @@ -96,7 +96,7 @@ const BtnSubmit = ({ const mapStateToProps = (state, props) => ( // eslint-disable-line { editPeakSt: state.editPeak.present, - thresSt: state.threshold, + thresSt: state.threshold.list[state.curve.curveIdx], layoutSt: state.layout, shiftSt: state.shift, scanSt: state.scan, diff --git a/src/components/cmd_bar/r06_predict_btn.js b/src/components/cmd_bar/r06_predict_btn.js index 2924486a..18d4e3a1 100644 --- a/src/components/cmd_bar/r06_predict_btn.js +++ b/src/components/cmd_bar/r06_predict_btn.js @@ -259,7 +259,7 @@ const mapStateToProps = (state, props) => ( // eslint-disable-line editPeakSt: state.editPeak.present, scanSt: state.scan, shiftSt: state.shift, - thresSt: state.threshold, + thresSt: state.threshold.list[state.curve.curveIdx], integrationSt: state.integration.present, multiplicitySt: state.multiplicity.present, curveSt: state.curve, diff --git a/src/helpers/chem.js b/src/helpers/chem.js index 53a792a3..00dff641 100644 --- a/src/helpers/chem.js +++ b/src/helpers/chem.js @@ -139,7 +139,7 @@ const ToFrequency = createSelector( ); const getThreshold = (state) => ( - state.threshold ? state.threshold.value * 1.0 : false + state.threshold ? state.threshold.list[state.curve.curveIdx].value * 1.0 : false ); const Convert2Peak = (feature, threshold, offset, upThreshold = false, lowThreshold = false) => { diff --git a/src/layer_prism.js b/src/layer_prism.js index 5c68e1ac..0c896e7c 100644 --- a/src/layer_prism.js +++ b/src/layer_prism.js @@ -102,7 +102,7 @@ const LayerPrism = ({ const mapStateToProps = (state, props) => ( // eslint-disable-line { scanSt: state.scan, - thresSt: state.threshold, + thresSt: state.threshold.list[state.curve.curveIdx], uiSt: state.ui, } ); diff --git a/src/reducers/reducer_threshold.js b/src/reducers/reducer_threshold.js index 61e3d6a9..1aadf495 100644 --- a/src/reducers/reducer_threshold.js +++ b/src/reducers/reducer_threshold.js @@ -1,33 +1,148 @@ /* eslint-disable prefer-object-spread, default-param-last */ -import { THRESHOLD, MANAGER } from '../constants/action_type'; +import { THRESHOLD, MANAGER, CURVE } from '../constants/action_type'; const initialState = { - isEdit: true, - value: false, - upper: false, - lower: false, + selectedIdx: 0, + list: [ + { + isEdit: true, + value: false, + upper: false, + lower: false, + }, + ], +}; + +// const defaultThresHold = { +// isEdit: true, +// value: false, +// upper: false, +// lower: false, +// }; + +const setThresHoldValue = (state, action) => { + const { payload } = action; + const { list, selectedIdx } = state; + if (payload) { + const { value, curveIdx } = payload; + const selectedThres = list[curveIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { value }); + const newListThres = [...list]; + newListThres[curveIdx] = newSelectedThres; + return Object.assign({}, state, { list: newListThres, selectedIdx: curveIdx }); + } + + const selectedThres = list[selectedIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { value: payload }); + const newListThres = [...list]; + newListThres[selectedIdx] = newSelectedThres; + return Object.assign({}, state, { list: newListThres }); +}; + +const setThresHoldUpper = (state, action) => { + const { payload } = action; + const { list, selectedIdx } = state; + if (payload) { + const { value, curveIdx } = payload; + const selectedThres = list[curveIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { upper: value }); + const newListThres = [...list]; + newListThres[curveIdx] = newSelectedThres; + return Object.assign({}, state, { list: newListThres, selectedIdx: curveIdx }); + } + + const selectedThres = list[selectedIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { upper: payload }); + const newListThres = [...list]; + newListThres[selectedIdx] = newSelectedThres; + return Object.assign({}, state, { list: newListThres }); +}; + +const setThresHoldLower = (state, action) => { + const { payload } = action; + const { list, selectedIdx } = state; + if (payload) { + const { value, curveIdx } = payload; + const selectedThres = list[curveIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { lower: value }); + const newListThres = [...list]; + newListThres[curveIdx] = newSelectedThres; + return Object.assign({}, state, { list: newListThres, selectedIdx: curveIdx }); + } + + const selectedThres = list[selectedIdx]; + const newSelectedThres = Object.assign({}, selectedThres, { lower: payload }); + const newListThres = [...list]; + newListThres[selectedIdx] = newSelectedThres; + return Object.assign({}, state, { list: newListThres }); +}; + +const setThresHoldIsEdit = (state) => { + const { list, selectedIdx } = state; + const selectedThres = list[selectedIdx]; + const { isEdit } = selectedThres; + const newSelectedThres = Object.assign({}, selectedThres, { isEdit: !isEdit }); + const newListThres = [...list]; + newListThres[selectedIdx] = newSelectedThres; + return Object.assign({}, state, { list: newListThres }); +}; + +const resetAll = (state, action) => { + const { payload } = action; + const { list } = state; + const newList = list.map(() => ( + { + isEdit: false, + value: payload && payload.thresRef, + upper: false, + lower: false, + } + )); + return Object.assign( + {}, + state, + { + selectedIdx: 0, + list: newList, + }, + ); +}; + +const setListThreshold = (state, action) => { + const { payload } = action; + const { list } = state; + if (payload && payload.length > list.length) { + const newList = payload.map(() => ( + { + isEdit: true, + value: false, + upper: false, + lower: false, + } + )); + return Object.assign({}, state, { list: newList }); + } + return state; }; const thresholdReducer = (state = initialState, action) => { switch (action.type) { + case CURVE.SET_ALL_CURVES: + return setListThreshold(state, action); case THRESHOLD.UPDATE_VALUE: - return Object.assign({}, state, { value: action.payload }); + return setThresHoldValue(state, action); case THRESHOLD.UPDATE_UPPER_VALUE: - return Object.assign({}, state, { upper: action.payload }); + return setThresHoldUpper(state, action); case THRESHOLD.UPDATE_LOWER_VALUE: - return Object.assign({}, state, { lower: action.payload }); + return setThresHoldLower(state, action); case THRESHOLD.RESET_VALUE: - return Object.assign({}, state, { value: action.payload }); + return setThresHoldValue(state, action); case THRESHOLD.TOGGLE_ISEDIT: - return Object.assign({}, state, { isEdit: !state.isEdit }); + return setThresHoldIsEdit(state); case MANAGER.RESET_INIT_COMMON: return Object.assign({}, state, { isEdit: true }); case MANAGER.RESETALL: - return Object.assign( - {}, - state, - { value: action.payload && action.payload.thresRef }, - ); + return resetAll(state, action); default: return state; }