feature-prediction-info.js

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';

import tooltipText from './tooltip-text.json';

export class FeaturePredictionInfo extends Component {
  // display component
  render() {
    if (!this.props.feature || !this.props.featurePrediction)
      return <></>;

    const featurePrediction = this.props.featurePrediction;
    const name = featurePrediction.disease_name;
    const info = (this.props.featurePredictionInfo || {}).xref || {};
    const bodyContents = [
      [
        'Dis. Ont. id',
        tooltipText['disease_id'],
        <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>
      ],
      ['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
      ]
    ];

    return (
      <div
        className='app_section'
        style={{ display: this.props.visible ? 'block' : 'none' }}
      >
        <hr />
        <p className='left'>
          Info about{' '}
          <b>
            <i>{name}</i>
          </b>
        </p>
        <InfoTable bodyContents={bodyContents} />
      </div>
    );
  }
}