Merge pull request #1525 from kids-first/next 🚀🚀🚀🚀🚀 Deploys cohort bu…

…ilder & DCF integration! :D 🚀🚀🚀🚀🚀 Deploys cohort builder & DCF integration! :D
kids-first · Mar 30, 2019 · e8074d6 · e8074d6
2 parents 4a49024 + c3e7f57
commit e8074d6
Show file tree

Hide file tree

Showing 28 changed files with 789 additions and 710 deletions.
diff --git a/src/App.js b/src/App.js
@@ -34,7 +34,7 @@ import logo from 'assets/logo-kids-first-data-portal.svg';
 import { requireLogin } from './common/injectGlobals';
 import { withApi } from 'services/api';
 import { initializeApi, ApiContext } from 'services/api';
-import { DCF, GEN3 } from 'common/constants';
+import { DCF, GEN3, COHORT_BUILDER_PATH } from 'common/constants';
 
 const forceSelectRole = ({ loggedInUser, isLoadingUser, WrapperPage = Page, ...props }) => {
   if (!loggedInUser && requireLogin) {
@@ -95,7 +95,7 @@ const App = compose(
         <Route path="/auth-redirect" exact component={AuthRedirect} />
         <Route path="/redirected" exact component={() => null} />
         <Route
-          path="/virtualStudies"
+          path={COHORT_BUILDER_PATH}
           exact
           render={props =>
             forceSelectRole({

diff --git a/src/common/constants.js b/src/common/constants.js
@@ -78,13 +78,20 @@ export const FENCES = [GEN3, DCF];
 export const CAVATICA = 'cavatica';
 export const SERVICES = [...FENCES, CAVATICA];
 
+export const CAVATICA_DATASET_MAPPING = {
+  [DCF]: 'sevenbridges/target',
+  [GEN3]: 'sevenbridges/kids-first',
+};
+
 export const GOOGLE = 'google';
 export const FACEBOOK = 'facebook';
 
 export const UI_VERSION = packageJson.version;
 
 export const EGO_JWT_KEY = 'EGO_JWT';
 
+export const COHORT_BUILDER_PATH = '/explore';
+
 export const DISEASE_AREAS = [
   'Patients With Both Childhood Cancer And Birth Defects',
   'Childhood Cancer',

diff --git a/src/components/CohortBuilder/Summary/FileBreakdown/queries.js b/src/components/CohortBuilder/Summary/FileBreakdown/queries.js
@@ -19,9 +19,9 @@ export const toFileSqon = participantSqon => {
 
 export const dataTypesExpStratPairsQuery = participantSqon => ({
   query: gql`
-    query FileBreakdownQuery($sqon: JSON) {
+    query FileBreakdownQuery {
       file {
-        aggregations(aggregations_filter_themselves: true, include_missing: true, filters: $sqon) {
+        aggregations(aggregations_filter_themselves: true, include_missing: true) {
           sequencing_experiments__experiment_strategy {
             buckets {
               key
@@ -36,7 +36,7 @@ export const dataTypesExpStratPairsQuery = participantSqon => ({
       }
     }
   `,
-  variables: { sqon: toFileSqon(participantSqon) },
+  variables: {},
   transform: data => {
     const experimentStrategies = get(
       data,

diff --git a/src/components/CohortBuilder/Summary/SurvivalChart.js b/src/components/CohortBuilder/Summary/SurvivalChart.js
@@ -9,6 +9,8 @@ import { withApi } from 'services/api';
 import { fetchSurvivalData } from 'services/arranger';
 import md5 from 'md5';
 import CardContent from 'uikit/Card/CardContent';
+import { SizeProvider } from 'components/Utils';
+import PromptMessage from 'uikit/PromptMessage';
 
 const SurvivalChartWrapper = styled('div')`
   margin-top: 10px;
@@ -183,8 +185,6 @@ const StyledSurvivalPlot = styled(SurvivalPlot)`
   }
 `;
 
-//     transform: translatey(7px);
-
 class SurvivalChart extends React.Component {
   constructor(props) {
     super(props);
@@ -288,33 +288,46 @@ class SurvivalChart extends React.Component {
     };
 
     return (
-      <CohortCard
-        Content={SurvivalCardContent}
-        title="Overall Survival"
-        loading={this.state.isLoading}
-      >
-        <SurvivalChartWrapper>
-          <SurvivalChartHeader>
-            Applicable survival data for <a>{get(data, '[0].donors.length', 0)} Participants</a>
-          </SurvivalChartHeader>
-          <StyledSurvivalPlot
-            dataSets={data}
-            onMouseLeaveDonors={this.handleMouseLeaveDonors}
-            onMouseEnterDonors={this.handleMouseEnterDonors}
-          />
-          <div style={tooltipStyle}>
-            <strong>{donor.id}</strong>
-            <div>Survival Rate: {(donor.survivalEstimate * 100).toFixed(2)}%</div>
-            {donor.isCensored ? (
-              <div>Censored Survival Time: {donor.time} days (censored)</div>
-            ) : (
-              <div>Survival Time: {donor.time} days </div>
-            )}
-          </div>
-        </SurvivalChartWrapper>
-      </CohortCard>
+      <SizeProvider>
+        {({ size }) => (
+          <CohortCard
+            Content={SurvivalCardContent}
+            title="Overall Survival"
+            loading={this.state.isLoading}
+          >
+            <SurvivalChartWrapper>
+              <SurvivalChartHeader>
+                Applicable survival data for <a>{get(data, '[0].donors.length', 0)} Participants</a>
+              </SurvivalChartHeader>
+
+              <StyledSurvivalPlot
+                size={size}
+                dataSets={data}
+                onMouseLeaveDonors={this.handleMouseLeaveDonors}
+                onMouseEnterDonors={this.handleMouseEnterDonors}
+              />
+
+              <div style={tooltipStyle}>
+                <strong>{donor.id}</strong>
+                <div>Survival Rate: {(donor.survivalEstimate * 100).toFixed(2)}%</div>
+                {donor.isCensored ? (
+                  <div>Censored Survival Time: {donor.time} days (censored)</div>
+                ) : (
+                  <div>Survival Time: {donor.time} days </div>
+                )}
+              </div>
+            </SurvivalChartWrapper>
+          </CohortCard>
+        )}
+      </SizeProvider>
     );
   }
 }
 
-export default compose(withApi)(SurvivalChart);
+// export default compose(withApi)(SurvivalChart);
+
+export default () => (
+  <CohortCard Content={SurvivalCardContent} title="Overall Survival">
+    <PromptMessage heading={'BETA'} content={<div>Visualization coming soon</div>} />
+  </CohortCard>
+);
diff --git a/src/components/CohortBuilder/index.js b/src/components/CohortBuilder/index.js
@@ -24,6 +24,7 @@ import VirtualStudyListProvider from './VirtualStudyListProvider';
 import SaveVirtualStudiesModalContent from './SaveVirtualStudiesModalContent';
 import SaveIcon from 'icons/SaveIcon';
 import ShareQuery from 'components/ShareSaveQuery/ShareQuery';
+import PromptMessage from 'uikit/PromptMessage';
 
 const Container = styled('div')`
   width: 100%;
@@ -49,11 +50,6 @@ const FullWidthWhite = styled('div')`
   margin-top: 21px;
 `;
 
-const CategoriesContainer = styled('div')`
-  padding-left: 30px;
-  padding-right: 30px;
-`;
-
 const SqonBuilderContainer = styled('div')`
   padding-top: 20px;
   padding-bottom: 20px;
@@ -64,7 +60,12 @@ const SqonBuilderContainer = styled('div')`
 `;
 
 const Content = styled(ContentBar)`
-  padding: 0 20px 0 32px;
+  padding-left: 30px;
+  padding-right: 30px;
+`;
+
+const StylePromptMessage = styled(PromptMessage)`
+  width: 100%;
 `;
 
 const SaveButtonText = styled('span')`
@@ -193,6 +194,16 @@ const CohortBuilder = compose(
 
           return (
             <Container>
+              <StylePromptMessage
+                content={
+                  <div>
+                    <strong>BETA RELEASE: </strong>Use the cohort builder to create virtual studies.
+                    You can query participant variables including demographic, clinical, and data
+                    categories. It's in progress, so you may experience some bugs. To give feedback,
+                    click the button in the bottom right corner. All feedback is welcome!
+                  </div>
+                }
+              />
               <Content>
                 <Row>
                   <Heading>Explore Data</Heading>
@@ -235,9 +246,9 @@ const CohortBuilder = compose(
                 </Row>
               </Content>
               <FullWidthWhite>
-                <CategoriesContainer>
+                <Content>
                   <Categories sqon={executableSqon} onSqonUpdate={categoriesSqonUpdate} />
-                </CategoriesContainer>
+                </Content>
                 <SqonBuilderContainer>
                   <SqonBuilder
                     syntheticSqons={syntheticSqons}

diff --git a/src/components/EntityPage/File/Download.js b/src/components/EntityPage/File/Download.js
@@ -40,11 +40,12 @@ const StyledDownloadButton = styled(DownloadButton)`
 const Download = compose(
   withApi,
   withTheme,
-)(({ kfId, theme, disabled, ...props }) =>
+)(({ kfId, fence, theme, disabled, ...props }) =>
   disabled ? (
     <Fragment>
       <DownloadFileButton
         kfId={kfId}
+        fence={fence}
         render={props => <StyledDownloadButton {...props} disabled />}
         {...props}
       />
@@ -64,6 +65,7 @@ const Download = compose(
   ) : (
     <DownloadFileButton
       kfId={kfId}
+      fence={fence}
       render={props => <StyledDownloadButton {...props} />}
       {...props}
     />

diff --git a/src/components/EntityPage/File/index.js b/src/components/EntityPage/File/index.js
@@ -65,10 +65,10 @@ const fileQuery = `query ($sqon: JSON) {
           file_format
           file_name
           is_harmonized
-          kf_id
           latest_did
           modified_at
           reference_genome
+          repository
           size
           sequencing_experiments {
             hits {
@@ -313,6 +313,7 @@ const FileEntity = compose(withTheme)(
                   });
                 }}
                 kfId={data.kf_id}
+                fence={data.repository}
                 disabled={!hasFilePermission}
               />
               <ShareButton link={window.location.href} />