protvista-uniprot 4.3.7 → 4.4.0

package/dist/types/protvista-uniprot-structure.d.ts

@@ -1,12 +1,13 @@
 import { LitElement, TemplateResult } from 'lit';
 type ProcessedStructureData = {
     id: string;
-    source: 'PDB' | 'AlphaFold';
-    method: string;
+    source: string;
+    method?: string;
     resolution?: string;
     chain?: string;
     positions?: string;
     downloadLink?: string;
+    sourceDBLink?: string;
     protvistaFeatureId: string;
 };
 declare class ProtvistaUniprotStructure extends LitElement {
@@ -17,6 +18,7 @@ declare class ProtvistaUniprotStructure extends LitElement {
     colorTheme?: string;
     private loading?;
     private alphamissenseAvailable?;
+    private modelUrl;
     constructor();
     static get properties(): {
         accession: {
@@ -43,8 +45,10 @@ declare class ProtvistaUniprotStructure extends LitElement {
     updated(): void;
     addStyles(): void;
     removeStyles(): void;
-    onTableRowClick({ id }: {
+    onTableRowClick({ id, source, downloadLink, }: {
         id: string;
+        source?: string;
+        downloadLink?: string;
     }): void;
     get cssStyle(): import('lit').CSSResult;
     /**

package/dist/types/tooltips/ptm-tooltip.d.ts

@@ -1,7 +1,5 @@
 import { PTM } from '../adapters/ptm-exchange-adapter';
 export declare const phosphorylate: (aa: string) => string;
 export declare const sumoylate: (aa: string) => string;
-export declare const ubiquitinate: (aa: string) => string;
-export declare const acetylate: (aa: string) => string;
 declare const formatTooltip: (title: string, ptms: PTM[], aa: string, confidenceScore: string) => string;
 export default formatTooltip;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "protvista-uniprot",
   "description": "ProtVista tool for the UniProt website",
-  "version": "4.3.7",
+  "version": "4.4.0",
   "files": [
     "dist",
     "src"
@@ -36,8 +36,8 @@
     "@nightingale-elements/nightingale-manager": "5.6.0",
     "@nightingale-elements/nightingale-navigation": "5.6.0",
     "@nightingale-elements/nightingale-sequence": "5.6.0",
-    "@nightingale-elements/nightingale-sequence-heatmap": "5.6.2",
-    "@nightingale-elements/nightingale-structure": "5.6.2",
+    "@nightingale-elements/nightingale-sequence-heatmap": "5.6.0",
+    "@nightingale-elements/nightingale-structure": "5.7.0",
     "@nightingale-elements/nightingale-track-canvas": "5.6.0",
     "@nightingale-elements/nightingale-variation": "5.6.0",
     "color-hash": "2.0.2",

package/src/adapters/alphamissense-pathogenicity-adapter.ts

@@ -1,38 +1,15 @@
 import { AlphafoldPayload } from './types/alphafold';
 
-// from color scale B:0,H:0.1132,V:0.2264,L:0.3395,A:0.4527,l:0.5895,h:0.7264,p:0.8632,P:1
-const certainlyBenign = 0;
-const benign = 0.1132;
-const veryLikelyBenign = 0.2264;
-const likelyBenign = 0.3395;
-const ambiguous = 0.4527;
-const likelyAmbiguous = 0.5895;
-const likelyPathogenic = 0.7264;
-const pathogenic = 0.8632;
-const certainlyPathogenic = 1;
+// from example data
+// benign: [0.0448,0.3397]: x < 0.34
+// ambiguous: [0.34,0.564]: 0.34 <= x <= 0.564
+// pathogenic: [0.5646,0.9999]: 0.564 < x
+const benign = 0.34;
+const pathogenic = 0.564;
 
 export const rowSplitter = /\s*\n\s*/;
 export const cellSplitter = /^(.)(\d+)(.),(.+),(\w+)$/;
 
-const pathogenicityCategories = [
-  { min: certainlyBenign, max: benign, code: 'H' },
-  { min: benign, max: veryLikelyBenign, code: 'V' },
-  { min: veryLikelyBenign, max: likelyBenign, code: 'L' },
-  { min: likelyBenign, max: ambiguous, code: 'A' },
-  { min: ambiguous, max: likelyAmbiguous, code: 'l' },
-  { min: likelyAmbiguous, max: likelyPathogenic, code: 'h' },
-  { min: likelyPathogenic, max: pathogenic, code: 'p' },
-  { min: pathogenic, max: certainlyPathogenic, code: 'P' },
-];
-
-const getPathogenicityCode = (score) => {
-  for (const { min, max, code } of pathogenicityCategories) {
-    if (score >= min && score < max) {
-      return code;
-    }
-  }
-};
-
 type Row = {
   wildType: string;
   position: number;
@@ -71,6 +48,7 @@ const parseCSV = (rawText: string): string => {
 
   const out = [];
   for (const position of positions) {
+    let letter = 'A';
     // maximum
     // const value = Math.max(
     //   ...position.map((variation) => variation.pathogenicityScore)
@@ -81,7 +59,11 @@ const parseCSV = (rawText: string): string => {
         (acc, variation) => acc + +variation.pathogenicityScore,
         0
       ) / position.length;
-    const letter = getPathogenicityCode(value);
+    if (value > pathogenic) {
+      letter = 'P';
+    } else if (value < benign) {
+      letter = 'B';
+    }
     out.push(letter);
   }
 

package/src/adapters/proteomics-adapter.ts

@@ -13,19 +13,64 @@ const transformData = (data) => {
   let adaptedData = [];
 
   if (data && data.length !== 0) {
-    adaptedData = data.features.map((feature) => {
-      feature.residuesToHighlight = feature.ptms?.map((ptm) => ({
-        name: ptm.name,
-        position: ptm.position,
-        sources: ptm.sources,
-        dbReferences: ptm.dbReferences,
-      }));
-      return Object.assign(
-        feature,
-        proteomicsTrackProperties(feature, data.taxid)
-      );
+    /* Important: The PTM map is a temporary patch until multiple modifications are shown in the peptide. At this point, only 'phospho' sites are of interest. 
+      Once they are available in the data, there is no need for the below merging */
+
+    // To merge PTM data present in same residue in a same length peptide, have a map [key: start-end-phospho site 1-... phosphosite n, value: corresponding feature elements]
+    const ptmMap: Record<string, any> = {};
+    data.features.forEach((feature) => {
+      let ft = `${feature.begin}-${feature.end}`;
+      if (feature.ptms) {
+        feature.ptms.forEach((ptm) => {
+          ft += `-${ptm.position}`;
+        });
+        ptmMap[ft] = ft in ptmMap ? [...ptmMap[ft], feature] : [feature];
+      }
     });
 
+    // The else part alone is enough if the PTM information need not be merged.
+    if (Object.keys(ptmMap).length) {
+      adaptedData = Object.values(ptmMap).map((features) => {
+        // Only the dbReferences have to be merged as the rest is all the same
+        const mergedDbReferences = [];
+        features.forEach((feature) => {
+          feature.ptms.forEach((ptm) => {
+            ptm.dbReferences.forEach((dbReference) => {
+              mergedDbReferences.push(dbReference);
+            });
+          });
+        });
+
+        const mergedFeatures = {
+          type: features[0].type,
+          begin: features[0].begin,
+          end: features[0].end,
+          xrefs: features[0].xrefs,
+          evidences: features[0].evidences,
+          peptide: features[0].peptide,
+          unique: features[0].unique,
+          residuesToHighlight: features[0].ptms.map((ptm) => ({
+            name: ptm.name,
+            position: ptm.position,
+            sources: ptm.sources,
+            dbReferences: mergedDbReferences,
+          })),
+        };
+
+        return Object.assign(
+          mergedFeatures,
+          proteomicsTrackProperties(mergedFeatures, data.taxid)
+        );
+      }, []);
+    } else {
+      adaptedData = data.features.map((feature) => {
+        return Object.assign(
+          feature,
+          proteomicsTrackProperties(feature, data.taxid)
+        );
+      });
+    }
+
     adaptedData = renameProperties(adaptedData);
   }
   return adaptedData;

package/src/adapters/ptm-exchange-adapter.ts

@@ -59,50 +59,38 @@ const convertPtmExchangePtms = (
   aa: string,
   absolutePosition: number
 ) => {
-  const groupPtmsByModification: Record<string, PTM[]> = {};
-  for (const ptm of ptms) {
-    if (groupPtmsByModification[ptm.name]) {
-      groupPtmsByModification[ptm.name].push(ptm);
-    } else {
-      groupPtmsByModification[ptm.name] = [ptm];
-    }
-  }
-
-  return Object.values(groupPtmsByModification).map((groupedPtms) => {
-    const confidenceScores = new Set(
-      groupedPtms.flatMap(({ dbReferences }) =>
-        dbReferences?.map(({ properties }) => properties['Confidence score'])
-      )
+  const confidenceScores = new Set(
+    ptms.flatMap(({ dbReferences }) =>
+      dbReferences?.map(({ properties }) => properties['Confidence score'])
+    )
+  );
+  let confidenceScore: string | null = null;
+
+  if (!confidenceScores.size) {
+    console.log('PTM has no confidence score');
+  } else if (confidenceScores.size > 1) {
+    console.error(
+      `PTM has a mixture of confidence scores: ${Array.from(confidenceScores)}`
     );
-    let confidenceScore: string | null = null;
-    if (confidenceScores.size) {
-      if (confidenceScores.size > 1) {
-        console.error(
-          `PTMeXchange PTM has a mixture of confidence scores: ${Array.from(
-            confidenceScores
-          )}`
-        );
-      } else {
-        [confidenceScore] = confidenceScores;
-      }
-    }
+  } else {
+    [confidenceScore] = confidenceScores;
+  }
 
-    return {
-      source: 'PTMeXchange',
-      type: 'MOD_RES_LS',
-      start: absolutePosition,
-      end: absolutePosition,
-      shape: 'triangle',
-      tooltipContent: formatTooltip(
-        `MOD_RES_LS ${absolutePosition}-${absolutePosition}`,
-        groupedPtms,
-        aa,
-        confidenceScore
-      ),
-      color:
-        (confidenceScore && ConfidenceScoreColors[confidenceScore]) || 'black',
-    };
-  });
+  return {
+    source: 'PTMeXchange',
+    type: 'MOD_RES_LS',
+    start: absolutePosition,
+    end: absolutePosition,
+    shape: 'triangle',
+    tooltipContent: formatTooltip(
+      `MOD_RES_LS ${absolutePosition}-${absolutePosition}`,
+      ptms,
+      aa,
+      confidenceScore
+    ),
+    color:
+      (confidenceScore && ConfidenceScoreColors[confidenceScore]) || 'black',
+  };
 };
 
 const transformData = (data: ProteomicsPtm) => {
@@ -142,7 +130,7 @@ const transformData = (data: ProteomicsPtm) => {
       return Object.entries(absolutePositionToPtms).map(
         ([absolutePosition, { ptms, aa }]) =>
           convertPtmExchangePtms(ptms, aa, +absolutePosition)
-      ).flat();
+      );
     }
   }
   return [];

package/src/config.ts

@@ -815,8 +815,8 @@ const config: ProtvistaConfig = {
       name: 'ALPHAMISSENSE_PATHOGENICITY',
       label: 'AlphaMissense',
       trackType: 'nightingale-colored-sequence',
-      scale: 'B:0,H:0.1132,V:0.2264,L:0.3395,A:0.4527,l:0.5895,h:0.7264,p:0.8632,P:1',
-      'color-range': '#2166ac:0,#4290bf:0.1132,#8cbcd4:0.2264,#c3d6e0:0.3395,#e2e2e2:0.4527,#edcdba:0.5895,#e99e7c:0.7264,#d15e4b:0.8632,#b2182b:1',
+      scale: 'P:100,A:50,B:0',
+      'color-range': '#9a131a:100,#a8a9ad:50,#3d5493:0',
       tracks: [
         {
           name: 'alphamissense_pathogenicity',
@@ -851,67 +851,6 @@ const config: ProtvistaConfig = {
         },
       ],
     },
-    {
-      name: 'STRUCTURAL',
-      label: 'Structural features',
-      trackType: 'nightingale-track-canvas',
-      tracks: [
-        {
-          name: 'helix',
-          label: 'Helix',
-          filter: 'HELIX',
-          trackType: 'nightingale-track-canvas',
-          data: [
-            {
-              adapter: 'feature-adapter',
-              url: `${proteinsApiServices.features}{accession}`,
-            },
-          ],
-          tooltip: 'The positions of experimentally determined helical regions',
-        },
-        {
-          name: 'strand',
-          label: 'Beta strand',
-          filter: 'STRAND',
-          trackType: 'nightingale-track-canvas',
-          data: [
-            {
-              adapter: 'feature-adapter',
-              url: `${proteinsApiServices.features}{accession}`,
-            },
-          ],
-          tooltip: 'The positions of experimentally determined beta strands',
-        },
-        {
-          name: 'turn',
-          label: 'Turn',
-          filter: 'TURN',
-          trackType: 'nightingale-track-canvas',
-          data: [
-            {
-              adapter: 'feature-adapter',
-              url: `${proteinsApiServices.features}{accession}`,
-            },
-          ],
-          tooltip:
-            'The positions of experimentally determined hydrogen-bonded turns',
-        },
-        {
-          name: 'coiled',
-          label: 'Coiled coil',
-          filter: 'COILED',
-          trackType: 'nightingale-track-canvas',
-          data: [
-            {
-              adapter: 'feature-adapter',
-              url: `${proteinsApiServices.features}{accession}`,
-            },
-          ],
-          tooltip:
-            'Coiled coils are built by two or more alpha-helices that wind around each other to form a supercoil',
-        },
-      ],
-    },
   ],
 };
 

package/src/protvista-uniprot-structure.ts

@@ -1,9 +1,8 @@
 import { LitElement, html, svg, TemplateResult, css, nothing } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import NightingaleStructure, {
   PredictionData,
-  StructureData,
 } from '@nightingale-elements/nightingale-structure';
 import ProtvistaDatatable from 'protvista-datatable';
 import { fetchAll, loadComponent } from './utils';
@@ -21,26 +20,111 @@ const PDBLinks = [
 const alphaFoldLink = 'https://alphafold.ebi.ac.uk/entry/';
 const foldseekLink = `https://search.foldseek.com/search`;
 
+// Excluded sources from 3d-beacons are PDBe and AlphaFold models as we fetch them separately from their respective API's
+const providersFrom3DBeacons = [
+  'SWISS-MODEL',
+  'ModelArchive',
+  'PED',
+  'SASBDB',
+  'isoform.io',
+  'AlphaFill',
+  'HEGELAB',
+  'levylab',
+];
+
+type UniProtKBData = {
+  uniProtKBCrossReferences: UniProtKBCrossReference[];
+  sequence: Sequence;
+};
+
+type UniProtKBCrossReference = {
+  database: string;
+  id: string;
+  properties: Record<string, string>[];
+};
+
+type Sequence = {
+  value: string;
+  length: number;
+  molWeight: number;
+  crc64: string;
+  md5: string;
+};
+
+type BeaconsData = {
+  uniprot_entry: {
+    ac: string;
+    id: string;
+    uniprot_checksum: string;
+    sequence_length: number;
+    segment_start: number;
+    segment_end: number;
+  };
+  structures: {
+    summary: {
+      model_identifier: string;
+      model_category: string;
+      model_url: string;
+      model_format: string;
+      model_type: string | null;
+      model_page_url: string;
+      provider: string;
+      number_of_conformers: number | null;
+      ensemble_sample_url: string | null;
+      ensemble_sample_format: string | null;
+      created: string;
+      sequence_identity: number;
+      uniprot_start: number;
+      uniprot_end: number;
+      coverage: number;
+      experimental_method: string | null;
+      resolution: number | null;
+      confidence_type: string;
+      confidence_version: string | null;
+      confidence_avg_local_score: number;
+      oligomeric_state: string | null;
+      preferred_assembly_id: string | null;
+      entities: {
+        entity_type: string;
+        entity_poly_type: string;
+        identifier: string;
+        identifier_category: string;
+        description: string;
+        chain_ids: string[];
+      }[];
+    };
+  }[];
+};
+
 type ProcessedStructureData = {
   id: string;
-  source: 'PDB' | 'AlphaFold';
-  method: string;
+  source: string;
+  method?: string;
   resolution?: string;
   chain?: string;
   positions?: string;
   downloadLink?: string;
+  sourceDBLink?: string;
   protvistaFeatureId: string;
 };
 
-const processPDBData = (data: StructureData): ProcessedStructureData[] =>
-  data.dbReferences
-    .filter((xref) => xref.type === 'PDB')
+const processPDBData = (data: UniProtKBData): ProcessedStructureData[] =>
+  data.uniProtKBCrossReferences
+    .filter((xref) => xref.database === 'PDB')
     .sort((refA, refB) => refA.id.localeCompare(refB.id))
     .map(({ id, properties }) => {
       if (!properties) {
         return;
       }
-      const { chains, resolution, method } = properties;
+
+      const propertyMap = properties.reduce((acc, item) => {
+        acc[item.key] = item.value;
+        return acc;
+      }, {} as Record<string, string>);
+
+      const method = propertyMap['Method'];
+      const resolution = propertyMap['Resolution'];
+      const chains = propertyMap['Chains'];
 
       let chain;
       let positions;
@@ -79,6 +163,20 @@ const processAFData = (data: PredictionData[]): ProcessedStructureData[] =>
     downloadLink: d.pdbUrl,
   }));
 
+const process3DBeaconsData = (data: BeaconsData): ProcessedStructureData[] => {
+  const otherStructures = data.structures.filter(({ summary }) =>
+    providersFrom3DBeacons.includes(summary.provider)
+  );
+  return otherStructures.map(({ summary }) => ({
+    id: summary['model_identifier'],
+    source: summary.provider,
+    positions: `${summary['uniprot_start']}-${summary['uniprot_end']}`,
+    protvistaFeatureId: summary['model_identifier'],
+    downloadLink: summary['model_url'],
+    sourceDBLink: summary['model_page_url'],
+  }));
+};
+
 const AFMetaInfo = html`
   <strong>Model Confidence:</strong>
   <ul class="no-bullet">
@@ -151,6 +249,9 @@ class ProtvistaUniprotStructure extends LitElement {
   private loading?: boolean;
   private alphamissenseAvailable?: boolean;
 
+  @state()
+  private modelUrl = '';
+
   constructor() {
     super();
     loadComponent('nightingale-structure', NightingaleStructure);
@@ -176,22 +277,34 @@ class ProtvistaUniprotStructure extends LitElement {
   async connectedCallback() {
     super.connectedCallback();
     if (!this.accession) return;
-    // https://www.ebi.ac.uk/pdbe/api/mappings/best_structures/${this.accession}
-    const pdbUrl = `https://www.ebi.ac.uk/proteins/api/proteins/${this.accession}`;
-    const alphaFoldURl = `https://alphafold.ebi.ac.uk/api/prediction/${this.accession}`;
 
-    const rawData = await fetchAll([pdbUrl, alphaFoldURl]);
+    // We are showing PDBe models returned by UniProt's API as there is inconsistency between UniProt's recognised ones and 3d-beacons.
+    const pdbUrl = `https://rest.uniprot.org/uniprotkb/${this.accession}`;
+    const alphaFoldUrl = `https://alphafold.ebi.ac.uk/api/prediction/${this.accession}`;
+    // exclude_provider accepts only value hence 'pdbe' as majority of the models are from there.
+    const beaconsUrl = `https://www.ebi.ac.uk/pdbe/pdbe-kb/3dbeacons/api/uniprot/summary/${this.accession}.json?exclude_provider=pdbe`;
 
+    const rawData = await fetchAll([pdbUrl, alphaFoldUrl, beaconsUrl]);
     this.loading = false;
+
+    const pdbData = processPDBData(rawData[pdbUrl] || []);
+    let afData = [];
+    // Check if AF sequence matches UniProt sequence
+    if (
+      rawData[pdbUrl].sequence?.value === rawData[alphaFoldUrl][0]?.sequence
+    ) {
+      afData = processAFData(rawData[alphaFoldUrl] || []);
+    }
+    const beaconsData = process3DBeaconsData(rawData[beaconsUrl] || []);
+
     // TODO: return if no data at all
     // if (!payload) return;
-    const pdbData = processPDBData(rawData[pdbUrl] || []);
-    const afData = processAFData(rawData[alphaFoldURl] || []);
-    const data = [...pdbData, ...afData];
+
+    const data = [...pdbData, ...afData, ...beaconsData];
     if (!data || !data.length) return;
 
     this.data = data;
-    this.alphamissenseAvailable = rawData[alphaFoldURl].some(
+    this.alphamissenseAvailable = rawData[alphaFoldUrl].some(
       (data) => data.amAnnotationsUrl
     );
   }
@@ -233,12 +346,25 @@ class ProtvistaUniprotStructure extends LitElement {
     }
   }
 
-  onTableRowClick({ id }: { id: string }) {
-    this.structureId = id;
-    if (this.structureId.startsWith('AF-')) {
-      this.metaInfo = AFMetaInfo;
+  onTableRowClick({
+    id,
+    source,
+    downloadLink,
+  }: {
+    id: string;
+    source?: string;
+    downloadLink?: string;
+  }) {
+    if (providersFrom3DBeacons.includes(source)) {
+      this.modelUrl = downloadLink;
+      this.structureId = undefined;
     } else {
-      this.metaInfo = undefined;
+      this.structureId = id;
+      if (this.structureId.startsWith('AF-')) {
+        this.metaInfo = AFMetaInfo;
+      } else {
+        this.metaInfo = undefined;
+      }
     }
   }
 
@@ -358,7 +484,10 @@ class ProtvistaUniprotStructure extends LitElement {
                 protein-accession=${this.accession}
                 color-theme=${this.colorTheme}
               ></nightingale-structure>`
-            : html``}
+            : html`<nightingale-structure
+                model-url=${this.modelUrl}
+                color-theme=${this.colorTheme}
+              ></nightingale-structure>`}
         </div>
         <div class="protvista-uniprot-structure__table">
           ${this.data && this.data.length
@@ -386,9 +515,11 @@ class ProtvistaUniprotStructure extends LitElement {
                         chain,
                         positions,
                         downloadLink,
+                        sourceDBLink,
                       }) => html`<tr
                         data-id="${id}"
-                        @click="${() => this.onTableRowClick({ id })}"
+                        @click="${() =>
+                          this.onTableRowClick({ id, source, downloadLink })}"
                       >
                         <td data-filter="source" data-filter-value="${source}">
                           <strong>${source}</strong>
@@ -415,23 +546,31 @@ class ProtvistaUniprotStructure extends LitElement {
                                   (prev, curr) => html` ${prev} · ${curr} `
                                 )}
                               `
-                            : html`<a href="${alphaFoldLink}${this.accession}"
+                            : ``}
+                          ${source === 'AlphaFold'
+                            ? html`<a href="${alphaFoldLink}${this.accession}"
                                 >AlphaFold</a
-                              >`}
+                              >`
+                            : ``}
+                          ${sourceDBLink
+                            ? html`<a href="${sourceDBLink}">${source}</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'
-                                )}`
+                                href="${downloadLink}"
+                                class="download-link"
+                                >${svg`${unsafeHTML(downloadIcon)}`}</a
+                              > `
                             : ''}
+                          ${source === 'PDB' || source === 'AlphaFold'
+                            ? html`·
+                              ${foldseekURL(
+                                source === 'PDB' ? id : this.accession,
+                                source === 'PDB' ? 'PDB' : 'AlphaFoldDB'
+                              )}`
+                            : ``}
                         </td>
                       </tr>`
                     )}