Feat/vadc sprint01 (#1211)

* Feat/gwas unified flow style sidebars (#1195) * feat(gwasUnifiedFlowStyleSidebars): Initial commit * feat(gwasUnifiedFlowStyleSidebars): ran eslint new * feat(gwasUnifiedFlowStyleSidebars): ran stylelint, removed unneeded CSS rules, removed unneeded prop * feat(gwasUnifiedFlowStyleSidebars): added rule back so buttons align * feat(gwasUnifiedFlowStyleSidebars): made covariates prop for SelectOutcome not required * feat(gwasUnifiedFlowStyleSidebars): ran eslint new * feat(gwasUnifiedFlowStyleSidebars): changed prop type for covariates to array * feat: add extra documentation on how to run JEST tests * feat: add JEST tests for SelectHareDropDown includes: - working JEST test with mocks - fix to use correct cohortMiddlewareApi.js and to stop initializing WTS since this is not necessary anymore and is done globally. This was removed here so there would be less things to mock/worry about as well * feat: add JEST tests for dichotomous(case/control) scenario * Feat/gwas unified flow outcome card (#1201) * feat(gwasUnifiedFlowOutcomeCard): initial commit * feat(gwasUnifiedFlowOutcomeCard): Added unit test for CovariatesCard.js * feat(gwasUnifiedFlowOutcomeCard): Updated test to use ValidInitialState data for outcome and updated CovariatesCardList keys to use covariate obj * feat(gwasUnifiedFlowOutcomeCard): Cleaned up code formatting for CovariatesCardList.test.jsx * feat(gwasUnifiedFlowStyleSidebars): Wrote storybook for CovariatesCardsList * feat(gwasUnifiedFlowStyleSidebars): Changed outcome card title to Outcome Phenotype to match design * feat(gwasUnifiedFlowOutcomeCard): Changed all instances of InitialValidState to ValidState * feat(gwasUnifiedFlowOutcomeCard): Updated CovariatesCardList test to use Valid state objs instead of hard coded values; updated ref to Valid state in JobInputModal; Updated ValidState to use correct data * feat(gwasUnifiedFlowOutcomeCard): Ran ESLINT-new * 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 * VADC-393: fix query config import (#1202) * fix(cohort): query config import * fix(cohort): fix error in import of useQuery Co-authored-by: pieterlukasse <pieterlukasse@gmail.com> * VADC-378 Integrate the virtual tour into the new GWAS (#1207) * feat(gwasUnifiedFlowReacTour): Initial ReacTour addition. * feat(gwasUnifiedFlowReacTour): Initial working version of ReacTour for unified flow * feat(gwasUnifiedFlowReacTour): Moved logic to ProgressBar and TourButton * feat(gwasUnifiedFlowReacTour): Added steps to the first screen * feat(gwasUnifiedFlowReacTour): Added Reactour to the first screen and started second screen * feat(gwasUnifiedFlowReacTour): Added ReacTour to step 2 * feat(gwasUnifiedFlowOutcomeCard): Styled view 2.1 * feat(gwasUnifiedFlowReacTour): Added ReacTour to step 3 * 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(gwasUnifiedFlowReacTour): Added ReacTour to the fourth screen * 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(gwasUnifiedFlowReacTour): Added logic to show ReacTour on subscreens 2 and 3 * feat(gwasUnifiedFlowReacTour): eslint formatting * feat(gwasUnifiedFlowStyleSteps2And3): Ran Stylelint * feat(gwasUnifiedFlowStyleSteps2And3): Formatted CSS * feat(gwasUnifiedFlowStyleSteps2And3): Formatted CSS and removed CSS comment * feat(gwasUnifiedFlowStyleSteps2And3): Removed deprecated styles * feat(gwasUnifiedFlowReacTour): Added ReacTour for step 3 subscreens * feat(gwasUnifiedFlowReacTour): Added explanation for the modal window on the fourth step * feat(gwasUnifiedFlowReacTour): Wording * feat(gwasUnifiedFlowReacTour): Updated logic for selectionMode reset and changed wording * feat(gwasUnifiedFlowReacTour): Resolving conflicts with parent branch * feat(gwasUnifiedFlowReacTour): Fixed ReacTour selectors for the histogram * feat(gwasUnifiedFlowReacTour): Removed unsuded ReacTour selectors and changed wording * feat(gwasUnifiedFlowReacTour): eslint formatting * feat(gwasUnifiedFlowReacTour): Clean up * feat(gwasUnifiedFlowReacTour): Wording * feat(gwasUnifiedFlowReacTour): Wording Co-authored-by: Jarvis Raymond <jarvisraymond@uchicago.edu> Co-authored-by: Jarvis <113449836+jarvisraymond-uchicago@users.noreply.github.com> * feat(vadc_sprint01): Skipped ProgressBar.test.jsx due to CI test for NPM test failing to correctly use aliased import of @Reactour/tour * feat(vadc_sprint01): Pulled remote local * feat(vadc_sprint01): Removed dependencies for Progress Bar test that were causing problems Co-authored-by: pieterlukasse <pieterlukasse@gmail.com> Co-authored-by: Kyle Hernandez <kmhernan84@gmail.com> Co-authored-by: vzpgb <45467497+vzpgb@users.noreply.github.com>
uc-cdis · Jan 25, 2023 · b1a6910 · b1a6910
1 parent de73f9d
commit b1a6910
Show file tree

Hide file tree

Showing 41 changed files with 1,040 additions and 263 deletions.
diff --git a/README.md b/README.md
@@ -332,3 +332,12 @@ We use ESLint and Stylelint to lint and automatically format code.
 - `npm run eslint` Will run ESLint on the entire code base and automatically try to fix all JS and JS like files.
 - `npm run eslint-new` Will run ESLint only on newly added files in the current git branch and automatically try to fix the JS and JS like files.
 - `npm run stylelint` Will run Stylelint on all CSS and CSS-like files in the code base and automatically try to fix them.
+
+
+### Testing
+
+We use JEST and enzyme for unit testing frontend components in this project.
+
+- `npm run test` Will run JEST tests for all the tests found in the complete project.
+- `npm run test SUBFOLDER_RELATIVE_PATH` will only consider the part of the project starting at the given subfolder when looking for tests to run.
+  - e.g. `npm run test src/Analysis/GWASV2`
diff --git a/src/Analysis/AnalysisApp.jsx b/src/Analysis/AnalysisApp.jsx
@@ -121,9 +121,19 @@ class AnalysisApp extends React.Component {
       );
     case 'GWAS++': {
       return (
-        <div>
-          <GWASContainer refreshWorkflows={this.refreshWorkflows} />
-        </div>
+        <TourProvider
+          afterOpen={disableBody}
+          beforeClose={enableBody}
+          disableInteraction
+          onClickClose={({ setCurrentStep, setIsOpen }) => {
+            setIsOpen(false);
+            setCurrentStep(0);
+          }}
+        >
+          <div>
+            <GWASContainer refreshWorkflows={this.refreshWorkflows} />
+          </div>
+        </TourProvider>
       );
     }
     default:

diff --git a/src/Analysis/GWASV2/Components/AttritionTableWrapper/AttritionTableWrapper.jsx b/src/Analysis/GWASV2/Components/AttritionTableWrapper/AttritionTableWrapper.jsx
@@ -5,7 +5,7 @@ import AttritionTable from './AttritionTable/AttritionTable';
 const AttritionTableWrapper = ({ covariates, selectedCohort, outcome }) => {
   const useSecondTable = outcome?.variable_type === 'custom_dichotomous';
   return (
-    <React.Fragment>
+    <div data-tour='attrition-table'>
       <AttritionTable
         covariates={covariates}
         selectedCohort={selectedCohort}
@@ -20,7 +20,7 @@ const AttritionTableWrapper = ({ covariates, selectedCohort, outcome }) => {
           tableType={'Control Cohort'}
         />
       )}
-    </React.Fragment>
+    </div>
   );
 };
 AttritionTableWrapper.propTypes = {

diff --git a/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx b/src/Analysis/GWASV2/Components/Covariates/ContinuousCovariates.jsx
@@ -22,39 +22,47 @@ const ContinuousCovariates = ({
 
   return (
     <React.Fragment>
-      <div className='GWASUI-flexRow continuous-covariates' data-tour='name'>
-        <div>
+      <div className='GWASUI-flexRow continuous-covariates'>
+        <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
-            ? (
+          <div data-tour='submit-cancel-buttons' 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 ? (
+            <div data-tour='phenotype-histogram'>
               <PhenotypeHistogram
                 selectedStudyPopulationCohort={selectedStudyPopulationCohort}
                 selectedCovariates={selectedCovariates}
                 outcome={outcome}
                 selectedContinuousItem={selected}
               />
-            )
-            : 'Select a concept to render its corresponding histogram'}
+            </div>
+          ) : (
+            <div data-tour='phenotype-histogram' className='phenotype-histogram-directions'>
+              Select a concept to render its corresponding histogram
+            </div>
+          )}
         </div>
       </div>
     </React.Fragment>

diff --git 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 (
     <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))
+      ),
     ],
   },
 };