Skip to content

Commit

Permalink
Feat/gwas unified flow style steps2 and3 (#1203)
Browse files Browse the repository at this point in the history 
* feat(gwasUnifiedFlowOutcomeCard): Styled view 2.1

* feat(gwasUnifiedFlowOutcomeCard): Styled view 3.1

* feat(gwasUnifiedFlowStyleSteps2And3): Added styling to make loading look nicer for steps 2.1 and 3.1

* feat(gwasUnifiedFlowStyleSteps2And3): started styling for step 2.2 and 3.2

* feat(gwasUnifiedFlowStyleSteps2And3): Ran eslint-new

* feat(gwasUnifiedFlowStyleSteps2And3): Added styles for step 3.2

* feat(gwasUnifiedFlowStyleSteps2And3): Ran eslint-new

* feat(gwasUnifiedFlowStyleSteps2And3): Made loading widths consistent

* feat(gwasUnifiedFlowStyleSteps2And3): Ran ESLINT new

* feat(gwasUnifiedFlowStyleSteps2And3): Removed unneeded CSS rule

* feat(gwasUnifiedFlowStyleSteps2And3): Removed another  unneeded CSS rule

* feat(gwasUnifiedFlowStyleSteps2And3): Ran Stylelint

* feat(gwasUnifiedFlowStyleSteps2And3): Formatted CSS

* feat(gwasUnifiedFlowStyleSteps2And3): Formatted CSS and removed CSS comment

* feat(gwasUnifiedFlowStyleSteps2And3): Removed deprecated styles
  • Loading branch information
@jarvisraymond-uchicago
jarvisraymond-uchicago authored Jan 19, 2023
1 parent 297b3b7 commit 6d35880
Show file tree
Hide file tree
Showing 10 changed files with 276 additions and 154 deletions.
64 changes: 35 additions & 29 deletions src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
111 changes: 59 additions & 52 deletions src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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>
);
Expand Down Expand Up @@ -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',
Expand All @@ -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 },
],
})
);
Expand All @@ -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',
Expand All @@ -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))
),
],
},
};
141 changes: 124 additions & 17 deletions src/Analysis/GWASV2/Components/Covariates/Covariates.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit 6d35880

Please sign in to comment.