Merge branch 'development' into 3.0.0

Author: maxkfranz

src/client/features/enrichment/index.js

@@ -6,20 +6,23 @@ const classNames = require('classnames');
 const queryString = require('query-string');
 
 const EnrichmentToolbar = require('./enrichment-toolbar');
-const { EmptyNetwork, PcLogoLink, CytoscapeNetwork, Popover } = require('../../common/components/');
+const { PcLogoLink, CytoscapeNetwork, Popover } = require('../../common/components/');
 
 const CytoscapeService = require('../../common/cy/');
 const { ServerAPI } = require('../../services');
 
 const { enrichmentLayout, enrichmentStylesheet, bindEvents } = require('./cy');
+const { TimeoutError } = require('../../../util');
+const { ErrorMessage } = require('../../common/components/error-message');
+
 class Enrichment extends React.Component {
   constructor(props){
     super(props);
 
     this.state = {
       cySrv: new CytoscapeService({ style: enrichmentStylesheet, onMount: bindEvents }),
       sources: _.uniq(queryString.parse(props.location.search).source.split(',')),
-      errored: false,
+      error: null,
       loading: true,
       networkEmpty: false
     };
@@ -57,7 +60,7 @@ class Enrichment extends React.Component {
         });
       } catch( e ){
         this.setState({
-          errored: true,
+          error: e,
           loading: false
         });
       }
@@ -67,9 +70,18 @@ class Enrichment extends React.Component {
   }
 
   render(){
-    let { loading, cySrv, networkEmpty, sources } = this.state;
+    let { loading, cySrv, networkEmpty, sources, error } = this.state;
     let titleContent = [];
 
+    let errorMessage;
+    if( networkEmpty ) {
+      errorMessage = h(ErrorMessage, { title: 'No results to display.', body: 'Try different genes in your search.' , footer: null, logo: true } );
+    } else if( error instanceof TimeoutError ) {
+      errorMessage = h( ErrorMessage, { title: 'This is taking longer that we expected', body: 'Try again later.', logo: true } );
+    } else if( error ) {
+      errorMessage = h( ErrorMessage, { logo: true } );
+    }
+
     if( sources.length === 1 ){
       titleContent.push(h('span', `Pathways enriched for ${sources[0]}`));
     }
@@ -95,17 +107,15 @@ class Enrichment extends React.Component {
       h(EnrichmentToolbar, { cySrv, sources: this.state.sources, controller: this })
     ]);
 
-    return h('div.enrichment', [
-
+    return !errorMessage ? [ h('div.enrichment', [
       h(Loader, { loaded: !loading, options: { left: '50%', color: '#16a085' }}, [
         appBar
        ]),
-      networkEmpty ? h(EmptyNetwork, { msg: 'No results to display', showPcLink: false} ) : null,
       h(CytoscapeNetwork, {
         cySrv,
         className: classNames({'network-loading': loading})
       })
-    ]);
+    ]) ]: [errorMessage];
   }
 }
 

src/client/features/search/gene-results-view.js

@@ -4,6 +4,7 @@ const { Link } = require('react-router-dom');
 const queryString = require('query-string');
 const _ = require('lodash');
 
+const MIN_GENE_COUNT_ENRICHMENT = 5;
 const { NS_HGNC_SYMBOL, NS_GENECARDS, NS_NCBI_GENE, NS_UNIPROT } = require('../../../config');
 
 const SUPPORTED_COLLECTIONS = new Map([
@@ -37,24 +38,26 @@ class EntitySummaryBox extends React.Component {
 }
 
 class GeneResultsView extends React.Component {
-  getEnrichmentAppInfo(){
+  getEnrichmentAppInfo( geneResults ){
     let label = `View`;
     let linkPath = '/enrichment';
     let description = 'Explore a network of pathways that contain genes identified in your query.';
     let imageClass = 'enrichment-logo';
     let title = 'Enrichment';
+    let show = geneResults.length >= MIN_GENE_COUNT_ENRICHMENT;
 
-    return { label, title, linkPath, description, imageClass };
+    return { label, title, linkPath, description, imageClass, show };
   }
 
-  getInteractionsAppInfo(){
+  getInteractionsAppInfo( geneResults ){
     let label = `View`;
     let description = 'Visualize interactions between the genes identified in your query.';
     let linkPath = '/interactions';
     let imageClass = 'interactions-logo';
     let title = 'Interactions';
+    let show = geneResults.length > 0;
 
-    return { label, title, linkPath, description, imageClass };
+    return { label, title, linkPath, description, imageClass, show };
   }
 
   render(){
@@ -65,9 +68,6 @@ class GeneResultsView extends React.Component {
     }
 
     let sources = geneResults.map( geneInfo => geneInfo.geneSymbol );
-    let interactionsAppInfo = this.getInteractionsAppInfo( );
-    let enrichmentAppInfo = this.getEnrichmentAppInfo( );
-
     let AppLinkout = appInfo => {
       let { linkPath, imageClass, title, description } = appInfo;
 
@@ -88,6 +88,13 @@ class GeneResultsView extends React.Component {
       ]);
     };
 
+    const appsLinkouts = [
+      this.getInteractionsAppInfo( geneResults ),
+      this.getEnrichmentAppInfo( geneResults )
+    ].map( info => {
+      return info.show ? h( AppLinkout, info ) : null;
+    });
+
     return h('div.search-genes-results', [
       h('h3.search-genes-header', `Recognized genes (${geneResults.length})`),
         h('div.search-genes-list', [
@@ -97,10 +104,7 @@ class GeneResultsView extends React.Component {
             ]);
           })
         ]),
-        h('div.app-linkouts', [
-          h(AppLinkout, interactionsAppInfo),
-          h(AppLinkout, enrichmentAppInfo)
-        ])
+        h( 'div.app-linkouts', appsLinkouts )
     ]);
   }
 }