Feat/gwas unified flow style sidebars (#1195)

* feat(gwasUnifiedFlowStyleSidebars): Initial commit * feat(gwasUnifiedFlowStyleSidebars): ran eslint new * feat(gwasUnifiedFlowStyleSidebars): ran stylelint, removed unneeded CSS rules, removed unneeded prop * feat(gwasUnifiedFlowStyleSidebars): added rule back so buttons align * feat(gwasUnifiedFlowStyleSidebars): made covariates prop for SelectOutcome not required * feat(gwasUnifiedFlowStyleSidebars): ran eslint new * feat(gwasUnifiedFlowStyleSidebars): changed prop type for covariates to array
uc-cdis · Jan 10, 2023 · 9149895 · 9149895
1 parent 2ee0218
commit 9149895
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 42 deletions.
diff --git 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
@@ -30,6 +30,7 @@ const GWASContainer = () => {
         <SelectOutcome
           studyPopulationCohort={state.selectedStudyPopulationCohort}
           outcome={state.outcome}
+          covariates={state.covariates}
           dispatch={dispatch}
         />
       );
@@ -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 = () => {
       <div className='GWASV2'>
         <Space direction={'vertical'} className='steps-wrapper'>
           <div className='steps-content'>
-            <Space
-              direction={'vertical'}
-              align={'center'}
-            >
+            <Space direction={'vertical'} align={'center'}>
               {generateStep(state.currentStep)}
             </Space>
           </div>

diff --git 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
@@ -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
@@ -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 (
-        <ContinuousCovariates
-          selectedStudyPopulationCohort={studyPopulationCohort}
-          selectedCovariates={[]} // TODO - add to props above as well and pass in here...
-          outcome={outcome}
-          handleClose={() => {
-            setSelectionMode('');
-          }}
-          dispatch={(chosenOutcome) => {
-            dispatch({
-              type: ACTIONS.SET_OUTCOME,
-              payload: chosenOutcome,
-            });
-          }}
-        />
+        <div className='select-outcome-container'>
+          <ContinuousCovariates
+            selectedStudyPopulationCohort={studyPopulationCohort}
+            outcome={outcome}
+            handleClose={() => {
+              setSelectionMode('');
+            }}
+            dispatch={(chosenOutcome) => {
+              dispatch({
+                type: ACTIONS.SET_OUTCOME,
+                payload: chosenOutcome,
+              });
+            }}
+          />
+        </div>
       );
     }
     if (selectionMode === 'dichotomous') {
       return (
-        <CustomDichotomousCovariates
-          studyPopulationCohort={studyPopulationCohort}
-          outcome={outcome}
-          handleClose={() => {
-            setSelectionMode('');
-          }}
-          dispatch={(chosenOutcome) => {
-            dispatch({
-              type: ACTIONS.SET_OUTCOME,
-              payload: chosenOutcome,
-            });
-          }}
-        />
+        <div className='select-outcome-container'>
+          <CustomDichotomousCovariates
+            studyPopulationCohort={studyPopulationCohort}
+            outcome={outcome}
+            handleClose={() => {
+              setSelectionMode('');
+            }}
+            dispatch={(chosenOutcome) => {
+              dispatch({
+                type: ACTIONS.SET_OUTCOME,
+                payload: chosenOutcome,
+              });
+            }}
+          />
+        </div>
       );
     }
 
@@ -59,17 +70,32 @@ const SelectOutcome = ({ dispatch, studyPopulationCohort, outcome }) => {
   };
 
   // Outputs the JSX for the component:
-  return <div>{determineSelectOutcomeJsx()}</div>;
+  return (
+    <div className='GWASUI-row'>
+      <div className='GWASUI-double-column'>{determineSelectOutcomeJsx()}</div>
+      <div className='GWASUI-column GWASUI-card-column'>
+        <CovariatesCardsList
+          covariates={covariates}
+          deleteCovariate={(chosenCovariate) => dispatch({
+            type: ACTIONS.DELETE_COVARIATE,
+            payload: chosenCovariate,
+          })}
+        />
+      </div>
+    </div>
+  );
 };
 
 SelectOutcome.propTypes = {
   dispatch: PropTypes.func.isRequired,
   studyPopulationCohort: PropTypes.object.isRequired,
   outcome: PropTypes.object,
+  covariates: PropTypes.array,
 };
 
 SelectOutcome.defaultProps = {
   outcome: null,
+  covariates: [],
 };
 
 export default SelectOutcome;