protvista-uniprot 2.12.2 → 2.13.0

package/src/filterConfig.ts

@@ -33,6 +33,35 @@ export const getFilteredVariants = (
     };
   });
 
+const filterPredicates = {
+  disease: (variantPos) =>
+    variantPos.association?.some((association) => association.disease),
+  predicted: (variantPos) => variantPos.hasPredictions,
+  nonDisease: (variantPos) =>
+    variantPos.association?.some(
+      (association) => association.disease === false
+    ),
+  uncertain: (variantPos) =>
+    (typeof variantPos.clinicalSignificances === 'undefined' &&
+      !variantPos.hasPredictions) ||
+    (variantPos.clinicalSignificances &&
+      significanceMatches(
+        variantPos.clinicalSignificances,
+        consequences.uncertain
+      )),
+  UniProt: (variantPos) =>
+    variantPos.xrefNames &&
+    (variantPos.xrefNames.includes('uniprot') ||
+      variantPos.xrefNames.includes('UniProt')),
+  ClinVar: (variantPos) =>
+    variantPos.xrefNames &&
+    (variantPos.xrefNames.includes('ClinVar') ||
+      variantPos.xrefNames.includes('clinvar')),
+  LSS: (variantPos) =>
+    variantPos.sourceType === 'large_scale_study' ||
+    variantPos.sourceType === 'mixed',
+};
+
 const filterConfig = [
   {
     name: 'disease',
@@ -41,13 +70,12 @@ const filterConfig = [
       text: 'Filter Consequence',
     },
     options: {
-      labels: ['Likely pathogenic or pathogenic'],
-      colors: [scaleColors.UPDiseaseColor],
+      label: 'Likely pathogenic or pathogenic',
+      color: scaleColors.UPDiseaseColor,
     },
+    filterPredicate: filterPredicates['disease'],
     filterData: (variants: ProtvistaVariationData) =>
-      getFilteredVariants(variants, (variantPos) =>
-        variantPos.association?.some((association) => association.disease)
-      ),
+      getFilteredVariants(variants, filterPredicates['disease']),
   },
   {
     name: 'predicted',
@@ -56,11 +84,12 @@ const filterConfig = [
       text: 'Filter Consequence',
     },
     options: {
-      labels: ['Predicted consequence'],
-      colors: [scaleColors.predictedColor],
+      label: 'Predicted consequence',
+      color: scaleColors.predictedColor,
     },
+    filterPredicate: filterPredicates['predicted'],
     filterData: (variants: ProtvistaVariationData) =>
-      getFilteredVariants(variants, (variantPos) => variantPos.hasPredictions),
+      getFilteredVariants(variants, filterPredicates['predicted']),
   },
   {
     name: 'nonDisease',
@@ -69,15 +98,12 @@ const filterConfig = [
       text: 'Filter Consequence',
     },
     options: {
-      labels: ['Likely benign or benign'],
-      colors: [scaleColors.UPNonDiseaseColor],
+      label: 'Likely benign or benign',
+      color: scaleColors.UPNonDiseaseColor,
     },
+    filterPredicate: filterPredicates['nonDisease'],
     filterData: (variants: ProtvistaVariationData) =>
-      getFilteredVariants(variants, (variantPos) =>
-        variantPos.association?.some(
-          (association) => association.disease === false
-        )
-      ),
+      getFilteredVariants(variants, filterPredicates['nonDisease']),
   },
   {
     name: 'uncertain',
@@ -86,21 +112,12 @@ const filterConfig = [
       text: 'Filter Consequence',
     },
     options: {
-      labels: ['Uncertain significance'],
-      colors: [scaleColors.othersColor],
+      label: 'Uncertain significance',
+      color: scaleColors.othersColor,
     },
+    filterPredicate: filterPredicates['uncertain'],
     filterData: (variants: ProtvistaVariationData) =>
-      getFilteredVariants(
-        variants,
-        (variantPos) =>
-          (typeof variantPos.clinicalSignificances === 'undefined' &&
-            !variantPos.hasPredictions) ||
-          (variantPos.clinicalSignificances &&
-            significanceMatches(
-              variantPos.clinicalSignificances,
-              consequences.uncertain
-            ))
-      ),
+      getFilteredVariants(variants, filterPredicates['uncertain']),
   },
   {
     name: 'UniProt',
@@ -109,17 +126,12 @@ const filterConfig = [
       text: 'Filter Provenance',
     },
     options: {
-      labels: ['UniProt reviewed'],
-      colors: ['#9f9f9f'],
+      label: 'UniProt reviewed',
+      color: '#9f9f9f',
     },
+    filterPredicate: filterPredicates['UniProt'],
     filterData: (variants: ProtvistaVariationData) =>
-      getFilteredVariants(
-        variants,
-        (variantPos) =>
-          variantPos.xrefNames &&
-          (variantPos.xrefNames.includes('uniprot') ||
-            variantPos.xrefNames.includes('UniProt'))
-      ),
+      getFilteredVariants(variants, filterPredicates['UniProt']),
   },
   {
     name: 'ClinVar',
@@ -128,17 +140,12 @@ const filterConfig = [
       text: 'Filter Provenance',
     },
     options: {
-      labels: ['ClinVar'],
-      colors: ['#9f9f9f'],
+      label: 'ClinVar',
+      color: '#9f9f9f',
     },
+    filterPredicate: filterPredicates['ClinVar'],
     filterData: (variants: ProtvistaVariationData) =>
-      getFilteredVariants(
-        variants,
-        (variantPos) =>
-          variantPos.xrefNames &&
-          (variantPos.xrefNames.includes('ClinVar') ||
-            variantPos.xrefNames.includes('clinvar'))
-      ),
+      getFilteredVariants(variants, filterPredicates['ClinVar']),
   },
   {
     name: 'LSS',
@@ -147,16 +154,12 @@ const filterConfig = [
       text: 'Filter Provenance',
     },
     options: {
-      labels: ['Large scale studies'],
-      colors: ['#9f9f9f'],
+      label: 'Large scale studies',
+      color: '#9f9f9f',
     },
+    filterPredicate: filterPredicates['LSS'],
     filterData: (variants: ProtvistaVariationData) =>
-      getFilteredVariants(
-        variants,
-        (variantPos) =>
-          variantPos.sourceType === 'large_scale_study' ||
-          variantPos.sourceType === 'mixed'
-      ),
+      getFilteredVariants(variants, filterPredicates['LSS']),
   },
 ];
 
@@ -172,7 +175,7 @@ const countVariantsForFilter = (
   return false;
 };
 
-export const colorConfig = (variant: ProtvistaVariant) => {
+export const colorConfig = (variant: any) => {
   if (countVariantsForFilter('disease', variant)) {
     return scaleColors.UPDiseaseColor;
   } else if (countVariantsForFilter('nonDisease', variant)) {

package/src/index.ts

@@ -1,7 +1,6 @@
 import { loadComponent } from './loadComponents';
 
 import ProtvistaUniprot from './protvista-uniprot';
-import _DownloadPanel from './download-panel';
 import _ProtvistaUniprotStructure from './protvista-uniprot-structure';
 
 import { transformDataFeatureAdapter as _transformDataFeatureAdapter } from './protvista-uniprot';
@@ -16,10 +15,8 @@ export const transformDataStructureAdapter = _transformDataStructureAdapter;
 export const transformDataVariationAdapter = _transformDataVariationAdapter;
 export const transformDataInterproAdapter = _transformDataInterproAdapter;
 export const ProtvistaUniprotStructure = _ProtvistaUniprotStructure;
-export const DownloadPanel = _DownloadPanel;
 
 loadComponent('protvista-uniprot', ProtvistaUniprot);
-loadComponent('download-panel', _DownloadPanel);
 loadComponent('protvista-uniprot-structure', _ProtvistaUniprotStructure);
 
 export default ProtvistaUniprot;

package/src/protvista-alphamissense-heatmap.ts

@@ -0,0 +1,52 @@
+import {
+  cellSplitter,
+  rowSplitter,
+} from './protvista-alphamissense-pathogenicity';
+import { AlphafoldPayload } from './commonTypes';
+
+const parseCSV = (rawText: string): Array<Record<string, string>> => {
+  const data = [];
+
+  for (const [i, row] of rawText.split(rowSplitter).entries()) {
+    if (i === 0 || !row) {
+      continue;
+    }
+    const [, , positionString, mutated, pathogenicityScore] =
+      row.match(cellSplitter);
+
+    data.push({
+      xValue: +positionString,
+      yValue: mutated,
+      score: +pathogenicityScore,
+    });
+  }
+  return data;
+};
+
+// Load and parse
+const loadAndParseAnnotations = async (url: string): Promise<Array<Record<string, string>>> => {
+  try {
+    const payload = await fetch(url);
+    const rawCSV = await payload.text();
+    return parseCSV(rawCSV);
+  } catch (e) {
+    console.error('Could not load AlphaMissense pathogenicity', e);
+  }
+};
+
+type PartialProtein = {
+  sequence: {
+    sequence: string;
+  };
+};
+
+export const transformData = async (
+  data: AlphafoldPayload,
+  protein: PartialProtein
+) => {
+  const { amAnnotationsUrl, uniprotSequence } = data?.[0] || {};
+  if (amAnnotationsUrl && uniprotSequence === protein.sequence.sequence) {
+    const heatmapData = await loadAndParseAnnotations(amAnnotationsUrl);
+    return heatmapData;
+  }
+};

package/src/protvista-alphamissense-pathogenicity.ts

@@ -7,8 +7,8 @@ import { AlphafoldPayload } from './commonTypes';
 const benign = 0.34;
 const pathogenic = 0.564;
 
-const rowSplitter = /\s*\n\s*/;
-const cellSplitter = /^(.)(\d+)(.),(.+),(\w+)$/;
+export const rowSplitter = /\s*\n\s*/;
+export const cellSplitter = /^(.)(\d+)(.),(.+),(\w+)$/;
 
 type Row = {
   wildType: string;

package/src/protvista-ptm-exchange.ts

@@ -91,9 +91,7 @@ const convertPtmExchangePtms = (
     console.log('PTM has no confidence score');
   } else if (confidenceScores.size > 1) {
     console.error(
-      `PTM has a mixture of confidence scores: ${Array.from(
-        confidenceScores
-      )}`
+      `PTM has a mixture of confidence scores: ${Array.from(confidenceScores)}`
     );
   } else {
     [confidenceScore] = confidenceScores;
@@ -101,22 +99,26 @@ const convertPtmExchangePtms = (
 
   const tooltip = `
   <h5>Description</h5><p>${phosphorylate(aa)}</p>
-  ${confidenceScore ? `<h5 data-article-id="mod_res_large_scale#confidence-score">Confidence Score</h5><p>${confidenceScore}</p>` : ''}
+  ${
+    confidenceScore
+      ? `<h5 data-article-id="mod_res_large_scale#confidence-score">Confidence Score</h5><p>${confidenceScore}</p>`
+      : ''
+  }
   ${
     evidences
       ? `<h5>Evidence</h5><ul>${evidences
-          .map(
-            (id) => {
-              const datasetID = id === 'Glue project' ? 'PXD012174' : id;
-              return `<li title='${datasetID}' style="padding: .25rem 0">${datasetID}&nbsp;
-              (<a href="https://www.ebi.ac.uk/pride/archive/projects/${id}" style="color:#FFF" target="_blank">PRIDE</a>)
+          .map((id) => {
+            const datasetID = id === 'Glue project' ? 'PXD012174' : id;
+            return `<li title='${datasetID}' style="padding: .25rem 0">${datasetID}&nbsp;
+              (<a href="https://proteomecentral.proteomexchange.org/dataset/${datasetID}" style="color:#FFF" target="_blank">ProteomeXchange</a>)
               </li>
-              ${id === 'Glue project' ?  
-              `<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>`
-              : ''}
-              `
-            }
-          )
+              ${
+                id === 'Glue project'
+                  ? `<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>`
+                  : ''
+              }
+              `;
+          })
           .join('')}</ul>`
       : ''
   }
@@ -139,7 +141,7 @@ export const transformData = (data: ProteomicsPtm) => {
 
     const absolutePositionToPtms: Record<number, { ptms: PTM[]; aa: string }> =
       {};
-  
+
     if (features) {
       for (const feature of features) {
         for (const ptm of feature.ptms) {
@@ -167,12 +169,12 @@ export const transformData = (data: ProteomicsPtm) => {
           }
         }
       }
-   
+
       return Object.entries(absolutePositionToPtms).map(
         ([absolutePosition, { ptms, aa }]) =>
           convertPtmExchangePtms(ptms, aa, +absolutePosition)
       );
-    } 
+    }
   }
-  return []; 
+  return [];
 };

package/src/protvista-uniprot-structure.ts

@@ -1,7 +1,10 @@
 import { LitElement, html, svg, TemplateResult, css } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { load } from 'data-loader';
-import ProtvistaStructure from 'protvista-structure';
+import NightingaleStructure, {
+  PredictionData,
+  StructureData,
+} from '@nightingale-elements/nightingale-structure';
 import ProtvistaDatatable from 'protvista-datatable';
 import { loadComponent } from './loadComponents';
 
@@ -9,11 +12,6 @@ import loaderIcon from './icons/spinner.svg';
 import downloadIcon from './icons/download.svg';
 import loaderStyles from './styles/loader-styles';
 
-import {
-  PredictionData,
-  StructureData,
-} from 'protvista-structure/dist/es/protvista-structure';
-
 const PDBLinks = [
   { name: 'PDBe', link: 'https://www.ebi.ac.uk/pdbe-srv/view/entry/' },
   { name: 'RCSB-PDB', link: 'https://www.rcsb.org/structure/' },
@@ -110,8 +108,35 @@ const AFMetaInfo = html`
   </p>
 `;
 
+const AMMetaInfo = html`<strong>Model Pathogenicity:</strong>
+  <ul class="no-bullet">
+    <li>
+      <span class="af-legend" style="background-color: rgb(154, 19, 26)"></span>
+      Likely pathogenic (score > 0.564)
+    </li>
+    <li>
+      <span
+        class="af-legend"
+        style="background-color: rgb(168, 169, 173)"
+      ></span>
+      Uncertain (0.564 >= score >= 0.34)
+    </li>
+    <li>
+      <span class="af-legend" style="background-color: rgb(61, 84, 147)"></span>
+      Likely benign (score < 0.34)
+    </li>
+  </ul>
+  <p class="small">
+    The displayed colour for each residue is the average AlphaMissense
+    pathogenicity score across all possible amino acid substitutions at that
+    position.
+  </p>`;
+
 const foldseekURL = (accession, sourceDB) => {
-  return html`<a href="${foldseekLink}?accession=${accession}&source=${sourceDB}">Foldseek</a>`;
+  return html`<a
+    href="${foldseekLink}?accession=${accession}&source=${sourceDB}"
+    >Foldseek</a
+  >`;
 };
 
 const styleId = 'protvista-styles';
@@ -120,15 +145,17 @@ class ProtvistaUniprotStructure extends LitElement {
   data?: ProcessedStructureData[];
   structureId?: string;
   metaInfo?: TemplateResult;
+  colorTheme?: string;
   private loading?: boolean;
 
   constructor() {
     super();
-    loadComponent('protvista-structure', ProtvistaStructure);
+    loadComponent('nightingale-structure', NightingaleStructure);
     loadComponent('protvista-datatable', ProtvistaDatatable);
     this.loading = true;
     this.onTableRowClick = this.onTableRowClick.bind(this);
     this.addStyles();
+    this.colorTheme = 'alphafold';
   }
 
   static get properties() {
@@ -137,6 +164,7 @@ class ProtvistaUniprotStructure extends LitElement {
       structureId: { type: String },
       data: { type: Object },
       loading: { type: Boolean },
+      colorTheme: { type: String },
     };
   }
 
@@ -219,6 +247,12 @@ class ProtvistaUniprotStructure extends LitElement {
 
   get cssStyle() {
     return css`
+      .protvista-uniprot-structure {
+        line-height: normal;
+      }
+      .theme-selection {
+        padding-bottom: 1rem;
+      }
       .protvista-uniprot-structure__structure {
         display: flex;
       }
@@ -226,7 +260,7 @@ class ProtvistaUniprotStructure extends LitElement {
         flex: 1;
         padding: 1rem;
       }
-      .protvista-uniprot-structure__structure protvista-structure {
+      .protvista-uniprot-structure__structure nightingale-structure {
         z-index: 40000;
         width: 100%;
         flex: 4;
@@ -263,102 +297,142 @@ class ProtvistaUniprotStructure extends LitElement {
     return this;
   }
 
+  toggleColorTheme(e) {
+    this.colorTheme = e.target.value;
+    if (e.target.value === 'alphafold') {
+      this.metaInfo = AFMetaInfo;
+    } else {
+      this.metaInfo = AMMetaInfo;
+    }
+  }
+
   render() {
     return html`
       <div class="protvista-uniprot-structure">
         <div class="protvista-uniprot-structure__structure">
           ${this.metaInfo
-            ? html`<div class="protvista-uniprot-structure__meta">
+            ? html` <div class="protvista-uniprot-structure__meta">
+                <div class="theme-selection">
+                  Select color scale <br />
+                  <input
+                    type="radio"
+                    id="alphafold"
+                    name="colorScheme"
+                    value="alphafold"
+                    @click=${(e) => this.toggleColorTheme(e)}
+                    checked
+                  />
+                  <label for="alphafold">Confidence</label><br />
+                  <input
+                    type="radio"
+                    id="alphamissense"
+                    name="colorScheme"
+                    value="alphamissense"
+                    @click=${(e) => this.toggleColorTheme(e)}
+                  />
+                  <label for="alphamissense">Pathogenecity</label><br />
+                </div>
                 ${this.metaInfo}
               </div>`
             : html``}
           ${this.structureId
-            ? html`<protvista-structure
-                structureid=${this.structureId}
-                accession=${this.accession}
-              ></protvista-structure>`
+            ? html`<nightingale-structure
+                structure-id=${this.structureId}
+                protein-accession=${this.accession}
+                color-theme=${this.colorTheme}
+              ></nightingale-structure>`
+            : html``}
+        </div>
+        <div class="protvista-uniprot-structure__table">
+          ${this.data && this.data.length
+            ? html`<protvista-datatable noScrollToRow noDeselect filter-scroll>
+                <table>
+                  <thead>
+                    <tr>
+                      <th data-filter="source">Source</th>
+                      <th>Identifier</th>
+                      <th data-filter="method">Method</th>
+                      <th>Resolution</th>
+                      <th>Chain</th>
+                      <th>Positions</th>
+                      <th>Links</th>
+                      <th><!--Download--></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${this.data?.map(
+                      ({
+                        source,
+                        id,
+                        method,
+                        resolution,
+                        chain,
+                        positions,
+                        downloadLink,
+                      }) => html`<tr
+                        data-id="${id}"
+                        @click="${() => this.onTableRowClick({ id })}"
+                      >
+                        <td data-filter="source" data-filter-value="${source}">
+                          <strong>${source}</strong>
+                        </td>
+                        <td>${id}</td>
+                        <td data-filter="method" data-filter-value="${method}">
+                          ${method}
+                        </td>
+                        <td>
+                          ${resolution ? resolution.replace('A', 'Å') : ''}
+                        </td>
+                        <td>${chain || ''}</td>
+                        <td>${positions || ''}</td>
+                        <td>
+                          ${source === 'PDB'
+                            ? html`
+                                ${PDBLinks.map((pdbLink) => {
+                                  return html`
+                                    <a href="${pdbLink.link}${id}"
+                                      >${pdbLink.name}</a
+                                    >
+                                  `;
+                                }).reduce(
+                                  (prev, curr) => html` ${prev} · ${curr} `
+                                )}
+                              `
+                            : html`<a href="${alphaFoldLink}${this.accession}"
+                                >AlphaFold</a
+                              >`}
+                        </td>
+                        <td>
+                          ${downloadLink
+                            ? html`<a
+                                  href="${downloadLink}"
+                                  class="download-link"
+                                  >${svg`${unsafeHTML(downloadIcon)}`}</a
+                                >
+                                ·
+                                ${foldseekURL(
+                                  source === 'PDB' ? id : this.accession,
+                                  source === 'PDB' ? 'PDB' : 'AlphaFoldDB'
+                                )}`
+                            : ''}
+                        </td>
+                      </tr>`
+                    )}
+                  </tbody>
+                </table>
+              </protvista-datatable>`
+            : html``}
+          ${this.loading
+            ? html`<div class="protvista-loader">
+                ${svg`${unsafeHTML(loaderIcon)}`}
+              </div>`
+            : html``}
+          ${!this.data && !this.loading
+            ? html`<div class="protvista-no-results">
+                No structure information available for ${this.accession}
+              </div>`
             : html``}
         </div>
-        <div class="class="protvista-uniprot-structure__table">
-        ${this.data && this.data.length
-          ? html`<protvista-datatable noScrollToRow noDeselect filter-scroll>
-              <table>
-                <thead>
-                  <tr>
-                    <th data-filter="source">Source</th>
-                    <th>Identifier</th>
-                    <th data-filter="method">Method</th>
-                    <th>Resolution</th>
-                    <th>Chain</th>
-                    <th>Positions</th>
-                    <th>Links</th>
-                    <th><!--Download--></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  ${this.data?.map(
-                    ({
-                      source,
-                      id,
-                      method,
-                      resolution,
-                      chain,
-                      positions,
-                      downloadLink,
-                    }) => html`<tr
-                      data-id="${id}"
-                      @click="${() => this.onTableRowClick({ id })}"
-                    >
-                      <td data-filter="source" data-filter-value="${source}">
-                        <strong>${source}</strong>
-                      </td>
-                      <td>${id}</td>
-                      <td data-filter="method" data-filter-value="${method}">
-                        ${method}
-                      </td>
-                      <td>${resolution ? resolution.replace('A', 'Å') : ''}</td>
-                      <td>${chain || ''}</td>
-                      <td>${positions || ''}</td>
-                      <td>
-                        ${source === 'PDB'
-                          ? html`
-                              ${PDBLinks.map((pdbLink) => {
-                                return html`
-                                  <a href="${pdbLink.link}${id}"
-                                    >${pdbLink.name}</a
-                                  >
-                                `;
-                              }).reduce(
-                                (prev, curr) => html` ${prev} · ${curr} `
-                              )}
-                            `
-                          : html`<a href="${alphaFoldLink}${this.accession}"
-                              >AlphaFold</a
-                            >`}
-                      </td>
-                      <td>
-                        ${downloadLink
-                          ? html`<a href="${downloadLink}" class="download-link"
-                              >${svg`${unsafeHTML(downloadIcon)}`}</a
-                            > · ${foldseekURL(source === 'PDB' ? id: this.accession, source === 'PDB' ? 'PDB' : 'AlphaFoldDB')}`
-                          : ''}
-                      </td>
-                    </tr>`
-                  )}
-                </tbody>
-              </table>
-            </protvista-datatable>`
-          : html``}
-        ${this.loading
-          ? html`<div class="protvista-loader">
-              ${svg`${unsafeHTML(loaderIcon)}`}
-            </div>`
-          : html``}
-        ${!this.data && !this.loading
-          ? html`<div class="protvista-no-results">
-              No structure information available for ${this.accession}
-            </div>`
-          : html``}
       </div>
     `;
   }