Feat/vadc sprint16 (#1588)

* Bugfix/prevent gwas app undefined request (#1582) * bugfix(preventGWASAppUndefinedRequest): initial commit * bugfix(preventGWASAppUndefinedRequest): make check for undefined more exact * bugfix(preventGWASAppUndefinedRequest): made comment more clear * Bugfix/gwas app storybook styles (#1583) * bugfix(gwasAppStorybookStyles): Added wrapping divs with className and inline style to make CustomDichotomousCoveriates match styling in app * bugfix(gwasAppStorybookStyles): Removed unneeded stylesheet and moved styles to GWASApp css file. Adjust height of spinner so looks nicer when loading dropdown bars. Added custom styling for storybooks * bugfix(gwasAppStorybookStyles): fixed ESLINT issues * bugfix(gwasAppStorybookStyles): moved styles to Covariates.css * bugfix(gwasAppStorybookStyles): Moved select-container styles to GWASApp.css * bugfix(gwasAppStorybookStyles): Fixed imports * bugfix(gwasAppStorybookStyles): Fixed another import * bugfix(gwasAppStorybookStyles): Removed ref to app level style sheet from SelectOutcome.jsx
uc-cdis · Aug 26, 2024 · f27faa1 · f27faa1
1 parent 7408950
commit f27faa1
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 48 deletions.
diff --git a/src/Analysis/GWASApp/Components/Covariates/ContinuousCovariates.stories.jsx b/src/Analysis/GWASApp/Components/Covariates/ContinuousCovariates.stories.jsx
@@ -3,37 +3,43 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { rest } from 'msw';
 import ContinuousCovariates from './ContinuousCovariates';
 import { SourceContextProvider } from '../../Utils/Source';
+import '../../GWASApp.css';
 
 export default {
   title: 'Tests3/GWASApp/ContinuousCovariates',
   component: ContinuousCovariates,
 };
 
 // useful examples: https://github.com/mswjs/msw-storybook-addon/tree/main/packages/docs/src/demos/react-query
-
 const mockedQueryClient = new QueryClient();
 
 const Template = () => {
   return (
     <QueryClientProvider client={mockedQueryClient}>
       <SourceContextProvider>
-        <div className='GWASApp'>
-          <ContinuousCovariates
-            selectedStudyPopulationCohort={{ cohort_definition_id: 123 }}
-            selectedCovariates={[]}
-            covariates={[]}
-            outcome={null}
-            handleClose={() => {
-              console.log('close');
-            }}
-            handleSelect={(chosenCovariate) => {
-              console.log('chosen covariate:', chosenCovariate);
-            }}
-            dispatch={(payload) => {
-              console.log('payload:', payload);
-            }}
-            submitButtonLabel={'Add'}
-          />
+        <div className='GWASApp' style={{ background: '#f5f5f5' }}>
+          <div className='steps-content'>
+            <div className='GWASUI-double-column'>
+              <div className='select-container' style={{ background: '#fff' }}>
+                <ContinuousCovariates
+                  selectedStudyPopulationCohort={{ cohort_definition_id: 123 }}
+                  selectedCovariates={[]}
+                  covariates={[]}
+                  outcome={null}
+                  handleClose={() => {
+                    console.log('close');
+                  }}
+                  handleSelect={(chosenCovariate) => {
+                    console.log('chosen covariate:', chosenCovariate);
+                  }}
+                  dispatch={(payload) => {
+                    console.log('payload:', payload);
+                  }}
+                  submitButtonLabel={'Add'}
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </SourceContextProvider>
     </QueryClientProvider>

diff --git a/src/Analysis/GWASApp/Components/Covariates/CustomDichotomousCovariates.jsx b/src/Analysis/GWASApp/Components/Covariates/CustomDichotomousCovariates.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import SelectCohortDropDown from '../SelectCohort/SelectCohortDropDown';
 import CohortsOverlapDiagram from '../Diagrams/CohortsOverlapDiagram/CohortsOverlapDiagram';
 import './Covariates.css';
-import '../../GWASApp.css';
 
 const CustomDichotomousCovariates = ({
   dispatch,

diff --git a/src/Analysis/GWASApp/Components/Covariates/CustomDichotomousCovariates.stories.jsx b/src/Analysis/GWASApp/Components/Covariates/CustomDichotomousCovariates.stories.jsx
@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { rest } from 'msw';
 import CustomDichotomousCovariates from './CustomDichotomousCovariates';
 import { SourceContextProvider } from '../../Utils/Source';
+import '../../GWASApp.css';
 
 export default {
   title: 'Tests3/GWASApp/CustomDichotomousCovariates',
@@ -14,7 +15,15 @@ const mockedQueryClient = new QueryClient();
 const Template = (args) => (
   <QueryClientProvider client={mockedQueryClient}>
     <SourceContextProvider>
-      <CustomDichotomousCovariates {...args} />
+      <div className='GWASApp' style={{ background: '#f5f5f5' }}>
+        <div className='steps-content'>
+          <div className='GWASUI-double-column'>
+            <div className='select-container' style={{ background: '#fff' }}>
+              <CustomDichotomousCovariates {...args} />
+            </div>
+          </div>
+        </div>
+      </div>
     </SourceContextProvider>
   </QueryClientProvider>
 );

diff --git a/src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx b/src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx
@@ -14,10 +14,12 @@ const CohortDefinitions = ({
   selectedTeamProject,
 }) => {
   const { source } = useSourceContext();
+
   const cohorts = useQuery(
     ['cohortdefinitions', source, selectedTeamProject],
     () => fetchCohortDefinitions(source, selectedTeamProject),
-    queryConfig,
+    // only call this once the source is not undefined
+    { enabled: source !== undefined, ...queryConfig },
   );
   const fetchedCohorts = useFetch(cohorts, 'cohort_definitions_and_stats');
   const displayedCohorts = useFilter(fetchedCohorts, searchTerm, 'cohort_name');

diff --git a/src/Analysis/GWASApp/GWASApp.css b/src/Analysis/GWASApp/GWASApp.css
@@ -203,6 +203,7 @@
   width: 988px;
   background: #fff;
   text-align: center;
+  border: 1px solid #e2e2e3;
 }
 
 .GWASApp .GWASUI-selectionUI button {
@@ -262,3 +263,30 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+
+/* Shared select container styles */
+.GWASApp .select-container {
+  padding: 20px;
+  background: #fff;
+  height: 519px;
+}
+
+.GWASApp .select-container .ant-table-content {
+  max-height: 390px;
+  overflow-y: auto;
+}
+
+.GWASApp .select-container .GWASUI-emptyTable {
+  border: 2px solid #e9eef2;
+  min-height: 450px;
+}
+
+.GWASApp .select-container .GWASUI-flexRow {
+  width: 100%;
+}
+
+.GWASApp .select-container .custom-dichotomous-covariates .GWASUI-spinnerContainer,
+.GWASApp .select-container .custom-dichotomous-covariates .GWASUI-emptyTable {
+  min-height: inherit;
+  height: inherit;
+}
diff --git a/src/Analysis/GWASApp/Steps/SelectOutcome/SelectOutcome.css b/src/Analysis/GWASApp/Steps/SelectOutcome/SelectOutcome.css
diff --git a/src/Analysis/GWASApp/Steps/SelectOutcome/SelectOutcome.jsx b/src/Analysis/GWASApp/Steps/SelectOutcome/SelectOutcome.jsx
@@ -4,8 +4,6 @@ import ContinuousCovariates from '../../Components/Covariates/ContinuousCovariat
 import CovariatesCardsList from '../../Components/Covariates/CovariatesCardsList';
 import CustomDichotomousCovariates from '../../Components/Covariates/CustomDichotomousCovariates';
 import ACTIONS from '../../Utils/StateManagement/Actions';
-import './SelectOutcome.css';
-import '../../GWASApp.css';
 
 const SelectOutcome = ({
   dispatch,

diff --git a/src/Analysis/GWASApp/Steps/SelectStudyPopulation/SelectStudyPopulation.jsx b/src/Analysis/GWASApp/Steps/SelectStudyPopulation/SelectStudyPopulation.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ACTIONS from '../../Utils/StateManagement/Actions';
-import CohortSelect from '../../Components/SelectCohort/SelectCohort';
+import SelectCohort from '../../Components/SelectCohort/SelectCohort';
 
 const SelectStudyPopulation = ({ selectedCohort, dispatch, selectedTeamProject }) => {
   const handleStudyPopulationSelect = (selectedRow) => {
@@ -13,7 +13,7 @@ const SelectStudyPopulation = ({ selectedCohort, dispatch, selectedTeamProject }
 
   return (
     <div data-tour='cohort-select'>
-      <CohortSelect
+      <SelectCohort
         selectedCohort={selectedCohort}
         handleCohortSelect={handleStudyPopulationSelect}
         selectedTeamProject={selectedTeamProject}