add external links (#8)

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

Hide file tree

Showing 6 changed files with 225 additions and 15 deletions.
diff --git a/src/app.css b/src/app.css
@@ -69,4 +69,9 @@ td.left > .dynamic_field {
   width: 50%;
   height: 100%;
   margin: 0;
-}
+}
+.external_link_icon {
+  position: relative;
+  top: -1px;
+  margin-left: 5px;
+}
diff --git a/src/disease-info.js b/src/disease-info.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 
 import { toFixed } from 'hetio-frontend-components';
 import { InfoTable } from 'hetio-frontend-components';
@@ -16,8 +18,34 @@ export class DiseaseInfo extends Component {
     const name = disease.disease_name;
     const info = (this.props.diseaseInfo || {}).xref || {};
     const bodyContents = [
-      ['Dis. Ont. id', tooltipText['disease_id'], disease.disease_code],
-      ['EFO id', tooltipText['disease_efo_id'], info.EFO],
+      [
+        'Dis. Ont. id',
+        tooltipText['disease_id'],
+        <a href={'http://www.disease-ontology.org/?id=' + disease.disease_code}>
+          {disease.disease_code}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
+      [
+        'EFO id',
+        tooltipText['disease_efo_id'],
+        <a
+          href={
+            'https://www.ebi.ac.uk/ols/ontologies/EFO/terms?obo_id=EFO:' + info.EFO
+          }
+        >
+          {info.EFO}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
       ['UMLS id', tooltipText['disease_umls_id'], info.UMLS_CUI],
       [
         'pathophysiology',

diff --git a/src/disease-prediction-info.js b/src/disease-prediction-info.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 
 import { toFixed } from 'hetio-frontend-components';
 import { InfoTable } from 'hetio-frontend-components';
@@ -21,10 +23,65 @@ export class DiseasePredictionInfo extends Component {
         tooltipText['gene_aliases'],
         info.aliases && info.aliases.length ? info.aliases.join(', ') : ''
       ],
-      ['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],
+      [
+        'HGNC id',
+        tooltipText['gene_id'],
+
+        <a
+          href={
+            'https://www.genenames.org/data/gene-symbol-report/#!/hgnc_id/' +
+            diseasePrediction.gene_code
+          }
+        >
+          {diseasePrediction.gene_code}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
+      [
+        'Entrez id',
+        tooltipText['gene_entrez_id'],
+        <a href={'https://www.ncbi.nlm.nih.gov/gene/' + info.entrez}>
+          {info.entrez}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
+      [
+        'Ensembl id',
+        tooltipText['gene_ensembl_id'],
+        <a
+          href={
+            'http://useast.ensembl.org/Homo_sapiens/Gene/Summary?g=' +
+            info.ensembl
+          }
+        >
+          {info.ensembl}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
+      [
+        'Uniprot id',
+        tooltipText['gene_uniprot_id'],
+        <a href={'https://www.uniprot.org/uniprot/' + info.uniprot}>
+          {info.uniprot}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
       ['status', tooltipText['gene_status'], diseasePrediction.status],
       [
         'other assoc',

diff --git a/src/feature-prediction-info.js b/src/feature-prediction-info.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 
 import { toFixed } from 'hetio-frontend-components';
 import { InfoTable } from 'hetio-frontend-components';
@@ -19,9 +21,37 @@ export class FeaturePredictionInfo extends Component {
       [
         'Dis. Ont. id',
         tooltipText['disease_id'],
-        featurePrediction.disease_code
+        <a
+          href={
+            'http://www.disease-ontology.org/?id=' +
+            featurePrediction.disease_code
+          }
+        >
+          {featurePrediction.disease_code}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
+      [
+        'EFO id',
+        tooltipText['disease_efo_id'],
+        <a
+          href={
+            'https://www.ebi.ac.uk/ols/ontologies/EFO/terms?obo_id=EFO:' +
+            info.EFO
+          }
+        >
+          {info.EFO}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
       ],
-      ['EFO id', tooltipText['disease_efo_id'], info.EFO],
       ['UMLS id', tooltipText['disease_umls_id'], info.UMLS_CUI],
       [
         'pathophysiology',

diff --git a/src/gene-info.js b/src/gene-info.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 
 import { toFixed } from 'hetio-frontend-components';
 import { InfoTable } from 'hetio-frontend-components';
@@ -21,10 +23,65 @@ export class GeneInfo extends Component {
         tooltipText['gene_aliases'],
         info.aliases && info.aliases.length ? info.aliases.join(', ') : ''
       ],
-      ['HGNC id', tooltipText['gene_id'], gene.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],
+      [
+        'HGNC id',
+        tooltipText['gene_id'],
+
+        <a
+          href={
+            'https://www.genenames.org/data/gene-symbol-report/#!/hgnc_id/' +
+            gene.gene_code
+          }
+        >
+          {gene.gene_code}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
+      [
+        'Entrez id',
+        tooltipText['gene_entrez_id'],
+        <a href={'https://www.ncbi.nlm.nih.gov/gene/' + info.entrez}>
+          {info.entrez}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
+      [
+        'Ensembl id',
+        tooltipText['gene_ensembl_id'],
+        <a
+          href={
+            'http://useast.ensembl.org/Homo_sapiens/Gene/Summary?g=' +
+            info.ensembl
+          }
+        >
+          {info.ensembl}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
+      [
+        'Uniprot id',
+        tooltipText['gene_uniprot_id'],
+        <a href={'https://www.uniprot.org/uniprot/' + info.uniprot}>
+          {info.uniprot}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
       ['associations', tooltipText['gene_associations'], gene.associations],
       [
         'mean prediction',

diff --git a/src/gene-prediction-info.js b/src/gene-prediction-info.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 
 import { toFixed } from 'hetio-frontend-components';
 import { InfoTable } from 'hetio-frontend-components';
@@ -16,8 +18,39 @@ export class GenePredictionInfo extends Component {
     const name = genePrediction.disease_name;
     const info = (this.props.genePredictionInfo || {}).xref || {};
     const bodyContents = [
-      ['Dis. Ont. id', tooltipText['disease_id'], genePrediction.disease_code],
-      ['EFO id', tooltipText['disease_efo_id'], info.EFO],
+      [
+        'Dis. Ont. id',
+        tooltipText['disease_id'],
+        <a
+          href={
+            'http://www.disease-ontology.org/?id=' + genePrediction.disease_code
+          }
+        >
+          {genePrediction.disease_code}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
+      [
+        'EFO id',
+        tooltipText['disease_efo_id'],
+        <a
+          href={
+            'https://www.ebi.ac.uk/ols/ontologies/EFO/terms?obo_id=EFO:' +
+            info.EFO
+          }
+        >
+          {info.EFO}
+          <FontAwesomeIcon
+            className='external_link_icon'
+            icon={faExternalLinkAlt}
+            size='xs'
+          />
+        </a>
+      ],
       ['UMLS id', tooltipText['disease_umls_id'], info.UMLS_CUI],
       [
         'pathophysiology',