Skip to content

Commit 81e768c

Browse files
rdingwellrdingwell
authored
Merge pull request #716 from FluxNotes/compass-treatment-compare
[CCP] Implemented compare treatment feature for outcomes table and icons
2 parents f0d4a13 + f979db7 commit 81e768c

22 files changed

+691
-285
lines changed

‎src/__test__/backend/mcode/OptionsCheckboxList.test.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@ describe("CheckboxList", () => {
2020

2121
beforeEach(() => {
2222
props = {
23-
options: undefined,
24-
setSelected: undefined,
25-
setAllSelected: undefined,
23+
category: '',
24+
options: {},
25+
setSelected: () => {},
26+
setAllSelected: () => {},
27+
selectSimilarPatientOptionRange: () => {}
2628
};
2729
checkboxList = undefined;
2830
});

‎src/__test__/backend/mcode/TreatmentOptionsOutcome.test.js

+63-56
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@ import { similarPatientTreatmentsData, similarPatientTreatments } from './mock-d
88

99
Enzyme.configure({ adapter: new Adapter() });
1010

11-
describe.only("TreatmentOptionsOutcome", () => {
11+
describe('TreatmentOptionsOutcome', () => {
1212
let props, optionsOutcome;
1313

14-
const timescale = ["1","3","5"];
1514
beforeEach(() => {
1615
props = {
16+
selectedTreatment: null,
17+
setSelectedTreatment: () => {},
1718
similarPatientTreatmentsData,
1819
similarPatientTreatments,
19-
timescale
20+
timescale: ['1','3','5']
2021
};
2122
optionsOutcome = null;
2223
});
@@ -26,24 +27,24 @@ describe.only("TreatmentOptionsOutcome", () => {
2627
return optionsOutcome;
2728
};
2829

29-
describe.only("outcomes table: treatments", () => {
30-
it("renders the 'chemotherapy, 'hormonal therapy', and 'test therapy' treatment rows", () => {
30+
describe('outcomes table: initial treatments', () => {
31+
it('renders the chemotherapy, hormonal therapy, and test therapy treatment rows', () => {
3132
const tableRows = outcome().find('.treatment-options-outcomes-table__table .table-row');
3233
expect(tableRows).to.have.lengthOf(3);
3334
expect(tableRows.at(0).find('.treatment-name').text()).to.eql('test therapy');
3435
expect(tableRows.at(1).find('.treatment-name').text()).to.eql('chemotherapy');
3536
expect(tableRows.at(2).find('.treatment-name').text()).to.eql('hormonal therapy');
3637
});
3738

38-
it("renders the total number of patients", () => {
39+
it('renders the total number of patients', () => {
3940
const tableRows = outcome().find('.treatment-options-outcomes-table__table .table-row');
4041
expect(tableRows).to.have.lengthOf(3);
4142
expect(tableRows.at(0).find('.total-patients').text()).to.eql('(100)');
4243
expect(tableRows.at(1).find('.total-patients').text()).to.eql('(82)');
4344
expect(tableRows.at(2).find('.total-patients').text()).to.eql('(12)');
4445
});
4546

46-
it("calculates the correct one, three, and five survival rates", () => {
47+
it('calculates the correct one, three, and five survival rates', () => {
4748
const tableRows = outcome().find('.treatment-options-outcomes-table__table .table-row');
4849
expect(tableRows).to.have.lengthOf(3);
4950

@@ -69,7 +70,7 @@ describe.only("TreatmentOptionsOutcome", () => {
6970
expect(barChartText3.at(2).text()).to.eql('91%');
7071
});
7172

72-
it("displays the top two side effects", () => {
73+
it('displays the top two side effects', () => {
7374
const tableRows = outcome().find('.treatment-options-outcomes-table__table .table-row');
7475
expect(tableRows).to.have.lengthOf(3);
7576

@@ -89,53 +90,7 @@ describe.only("TreatmentOptionsOutcome", () => {
8990
expect(sideEffectText3.at(1).text()).to.eql('fatigue (70%)');
9091
});
9192

92-
// it("hormonal therapy: calculates the correct one, three, and five survival rates with comparisons", () => {
93-
// const treatmentRows = outcome().find('.compared-treatments .table-row');
94-
95-
// const barChartTexts = treatmentRows.at(1).find('.bar-chart-text');
96-
97-
// expect(barChartTexts).to.have.lengthOf(6);
98-
99-
// // 1 year and 1 year difference (83% / +23%)
100-
// expect(barChartTexts.at(0).text()).to.eql('83%');
101-
// expect(barChartTexts.at(1).text()).to.eql('23%');
102-
// expect(barChartTexts.at(1).find('span').hasClass('fa-caret-up')).to.eql(true);
103-
104-
// // 3 year and 3 year difference (66% / +26%)
105-
// expect(barChartTexts.at(2).text()).to.eql('66%');
106-
// expect(barChartTexts.at(3).text()).to.eql('26%');
107-
// expect(barChartTexts.at(3).find('span').hasClass('fa-caret-up')).to.eql(true);
108-
109-
// // 5 year and 5 year difference (16% / -4%)
110-
// expect(barChartTexts.at(4).text()).to.eql('16%');
111-
// expect(barChartTexts.at(5).text()).to.eql('4%');
112-
// expect(barChartTexts.at(5).find('span').hasClass('fa-caret-down')).to.eql(true);
113-
// });
114-
115-
// it("chemotherapy: calculates the correct one, three, and five survival rates with comparisons", () => {
116-
// const treatmentRows = outcome().find('.compared-treatments .table-row');
117-
118-
// const barChartTexts = treatmentRows.at(0).find('.bar-chart-text');
119-
120-
// expect(barChartTexts).to.have.lengthOf(6);
121-
122-
// // 1 year and 1 year difference (100% / +40%)
123-
// expect(barChartTexts.at(0).text()).to.eql('100%');
124-
// expect(barChartTexts.at(1).text()).to.eql('40%');
125-
// expect(barChartTexts.at(1).find('span').hasClass('fa-caret-up')).to.eql(true);
126-
127-
// // 3 year and 3 year difference (100% / +60%)
128-
// expect(barChartTexts.at(2).text()).to.eql('100%');
129-
// expect(barChartTexts.at(3).text()).to.eql('60%');
130-
// expect(barChartTexts.at(3).find('span').hasClass('fa-caret-up')).to.eql(true);
131-
132-
// // 5 year and 5 year difference (70% / +50%)
133-
// expect(barChartTexts.at(4).text()).to.eql('70%');
134-
// expect(barChartTexts.at(5).text()).to.eql('50%');
135-
// expect(barChartTexts.at(5).find('span').hasClass('fa-caret-up')).to.eql(true);
136-
// });
137-
138-
it("sorts rows based on survival", () => {
93+
it('sorts rows based on survival', () => {
13994
const header = outcome().find('.header-space');
14095
let treatmentRows = outcome().find('.treatment-options-outcomes-table__table .table-row');
14196

@@ -175,6 +130,58 @@ describe.only("TreatmentOptionsOutcome", () => {
175130
expect(treatmentRows.at(0).find('.treatment-name').text()).to.eql('chemotherapy');
176131
expect(treatmentRows.at(1).find('.treatment-name').text()).to.eql('hormonal therapy');
177132
expect(treatmentRows.at(2).find('.treatment-name').text()).to.eql('test therapy');
178-
})
133+
});
134+
});
135+
136+
describe('outcomes table: comparing treatments', () => {
137+
it('selects a treament when compared icon is clicked', () => {
138+
props = {
139+
...props,
140+
setSelectedTreatment: jest.fn()
141+
};
142+
143+
const compareIcons = outcome().find('.treatment-options-outcomes-table__table .compare-icon');
144+
let treatmentRows = outcome().find('.treatment-options-outcomes-table__table .table-row');
145+
146+
expect(treatmentRows.at(0).find('.treatment-name').text()).to.eql('test therapy');
147+
expect(treatmentRows.at(1).find('.treatment-name').text()).to.eql('chemotherapy');
148+
expect(treatmentRows.at(2).find('.treatment-name').text()).to.eql('hormonal therapy');
149+
150+
// select chemotherapy
151+
compareIcons.at(1).simulate('click');
152+
153+
const [callArgs] = props.setSelectedTreatment.mock.calls;
154+
const [treatment] = callArgs;
155+
156+
expect(treatment.displayName).to.eql('chemotherapy');
157+
});
158+
159+
it('hormonal therapy: calculates the correct one, three, and five survival rates with comparisons', () => {
160+
props = {
161+
...props,
162+
selectedTreatment: similarPatientTreatmentsData[0]
163+
};
164+
165+
let treatmentRows = outcome().find('.treatment-options-outcomes-table__table .table-row');
166+
167+
const barChartTexts = treatmentRows.at(1).find('.bar-chart-text');
168+
169+
expect(barChartTexts).to.have.lengthOf(6);
170+
171+
// 1 year and 1 year difference (98% / +2%)
172+
expect(barChartTexts.at(0).text()).to.eql('98%');
173+
expect(barChartTexts.at(1).text()).to.eql('2%');
174+
expect(barChartTexts.at(1).find('span').hasClass('fa-caret-up')).to.eql(true);
175+
176+
// 3 year and 3 year difference (92% / +1%)
177+
expect(barChartTexts.at(2).text()).to.eql('92%');
178+
expect(barChartTexts.at(3).text()).to.eql('1%');
179+
expect(barChartTexts.at(3).find('span').hasClass('fa-caret-up')).to.eql(true);
180+
181+
// 5 year and 5 year difference (87% / -4%)
182+
expect(barChartTexts.at(4).text()).to.eql('87%');
183+
expect(barChartTexts.at(5).text()).to.eql('4%');
184+
expect(barChartTexts.at(5).find('span').hasClass('fa-caret-down')).to.eql(true);
185+
});
179186
});
180187
});

‎src/__test__/backend/mcode/TreatmentOptionsReducers.test.js

+19-4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import TestPatient2 from '../../TestPatient2.json';
1111
import * as EntryMapper from '../../../dataaccess/mcodev0.1-datasource/EntryMapper';
1212
import FluxCancerDisorderPresent from '../../../model/oncocore/FluxCancerDisorderPresent';
1313
import stateObjects from './mock-data/testoptions.json';
14+
import { similarPatientTreatmentsData } from './mock-data';
1415

1516
describe('Reducer function', () => {
1617
it('should return initial state on empty args', () => {
@@ -189,8 +190,8 @@ describe('Reducer function', () => {
189190
const selectState = stateObjects.unselectAllOptions;
190191
const type = types.SELECT_ALL_SIMILAR_PATIENT_OPTIONS;
191192
const action = {
192-
type:type,
193-
selected:false
193+
type: type,
194+
selected: false
194195
};
195196
const newState = reducer(selectState, action).similarPatientProps;
196197

@@ -205,6 +206,20 @@ describe('Reducer function', () => {
205206
});
206207
});
207208

209+
describe("sets the selected treatment", () => {
210+
const type = types.SET_SELECTED_TREATMENT;
211+
const selectedTreatment = null;
212+
const action = {
213+
type,
214+
treatment: similarPatientTreatmentsData[0]
215+
};
216+
const newState = reducer(defaultState, action).selectedTreatment;
217+
218+
it("sets the correct treatment", () => {
219+
expect(newState).to.eql(similarPatientTreatmentsData[0]);
220+
});
221+
});
222+
208223
/**
209224
* Small helper function that cleans up some clutter when checking
210225
* if all the categories/options are selected or not.
@@ -215,12 +230,12 @@ describe('Reducer function', () => {
215230
function checkAllSelected(state, recurse, selection){
216231
if (!recurse) {
217232
const all = Object.keys(state).reduce((i, element)=>{
218-
return i&&(selection?state[element].selected:!state[element].selected);
233+
return i && (selection ? state[element].selected : !state[element].selected);
219234
}, true);
220235
return all;
221236
} else {
222237
const all = Object.keys(state).reduce((i, element)=>{
223-
return i&&checkAllSelected(state[element].options, false, selection);
238+
return i && checkAllSelected(state[element].options, false, selection);
224239
}, true);
225240
return all;
226241
}

‎src/actions/mcode.js

+8
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,19 @@ function processSimilarPatientOutcomes() {
7070
};
7171
}
7272

73+
function setSelectedTreatment(treatment) {
74+
return {
75+
type: types.SET_SELECTED_TREATMENT,
76+
treatment
77+
};
78+
}
79+
7380
export {
7481
initializeSimilarPatientProps,
7582
processSimilarPatientOutcomes,
7683
selectAllCategorySimilarPatientOptions,
7784
selectAllSimilarPatientOptions,
7885
selectSimilarPatientOption,
7986
selectSimilarPatientOptionRange,
87+
setSelectedTreatment,
8088
};

‎src/actions/types.js

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export const SELECT_SIMILAR_PATIENT_OPTION = 'SELECT_SIMILAR_PATIENT_OPTION';
77
export const SELECT_SIMILAR_PATIENT_OPTION_RANGE = 'SELECT_SIMILAR_PATIENT_OPTION_RANGE';
88
export const SELECT_TREATMENTS = 'SELECT_TREATMENTS';
99
export const UPDATE_PATIENT_OUTCOMES = 'UPDATE_PATIENT_OUTCOMES';
10+
export const SET_SELECTED_TREATMENT = 'SET_SELECTED_TREATMENT';

‎src/mcode-pilot/components/OptionsRangeSelector/OptionsRangeSelector.js ‎src/mcode-pilot/components/OptionsRangeSelector/OptionsRangeSelector.jsx

File renamed without changes.

‎src/mcode-pilot/components/TreatmentOptionsOutcomes/TreatmentOptionsOutcomes.jsx

+17-4
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,13 @@ export default class TreatmentOptionsOutcomes extends Component {
128128
}
129129

130130
render() {
131-
const { similarPatientTreatmentsData, similarPatientTreatments, timescale } = this.props;
131+
const {
132+
selectedTreatment,
133+
setSelectedTreatment,
134+
similarPatientTreatments,
135+
similarPatientTreatmentsData,
136+
timescale
137+
} = this.props;
132138
const { outcomesToggle, timescaleToggle, sortDirection, sortColumn } = this.state;
133139

134140
if (sortDirection) { // it could be ascending or descending, but it's sorted
@@ -146,18 +152,22 @@ export default class TreatmentOptionsOutcomes extends Component {
146152

147153
{outcomesToggle === "table" ?
148154
<TreatmentOptionsOutcomesTable
155+
changeSort={this.handleChangeSort}
156+
selectedTreatment={selectedTreatment}
157+
setSelectedTreatment={setSelectedTreatment}
149158
similarPatientTreatments={similarPatientTreatments}
150159
similarPatientTreatmentsData={similarPatientTreatmentsData}
151-
changeSort={this.handleChangeSort}
152160
sortColumn={sortColumn}
153161
sortDirection={sortDirection}
154-
timescale = {timescale}
162+
timescale={timescale}
155163
/>
156164
:
157165
<TreatmentOptionsOutcomesIcons
166+
selectedTreatment={selectedTreatment}
167+
setSelectedTreatment={setSelectedTreatment}
158168
similarPatientTreatmentsData={similarPatientTreatmentsData}
169+
timescale={timescale}
159170
timescaleToggle={timescaleToggle !== '' ? timescaleToggle : timescale[0]}
160-
timescale = {timescale}
161171
/>
162172
}
163173
</div>
@@ -166,6 +176,9 @@ export default class TreatmentOptionsOutcomes extends Component {
166176
}
167177

168178
TreatmentOptionsOutcomes.propTypes = {
179+
selectedTreatment: PropTypes.object,
180+
setSelectedTreatment: PropTypes.func.isRequired,
169181
similarPatientTreatments: PropTypes.array.isRequired,
170182
similarPatientTreatmentsData: PropTypes.array.isRequired,
183+
timescale: PropTypes.array.isRequired
171184
};

‎src/mcode-pilot/components/TreatmentOptionsOutcomes/TreatmentOptionsOutcomes.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import '../../../styles/variables';
22

33
.treatment-options-outcomes {
4-
margin: 20px 20px 200px 20px;
4+
margin: 20px 0 200px 0;
55
font-size: 0.9em;
66

77
&__toggle {

0 commit comments

Comments
 (0)