From 6d358805f3ab230038ad880a72a09d660cc88a95 Mon Sep 17 00:00:00 2001 From: Jarvis <113449836+jarvisraymond-uchicago@users.noreply.github.com> Date: Thu, 19 Jan 2023 15:11:11 -0600 Subject: [PATCH] Feat/gwas unified flow style steps2 and3 (#1203) * 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 --- .../Covariates/ContinuousCovariates.jsx | 64 ++++---- .../ContinuousCovariates.stories.jsx | 111 +++++++------- .../Components/Covariates/Covariates.css | 141 +++++++++++++++--- .../CustomDichotomousCovariates.jsx | 15 +- .../Diagrams/PhenotypeHistogram/Histogram.jsx | 27 +++- .../PhenotypeHistogram/PhenotypeHistogram.jsx | 13 +- .../SelectCovariates/SelectCovariates.css | 37 +---- .../SelectCovariates/SelectCovariates.jsx | 4 +- .../Steps/SelectOutcome/SelectOutcome.css | 14 +- .../Steps/SelectOutcome/SelectOutcome.jsx | 4 +- 10 files changed, 276 insertions(+), 154 deletions(-) diff --git a/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx b/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx index 880d038365..15c1cd0f7d 100644 --- a/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx +++ b/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx @@ -23,38 +23,44 @@ const ContinuousCovariates = ({ return (
-
+
- -
- {selected - ? ( - - ) - : 'Select a concept to render its corresponding histogram'} +
+ + +
+ {selected ? ( + + ) : ( +
+ Select a concept to render its corresponding histogram +
+ )}
diff --git a/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.stories.jsx b/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.stories.jsx index 6678c5daae..3a8e477914 100644 --- a/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.stories.jsx +++ b/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 ( - { - console.log('close'); - }} - dispatch={(chosenCovariate) => { - console.log('chosen covariate:', chosenCovariate) - }} - submitButtonLabel={'Add'} - /> +
+ { + console.log('close'); + }} + dispatch={(chosenCovariate) => { + console.log('chosen covariate:', chosenCovariate); + }} + submitButtonLabel={'Add'} + /> +
); @@ -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)) + ), ], }, }; diff --git a/src/Analysis/GWASV2/Components/Covariates/Covariates.css b/src/Analysis/GWASV2/Components/Covariates/Covariates.css index 086f89d65c..fd25f08b01 100644 --- a/src/Analysis/GWASV2/Components/Covariates/Covariates.css +++ b/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; } diff --git a/src/Analysis/GWASV2/Components/Covariates/CustomDichotomousCovariates.jsx b/src/Analysis/GWASV2/Components/Covariates/CustomDichotomousCovariates.jsx index bc8fa63ae9..6a21fcbeac 100644 --- a/src/Analysis/GWASV2/Components/Covariates/CustomDichotomousCovariates.jsx +++ b/src/Analysis/GWASV2/Components/Covariates/CustomDichotomousCovariates.jsx @@ -37,8 +37,10 @@ const CustomDichotomousCovariates = ({ return (
+ setProvidedName(e.target.value)} value={providedName} @@ -46,7 +48,7 @@ const CustomDichotomousCovariates = ({ />
-
+
-
+
+
+ Define a dichotomous variable by study population with 2 other + cohorts. +

Get Value 0

@@ -80,7 +86,6 @@ const CustomDichotomousCovariates = ({
-

Cohort overlap diagram

{!firstPopulation || !secondPopulation ? (
Select your cohorts to assess overlap
) : ( diff --git a/src/Analysis/GWASV2/Components/Diagrams/PhenotypeHistogram/Histogram.jsx b/src/Analysis/GWASV2/Components/Diagrams/PhenotypeHistogram/Histogram.jsx index 611d2902c5..e5847b47c7 100644 --- a/src/Analysis/GWASV2/Components/Diagrams/PhenotypeHistogram/Histogram.jsx +++ b/src/Analysis/GWASV2/Components/Diagrams/PhenotypeHistogram/Histogram.jsx @@ -1,6 +1,12 @@ import React from 'react'; import { - BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Label, + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Label, } from 'recharts'; import PropTypes from 'prop-types'; import { formatNumber } from '../../../Utils/constants'; @@ -10,7 +16,10 @@ const CustomTooltip = ({ active, payload, label }) => { if (active && payload && payload.length) { return (
-

{`Number of persons: ${formatNumber(payload[0].value)}, for values starting at: ${formatNumber(label)}`}

+

{`Number of persons: ${formatNumber( + payload[0].value, + )}, for values starting at: ${formatNumber(label)}`} +

); } @@ -47,8 +56,16 @@ const Histogram = ({ data={data} margin={{ top: 20, bottom: 65, right: 60 }} > - formatNumber(tick)}> -