protvista-uniprot 2.13.2 → 3.0.0

package/src/protvista-uniprot.ts

@@ -1,4 +1,6 @@
 import { LitElement, html, svg } from 'lit';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { customElement } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { frame } from 'timing-functions';
 
@@ -14,68 +16,42 @@ import NightingaleLinegraphTrack from '@nightingale-elements/nightingale-linegra
 import NightingaleSequenceHeatmap from '@nightingale-elements/nightingale-sequence-heatmap';
 import NightingaleFilter from '@nightingale-elements/nightingale-filter';
 
-import { load } from 'data-loader';
 // adapters
-import { transformData as _transformDataFeatureAdapter } from 'protvista-feature-adapter';
-import { transformData as _transformDataProteomicsAdapter } from 'protvista-proteomics-adapter';
-import { transformData as _transformDataStructureAdapter } from 'protvista-structure-adapter';
-import {
-  transformData as _transformDataVariationAdapter,
+import featureAdapter from './adapters/feature-adapter';
+import proteomicsAdapter from './adapters/proteomics-adapter';
+import structureAdapter from './adapters/structure-adapter';
+import variationAdapter, {
   TransformedVariant,
-} from 'protvista-variation-adapter';
-import { transformData as _transformDataVariationGraphAdapter } from './protvista-variation-graph-adapter';
-import { transformData as _transformDataInterproAdapter } from 'protvista-interpro-adapter';
-import { transformData as _transformDataProteomicsPTMApdapter } from './protvista-ptm-exchange';
-import { transformData as _transformDataAlphaFoldConfidenceAdapter } from './protvista-alphafold-confidence';
-import { transformData as _transformDataAlphaMissensePathogenicityAdapter } from './protvista-alphamissense-pathogenicity';
-import { transformData as _transformDataAlphaMissenseHeatmapAdapter } from './protvista-alphamissense-heatmap';
+} from './adapters/variation-adapter';
+import interproAdapter from './adapters/interpro-adapter';
+import variationGraphAdapter from './adapters/variation-graph-adapter';
+import proteomicsPTMApdapter from './adapters/ptm-exchange-adapter';
+import alphaFoldConfidenceAdapter from './adapters/alphafold-confidence-adapter';
+import alphaMissensePathogenicityAdapter from './adapters/alphamissense-pathogenicity-adapter';
+import alphaMissenseHeatmapAdapter from './adapters/alphamissense-heatmap-adapter';
 
+import ProtvistaUniprotStructure from './protvista-uniprot-structure';
+
+import { fetchAll, loadComponent } from './utils';
+
+import filterConfig, { colorConfig } from './filter-config';
 import defaultConfig from './config.json';
-import _ProtvistaUniprotStructure from './protvista-uniprot-structure';
-import { loadComponent } from './loadComponents';
-import _filterConfig, { colorConfig as _colorConfig } from './filterConfig';
-import { NightingaleEvent } from './types/nightingale-components';
 
 import loaderIcon from './icons/spinner.svg';
 import protvistaStyles from './styles/protvista-styles';
 import loaderStyles from './styles/loader-styles';
 
-export const transformDataFeatureAdapter = _transformDataFeatureAdapter;
-export const transformDataProteomicsAdapter = _transformDataProteomicsAdapter;
-export const transformDataStructureAdapter = _transformDataStructureAdapter;
-export const transformDataVariationAdapter = _transformDataVariationAdapter;
-export const transformDataVariationGraphAdapter =
-  _transformDataVariationGraphAdapter;
-export const transformDataInterproAdapter = _transformDataInterproAdapter;
-export const transformDataProteomicsPTMApdapter =
-  _transformDataProteomicsPTMApdapter;
-export const transformDataAlphaFoldConfidenceAdapter =
-  _transformDataAlphaFoldConfidenceAdapter;
-
-export const transformDataAlphaMissensePathogenicityAdapter =
-  _transformDataAlphaMissensePathogenicityAdapter;
-
-export const transformDataAlphaMissenseHeatmapAdapter =
-  _transformDataAlphaMissenseHeatmapAdapter;
-
-export const filterConfig = _filterConfig;
-export const colorConfig = _colorConfig;
-export const ProtvistaUniprotStructure = _ProtvistaUniprotStructure;
-
 const adapters = {
-  'protvista-feature-adapter': transformDataFeatureAdapter,
-  'protvista-interpro-adapter': transformDataInterproAdapter,
-  'protvista-proteomics-adapter': transformDataProteomicsAdapter,
-  'protvista-structure-adapter': transformDataStructureAdapter,
-  'protvista-variation-adapter': transformDataVariationAdapter,
-  'protvista-variation-graph-adapter': transformDataVariationGraphAdapter,
-  'protvista-proteomics-ptm-adapter': transformDataProteomicsPTMApdapter,
-  'protvista-alphafold-confidence-adapter':
-    transformDataAlphaFoldConfidenceAdapter,
-  'protvista-alphamissense-pathogenicity-adapter':
-    transformDataAlphaMissensePathogenicityAdapter,
-  'protvista-alphamissense-heatmap-adapter':
-    transformDataAlphaMissenseHeatmapAdapter,
+  'feature-adapter': featureAdapter,
+  'interpro-adapter': interproAdapter,
+  'proteomics-adapter': proteomicsAdapter,
+  'structure-adapter': structureAdapter,
+  'variation-adapter': variationAdapter,
+  'variation-graph-adapter': variationGraphAdapter,
+  'proteomics-ptm-adapter': proteomicsPTMApdapter,
+  'alphafold-confidence-adapter': alphaFoldConfidenceAdapter,
+  'alphamissense-pathogenicity-adapter': alphaMissensePathogenicityAdapter,
+  'alphamissense-heatmap-adapter': alphaMissenseHeatmapAdapter,
 };
 
 type TrackType =
@@ -95,15 +71,15 @@ type ProtvistaTrackConfig = {
   data: {
     url: string | string[];
     adapter?:
-      | 'protvista-feature-adapter'
-      | 'protvista-structure-adapter'
-      | 'protvista-proteomics-adapter'
-      | 'protvista-variation-adapter'
-      | 'protvista-variation-graph-adapter'
-      | 'protvista-interpro-adapter'
-      | 'protvista-alphafold-confidence-adapter'
-      | 'protvista-alphamissense-pathogenicity-adapter'
-      | 'protvista-alphamissense-heatmap-adapter';
+      | 'feature-adapter'
+      | 'structure-adapter'
+      | 'proteomics-adapter'
+      | 'variation-adapter'
+      | 'variation-graph-adapter'
+      | 'interpro-adapter'
+      | 'alphafold-confidence-adapter'
+      | 'alphamissense-pathogenicity-adapter'
+      | 'alphamissense-heatmap-adapter';
   }[];
   tooltip: string;
   color?: string;
@@ -124,16 +100,21 @@ type ProtvistaCategory = {
   'color-range'?: string;
 };
 
-export type DownloadConfig = {
-  type: string;
-  url: string;
-}[];
-
 type ProtvistaConfig = {
   categories: ProtvistaCategory[];
-  download: DownloadConfig;
 };
 
+type NightingaleEvent = Event & {
+  detail?: {
+    displaystart?: number;
+    displayend?: number;
+    eventType?: 'click' | 'mouseover' | 'mouseout' | 'reset';
+    feature?: any;
+    coords?: [number, number];
+  };
+};
+
+@customElement('protvista-uniprot')
 class ProtvistaUniprot extends LitElement {
   private openCategories: string[];
   private nostructure: boolean;
@@ -196,7 +177,7 @@ class ProtvistaUniprot extends LitElement {
     loadComponent('nightingale-linegraph-track', NightingaleLinegraphTrack);
     loadComponent('nightingale-filter', NightingaleFilter);
     loadComponent('nightingale-manager', NightingaleManager);
-    loadComponent('protvista-uniprot-structure', _ProtvistaUniprotStructure);
+    loadComponent('protvista-uniprot-structure', ProtvistaUniprotStructure);
     loadComponent('nightingale-sequence-heatmap', NightingaleSequenceHeatmap);
   }
 
@@ -207,28 +188,17 @@ class ProtvistaUniprot extends LitElement {
       const urls = this.config.categories.flatMap(({ tracks }) =>
         tracks.flatMap(({ data }) => data[0].url)
       );
-      const uniqueUrls = [...new Set(urls)];
+
       // Get the data for all urls and store it
-      await Promise.all(
-        uniqueUrls.map((url: string) =>
-          load(url.replace('{accession}', accession))
-            .then(
-              (data) => {
-                this.rawData[url] = data.payload;
-                // Some endpoints return empty arrays, while most fail 🙄
-                if (!this.hasData && data.payload?.features?.length)
-                  this.hasData = true;
-              },
-              // TODO handle this better based on error code
-              // Fail silently for now
-              (error) => console.warn(error)
-            )
-            .catch((e) => {
-              console.log(e);
-            })
-        )
+      this.rawData = await fetchAll([...new Set(urls)], (url) =>
+        url.replace('{accession}', accession)
       );
 
+      // Some endpoints return empty arrays, while most fail 🙄
+      this.hasData =
+        this.hasData ||
+        Object.values(this.rawData).some((d) => !!d?.features?.length);
+
       // Now iterate over tracks and categories, transforming the data
       // and assigning it as adequate
       for (const { name: categoryName, tracks, trackType } of this.config
@@ -242,18 +212,17 @@ class ProtvistaUniprot extends LitElement {
 
             if (
               !trackData ||
-              (adapter === 'protvista-variation-adapter' &&
-                trackData[0].length === 0)
+              (adapter === 'variation-adapter' && trackData[0].length === 0)
             ) {
               return;
             }
 
             // 1. Convert data
             let transformedData = adapter
-              ? await adapters[adapter](...trackData)
+              ? await adapters[adapter].apply(null, trackData)
               : trackData;
 
-            if (adapter === 'protvista-interpro-adapter') {
+            if (adapter === 'interpro-adapter') {
               const representativeDomains = [];
               transformedData?.forEach((feature) => {
                 feature.locations?.forEach((location) => {
@@ -322,7 +291,7 @@ class ProtvistaUniprot extends LitElement {
         currentCategory.tracks &&
         data &&
         // Check there's data and special case for variants
-        // NOTE: should refactor protvista-variation-adapter
+        // NOTE: should refactor variation-adapter
         // to return a list of variants and set the sequence
         // on protvista-variation separately
         (data.length > 0 || data.variants?.length)
@@ -350,9 +319,10 @@ class ProtvistaUniprot extends LitElement {
       ) {
         for (const track of currentCategory.tracks) {
           if (track.trackType === 'nightingale-sequence-heatmap') {
-            const heatmapComponent = this.querySelector<
-              typeof NightingaleSequenceHeatmap
-            >('nightingale-sequence-heatmap');
+            const heatmapComponent =
+              this.querySelector<NightingaleSequenceHeatmap>(
+                'nightingale-sequence-heatmap'
+              );
             if (heatmapComponent) {
               const heatmapData = this.data[`${id}-${track.name}`];
               const xDomain = Array.from(
@@ -361,7 +331,7 @@ class ProtvistaUniprot extends LitElement {
               );
               const yDomain = [
                 ...new Set(heatmapData.map((hotMapItem) => hotMapItem.yValue)),
-              ];
+              ] as string[];
               heatmapComponent.setHeatmapData(xDomain, yDomain, heatmapData);
             }
           }

package/src/styles/protvista-styles.ts

@@ -25,7 +25,8 @@ export default css`
   .track-label,
   .nav-track-label,
   .credits {
-    width: 20vw;
+    min-width: 20vw;
+    max-width: 20vw;
     padding: 0.5em;
     line-height: normal;
   }

package/src/tooltips/featureTooltip.ts

@@ -0,0 +1,223 @@
+import ecoMap from '../adapters/config/evidence';
+
+const formatSource = (source) => {
+  if (source.name?.toLowerCase() === 'PubMed'.toLowerCase()) {
+    return `${source.id}&nbsp;(<a href='${source.url}' style="color:#FFF" target='_blank'>${source.name}</a>&nbsp;<a href='${source.alternativeUrl}' style="color:#FFF" target='_blank'>EuropePMC</a>)`;
+  }
+  const sourceLink = `&nbsp;<a href='${source.url}' style="color:#FFF" target='_blank'>${source.id}</a>`;
+  if (source.name) {
+    // Temporary until we get the expected value as 'PeptideAtlas' instead of 'HppPeptideAtlas'
+    if (source.name.startsWith('Hpp')) {
+      return `${sourceLink}&nbsp;(${source.name.slice(3)})`;
+    }
+    return `${sourceLink}&nbsp;(${source.name})`;
+  }
+  return sourceLink;
+};
+
+export const getEvidenceFromCodes = (evidenceList) => {
+  if (!evidenceList) return ``;
+  return `
+        <ul>${evidenceList
+          .map((ev) => {
+            const ecoMatch = ecoMap.find((eco) => eco.name === ev.code);
+            if (!ecoMatch) return ``;
+            return `<li title='${
+              ecoMatch.description
+            }' style="padding: .25rem 0">${ecoMatch.shortDescription}:&nbsp;${
+              ev.source ? formatSource(ev.source) : ''
+            }</li>`;
+          })
+          .join('')}</ul>
+      `;
+};
+
+export const formatXrefs = (xrefs) => {
+  return `<ul>${xrefs
+    .map(
+      (xref) =>
+        `<li style="padding: .25rem 0">${xref.name} ${
+          xref.url
+            ? `<a href="${xref.url}" style="color:#FFF" target="_blank">${xref.id}</a>`
+            : `${xref.name} ${xref.id}`
+        }</li>`
+    )
+    .join('')}</ul>`;
+};
+
+const getPTMEvidence = (ptms) => {
+  if (!ptms) return ``;
+  const ids = ptms.flatMap(({ dbReferences }) =>
+    dbReferences.map((ref) => ref.id)
+  );
+  const uniqueIds = [...new Set(ids.flat())];
+  // Urls in the payload are not relevant. For 'Glue project' dataset, Dataset ID and publication reference is hardcoded. Need to be checked in 2024 if it still exists in the payload
+  const proteomexchange =
+    'https://proteomecentral.proteomexchange.org/dataset/';
+  return `
+    <ul>${uniqueIds
+      .map((id) => {
+        const datasetID = id === 'Glue project' ? 'PXD012174' : id;
+        return `<li title='${datasetID}' style="padding: .25rem 0">${datasetID}&nbsp;(<a href="${proteomexchange}${datasetID}" style="color:#FFF" target="_blank">ProteomeXchange</a>${
+          id === 'Glue project'
+            ? `)</li><li title="publication" style="padding: .25rem 0">Publication:&nbsp;31819260&nbsp;(<a href="https://pubmed.ncbi.nlm.nih.gov/31819260" style="color:#FFF" target="_blank">PubMed</a>)</li>`
+            : `&nbsp;<a href="http://www.peptideatlas.org/builds/rice/phospho/" style="color:#FFF" target="_blank">PeptideAtlas</a>)</li>`
+        }`;
+      })
+      .join('')}</ul>
+  `;
+};
+
+const formatPTMPeptidoform = (peptide, ptms) => {
+  if (!ptms) return ``;
+  const modificationValues = ptms.map((ptm) => ({
+    name: ptm.name,
+    position: ptm.position,
+  }));
+  let peptidoform = '';
+  let lastModPosition = 0;
+  modificationValues.forEach((p) => {
+    peptidoform = `${peptidoform}${peptide.slice(
+      lastModPosition,
+      p.position
+    )}[${p.name}]`;
+    lastModPosition = p.position;
+  });
+  // Add last remaining part of the peptide if any
+  peptidoform = `${peptidoform}${peptide.slice(lastModPosition)}`;
+  return `<p>${peptidoform}</p>`;
+};
+
+// At the moment, there is only phospho data. In future we may have more, the below AA sites have to be updated to accomodate more.
+const AAPhosphoSites = {
+  A: 'alanine',
+  S: 'serine',
+  T: 'threonine',
+  Y: 'tyrosine',
+};
+
+const findModifiedResidueName = (feature, ptm) => {
+  const { peptide, begin: peptideStart } = feature;
+  const proteinLocation = Number(peptideStart) + ptm.position - 1;
+  const modifiedResidue = peptide.charAt(ptm.position - 1); // CharAt index starts from 0
+  return `${proteinLocation} phospho${AAPhosphoSites[modifiedResidue]}`;
+};
+
+const formatTooltip = (feature) => {
+  const evidenceHTML =
+    feature.type === 'PROTEOMICS_PTM'
+      ? getPTMEvidence(feature.ptms)
+      : getEvidenceFromCodes(feature.evidences);
+  const ptms =
+    feature.type === 'PROTEOMICS_PTM' &&
+    feature.ptms.map((ptm) => findModifiedResidueName(feature, ptm));
+
+  const dataset =
+    feature.type === 'PROTEOMICS_PTM' &&
+    feature.ptms.flatMap(({ dbReferences }) =>
+      dbReferences.map((ref) => ref.id)
+    );
+
+  let { description } = feature;
+
+  if (feature.type === 'BINDING' || feature.type === 'Binding site') {
+    let bindingDescription = '';
+    if (feature.ligandPart) {
+      bindingDescription += `${feature.ligandPart.name} of `;
+    }
+    if (feature.ligand) {
+      bindingDescription += feature.ligand.name;
+    }
+    if (feature.description) {
+      bindingDescription += `; ${feature.description}`;
+    }
+    description = bindingDescription;
+  }
+
+  try {
+    return `
+        ${description ? `<h5>Description</h5><p>${description}</p>` : ``}
+        ${
+          feature.matchScore
+            ? `<h5>Match score</h5><p>${feature.matchScore}%</p>`
+            : ``
+        }
+        ${feature.ftId ? `<h5>Feature ID</h5><p>${feature.ftId}</p>` : ``}
+        ${
+          feature.alternativeSequence
+            ? `<h5>Alternative sequence</h5><p>${feature.alternativeSequence}</p>`
+            : ``
+        }
+        ${
+          ptms
+            ? `<h5 data-article-id="ptm_processing_section">PTMs</h5><ul>${ptms
+                .map((item) => `<li>${item}</li>`)
+                .join('')}</ul>
+              `
+            : ''
+        }
+        ${
+          feature.peptide && feature.type === 'PROTEOMICS_PTM'
+            ? `<h5 data-article-id="mod_res_large_scale#what-is-the-goldsilverbronze-criterion">Peptidoform</h5><p>${formatPTMPeptidoform(
+                feature.peptide,
+                feature.ptms
+              )}</p>`
+            : ``
+        }
+        ${
+          feature.peptide && feature.type !== 'PROTEOMICS_PTM'
+            ? `<h5>Peptide</h5><p>${feature.peptide}</p>`
+            : ``
+        } 
+        ${
+          feature.xrefs
+            ? `<h5>Cross-references</h5>${formatXrefs(feature.xrefs)}`
+            : ``
+        }
+        ${evidenceHTML ? `<h5>Evidence</h5>${evidenceHTML}` : ``}
+        ${
+          feature.ptms && dataset && !dataset.includes('Glue project')
+            ? `<hr /><h5 data-article-id="mod_res_large_scale#what-is-the-goldsilverbronze-criterion">PTM statistical attributes</h5><ul>${feature.ptms
+                .map((ptm) =>
+                  ptm.dbReferences
+                    .map(
+                      (ref) =>
+                        `<li><b>${ref.id}</b></li>
+                        <li style="text-indent: 1em"><b>${findModifiedResidueName(
+                          feature,
+                          ptm
+                        )}</b></li>
+                        <li style="text-indent: 2em">PubMed ID: <a href="https://europepmc.org/article/MED/${
+                          ref.properties['Pubmed ID']
+                        }" style="color:#FFF" target="_blank">
+                        ${ref.properties['Pubmed ID']}</a>
+                        </li>
+                        <li style="text-indent: 2em"><span data-article-id="mod_res_large_scale#confidence-score">Confidence score</span>: ${
+                          ref.properties['Confidence score']
+                        }</li>
+                        <li style="text-indent: 2em">Universal Spectrum Id: 
+                        <a href="http://proteomecentral.proteomexchange.org/usi/?usi=${
+                          ref.properties['Universal Spectrum Id']
+                        }" style="color:#FFF" target="_blank">View on ProteomeXchange</a>
+                        </li>
+                        <li style="text-indent: 2em">PSM Count (0.05 gFLR): ${
+                          ref.properties['PSM Count (0.05 gFLR)']
+                        }</li>
+                        <li style="text-indent: 2em">Final site probability: ${
+                          ref.properties['Final site probability']
+                        }</li>
+                        `
+                    )
+                    .join('')
+                )
+                .join('')}</ul>`
+            : ''
+        }
+          `;
+  } catch (error) {
+    console.error(error);
+    return '';
+  }
+};
+
+export default formatTooltip;

package/src/tooltips/structureTooltip.ts

@@ -0,0 +1,20 @@
+const getStructuresHTML = (structureList) => {
+  return `<ul>
+              ${structureList
+                .map(
+                  (
+                    structure
+                  ) => `<li style="margin: 0.25rem 0"><a style="color:#FFF" href='${structure.source.url}' target='_blank'>
+              ${structure.source.id}
+          </a> (${structure.start}-${structure.end})</li>`
+                )
+                .join('')}
+          </ul>`;
+};
+
+const formatTooltip = (feature) => {
+  const structuresHTML = getStructuresHTML(feature.structures);
+  return `${structuresHTML ? `<h5>Structures</h5>${structuresHTML}` : ``}`;
+};
+
+export default formatTooltip;

package/src/tooltips/variationTooltip.ts

@@ -0,0 +1,139 @@
+import {
+  Association,
+  Description,
+  PopulationFrequency,
+  Variant,
+  Prediction,
+} from '@nightingale-elements/nightingale-variation';
+import groupBy from 'lodash-es/groupBy';
+
+import { formatXrefs, getEvidenceFromCodes } from './featureTooltip';
+
+const getDiseaseAssociations = (associations: Association[]): string =>
+  associations
+    ?.map(
+      (association) => `
+              <h4>Disease association</h4><p>${association.name}</p>
+              ${
+                association.description
+                  ? `<>${association.description}</p>`
+                  : ''
+              }
+              ${
+                association.dbReferences
+                  ? `<h5>Cross-references</h5>${formatXrefs(
+                      association.dbReferences
+                    )}`
+                  : ''
+              }
+              ${getEvidenceFromCodes(association.evidences)}
+          `
+    )
+    .join('');
+
+const getDescriptions = (descriptions: Description[]): string =>
+  `<hr/><h5>Description</h5>${descriptions
+    .map((description) => `<p>${description.value}</p>`)
+    .join('')}
+  `;
+
+const getPopulationFrequencies = (
+  popFrequencies: PopulationFrequency[]
+): string =>
+  `<hr/><h5>Population frequencies</h5>${popFrequencies
+    .map(
+      (freq) =>
+        `<p>${freq.frequency} - ${freq.populationName} (${freq.source})</p>`
+    )
+    .join('')}`;
+
+const getEnsemblCovidLinks = (variant: Variant): string => {
+  const shouldGenerateLink = variant.locations.some(
+    (location) => location.source === 'EnsemblViruses'
+  );
+  if (shouldGenerateLink) {
+    const xref = variant.xrefs.find((xref) => xref.name === 'ENA');
+    return xref.id
+      ? `<h5>Ensembl COVID-19</h5>
+          <p>
+          <a href="https://covid-19.ensembl.org/Sars_cov_2/Variation/Explore?v=${xref.id}" target="_blank" rel="noopener noreferrer">${xref.id}</a>
+        </p>`
+      : '';
+  }
+  return '';
+};
+
+const getPredictions = (predictions: Prediction[]): string => {
+  const groupedPredictions = groupBy(predictions, 'predAlgorithmNameType');
+  const counts = Object.keys(groupedPredictions).map((key) => {
+    const valueGroups = groupBy(groupedPredictions[key], 'predictionValType');
+    return {
+      algorithm: key,
+      values: Object.keys(valueGroups).map((valKey) => ({
+        name: valKey,
+        count: valueGroups[valKey].length,
+      })),
+    };
+  });
+  return counts
+    .map(
+      (countItem) =>
+        `<h6>${countItem.algorithm}</h6><ul class="no-bullet">${countItem.values
+          .map((countValue) => `<li>${countValue.name}</li>`)
+          .join('')}</ul>`
+    )
+    .join('');
+};
+
+const formatTooltip = (variant: Variant): string =>
+  `
+                <h5>Variant</h5><p>${variant.wildType} > ${
+    variant.alternativeSequence || ''
+  }</p>
+                ${
+                  variant.populationFrequencies
+                    ? getPopulationFrequencies(variant.populationFrequencies)
+                    : ''
+                }
+                ${
+                  variant.consequenceType
+                    ? `<h5>Consequence</h5><p>${variant.consequenceType}</p>`
+                    : ``
+                }
+                ${
+                  variant.somaticStatus
+                    ? `<h5>Somatic</h5><p>${
+                        variant.somaticStatus === 0 ? 'No' : 'Yes'
+                      }</p>`
+                    : ``
+                }
+                ${
+                  variant.genomicLocation?.length
+                    ? `<h5>Location</h5><p>${variant.genomicLocation.join(
+                        ', '
+                      )}</p>`
+                    : ``
+                }
+                ${
+                  variant.ftId
+                    ? `<h5>Feature ID</h5><p>${variant.ftId}</p>`
+                    : ``
+                }
+                ${
+                  variant.descriptions
+                    ? getDescriptions(variant.descriptions)
+                    : ''
+                }
+                ${
+                  variant.association
+                    ? getDiseaseAssociations(variant.association)
+                    : ''
+                }
+                ${
+                  variant.predictions ? getPredictions(variant.predictions) : ''
+                }
+                ${getEnsemblCovidLinks(variant)}
+                
+        `;
+
+export default formatTooltip;