Added missense support to alphafold (#793)

Author: jonk-ebi

widgets/htdocs/alphafold/components/confidenceMissenseToggle.js

@@ -0,0 +1,63 @@
+import { html, css, LitElement } from 'https://unpkg.com/[email protected]/index.js?module';
+
+export class ConfidenceMissenseToggle extends LitElement {
+
+  static get styles() {
+
+    return css`
+    .panel-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: var(--main-dark);
+        color: white;
+        font-weight: bold;
+        padding: 4px 28px 4px 4px;
+      }
+    `
+  }
+  
+  static get properties() {
+    return {
+      isConfidenceSelected: { attribute: false }
+    }
+  }
+  
+  createOption(id,label,isChecked)
+  {
+    if(isChecked)
+    {
+    return html`
+      <input type="radio" name="toggleConfidenceMissense" @change=${this.onToggleChanged}
+      id=${id} checked /><label for=${id}>${label}</label>
+    `;
+    }
+    else
+    {
+      return html`
+      <input type="radio" name="toggleConfidenceMissense" @change=${this.onToggleChanged}
+      id=${id} /><label for=${id}>${label}</label>
+    `;
+    }
+  }
+  
+  render() {
+    
+    let confidenceChecked = this.createOption('tconfidence','Model Confidence',this.isConfidenceSelected);
+    let missenseChecked = this.createOption('tmissense','AlphaMissense Pathogenicity',!this.isConfidenceSelected);
+    
+    return html`
+    <div class="panel-title">
+    <span>Toggle</span>
+    </div>
+      <div class="body">
+        <div class="row">
+          
+          ${confidenceChecked}
+          ${missenseChecked}
+          
+        </div>
+    `};
+};
+
+customElements.define('confidence-missense-toggle', ConfidenceMissenseToggle);

widgets/htdocs/alphafold/components/ensemblAlphafoldMissense.js

@@ -0,0 +1,112 @@
+const COLOR_MAP = {
+    min: { r: 0, g: 0, b: 187 },
+    center: { r: 255, g: 255, b: 255 },
+    max: { r: 255, g: 0, b: 0 },
+}
+
+const BASE_COLOR = { r: 100, g: 100, b: 100 };
+
+export class EnsemblAlphafoldMissense
+{
+  constructor() {
+    this.sequenceColors = [];
+    this.hasMissenseLoaded = false;
+    this.missenseSelection = {
+      data: [
+      { struct_asym_id: 'A', color: BASE_COLOR }
+      ]
+    }
+  }
+  
+  getSelection() {
+    return this.missenseSelection;
+  }
+  
+  hasMissense()
+  {
+    return this.hasMissenseLoaded;
+  }
+  
+  async loadMissense(annotationCSVUrl) {
+    
+    const missenseCSVResponse = await fetch(annotationCSVUrl);
+    
+    if (!missenseCSVResponse.ok) {
+      this.hasMissenseLoaded = false; 
+      console.log("Unable to load missense");
+      return;
+    }
+    
+    //process file
+    this.hasMissenseLoaded = this.extractColors(await missenseCSVResponse.text());
+  }
+
+  extractColors(data){
+    const DELIMITER = ',';
+    const MUTATION_COLUMN = 0;
+    const SCORE_COLUMN = 1;
+    const N_HEADER_ROWS = 1;
+  
+    const lines = data.split('\n').filter(line => line.trim() !== '' && !line.trim().startsWith('#'));
+    if (N_HEADER_ROWS > 0) lines.splice(0, N_HEADER_ROWS);
+    const rows = lines.map(line => line.split(DELIMITER));
+    
+    //const scores = { [seq_id: number]: number[] } = {};
+    const scores = {};
+    for (const row of rows) {
+      const mutation = row[MUTATION_COLUMN];
+      const score = Number(row[SCORE_COLUMN]);
+      const match = mutation.match(/([A-Za-z]+)([0-9]+)([A-Za-z]+)/);
+      if (!match) 
+      {
+        console.log("Missense CSV parse error!");
+        console(row);
+        throw new Error(`FormatError: cannot parse "${mutation}" as a mutation (should look like Y123A)`);
+      }
+      const seq_id = match[2];
+
+      if(!scores[seq_id])
+      {
+        scores[seq_id] = []
+      }
+      scores[seq_id].push(Number(score));
+      
+    }
+
+    for (const seq_id in scores) {
+      const aggrScore = this.mean(scores[seq_id]); // The original paper also uses mean (https://www.science.org/doi/10.1126/science.adg7492)
+      const color = this.assignColor(aggrScore);
+      this.sequenceColors.push([Number(seq_id), color]);
+    }
+
+    this.missenseSelection.data.push(
+      ...this.sequenceColors.map((rc) =>  ({ 'struct_asym_id': 'A', 'residue_number': rc[0], 'color': rc[1]}))
+    ) // TODO here I assume the model is always chain A, is it correct?
+
+    return true;
+  }
+  
+  mean(values) {
+    return values.reduce((a, b) => a + b, 0) / values.length;
+  }
+  
+  /** Map a score within [0, 1] to a color (0 -> COLOR_MAP.min, 0.5 -> COLOR_MAP.center, 1 -> COLOR_MAP.max) */
+  assignColor(score) {
+    if (score <= 0.5) {
+      return this.mixColor(COLOR_MAP.min, COLOR_MAP.center, 2 * score);
+    }
+    else {
+      return this.mixColor(COLOR_MAP.center, COLOR_MAP.max, 2 * score - 1);
+    }
+  }
+  
+  mixColor(color0, color1, q) {
+    return {
+      r: color0.r * (1 - q) + color1.r * q,
+      g: color0.g * (1 - q) + color1.g * q,
+      b: color0.b * (1 - q) + color1.b * q,
+    };
+  }
+
+}
+

widgets/htdocs/alphafold/components/ensemblAlphafoldProtein.js

@@ -1,10 +1,12 @@
-import { html, LitElement } from 'https://unpkg.com/[email protected]/index.js?module';
+import { html, nothing, LitElement } from 'https://unpkg.com/[email protected]/index.js?module';
 
 import { MolstarController } from '../controllers/molstarController.js';
 import { ExonsController } from '../controllers/exonsController.js';
 import { ProteinFeaturesController } from '../controllers/proteinFeaturesController.js';
 import { VariantsController } from '../controllers/variantsController.js';
 import { ConfidenceColorsController } from '../controllers/confidenceColorsController.js';
+import { MissenseController } from '../controllers/missenseController.js';
+import { ConfidenceMissenseColorsController} from '../controllers/confidenceMissenseController.js'
 
 import {
   fetchAlphaFoldId,
@@ -15,6 +17,8 @@ import './exonsControlPanel.js';
 import './variantsControlPanel.js';
 import './defaultColorsPanel.js';
 import './proteinFeaturesControlPanel.js';
+import './missenseColorsPanel.js';
+import './confidenceMissenseToggle.js';
 
 
 export class EnsemblAlphafoldProtein extends LitElement {
@@ -35,6 +39,12 @@ export class EnsemblAlphafoldProtein extends LitElement {
     this.confidenceColorsController = new ConfidenceColorsController({
       host: this
     })
+    this.confidenceMissenseColorsController = new ConfidenceMissenseColorsController({
+      host: this
+    })
+    this.missenseController = new MissenseController({host:this});
+    
+    
   }
 
   // prevent the component from rendering into the shadow DOM, see README.md for explanation
@@ -53,10 +63,14 @@ export class EnsemblAlphafoldProtein extends LitElement {
       this.exonsController.load({ rootUrl: restUrlRoot, enspId }),
       this.proteinFeaturesController.load({ rootUrl: restUrlRoot, enspId }),
       this.variantsController.load({ rootUrl: restUrlRoot, enspId })
-    ]).then(([alphafoldId]) => {
+    ]).then(this.molstarController.getModelFileAndAnnotationUrl   
+    ).then((alphafoldData) => {
+      this.missenseController.load(alphafoldData.annotation);
+      return alphafoldData;
+    }).then((alphafoldData)=> {
       // below is a promise; make sure it gets returned
       return this.molstarController.renderAlphafoldStructure({
-        moleculeId: alphafoldId,
+        modelFileUrl: alphafoldData.cif,
         canvasContainer: molstarContainer
       });
     }).then(() => {
@@ -66,6 +80,7 @@ export class EnsemblAlphafoldProtein extends LitElement {
       });
       this.onLoadComplete();
     }).catch(error => {
+      console.log(error);
       this.onLoadFailed(error);
     });
   }
@@ -74,19 +89,27 @@ export class EnsemblAlphafoldProtein extends LitElement {
     if (!this.loadCompleted) {
       return;
     }
+    
     const selections = [
       this.exonsController.getSelectedExons(),
       this.proteinFeaturesController.getSelectedFeatures(),
       this.variantsController.getSelectedSiftVariants(),
       this.variantsController.getSelectedPolyphenVariants()
-    ].flat();
-
-    const showConfidence = !selections.length
+      ].flat()
+    const hasNoSelection = !selections.length
+    
+    let updateData = {
+      selections: selections,
+      showConfidence: hasNoSelection
+    }
 
-    this.molstarController.updateSelections({
-      selections,
-      showConfidence
-    });
+    if(hasNoSelection && !this.confidenceMissenseColorsController.showConfidence)
+    {
+      updateData.altSelection = this.missenseController.getSelection();
+      updateData.showConfidence = false;
+    }
+    
+    this.molstarController.updateSelections(updateData);
   }
 
   onLoadComplete() {
@@ -106,7 +129,7 @@ export class EnsemblAlphafoldProtein extends LitElement {
 
   render() {
     return html`
-      <link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-light-3.0.0.css">
+      <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pdbe-molstar-light.css">
       <div class="container">
         <div class="molstar-canvas"></div>
         <div class="controls">
@@ -147,9 +170,22 @@ export class EnsemblAlphafoldProtein extends LitElement {
           .onVariantSelectionChange=${this.variantsController.onSelectionChange}
         ></variants-control-panel>
       `}
-      <default-colors-panel></default-colors-panel>
+
+      ${this.missenseController.hasMissense() ? html`
+       <confidence-missense-toggle
+        .onToggleChanged=${this.confidenceMissenseColorsController.toggle}
+        .isConfidenceSelected=${this.confidenceMissenseColorsController.getShowConfidence()}
+       ></confidence-missense-toggle>
+      ` : nothing }
+
+      ${this.confidenceMissenseColorsController.showConfidence ? html`
+        <default-colors-panel></default-colors-panel>` :
+        html`
+        <missense-colors-panel></missense-colors-panel>`
+      }
+
     `;
   }
 }
 
-customElements.define('ensembl-alphafold-protein', EnsemblAlphafoldProtein);
+customElements.define('ensembl-alphafold-protein', EnsemblAlphafoldProtein);