From 7d22f29e2df100ff53065a97dded558aeb6fb322 Mon Sep 17 00:00:00 2001 From: Jarvis Raymond Date: Tue, 17 Jan 2023 15:55:48 -0600 Subject: [PATCH 01/15] feat(gwasUnifiedFlowOutcomeCard): Styled view 2.1 --- .../Covariates/ContinuousCovariates.jsx | 63 +++++----- .../ContinuousCovariates.stories.jsx | 111 ++++++++++-------- .../Components/Covariates/Covariates.css | 69 ++++++++++- .../Diagrams/PhenotypeHistogram/Histogram.jsx | 26 +++- .../PhenotypeHistogram/PhenotypeHistogram.jsx | 28 +++-- 5 files changed, 195 insertions(+), 102 deletions(-) diff --git a/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx b/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx index 880d038365..1ede28d645 100644 --- a/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx +++ b/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx @@ -23,38 +23,43 @@ 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 2974e0740f..8b84cc9421 100644 --- a/src/Analysis/GWASV2/Components/Covariates/Covariates.css +++ b/src/Analysis/GWASV2/Components/Covariates/Covariates.css @@ -6,11 +6,6 @@ margin-left: 5px; } -.GWASV2 .phenotype-histogram { - padding-left: 30px; - margin-top: 8px; -} - .GWASV2 .dichotomous-card { width: 189px; background: #ebfad3; @@ -34,3 +29,67 @@ .GWASV2 .custom-dichotomous-covariates .cohorts-overlap-diagram { padding-left: 30px; } + +.GWASV2 .phenotype-histogram { + padding-left: 30px; + margin-top: 8px; + width: 600px; +} +.GWASV2 .continuous-covariates .GWASUI-searchContainer, +.GWASV2 .continuous-covariates .continous-covariates-table { + width: 350px; +} + +.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 .phenotype-histogram .histrogram-loading { + margin-top: 60px; +} +.GWASV2 .phenotype-histogram 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 .GWASV2 .phenotype-histogram button:hover { + background-color: var(--g3-secondary-btn__bg-color--hover); +} +.GWASV2 .phenotype-histogram button.cancel-button { + color: #2e77b8; + background: white; + border: 1px solid #2e77b8; + margin-right: 25px; +} +.GWASV2 .phenotype-histogram button.cancel-button:hover { + background-color: var(--g3-secondary-btn__bg-color--hover); + color: white; +} + +.GWASV2 .phenotype-histogram-directions { + float: left; + margin-top: 25px; +} diff --git a/src/Analysis/GWASV2/Components/Diagrams/PhenotypeHistogram/Histogram.jsx b/src/Analysis/GWASV2/Components/Diagrams/PhenotypeHistogram/Histogram.jsx index 611d2902c5..c7f2583cb4 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,9 @@ 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 +55,16 @@ const Histogram = ({ data={data} margin={{ top: 20, bottom: 65, right: 60 }} > - formatNumber(tick)}> -