diff --git a/src/Analysis/GWASV2/Components/Covariates/Covariates.css b/src/Analysis/GWASV2/Components/Covariates/Covariates.css
index 900d7aa835..2974e0740f 100644
--- a/src/Analysis/GWASV2/Components/Covariates/Covariates.css
+++ b/src/Analysis/GWASV2/Components/Covariates/Covariates.css
@@ -1,5 +1,5 @@
-.GWASV2 .continuous-covariates {
- width: 950px;
+.GWASV2 .select-covariates-container {
+ min-width: 988px;
}
.GWASV2 .submit-button {
@@ -13,12 +13,12 @@
.GWASV2 .dichotomous-card {
width: 189px;
- background: #EBFAD3;
+ background: #ebfad3;
}
.GWASV2 .continuous-card {
width: 189px;
- background: #FDE3D6;
+ background: #fde3d6;
}
.GWASV2 .custom-dichotomous-covariates {
diff --git a/src/Analysis/GWASV2/GWASContainer.jsx b/src/Analysis/GWASV2/GWASContainer.jsx
index 2c224e1d3e..d3151cdb02 100644
--- a/src/Analysis/GWASV2/GWASContainer.jsx
+++ b/src/Analysis/GWASV2/GWASContainer.jsx
@@ -30,6 +30,7 @@ const GWASContainer = () => {
);
@@ -78,7 +79,8 @@ const GWASContainer = () => {
let nextButtonEnabled = true;
// step specific conditions where progress to next step needs to be blocked:
- if ((state.currentStep === 0 && !state.selectedStudyPopulationCohort)
+ if (
+ (state.currentStep === 0 && !state.selectedStudyPopulationCohort)
|| (state.currentStep === 1 && !state.outcome)
|| (state.currentStep === 3 && !state.selectedHare.concept_value)
) {
@@ -100,10 +102,7 @@ const GWASContainer = () => {
-
+
{generateStep(state.currentStep)}
diff --git a/src/Analysis/GWASV2/Steps/SelectCovariates/SelectCovariates.css b/src/Analysis/GWASV2/Steps/SelectCovariates/SelectCovariates.css
index b8776ba203..b1045145bf 100644
--- a/src/Analysis/GWASV2/Steps/SelectCovariates/SelectCovariates.css
+++ b/src/Analysis/GWASV2/Steps/SelectCovariates/SelectCovariates.css
@@ -5,7 +5,6 @@
padding: 20px;
border: 1px solid #e2e2e3;
background: #fff;
- border-radius: 4px;
height: 519px;
}
diff --git a/src/Analysis/GWASV2/Steps/SelectOutcome/SelectOutcome.css b/src/Analysis/GWASV2/Steps/SelectOutcome/SelectOutcome.css
index 7d0f410479..d879acaf9c 100644
--- a/src/Analysis/GWASV2/Steps/SelectOutcome/SelectOutcome.css
+++ b/src/Analysis/GWASV2/Steps/SelectOutcome/SelectOutcome.css
@@ -1,5 +1,13 @@
-.select-outcome-container {
- background: #e9eef2;
- padding: 10px;
+.GWASUI-selectionUI {
+ border: 1px solid #e2e2e3;
+}
+
+.GWASV2 .select-outcome-container {
+ padding: 20px;
+ background: #fff;
height: 519px;
}
+
+.GWASV2 .select-outcome-container .GWASUI-flexRow {
+ width: 100%;
+}
diff --git a/src/Analysis/GWASV2/Steps/SelectOutcome/SelectOutcome.jsx b/src/Analysis/GWASV2/Steps/SelectOutcome/SelectOutcome.jsx
index cd410b9f8e..8e0edc3b83 100644
--- a/src/Analysis/GWASV2/Steps/SelectOutcome/SelectOutcome.jsx
+++ b/src/Analysis/GWASV2/Steps/SelectOutcome/SelectOutcome.jsx
@@ -1,46 +1,57 @@
import React, { useState } from 'react';
import { PropTypes } from 'prop-types';
import ContinuousCovariates from '../../Components/Covariates/ContinuousCovariates';
+import CovariatesCardsList from '../../Components/Covariates/CovariatesCardsList';
import CustomDichotomousCovariates from '../../Components/Covariates/CustomDichotomousCovariates';
import ACTIONS from '../../Utils/StateManagement/Actions';
+import './SelectOutcome.css';
+import '../../GWASV2.css';
-const SelectOutcome = ({ dispatch, studyPopulationCohort, outcome }) => {
+const SelectOutcome = ({
+ dispatch,
+ studyPopulationCohort,
+ outcome,
+ covariates,
+}) => {
const [selectionMode, setSelectionMode] = useState('');
const determineSelectOutcomeJsx = () => {
if (selectionMode === 'continuous') {
return (
- {
- setSelectionMode('');
- }}
- dispatch={(chosenOutcome) => {
- dispatch({
- type: ACTIONS.SET_OUTCOME,
- payload: chosenOutcome,
- });
- }}
- />
+
+ {
+ setSelectionMode('');
+ }}
+ dispatch={(chosenOutcome) => {
+ dispatch({
+ type: ACTIONS.SET_OUTCOME,
+ payload: chosenOutcome,
+ });
+ }}
+ />
+
);
}
if (selectionMode === 'dichotomous') {
return (
- {
- setSelectionMode('');
- }}
- dispatch={(chosenOutcome) => {
- dispatch({
- type: ACTIONS.SET_OUTCOME,
- payload: chosenOutcome,
- });
- }}
- />
+
+ {
+ setSelectionMode('');
+ }}
+ dispatch={(chosenOutcome) => {
+ dispatch({
+ type: ACTIONS.SET_OUTCOME,
+ payload: chosenOutcome,
+ });
+ }}
+ />
+
);
}
@@ -59,17 +70,32 @@ const SelectOutcome = ({ dispatch, studyPopulationCohort, outcome }) => {
};
// Outputs the JSX for the component:
- return {determineSelectOutcomeJsx()}
;
+ return (
+
+
{determineSelectOutcomeJsx()}
+
+ dispatch({
+ type: ACTIONS.DELETE_COVARIATE,
+ payload: chosenCovariate,
+ })}
+ />
+
+
+ );
};
SelectOutcome.propTypes = {
dispatch: PropTypes.func.isRequired,
studyPopulationCohort: PropTypes.object.isRequired,
outcome: PropTypes.object,
+ covariates: PropTypes.array,
};
SelectOutcome.defaultProps = {
outcome: null,
+ covariates: [],
};
export default SelectOutcome;