protvista-uniprot 4.6.1 → 4.6.3

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

@@ -9,14 +9,24 @@ type ProcessedStructureData = {
     downloadLink?: string;
     sourceDBLink?: string;
     protvistaFeatureId: string;
+    amAnnotationsUrl?: string;
+    isoform?: TemplateResult;
 };
+type IsoformIdSequence = [
+    {
+        isoformId: string;
+        sequence: string;
+    }
+];
 declare class ProtvistaUniprotStructure extends LitElement {
     accession?: string;
     sequence?: string;
+    checksum?: string;
     data?: ProcessedStructureData[];
     structureId?: string;
     metaInfo?: TemplateResult;
     colorTheme?: string;
+    isoforms?: IsoformIdSequence;
     private loading?;
     private alphamissenseAvailable?;
     private modelUrl;
@@ -28,6 +38,9 @@ declare class ProtvistaUniprotStructure extends LitElement {
         structureId: {
             type: StringConstructor;
         };
+        checksum: {
+            type: StringConstructor;
+        };
         sequence: {
             type: StringConstructor;
         };
@@ -43,16 +56,21 @@ declare class ProtvistaUniprotStructure extends LitElement {
         alphamissenseAvailable: {
             type: BooleanConstructor;
         };
+        isoforms: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
     };
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     updated(): void;
     addStyles(): void;
     removeStyles(): void;
-    onTableRowClick({ id, source, downloadLink, }: {
+    onTableRowClick({ id, source, downloadLink, amAnnotationsUrl, }: {
         id: string;
         source?: string;
         downloadLink?: string;
+        amAnnotationsUrl?: string;
     }): void;
     get cssStyle(): import('lit').CSSResult;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "protvista-uniprot",
   "description": "ProtVista tool for the UniProt website",
-  "version": "4.6.1",
+  "version": "4.6.3",
   "files": [
     "dist",
     "src"

package/src/protvista-uniprot-structure.ts

@@ -19,6 +19,7 @@ const PDBLinks = [
 ];
 const alphaFoldLink = 'https://alphafold.ebi.ac.uk/entry/';
 const foldseekLink = `https://search.foldseek.com/search`;
+const uniprotKBLink = 'https://www.uniprot.org/uniprotkb/';
 
 // Excluded sources from 3d-beacons are PDBe and AlphaFold models as we fetch them separately from their respective API's
 const providersFrom3DBeacons = [
@@ -33,6 +34,7 @@ const providersFrom3DBeacons = [
 ];
 
 const sourceMethods = new Map([
+  ['AlphaFold DB', 'Predicted'],
   ['SWISS-MODEL', 'Modeling'],
   ['ModelArchive', 'Modeling'],
   ['PED', 'Modeling'],
@@ -63,7 +65,7 @@ type Sequence = {
 };
 
 type BeaconsData = {
-  uniprot_entry: {
+  uniprot_entry?: {
     ac: string;
     id: string;
     uniprot_checksum: string;
@@ -71,6 +73,11 @@ type BeaconsData = {
     segment_start: number;
     segment_end: number;
   };
+  entry?: {
+    sequence: string;
+    checksum: string;
+    checksum_type: string;
+  };
   structures: {
     summary: {
       model_identifier: string;
@@ -117,80 +124,153 @@ type ProcessedStructureData = {
   downloadLink?: string;
   sourceDBLink?: string;
   protvistaFeatureId: string;
+  amAnnotationsUrl?: string;
+  isoform?: TemplateResult;
+};
+
+type IsoformIdSequence = [
+  {
+    isoformId: string;
+    sequence: string;
+  }
+];
+
+const getIsoformNum = (s) => {
+  const match = s.match(/-(\d+)-F1$/);
+  return match ? Number(match[1]) : 0;
 };
 
 const processPDBData = (data: UniProtKBData): ProcessedStructureData[] =>
-  data.uniProtKBCrossReferences ? data.uniProtKBCrossReferences
-    .filter((xref) => xref.database === 'PDB')
-    .sort((refA, refB) => refA.id.localeCompare(refB.id))
-    .map(({ id, properties }) => {
-      if (!properties) {
-        return;
-      }
+  data.uniProtKBCrossReferences
+    ? data.uniProtKBCrossReferences
+        .filter((xref) => xref.database === 'PDB')
+        .sort((refA, refB) => refA.id.localeCompare(refB.id))
+        .map(({ id, properties }) => {
+          if (!properties) {
+            return;
+          }
+
+          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;
+          if (chains) {
+            const tokens = chains.split('=');
+            if (tokens.length === 2) {
+              [chain, positions] = tokens;
+            }
+          }
+          const output: ProcessedStructureData = {
+            id,
+            source: 'PDB',
+            method,
+            resolution:
+              !resolution || resolution === '-' ? undefined : resolution,
+            downloadLink: `https://www.ebi.ac.uk/pdbe/entry-files/download/pdb${id.toLowerCase()}.ent`,
+            chain,
+            positions,
+            protvistaFeatureId: id,
+          };
+          return output;
+        })
+        .filter(
+          (
+            transformedItem: ProcessedStructureData | undefined
+          ): transformedItem is ProcessedStructureData =>
+            transformedItem !== undefined
+        )
+    : [];
+
+const processAFData = (
+  data: AlphaFoldPayload,
+  accession?: string,
+  isoforms?: IsoformIdSequence,
+  canonicalSequence?: string,
+): ProcessedStructureData[] =>
+  data
+    .map((d) => {
+      const isoformMatch = isoforms?.find(
+        ({ sequence }) => d.sequence === sequence
+      );
 
-      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;
-      if (chains) {
-        const tokens = chains.split('=');
-        if (tokens.length === 2) {
-          [chain, positions] = tokens;
-        }
-      }
-      const output: ProcessedStructureData = {
-        id,
-        source: 'PDB',
-        method,
-        resolution: !resolution || resolution === '-' ? undefined : resolution,
-        downloadLink: `https://www.ebi.ac.uk/pdbe/entry-files/download/pdb${id.toLowerCase()}.ent`,
-        chain,
-        positions,
-        protvistaFeatureId: id,
+      const isCanonical = isoformMatch.sequence === canonicalSequence;
+      const isoformElement = isoformMatch
+        ? html`<a
+            href="${uniprotKBLink}${accession}/entry#${isoformMatch.isoformId}"
+            >${isoformMatch.isoformId} ${isCanonical ? '(Canonical)' : ''}</a
+          >`
+        : null;
+      return {
+        id: d.modelEntityId,
+        source: 'AlphaFold',
+        method: 'Predicted',
+        positions: `${d.sequenceStart}-${d.sequenceEnd}`,
+        protvistaFeatureId: d.modelEntityId,
+        downloadLink: d.pdbUrl,
+        amAnnotationsUrl: d.amAnnotationsUrl,
+        isoform: isoformElement,
       };
-      return output;
     })
-    .filter(
-      (
-        transformedItem: ProcessedStructureData | undefined
-      ): transformedItem is ProcessedStructureData =>
-        transformedItem !== undefined
-    ) : [];
-
-const processAFData = (data: AlphaFoldPayload): ProcessedStructureData[] =>
-  data.map((d) => ({
-    id: d.modelEntityId,
-    source: 'AlphaFold',
-    method: 'Predicted',
-    positions: `${d.sequenceStart}-${d.sequenceEnd}`,
-    protvistaFeatureId: d.modelEntityId,
-    downloadLink: d.pdbUrl,
-  }));
-
-const process3DBeaconsData = (data: BeaconsData): ProcessedStructureData[] => {
-  const otherStructures = data?.structures?.filter(({ summary }) =>
-    providersFrom3DBeacons.includes(summary.provider)
-  );
+    .sort((a, b) => {
+      return getIsoformNum(a.id) - getIsoformNum(b.id);
+    });
+
+const process3DBeaconsData = (
+  data: BeaconsData,
+  accession: string | undefined,
+  checksum: string | undefined
+): ProcessedStructureData[] => {
+  // If accession is provided without checksum, filter by whitelisted providers
+  const filterByProviders = !!accession && !checksum;
+
+  let structures = filterByProviders
+    ? data?.structures?.filter(({ summary }) =>
+        providersFrom3DBeacons.includes(summary.provider)
+      )
+    : data?.structures?.sort(
+        (a, b) =>
+          b.summary.confidence_avg_local_score -
+          a.summary.confidence_avg_local_score
+      );
+
+  if (accession && checksum && structures) {
+    const matchIndex = structures.findIndex(({ summary }) =>
+      summary.model_identifier.includes(accession)
+    );
+
+    if (matchIndex !== -1) {
+      structures = [
+        structures[matchIndex],
+        ...structures.slice(0, matchIndex),
+        ...structures.slice(matchIndex + 1),
+      ];
+    }
+  }
+
   return (
-    otherStructures?.map(({ summary }) => ({
-      id: summary['model_identifier'],
+    structures?.map(({ summary }) => ({
+      id: summary.model_identifier,
       source: summary.provider,
       method: sourceMethods.get(summary.provider),
-      positions: `${summary['uniprot_start']}-${summary['uniprot_end']}`,
-      protvistaFeatureId: summary['model_identifier'],
-      downloadLink: summary['model_url'],
-      // isoform.io does not have a model page url. Link to their homepage instead.
+      positions: `${summary.uniprot_start || 1}-${
+        summary.uniprot_end || data.entry?.sequence.length
+      }`,
+      protvistaFeatureId: summary.model_identifier,
+      downloadLink: summary.model_url,
       sourceDBLink:
         summary.provider === 'isoform.io'
           ? 'https://www.isoform.io/home'
-          : summary['model_page_url'],
+          : summary.model_page_url,
+      chain:
+        summary.entities?.flatMap((entity) => entity.chain_ids).join(', ') ||
+        undefined,
     })) || []
   );
 };
@@ -261,10 +341,12 @@ const styleId = 'protvista-styles';
 class ProtvistaUniprotStructure extends LitElement {
   accession?: string;
   sequence?: string;
+  checksum?: string;
   data?: ProcessedStructureData[];
   structureId?: string;
   metaInfo?: TemplateResult;
   colorTheme?: string;
+  isoforms?: IsoformIdSequence;
   private loading?: boolean;
   private alphamissenseAvailable?: boolean;
 
@@ -286,41 +368,77 @@ class ProtvistaUniprotStructure extends LitElement {
     return {
       accession: { type: String },
       structureId: { type: String },
+      checksum: { type: String },
       sequence: { type: String },
       data: { type: Object },
       loading: { type: Boolean },
       colorTheme: { type: String },
       alphamissenseAvailable: { type: Boolean },
+      isoforms: { type: Object, attribute: false },
     };
   }
 
   async connectedCallback() {
     super.connectedCallback();
-    if (!this.accession) return;
+    if (!this.accession && !this.checksum) return;
 
     // 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 pdbUrl =
+      this.accession && !this.checksum
+        ? `https://rest.uniprot.org/uniprotkb/${this.accession}`
+        : '';
+    // AlphaMissense predictions are only available in AF predictions endpoint
+    const alphaFoldUrl =
+      this.accession && !this.checksum
+        ? `https://alphafold.ebi.ac.uk/api/prediction/${this.accession}`
+        : '';
+    // exclude_provider accepts only value hence 'pdbe' as majority of the models are from there if querying by accession
+    const beaconsUrl =
+      this.accession && !this.checksum
+        ? `https://www.ebi.ac.uk/pdbe/pdbe-kb/3dbeacons/api/uniprot/summary/${this.accession}.json?exclude_provider=pdbe`
+        : `https://www.ebi.ac.uk/pdbe/pdbe-kb/3dbeacons/api/v2/sequence/?id=${this.checksum}&type=md5`;
 
     const rawData = await fetchAll([pdbUrl, alphaFoldUrl, beaconsUrl]);
     this.loading = false;
 
     const pdbData = processPDBData(rawData[pdbUrl] || []);
     let afData = [];
-    // Check if AF sequence matches UniProt sequence
-    const alphaFoldSequenceMatch = rawData[alphaFoldUrl]?.filter(
-      ({ sequence: afSequence }) => rawData[pdbUrl]?.sequence?.value === afSequence || this.sequence === afSequence
-    );
-    if (alphaFoldSequenceMatch?.length) {
-      afData = processAFData(alphaFoldSequenceMatch);
-      this.alphamissenseAvailable = alphaFoldSequenceMatch.some(
-        (data) => data.amAnnotationsUrl
+
+    if (this.isoforms && rawData[alphaFoldUrl]?.length) {
+      // Include isoforms that are provided in the UniProt isoforms mapping and ignore the rest from AF payload that are out of sync with UniProt
+      const alphaFoldSequenceMatches = rawData[alphaFoldUrl]?.filter(
+        ({ sequence: afSequence }) =>
+          this.isoforms?.some(({ sequence }) => afSequence === sequence) 
+      );
+
+      afData = processAFData(
+        alphaFoldSequenceMatches,
+        this.accession,
+        this.isoforms,
+        rawData[pdbUrl]?.sequence?.value
       );
+
+      this.alphamissenseAvailable = !!afData?.[0].amAnnotationsUrl;
+    } else {
+      // Check if AF sequence matches UniProt sequence
+      const alphaFoldSequenceMatch = rawData[alphaFoldUrl]?.filter(
+        ({ sequence: afSequence }) =>
+          rawData[pdbUrl]?.sequence?.value === afSequence ||
+          this.sequence === afSequence
+      );
+      if (alphaFoldSequenceMatch?.length) {
+        afData = processAFData(alphaFoldSequenceMatch);
+        this.alphamissenseAvailable = alphaFoldSequenceMatch.some(
+          (data) => data.amAnnotationsUrl
+        );
+      }
     }
 
-    const beaconsData = process3DBeaconsData(rawData[beaconsUrl] || []);
+    const beaconsData = process3DBeaconsData(
+      rawData[beaconsUrl] || [],
+      this.accession,
+      this.checksum
+    );
 
     // TODO: return if no data at all
     // if (!payload) return;
@@ -341,7 +459,11 @@ class ProtvistaUniprotStructure extends LitElement {
     ) as ProtvistaDatatable;
     if (!protvistaDatatableElt?.selectedid && this.data?.[0]) {
       // Select the first element in the table
-      this.onTableRowClick({ id: this.data[0].id, source: this.data[0].source, downloadLink: this.data[0].downloadLink });
+      this.onTableRowClick({
+        id: this.data[0].id,
+        source: this.data[0].source,
+        downloadLink: this.data[0].downloadLink,
+      });
       protvistaDatatableElt.selectedid = this.data[0].id;
     }
   }
@@ -372,22 +494,28 @@ class ProtvistaUniprotStructure extends LitElement {
     id,
     source,
     downloadLink,
+    amAnnotationsUrl,
   }: {
     id: string;
     source?: string;
     downloadLink?: string;
+    amAnnotationsUrl?: string;
   }) {
-    if (providersFrom3DBeacons.includes(source)) {
+    if (this.checksum || providersFrom3DBeacons.includes(source)) {
       this.modelUrl = downloadLink;
       // Reset the rest
       this.structureId = undefined;
       this.metaInfo = undefined;
       this.colorTheme = 'alphafold';
+      if (source === 'AlphaFold DB') {
+        this.metaInfo = AFMetaInfo;
+      }
     } else {
       this.structureId = id;
       this.modelUrl = undefined;
       if (this.structureId.startsWith('AF-')) {
         this.metaInfo = AFMetaInfo;
+        this.alphamissenseAvailable = !!amAnnotationsUrl;
       } else {
         this.metaInfo = undefined;
       }
@@ -525,6 +653,7 @@ class ProtvistaUniprotStructure extends LitElement {
                     <tr>
                       <th data-filter="source">Source</th>
                       <th>Identifier</th>
+                      ${this.isoforms ? html`<th>Isoform</th>` : ''}
                       <th data-filter="method">Method</th>
                       <th>Resolution</th>
                       <th>Chain</th>
@@ -544,15 +673,23 @@ class ProtvistaUniprotStructure extends LitElement {
                         positions,
                         downloadLink,
                         sourceDBLink,
+                        isoform,
+                        amAnnotationsUrl,
                       }) => html`<tr
                         data-id="${id}"
                         @click="${() =>
-                          this.onTableRowClick({ id, source, downloadLink })}"
+                          this.onTableRowClick({
+                            id,
+                            source,
+                            downloadLink,
+                            amAnnotationsUrl,
+                          })}"
                       >
                         <td data-filter="source" data-filter-value="${source}">
                           <strong>${source}</strong>
                         </td>
                         <td>${id}</td>
+                        ${this.isoforms ? html`<td>${isoform}</td>` : ''}
                         <td data-filter="method" data-filter-value="${method}">
                           ${method}
                         </td>
@@ -613,7 +750,8 @@ class ProtvistaUniprotStructure extends LitElement {
             : html``}
           ${!this.data && !this.loading
             ? html`<div class="protvista-no-results">
-                No structure information available for ${this.accession}
+                No structure information available
+                ${this.accession ? `for ${this.accession}` : ''}
               </div>`
             : html``}
         </div>