Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style/gwas pipeline padding #1111

Merged
merged 14 commits into from
Oct 7, 2022

Conversation

jarvisraymond-uchicago
Copy link
Contributor

@jarvisraymond-uchicago jarvisraymond-uchicago commented Oct 6, 2022

Jira Ticket: VADC-207

New Features

This updates the styling for the GWAS pipeline per these business requirements:

  • The steps under the attrition table need to have equal padding vertically, in both flows
  • Quantitive flow, step 2, tutorial button need to be centered vertically
  • Quantitive flow, step 3, tutorial button need to be centered vertically (also too much space there)
  • Quantitive flow, step 5, tutorial button need to be centered vertically
  • Quantitive flow and CC flow, step 5, can we push all fields forward so the words are aligned and * sticks out where needed?
  • Quantitive flow, step 5, tutorial button need to be centered vertically
  • CC step 1,2,3,4 and 7, tutorial button need to be centered vertically
  • CC step 4- too much space around tutorial button
  • CustomDichotomousSelect view: Make the 'C' in Cohort capitalized in table titles
  • Remove extra top space around CustomDichotomousSelect view

This involved setting inline styles and classes for each step, editing JSX and removing unneeded <hr /> elements from other components. Asterisks were removed from the JSX and are added as a before element with CSS to ensure alignment. These updates were reviewed and approved with Noah Oct 6th.

Screenshots

BEFORE

before-output

AFTER

output

…ew and added inline styles to better vertically center tutorial button on GWASCaseControl
…Review and added inline styles to GWASQuantitative
@jarvisraymond-uchicago jarvisraymond-uchicago marked this pull request as ready for review October 7, 2022 13:36
Copy link
Contributor

@pieterlukasse pieterlukasse left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good to me 👍

Thanks @jarvisraymond-uchicago !

@pieterlukasse pieterlukasse merged commit aa7943b into feat/vadc_sprint20 Oct 7, 2022
@pieterlukasse pieterlukasse deleted the style/gwasPipelinePadding branch October 7, 2022 18:45
jarvisraymond-uchicago added a commit that referenced this pull request Oct 14, 2022
* Style/gwas pipeline padding (#1111)

* style(gwasPipelinePadding): removed <hr /> element from CovariateReview and added inline styles to better vertically center tutorial button on GWASCaseControl

* style(gwasPipelinePadding): removed <hr /> element from OutcomeSelectReview and added inline styles to GWASQuantitative

* style(gwasPipelinePadding): added class and style for asterisks

* style(gwasPipelinePadding): removed unneeded obj for housing styles in GWASQuantitative

* style(gwasPipelinePadding): refactored code to avoid using negative margin values

* style(gwasPipelinePadding): converted inline styles to use a class

* style(gwasPipelinePadding): converted inline styles for no padding to use a class

* style(gwasPipelinePadding): converted inline styles for no padding to use a class for GWASQuantitative

* style(gwasPipelinePadding): made class name for asterisk consistent with rest of codebase

* style(gwasPipelinePadding): fixed formatting issue in GWASQuantitative.jsx

* style(gwasPipelinePadding): ran eslint to format files

* style(gwasPipelinePadding): removed top spacing on Dichotomous selection and capitalized Cohort

* style(gwasPipelinePadding): offset asterisk spacing per stakeholder advisement

* style(gwasPipelinePadding): removed additional top padding in CustomDichotomousSelect.jsx

* feat(VADC-261): add combined gwas steps template (#1114)

* feat(VADC-261): add combined gwas steps template

* fix(VADC-261): change step 4 label

* fix(VADC-261): typo

* Improve workflow list refresh (#1113)

* improve workflow list fetch mechanism and decrease interval

add storybook test for workflow list

add refetchInterval to workflow list and update test

add "phase" to workflow and to keys of useQuery and change test

... this will ensure the endpoint is called again if the status of the workflow changes

set workflow list refresh interval to 5s

* removing old reference to refreshWorkflows

* Feat/combine gwas workflow view1 (#1117)

* feat(CombineGWASWorkflowView1): Added bolerplate files

* feat(CombineGWASWorkflowView1): created working prototype

* feat(CombineGWASWorkflowView1): updated layout to better match design

* feat(CombineGWASWorkflowView1): updated code organization to use utils and shared folder

* feat(CombineGWASWorkflowView1): moved util files to utils folder in SelectStudyPopulation and updated refs

* feat(CombineGWASWorkflowView1): formatted CSS and removed unneeded JSX space element

* feat(CombineGWASWorkflowView1): Cleaned up CSS

* feat(CombineGWASWorkflowView1): Updated text in button and moved state to parent

* feat(CombineGWASWorkflowView1): updated child to use state from parent

* feat(CombineGWASWorkflowView1): Fixed Eslint issues on AddCohortButton

* feat(CombineGWASWorkflowView1): Fixed Eslint issues on CohortDefinitions

* feat(CombineGWASWorkflowView1): Fixed Eslint issues on CohortDefinations

* feat(CombineGWASWorkflowView1) Resolved ESLINT issues with SelectStudyPopulation

* feat(CombineGWASWorkflowView1) Resolved ESLINT issues with GWASContainer.jsx and cohortMiddlewareApi

* feat(CombineGWASWorkflowView1) Resolved ESLINT issues with GWASContainer.jsx props

* feat(CombineGWASWorkflowView1) Removed unneeded steps component and logic from GWASContainer

* feat(CombineGWASWorkflowView1) Added workflow specific wrapping CSS class so style changes do not impact other workflows

* feat(CombineGWASWorkflowView1): created a story book to mock CohortSelect

* feat(CombineGWASWorkflowView1): removed unneeded imports from GWASContainer.jsx

* feat(CombineGWASWorkflowView1): set button styles so they render for story book and app

* feat(CombineGWASWorkflowView1): Formatted code for clarity in CohortSelect.stories

* feat(CombineGWASWorkflowView1): Added clarifying comment to explain eslint-disable-next-line in CohortSelect.jsx

* feat(CombineGWASWorkflowView1): organized CSS

* feat(CombineGWASWorkflowView1): ran stylelint auto fix for css files

* feat(CombineGWASWorkflowView1): ensure form field and button are perfectly aligned

* feat(CombineGWASWorkflowView1): updated state name to selectedStudyPopulationCohort per PR review recommendation

* feat(CombineGWASWorkflowView1): removed unneeded var and prop otherCohortSelected

* feat(CombineGWASWorkflowView1): removed unneeded var and prop otherCohortSelected from CohortDefinations.jsx

* feat(CombineGWASWorkflowView1): removed unneeded var and prop otherCohortSelected from CohortSelect.jsx

* feat(CombineGWASWorkflowView1): updated var name from fields to field in SearchBar.jsx

* feat(CombineGWASWorkflowView1): updated var name from fields to field in CohortSelect.jsx

Co-authored-by: Jarvis <113449836+jarvisraymond-uchicago@users.noreply.github.com>
Co-authored-by: Ali Lahrime <90918464+alilahrime@users.noreply.github.com>
cmlsn pushed a commit that referenced this pull request Nov 29, 2022
* Style/gwas pipeline padding (#1111)

* style(gwasPipelinePadding): removed <hr /> element from CovariateReview and added inline styles to better vertically center tutorial button on GWASCaseControl

* style(gwasPipelinePadding): removed <hr /> element from OutcomeSelectReview and added inline styles to GWASQuantitative

* style(gwasPipelinePadding): added class and style for asterisks

* style(gwasPipelinePadding): removed unneeded obj for housing styles in GWASQuantitative

* style(gwasPipelinePadding): refactored code to avoid using negative margin values

* style(gwasPipelinePadding): converted inline styles to use a class

* style(gwasPipelinePadding): converted inline styles for no padding to use a class

* style(gwasPipelinePadding): converted inline styles for no padding to use a class for GWASQuantitative

* style(gwasPipelinePadding): made class name for asterisk consistent with rest of codebase

* style(gwasPipelinePadding): fixed formatting issue in GWASQuantitative.jsx

* style(gwasPipelinePadding): ran eslint to format files

* style(gwasPipelinePadding): removed top spacing on Dichotomous selection and capitalized Cohort

* style(gwasPipelinePadding): offset asterisk spacing per stakeholder advisement

* style(gwasPipelinePadding): removed additional top padding in CustomDichotomousSelect.jsx

* feat(VADC-261): add combined gwas steps template (#1114)

* feat(VADC-261): add combined gwas steps template

* fix(VADC-261): change step 4 label

* fix(VADC-261): typo

* Improve workflow list refresh (#1113)

* improve workflow list fetch mechanism and decrease interval

add storybook test for workflow list

add refetchInterval to workflow list and update test

add "phase" to workflow and to keys of useQuery and change test

... this will ensure the endpoint is called again if the status of the workflow changes

set workflow list refresh interval to 5s

* removing old reference to refreshWorkflows

* Feat/combine gwas workflow view1 (#1117)

* feat(CombineGWASWorkflowView1): Added bolerplate files

* feat(CombineGWASWorkflowView1): created working prototype

* feat(CombineGWASWorkflowView1): updated layout to better match design

* feat(CombineGWASWorkflowView1): updated code organization to use utils and shared folder

* feat(CombineGWASWorkflowView1): moved util files to utils folder in SelectStudyPopulation and updated refs

* feat(CombineGWASWorkflowView1): formatted CSS and removed unneeded JSX space element

* feat(CombineGWASWorkflowView1): Cleaned up CSS

* feat(CombineGWASWorkflowView1): Updated text in button and moved state to parent

* feat(CombineGWASWorkflowView1): updated child to use state from parent

* feat(CombineGWASWorkflowView1): Fixed Eslint issues on AddCohortButton

* feat(CombineGWASWorkflowView1): Fixed Eslint issues on CohortDefinitions

* feat(CombineGWASWorkflowView1): Fixed Eslint issues on CohortDefinations

* feat(CombineGWASWorkflowView1) Resolved ESLINT issues with SelectStudyPopulation

* feat(CombineGWASWorkflowView1) Resolved ESLINT issues with GWASContainer.jsx and cohortMiddlewareApi

* feat(CombineGWASWorkflowView1) Resolved ESLINT issues with GWASContainer.jsx props

* feat(CombineGWASWorkflowView1) Removed unneeded steps component and logic from GWASContainer

* feat(CombineGWASWorkflowView1) Added workflow specific wrapping CSS class so style changes do not impact other workflows

* feat(CombineGWASWorkflowView1): created a story book to mock CohortSelect

* feat(CombineGWASWorkflowView1): removed unneeded imports from GWASContainer.jsx

* feat(CombineGWASWorkflowView1): set button styles so they render for story book and app

* feat(CombineGWASWorkflowView1): Formatted code for clarity in CohortSelect.stories

* feat(CombineGWASWorkflowView1): Added clarifying comment to explain eslint-disable-next-line in CohortSelect.jsx

* feat(CombineGWASWorkflowView1): organized CSS

* feat(CombineGWASWorkflowView1): ran stylelint auto fix for css files

* feat(CombineGWASWorkflowView1): ensure form field and button are perfectly aligned

* feat(CombineGWASWorkflowView1): updated state name to selectedStudyPopulationCohort per PR review recommendation

* feat(CombineGWASWorkflowView1): removed unneeded var and prop otherCohortSelected

* feat(CombineGWASWorkflowView1): removed unneeded var and prop otherCohortSelected from CohortDefinations.jsx

* feat(CombineGWASWorkflowView1): removed unneeded var and prop otherCohortSelected from CohortSelect.jsx

* feat(CombineGWASWorkflowView1): updated var name from fields to field in SearchBar.jsx

* feat(CombineGWASWorkflowView1): updated var name from fields to field in CohortSelect.jsx

Co-authored-by: Jarvis <113449836+jarvisraymond-uchicago@users.noreply.github.com>
Co-authored-by: Ali Lahrime <90918464+alilahrime@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants