Feat/gwas unified flow style steps2 and3

src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx

@@ -23,38 +23,44 @@ const ContinuousCovariates = ({
   return (
     <React.Fragment>
       <div className='GWASUI-flexRow continuous-covariates' data-tour='name'>
-        <div>
+        <div className='continous-covariates-table'>
           <Covariates selected={selected} handleSelect={setSelected} />
-          <button
-            className='submit-button'
-            type='button'
-            onClick={() => {
-              dispatch(formatSelected(selected));
-              handleClose();
-            }}
-          >
-            {submitButtonLabel}
-          </button>
-          <button
-            type='button'
-            onClick={() => {
-              handleClose();
-            }}
-          >
-          Cancel
-          </button>
         </div>
         <div className='phenotype-histogram'>
-          {selected
-            ? (
-              <PhenotypeHistogram
-                selectedStudyPopulationCohort={selectedStudyPopulationCohort}
-                selectedCovariates={selectedCovariates}
-                outcome={outcome}
-                selectedContinuousItem={selected}
-              />
-            )
-            : 'Select a concept to render its corresponding histogram'}
+          <div className='continuous-covariates-button-container'>
+            <button
+              type='button'
+              className='cancel-button'
+              onClick={() => {
+                handleClose();
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              className='submit-button'
+              type='button'
+              disabled={!selected}
+              onClick={() => {
+                dispatch(formatSelected(selected));
+                handleClose();
+              }}
+            >
+              {submitButtonLabel}
+            </button>
+          </div>
+          {selected ? (
+            <PhenotypeHistogram
+              selectedStudyPopulationCohort={selectedStudyPopulationCohort}
+              selectedCovariates={selectedCovariates}
+              outcome={outcome}
+              selectedContinuousItem={selected}
+            />
+          ) : (
+            <div className='phenotype-histogram-directions'>
+              Select a concept to render its corresponding histogram
+            </div>
+          )}
         </div>
       </div>
     </React.Fragment>

src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.stories.jsx

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { rest } from 'msw';
 import ContinuousCovariates from './ContinuousCovariates';
 import { SourceContextProvider } from '../../Utils/Source';
+import './Covariates.css';
 
 export default {
   title: 'Tests3/GWASV2/ContinuousCovariates',
@@ -21,19 +22,21 @@ const Template = () => {
   return (
     <QueryClientProvider client={mockedQueryClient}>
       <SourceContextProvider>
-      <ContinuousCovariates
-        selectedStudyPopulationCohort={{cohort_definition_id: 123}}
-        selectedCovariates={[]}
-        covariates={[]}
-        outcome={null}
-        handleClose={() => {
-          console.log('close');
-        }}
-        dispatch={(chosenCovariate) => {
-          console.log('chosen covariate:', chosenCovariate)
-        }}
-        submitButtonLabel={'Add'}
-      />
+        <div className='GWASV2'>
+          <ContinuousCovariates
+            selectedStudyPopulationCohort={{ cohort_definition_id: 123 }}
+            selectedCovariates={[]}
+            covariates={[]}
+            outcome={null}
+            handleClose={() => {
+              console.log('close');
+            }}
+            dispatch={(chosenCovariate) => {
+              console.log('chosen covariate:', chosenCovariate);
+            }}
+            submitButtonLabel={'Add'}
+          />
+        </div>
       </SourceContextProvider>
     </QueryClientProvider>
   );
@@ -82,18 +85,21 @@ export const SuccessCase = Template.bind({});
 SuccessCase.parameters = {
   msw: {
     handlers: [
-      rest.post('http://:cohortmiddlewarepath/cohort-middleware/concept/by-source-id/:sourceid/by-type', (req, res, ctx) => {
-        const { cohortmiddlewarepath } = req.params;
-        const { sourceid } = req.params;
-        console.log(cohortmiddlewarepath);
-        console.log(sourceid);
-        return res(
-          ctx.delay(1100),
-          ctx.json({
-            concepts: mockConcepts,
-          }),
-        );
-      }),
+      rest.post(
+        'http://:cohortmiddlewarepath/cohort-middleware/concept/by-source-id/:sourceid/by-type',
+        (req, res, ctx) => {
+          const { cohortmiddlewarepath } = req.params;
+          const { sourceid } = req.params;
+          console.log(cohortmiddlewarepath);
+          console.log(sourceid);
+          return res(
+            ctx.delay(1100),
+            ctx.json({
+              concepts: mockConcepts,
+            })
+          );
+        }
+      ),
       rest.post(
         //histogram/by-source-id/${sourceId}/by-cohort-definition-id/${cohortId}/by-histogram-concept-id/${currentSelection.concept_id}`;
         'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId/by-histogram-concept-id/:conceptId',
@@ -104,15 +110,15 @@ SuccessCase.parameters = {
             ctx.delay(1100),
             ctx.json({
               bins: [
-                {start: 1.4564567,  end: 10.45642, nr_persons: 100},
-                {start: 10.45642, end: 20, nr_persons: 200},
-                {start: 20, end: 30, nr_persons: 300},
-                {start: 30, end: 40, nr_persons: 400},
-                {start: 40, end: 50, nr_persons: 500},
-                {start: 50, end: 60, nr_persons: 400},
-                {start: 60, end: 70, nr_persons: 350},
-                {start: 70, end: 80, nr_persons: 100},
-                {start: 80, end: 90, nr_persons: 50},
+                { start: 1.4564567, end: 10.45642, nr_persons: 100 },
+                { start: 10.45642, end: 20, nr_persons: 200 },
+                { start: 20, end: 30, nr_persons: 300 },
+                { start: 30, end: 40, nr_persons: 400 },
+                { start: 40, end: 50, nr_persons: 500 },
+                { start: 50, end: 60, nr_persons: 400 },
+                { start: 60, end: 70, nr_persons: 350 },
+                { start: 70, end: 80, nr_persons: 100 },
+                { start: 80, end: 90, nr_persons: 50 },
               ],
             })
           );
@@ -122,23 +128,25 @@ SuccessCase.parameters = {
   },
 };
 
-
 export const EmptyDataCase = Template.bind({});
 EmptyDataCase.parameters = {
   msw: {
     handlers: [
-      rest.post('http://:cohortmiddlewarepath/cohort-middleware/concept/by-source-id/:sourceid/by-type', (req, res, ctx) => {
-        const { cohortmiddlewarepath } = req.params;
-        const { sourceid } = req.params;
-        console.log(cohortmiddlewarepath);
-        console.log(sourceid);
-        return res(
-          ctx.delay(1100),
-          ctx.json({
-            concepts: mockConcepts,
-          }),
-        );
-      }),
+      rest.post(
+        'http://:cohortmiddlewarepath/cohort-middleware/concept/by-source-id/:sourceid/by-type',
+        (req, res, ctx) => {
+          const { cohortmiddlewarepath } = req.params;
+          const { sourceid } = req.params;
+          console.log(cohortmiddlewarepath);
+          console.log(sourceid);
+          return res(
+            ctx.delay(1100),
+            ctx.json({
+              concepts: mockConcepts,
+            })
+          );
+        }
+      ),
       rest.post(
         //histogram/by-source-id/${sourceId}/by-cohort-definition-id/${cohortId}/by-histogram-concept-id/${currentSelection.concept_id}`;
         'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId/by-histogram-concept-id/:conceptId',
@@ -157,15 +165,14 @@ EmptyDataCase.parameters = {
   },
 };
 
-
 export const ErrorCase = Template.bind({});
 ErrorCase.parameters = {
   msw: {
     handlers: [
-      rest.post('http://:cohortmiddlewarepath/cohort-middleware/concept/by-source-id/:sourceid/by-type', (req, res, ctx) => res(
-        ctx.delay(800),
-        ctx.status(403),
-      )),
+      rest.post(
+        'http://:cohortmiddlewarepath/cohort-middleware/concept/by-source-id/:sourceid/by-type',
+        (req, res, ctx) => res(ctx.delay(800), ctx.status(403))
+      ),
     ],
   },
 };

src/Analysis/GWASV2/Components/Covariates/Covariates.css

@@ -1,38 +1,145 @@
-.GWASV2 .select-covariates-container {
-  min-width: 988px;
+/* Cards */
+.GWASV2 .outcome-card {
+  background: #cae6f1;
+}
+
+.GWASV2 .dichotomous-card {
+  background: #ebfad3;
+}
+
+.GWASV2 .continuous-card {
+  background: #fde3d6;
+}
+
+/* Buttons */
+.GWASV2 .submit-button,
+.GWASV2 .cancel-button {
+  margin: 6px 0 12px auto;
+  background-color: #2e77b8;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  width: 152px;
+  height: 40px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.GWASV2 .submit-button:hover {
+  background-color: var(--g3-secondary-btn__bg-color--hover);
+}
+
+.GWASV2 .submit-button[disabled] {
+  background-color: rgba(46, 119, 184, 0.3);
+  cursor: not-allowed;
+}
+
+.GWASV2 .custom-dichotomous-covariates button.cancel-button {
+  margin-left: 20px;
+}
+
+.GWASV2 .custom-dichotomous-covariates button.cancel-button,
+.GWASV2 .select-container button.cancel-button {
+  color: #2e77b8;
+  background: white;
+  border: 1px solid #2e77b8;
+  margin-right: 25px;
 }
 
-.GWASV2 .submit-button {
-  margin-left: 5px;
+.GWASV2 .custom-dichotomous-covariates button.cancel-button:hover,
+.GWASV2 .select-container button.cancel-button:hover {
+  background-color: var(--g3-secondary-btn__bg-color--hover);
+  color: white;
 }
 
+/* Continous Covariate Selection */
 .GWASV2 .phenotype-histogram {
   padding-left: 30px;
   margin-top: 8px;
+  width: 600px;
 }
 
-.GWASV2 .outcome-card {
-  background: #cae6f1;
+.GWASV2 .continuous-covariates .continous-covariates-table {
+  width: 400px;
 }
 
-.GWASV2 .dichotomous-card {
-  background: #ebfad3;
+.GWASV2 .continuous-covariates .select-covariates-container .ant-select,
+.GWASV2
+.continuous-covariates
+.select-covariates-container
+.ant-select-dropdown {
+  width: 100%;
+  min-width: inherit;
 }
 
-.GWASV2 .continuous-card {
-  background: #fde3d6;
+.GWASV2
+.continuous-covariates
+.ant-table.ant-table-middle
+.ant-table-tbody
+> tr
+> td {
+  padding: 5px 8px;
+}
+
+.GWASV2 .continuous-covariates-button-container {
+  display: block;
+  float: right;
+  height: 36px;
+}
+
+.GWASV2 .phenotype-histogram .recharts-wrapper {
+  margin-top: 60px;
 }
 
-.GWASV2 .custom-dichotomous-covariates {
-  min-height: 300px;
+.GWASV2 .phenotype-histogram .histrogram-loading {
+  margin-top: 80px;
+  text-align: center;
+  width: 600px;
 }
 
-.GWASV2 .custom-dichotomous-covariates input {
-  width: 50%;
+.GWASV2 .phenotype-histogram-directions {
+  float: left;
+  margin-top: 50px;
+  text-align: center;
+  width: 600px;
+}
+
+/* Dichotomous Covariate Selection */
+.GWASV2 .custom-dichotomous-covariates .GWASUI-flexRow label {
+  font-weight: bold;
+  margin: 0 10px 0 auto;
+  padding-top: 13px;
+  color: #333;
+}
+
+.GWASV2 .custom-dichotomous-covariates .GWASUI-flexRow input {
+  width: 260px;
+  margin-right: 10px;
+  height: 40px;
+  margin-top: 6px;
+  border: 1px solid #dededf;
+  border-radius: 4px;
   padding-left: 5px;
-  border-radius: 5px;
 }
 
-.GWASV2 .custom-dichotomous-covariates .cohorts-overlap-diagram {
-  padding-left: 30px;
+.GWASV2 .dichotomous-selection {
+  width: 364px;
+  margin-top: 10px;
+}
+
+.GWASV2 .dichotomous-selection h3 {
+  color: #333;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 4px;
+  margin-top: 16px;
+}
+
+.GWASV2 .cohorts-overlap-diagram {
+  width: 600px;
+  text-align: center;
+  margin-top: 20px;
 }