add tooltips and fix graph not loading bug (#7)

hetio · Aug 12, 2019 · 4fc3a79 · 4fc3a79
1 parent d89baaa
commit 4fc3a79
Show file tree

Hide file tree

Showing 16 changed files with 246 additions and 48 deletions.
diff --git a/src/app.js b/src/app.js
@@ -161,20 +161,25 @@ export class App extends Component {
           className='tab_button'
           disabled={this.state.tab !== 'diseases'}
           onClick={() => this.setTab('diseases')}
+          tooltipText='Select a disease and show predictions for all genes'
         >
           Diseases
         </Button>
         <Button
           className='tab_button'
           disabled={this.state.tab !== 'genes'}
           onClick={() => this.setTab('genes')}
+          tooltipText='Select a gene and show predictions for all diseases'
         >
           Genes
         </Button>
         <Button
           className='tab_button'
           disabled={this.state.tab !== 'features'}
           onClick={() => this.setTab('features')}
+          tooltipText='Browse features that measure how common different types
+          of paths (metapaths) that connect genes to disease are and their
+          ability to predict associations'
         >
           Features
         </Button>
@@ -381,7 +386,10 @@ async function loadStateFromUrl(state) {
         );
         newState = {
           ...newState,
-          ...(await setDiseasePrediction(newState.diseasePrediction))
+          ...(await setDiseasePrediction(
+            newState.disease,
+            newState.diseasePrediction
+          ))
         };
       }
     }
@@ -399,7 +407,7 @@ async function loadStateFromUrl(state) {
         );
         newState = {
           ...newState,
-          ...(await setGenePrediction(newState.genePrediction))
+          ...(await setGenePrediction(newState.gene, newState.genePrediction))
         };
       }
     }

diff --git a/src/disease-contributions.js b/src/disease-contributions.js
@@ -8,6 +8,9 @@ export class DiseaseContributions extends Component {
     if (!this.props.disease || !this.props.diseasePrediction)
       return <></>;
 
+    const geneName = (this.props.diseasePrediction || {}).gene_symbol || '';
+    const diseaseName = (this.props.disease || {}).disease_name || '';
+
     return (
       <div
         className='app_section'
@@ -17,9 +20,15 @@ export class DiseaseContributions extends Component {
         <p className='left'>
           Contributions for{' '}
           <b>
-            <i>{(this.props.diseasePrediction || {}).gene_symbol || ''}</i>
+            <i>{geneName}</i>
           </b>
         </p>
+        <p className='small light left'>
+          This chart shows the contribution of each feature towards the overall
+          prediction, where the contribution equals the feature coefficient from
+          the logistic ridge regression model times the feature value computed
+          between the selected gene and disease.
+        </p>
         <Chart
           chartType='BarChart'
           width='100%'
@@ -28,11 +37,22 @@ export class DiseaseContributions extends Component {
           options={{
             legend: 'none',
             backgroundColor: 'none',
+            title:
+              'Components of the predicted association between ' +
+              diseaseName +
+              ' and ' +
+              geneName,
+            hAxis: {
+              title: 'Contribution'
+            },
+            vAxis: {
+              title: 'Feature'
+            },
             chartArea: {
               left: '20%',
-              top: '0',
+              top: '50',
               width: '80%',
-              height: '480'
+              height: '400'
             }
           }}
         />

diff --git a/src/disease-info.js b/src/disease-info.js
@@ -4,6 +4,8 @@ import { Component } from 'react';
 import { toFixed } from 'hetio-frontend-components';
 import { InfoTable } from 'hetio-frontend-components';
 
+import tooltipText from './tooltip-text.json';
+
 export class DiseaseInfo extends Component {
   // display component
   render() {
@@ -14,12 +16,25 @@ export class DiseaseInfo extends Component {
     const name = disease.disease_name;
     const info = (this.props.diseaseInfo || {}).xref || {};
     const bodyContents = [
-      ['Dis. Ont. id', '', disease.disease_code],
-      ['EFO id', '', info.EFO],
-      ['UMLS id', '', info.UMLS_CUI],
-      ['pathophysiology', '', disease.pathophysiology],
-      ['associations', '', disease.associations],
-      ['auroc', '', toFixed(disease.auroc * 100) + '%', disease.auroc]
+      ['Dis. Ont. id', tooltipText['disease_id'], disease.disease_code],
+      ['EFO id', tooltipText['disease_efo_id'], info.EFO],
+      ['UMLS id', tooltipText['disease_umls_id'], info.UMLS_CUI],
+      [
+        'pathophysiology',
+        tooltipText['disease_pathophysiology'],
+        disease.pathophysiology
+      ],
+      [
+        'associations',
+        tooltipText['disease_associations'],
+        disease.associations
+      ],
+      [
+        'auroc',
+        tooltipText['auroc'],
+        toFixed(disease.auroc * 100) + '%',
+        disease.auroc
+      ]
     ];
 
     return (

diff --git a/src/disease-prediction-info.js b/src/disease-prediction-info.js
@@ -4,6 +4,8 @@ import { Component } from 'react';
 import { toFixed } from 'hetio-frontend-components';
 import { InfoTable } from 'hetio-frontend-components';
 
+import tooltipText from './tooltip-text.json';
+
 export class DiseasePredictionInfo extends Component {
   // display component
   render() {
@@ -16,24 +18,28 @@ export class DiseasePredictionInfo extends Component {
     const bodyContents = [
       [
         'aliases',
-        '',
+        tooltipText['gene_aliases'],
         info.aliases && info.aliases.length ? info.aliases.join(', ') : ''
       ],
-      ['HGNC id', '', diseasePrediction.gene_code],
-      ['Entrez id', '', info.entrez],
-      ['Ensembl id', '', info.ensembl],
-      ['Uniprot id', '', info.uniprot],
-      ['status', '', diseasePrediction.status],
-      ['other assoc', '', diseasePrediction.other_associations],
+      ['HGNC id', tooltipText['gene_id'], diseasePrediction.gene_code],
+      ['Entrez id', tooltipText['gene_entrez_id'], info.entrez],
+      ['Ensembl id', tooltipText['gene_ensembl_id'], info.ensembl],
+      ['Uniprot id', tooltipText['gene_uniprot_id'], info.uniprot],
+      ['status', tooltipText['gene_status'], diseasePrediction.status],
+      [
+        'other assoc',
+        tooltipText['gene_other_associations'],
+        diseasePrediction.other_associations
+      ],
       [
         'mean prediction',
-        '',
+        tooltipText['gene_mean_prediction'],
         toFixed(diseasePrediction.mean_prediction) + '%',
         toFixed(diseasePrediction.mean_prediction / 100, 4)
       ],
       [
         'prediction',
-        '',
+        tooltipText['gene_prediction'],
         toFixed(diseasePrediction.prediction) + '%',
         toFixed(diseasePrediction.prediction / 100, 4)
       ]

diff --git a/src/disease-predictions.js b/src/disease-predictions.js
@@ -14,6 +14,8 @@ import { toFixed } from 'hetio-frontend-components';
 import { toGradient } from 'hetio-frontend-components';
 import { compareObjects } from 'hetio-frontend-components';
 
+import tooltipText from './tooltip-text.json';
+
 export class DiseasePredictions extends Component {
   // initialize component
   constructor() {
@@ -104,6 +106,15 @@ export class DiseasePredictions extends Component {
             'small',
             'small'
           ]}
+          headTooltips={[
+            '',
+            tooltipText['gene_id'],
+            tooltipText['gene_name'],
+            tooltipText['gene_status'],
+            tooltipText['gene_other_associations'],
+            tooltipText['gene_mean_prediction'],
+            tooltipText['gene_prediction']
+          ]}
           bodyTooltips={[
             (datum, field, value) =>
               'See contributions and info for "' + datum.gene_symbol + '"'

diff --git a/src/diseases.js b/src/diseases.js
@@ -14,6 +14,8 @@ import { toFixed } from 'hetio-frontend-components';
 import { toGradient } from 'hetio-frontend-components';
 import { compareObjects } from 'hetio-frontend-components';
 
+import tooltipText from './tooltip-text.json';
+
 export class Diseases extends Component {
   // initialize component
   constructor() {
@@ -86,6 +88,14 @@ export class Diseases extends Component {
             'small',
             'small'
           ]}
+          headTooltips={[
+            '',
+            tooltipText['disease_id'],
+            tooltipText['disease_name'],
+            tooltipText['disease_pathophysiology'],
+            tooltipText['disease_associations'],
+            tooltipText['auroc']
+          ]}
           bodyTooltips={[
             (datum, field, value) =>
               'See predictions and info for "' + datum.disease_name + '"'

diff --git a/src/feature-info.js b/src/feature-info.js
@@ -4,6 +4,8 @@ import { Component } from 'react';
 import { toFixed } from 'hetio-frontend-components';
 import { InfoTable } from 'hetio-frontend-components';
 
+import tooltipText from './tooltip-text.json';
+
 export class FeatureInfo extends Component {
   // display component
   render() {
@@ -14,11 +16,20 @@ export class FeatureInfo extends Component {
     const name = feature.metapath;
     const info = this.props.featureInfo || {};
     const bodyContents = [
-      ['description', '', info.description],
-      ['metapath', '', info.metapath_long],
-      ['metric', '', info.metric],
-      ['auroc', '', toFixed(feature.auroc * 100) + '%', feature.auroc],
-      ['stand coef', '', feature.standardized_coefficient]
+      ['description', tooltipText['metapath_description'], info.description],
+      ['metapath', tooltipText['metapath_full'], info.metapath_long],
+      ['metric', tooltipText['metapath_metric'], info.metric],
+      [
+        'auroc',
+        tooltipText['metapath_auroc'],
+        toFixed(feature.auroc * 100) + '%',
+        feature.auroc
+      ],
+      [
+        'stand coef',
+        tooltipText['metapath_coefficient'],
+        feature.standardized_coefficient
+      ]
     ];
 
     return (

diff --git a/src/feature-prediction-info.js b/src/feature-prediction-info.js
@@ -4,6 +4,8 @@ import { Component } from 'react';
 import { toFixed } from 'hetio-frontend-components';
 import { InfoTable } from 'hetio-frontend-components';
 
+import tooltipText from './tooltip-text.json';
+
 export class FeaturePredictionInfo extends Component {
   // display component
   render() {
@@ -14,20 +16,32 @@ export class FeaturePredictionInfo extends Component {
     const name = featurePrediction.disease_name;
     const info = (this.props.featurePredictionInfo || {}).xref || {};
     const bodyContents = [
-      ['Dis. Ont. id', '', featurePrediction.disease_code],
-      ['EFO id', '', info.EFO],
-      ['UMLS id', '', info.UMLS_CUI],
-      ['pathophysiology', '', featurePrediction.pathophysiology],
-      ['associations', '', featurePrediction.associations],
+      [
+        'Dis. Ont. id',
+        tooltipText['disease_id'],
+        featurePrediction.disease_code
+      ],
+      ['EFO id', tooltipText['disease_efo_id'], info.EFO],
+      ['UMLS id', tooltipText['disease_umls_id'], info.UMLS_CUI],
+      [
+        'pathophysiology',
+        tooltipText['disease_pathophysiology'],
+        featurePrediction.pathophysiology
+      ],
+      [
+        'associations',
+        tooltipText['disease_associations'],
+        featurePrediction.associations
+      ],
       [
         'auroc',
-        '',
+        tooltipText['auroc'],
         toFixed(featurePrediction.auroc * 100) + '%',
         featurePrediction.auroc
       ],
       [
         'model auroc',
-        '',
+        tooltipText['model_auroc'],
         toFixed(featurePrediction.model_auroc * 100) + '%',
         featurePrediction.model_auroc
       ]

diff --git a/src/feature-predictions.js b/src/feature-predictions.js
@@ -14,6 +14,8 @@ import { toFixed } from 'hetio-frontend-components';
 import { toGradient } from 'hetio-frontend-components';
 import { compareObjects } from 'hetio-frontend-components';
 
+import tooltipText from './tooltip-text.json';
+
 export class FeaturePredictions extends Component {
   // initialize component
   constructor() {
@@ -104,6 +106,15 @@ export class FeaturePredictions extends Component {
             'small',
             'small'
           ]}
+          headTooltips={[
+            '',
+            tooltipText['disease_id'],
+            tooltipText['disease_name'],
+            tooltipText['disease_pathophysiology'],
+            tooltipText['disease_associations'],
+            tooltipText['auroc'],
+            tooltipText['model_auroc']
+          ]}
           bodyTooltips={[
             (datum, field, value) => 'See info for "' + datum.disease_name + '"'
           ]}

diff --git a/src/features.js b/src/features.js
@@ -14,6 +14,8 @@ import { toFixed } from 'hetio-frontend-components';
 import { toGradient } from 'hetio-frontend-components';
 import { compareObjects } from 'hetio-frontend-components';
 
+import tooltipText from './tooltip-text.json';
+
 export class Features extends Component {
   // initialize component
   constructor() {
@@ -76,6 +78,13 @@ export class Features extends Component {
             { width: 75 }
           ]}
           headClasses={['', 'small left', 'small left', 'small', 'small']}
+          headTooltips={[
+            '',
+            tooltipText['metapath_abbreviation'],
+            tooltipText['metapath_metric'],
+            tooltipText['metapath_auroc'],
+            tooltipText['metapath_coefficient']
+          ]}
           bodyTooltips={[
             (datum, field, value) =>
               'See predictions and info for "' + datum.metapath + '"'