feat add react tour

package.json

@@ -16,10 +16,12 @@
     "@fortawesome/react-fontawesome": "^0.1.0",
     "@gen3/guppy": "^0.15.1",
     "@gen3/ui-component": "^0.11.1",
+    "@reactour/tour": "^2.12.0",
     "@storybook/addon-actions": "^6.0.0",
     "@storybook/react": "^6.0.0",
     "@types/redux-mock-store": "^1.0.3",
     "antd": "^4.16.7",
+    "body-scroll-lock": "^4.0.0-beta.0",
     "brace": "^0.10.0",
     "clipboard-plus": "^1.0.0",
     "core-js": "^3.9.0",

src/Analysis/AnalysisApp.jsx

@@ -11,9 +11,14 @@ import { analysisApps } from '../localconf';
 import './AnalysisApp.css';
 import sessionMonitor from '../SessionMonitor';
 import GWASWorkflowList from './GWASUIApp/GWASWorkflowList';
+import { TourProvider } from '@reactour/tour'
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 
 const queryClient = new QueryClient();
 
+const disableBody = (target) => disableBodyScroll(target);
+const enableBody = (target) => enableBodyScroll(target);
+
 class AnalysisApp extends React.Component {
   constructor(props) {
     super(props);
@@ -96,7 +101,17 @@ class AnalysisApp extends React.Component {
         );
       case 'GWASUIApp':
         return (
-          <QueryClientProvider client={queryClient} contextSharing>
+          <TourProvider
+          afterOpen={disableBody}
+          beforeClose={enableBody}
+          onClickClose={({ setCurrentStep, setIsOpen }) => {
+
+            setIsOpen(false)
+
+            setCurrentStep(0)
+          }}
+          >
+            <QueryClientProvider client={queryClient} contextSharing>
             <div className="analysis-app_flex_col">
               <div className="analysis-app_flex_row">
                 <GWASWorkflowList refreshWorkflows={this.refreshWorkflows} />
@@ -105,7 +120,8 @@ class AnalysisApp extends React.Component {
                 <ReduxGWASUIApp refreshWorkflows={this.refreshWorkflows} />
               </div>
             </div>
-          </QueryClientProvider>
+            </QueryClientProvider>
+          </TourProvider>
         );
       default:
         // this will ensure the main window will process the app messages (if any):

src/Analysis/GWASUIApp/CaseControlGWAS.jsx

@@ -11,6 +11,7 @@ import { fetchWithCreds } from '../../actions';
 import Spinner from "../../components/Spinner";
 import Dropdown from '@gen3/ui-component/dist/components/Dropdown';
 import CheckOutlined from '@ant-design/icons';
+import TourButton from './TourButton';
 
 // the quantitative argo id is
 // gwas-template-wrapper-k5w9t and the tar GUID is dg.VA03/7484ce92-313b-4286-954c-b71ad5d9bf54
@@ -251,6 +252,7 @@ const CaseControlGWAS = (props) => {
                             dataSource={data.cohort_definitions_and_stats.filter((x) => x.size > 0)} // many entries w/ size 0 in prod
                         />
                     </div>
+
                 </Space>
             </React.Fragment>
         );
@@ -260,7 +262,7 @@ const CaseControlGWAS = (props) => {
         const { data, status } = useQuery(['covariates', allowedConceptTypes.ConceptTypes, sourceId], fetchCovariates, queryConfig);
 
         if (status === 'loading') {
-            return <Spinner />;
+               return <Spinner />
         }
         if (status === 'error') {
             return <React.Fragment>Error</React.Fragment>;
@@ -779,7 +781,13 @@ const CaseControlGWAS = (props) => {
         </React.Fragment>)
     }
 
+
+
     const generateContentForStep = (stepIndex) => {
+        let stepInfo = {
+            step: stepIndex,
+            workflow_type: "case control"
+        }
         switch (stepIndex) {
             case 0: {
                 return (
@@ -796,18 +804,22 @@ const CaseControlGWAS = (props) => {
                             <div className="GWASUI-flexCol">
                                 <CaseCohortDefinition></CaseCohortDefinition>
                             </div>
+                            <TourButton stepInfo={stepInfo}></TourButton>
                         </div>
                     ) : <Spinner></Spinner>
                 );
             }
             case 1: {
                 return (
-                    <ControlCohortDefinition></ControlCohortDefinition>
+                        <ControlCohortDefinition></ControlCohortDefinition>
                 );
             }
             case 2: {
                 return (
-                    <Covariates></Covariates>
+                    <div>
+                        <Covariates></Covariates>
+                        <TourButton stepInfo={stepInfo}></TourButton>
+                    </div>
                 );
             }
             case 3: {
@@ -817,7 +829,10 @@ const CaseControlGWAS = (props) => {
             }
             case 4: {
                 return (
-                    <CohortParameters></CohortParameters>
+                    <div>
+                        <CohortParameters></CohortParameters>
+                        <TourButton stepInfo={stepInfo}></TourButton>
+                    </div>
                 );
             }
             case 5: {

src/Analysis/GWASUIApp/GWASWorkflowList.jsx

@@ -31,7 +31,7 @@ const GWASWorkflowList = () => {
     return (
       <React.Fragment>
         <Collapse onClick={(event) => event.stopPropagation()}>
-          <Panel header='Submitted Job Statuses' key='1'>
+          <Panel header='Submitted Job Statuses' key='1' >
             <List
               className='GWASApp__jobStatusList'
               itemLayout='horizontal'

src/Analysis/GWASUIApp/QuantitativeGWAS.jsx

@@ -630,20 +630,30 @@ const QuantitativeGWAS = (props) => {
   };
 
   const generateContentForStep = (stepIndex) => {
+    let stepInfo = {
+      step: stepIndex,
+      workflow_type: "quantitative"
+    }
     switch (stepIndex) {
       case 0: {
         return (
-          sourceId ? <CohortDefinitions /> : null
+          sourceId ? <div><CohortDefinitions />
+                      </div> : null
         );
       }
       case 1: {
         return (
-          <Covariates />
+          <div>
+            <Covariates />
+          </div>
         );
       }
       case 2: {
         return (
-          <CovariateStats />
+
+          <div>
+            <CovariateStats />
+          </div>
         );
       }
       case 3: {
@@ -740,6 +750,7 @@ const QuantitativeGWAS = (props) => {
               </Form>
             </div>
           </Space>
+
         );
       }
       case 4: {

src/Analysis/GWASUIApp/TourButton.jsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from "react";
+import { useTour } from '@reactour/tour'
+import { case_control_steps, quantitative_steps } from "./gwassteps";
+import { InfoCircleOutlined } from "@ant-design/icons";
+
+const TourButton = ({stepInfo}) => {
+    const { setIsOpen, setSteps, isOpen } = useTour()
+
+    let current_steps = stepInfo.workflowName === "case control" ? case_control_steps : quantitative_steps
+
+    useEffect(() => {
+        setSteps(current_steps[stepInfo.step])
+    }, [stepInfo])
+
+    return (<InfoCircleOutlined onClick={() => {
+        if (!isOpen) {
+            setIsOpen(true)
+        }
+    }}
+    style={{ fontSize: '25px', color: '#08c' }}
+    ></InfoCircleOutlined>)
+}
+
+export default TourButton

src/Analysis/GWASUIApp/gwassteps.js

@@ -0,0 +1,81 @@
+export const case_control_steps = {
+  0: [
+    {
+      selector: '[data-tour="step-1-cohort-selection"]',
+      content: "You may only see cohorts that you have access to. Please select only one cohort. The size of the cohort population is indicated in the right hand side of the table. To browse the table please scroll down to the bottom."
+    },
+    {
+      selector: '[data-tour="step-1-new-cohort"]',
+      content: "This button will open a new tab in your browser, outside of the Gen3 GWAS App and send you to OHDSI Atlas App."
+    },
+  ],
+  2: [
+    {
+      selector: '[data-tour="step-3-choosing-variable"]',
+      content: "Please choose as many variables as you wish, you may remove them later in the pipeline. Currently, only continuous variables can be selected. All variables are harmonized. To browse the table please scroll down to the bottom."
+    },
+  ],
+  5: [
+    {
+      selector: '[data-tour="number-of-pcs"]',
+      content: "Population Principal components (PCs) refer to linear combinations of genome-wide genotyping data to control for population structure/stratification (select up to 10 PCs)"
+    },
+    {
+      selector: '[data-tour="covariates"]',
+      content: "Please review the chosen covariates. You may remove unwanted covariates, or go back (at the bottom of the page) to step 2 to choose different ones."
+    },
+    {
+      selector: '[data-tour="hare"]',
+      content: "Please choose the ancestry population on which you would like to perform your study. The numbers appearing in the dropdown represent the population size of your study, considering all of your previous selections. The codes are the HARE (harmonized ancestry and race/ethnicity) codes."
+    },
+    {
+      selector: '[data-tour="maf-cutoff"]',
+      content: "Minor allele frequency (MAF) is the frequency at which the second most common allele occurs in a given population and can be used to filter out rare markers (scale of 0-0.5) "
+    },
+    {
+      selector: '[data-tour="imputation-score"]',
+      content: "This value reflects the quality of imputed SNPs and can be used to remove low-quality imputed markers (scale of 0-1)"
+    },
+  ],
+}
+
+export const quantitative_steps = {
+  0: [
+    {
+      selector: '[data-tour="quant-step-1-cohort-selection"]',
+      content: "You may only see cohorts that you have access to. Please select only one cohort. The size of the cohort population is indicated in the right hand side of the table. To browse the table please scroll down to the bottom."
+    },
+    {
+      selector: '[data-tour="quant-step-1-new-cohort"]',
+      content: "This button will open a new tab in your browser, outside of the Gen3 GWAS App and send you to OHDSI Atlas App."
+    },
+  ],
+  1: [
+    {
+      selector: '[data-tour="quant-step-2-choosing-variable"]',
+      content: "Please choose as many variables as you wish, you may remove them later in the pipeline. Currently, only continuous variables can be selected. All variables are harmonized. To browse the table please scroll down to the bottom."
+    },
+  ],
+  4: [
+    {
+      selector: '[data-tour="number-of-pcs"]',
+      content: "Population Principal components (PCs) refer to linear combinations of genome-wide genotyping data to control for population structure/stratification (select up to 10 PCs)"
+    },
+    {
+      selector: '[data-tour="covariates"]',
+      content: "Please review the chosen covariates. You may remove unwanted covariates, or go back (at the bottom of the page) to step 2 to choose different ones."
+    },
+    {
+      selector: '[data-tour="hare"]',
+      content: "Please choose the ancestry population on which you would like to perform your study. The numbers appearing in the dropdown represent the population size of your study, considering all of your previous selections. The codes are the HARE (harmonized ancestry and race/ethnicity) codes."
+    },
+    {
+      selector: '[data-tour="maf-cutoff"]',
+      content: "Minor allele frequency (MAF) is the frequency at which the second most common allele occurs in a given population and can be used to filter out rare markers (scale of 0-0.5) "
+    },
+    {
+      selector: '[data-tour="imputation-score"]',
+      content: "This value reflects the quality of imputed SNPs and can be used to remove low-quality imputed markers (scale of 0-1)"
+    },
+  ],
+}

src/Analysis/GWASWizard/GWASCaseControl.jsx

@@ -13,6 +13,7 @@ import AddCohortButton from './shared/AddCohortButton';
 import CovariateReview from './CovariateReview';
 import WorkflowParameters from './shared/WorkflowParameters';
 import GWASFormSubmit from './shared/GWASFormSubmit';
+import TourButton from '../GWASUIApp/TourButton';
 
 const { Step } = Steps;
 
@@ -80,14 +81,21 @@ const GWASCaseControl = ({ resetGWASType, refreshWorkflows }) => {
   };
 
   const generateStep = () => {
+    let stepInfo = {
+      step: current,
+      workflowName: "case control"
+    }
     switch (current) {
     case 0:
       return (!loading && sourceId ? (
         <React.Fragment>
-          <AddCohortButton />
+          <div data-tour="step-1-new-cohort">
+            <AddCohortButton />
+          </div>
+
           <React.Fragment>
             <Space direction={'vertical'} align={'center'} style={{ width: '100%' }}>
-              <h4 className='GWASUI-selectInstruction'>In this step, you will determine the study population. To begin, select the cohort that you would like to define your study population with.</h4>
+              <h4 className='GWASUI-selectInstruction' data-tour="step-1-cohort-selection">In this step, you will determine the study population. To begin, select the cohort that you would like to define your study population with.</h4>
               <div className='GWASUI-mainTable'>
                 <CohortSelect
                   selectedCohort={selectedCaseCohort}
@@ -96,6 +104,7 @@ const GWASCaseControl = ({ resetGWASType, refreshWorkflows }) => {
                   current={current}
                 />
               </div>
+              <TourButton stepInfo={stepInfo}></TourButton>
             </Space>
           </React.Fragment>
         </React.Fragment>
@@ -125,7 +134,7 @@ const GWASCaseControl = ({ resetGWASType, refreshWorkflows }) => {
         <React.Fragment>
           <React.Fragment>
             <Space direction={'vertical'} align={'center'} style={{ width: '100%' }}>
-              <h4 className='GWASUI-selectInstruction'>In this step, you will select the harmonized variables for your study. Please select all variables you wish to use in your model, including both covariates and phenotype. (Note: population PCs are not included in this step)</h4>
+              <h4 className='GWASUI-selectInstruction' data-tour="step-3-choosing-variable">In this step, you will select the harmonized variables for your study. Please select all variables you wish to use in your model, including both covariates and phenotype. (Note: population PCs are not included in this step)</h4>
               <div className='GWASUI-mainTable'>
                 <CovariateSelect
                   selectedCovariates={selectedCovariates}
@@ -134,6 +143,7 @@ const GWASCaseControl = ({ resetGWASType, refreshWorkflows }) => {
                   current={current}
                 />
               </div>
+              <TourButton stepInfo={stepInfo}></TourButton>
             </Space>
           </React.Fragment>
         </React.Fragment>
@@ -179,6 +189,7 @@ const GWASCaseControl = ({ resetGWASType, refreshWorkflows }) => {
             selectedHare={selectedHare}
             handleHareChange={handleHareChange}
           />
+          <TourButton stepInfo={stepInfo}></TourButton>
         </React.Fragment>
       );
     case 6: