Merge pull request #79 from dms-viz/support-non-numeric-pdb-numbering

Add support for insertion codes

CHANGELOG.md

@@ -368,4 +368,26 @@
 
 ### Removed
 
+- N/A
+
+## [0.4.0] - 2023-02-13
+
+### Added
+
+- Support for insertion codes
+- The software version is dynamically displayed on the page
+- Meta tags for SEO
+- Add median as a summary statistic
+
+### Changed
+
+- Chart options are open by default
+- Select all sites is now a button
+
+### Deprecated
+
+- N/A
+
+### Removed
+
 - N/A

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dms-viz.github.io",
   "private": true,
-  "version": "v0.3.1",
+  "version": "v0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

v0/js/protein.js

@@ -68,17 +68,20 @@ export class Protein extends EventTarget {
       if (pickingProxy && pickingProxy.atom) {
         let atom = pickingProxy.atom;
 
+        // Take into account the insertion code
+        let resno = String(atom.resno) + atom.inscode;
+
         // Get the correct site_reference using atom.resno and atom.chainname
         let siteReference =
-          protein.refMap[atom.resno]?.polymer ||
-          protein.refMap[atom.resno]?.[atom.chainname] ||
+          protein.refMap[resno]?.polymer ||
+          protein.refMap[resno]?.[atom.chainname] ||
           "N/A";
 
         tooltip.innerHTML = `<strong>Reference Site:</strong> ${siteReference} </br>
           <strong>Residue:</strong> ${atom.resname}${protein.#getOneLetterCode(
           atom.resname
         )} </br>
-          <strong>Residue #:</strong> ${atom.resno}  </br>
+          <strong>Residue #:</strong> ${resno}  </br>
           <strong>Chain:</strong> ${atom.chainname}`;
         tooltip.style.display = "block";
       } else {
@@ -422,23 +425,21 @@ export class Protein extends EventTarget {
 
     // Make an NGL selection string for the selected sites
     let selectedSitesStrings = [];
+
     sites.forEach((d) => {
-      const site = d.site_protein;
+      const site = protein.#formatSiteCode(d.site_protein);
       const chains = d.site_chain.split(" ");
-      // If the site isn't a number, it's not in the protein structure
-      if (isNaN(parseInt(site))) {
-        return;
-      } else {
-        const siteStrings = chains
-          .map((chain) => protein.#makeSiteString(site, chain))
-          .join(" or ");
-        selectedSitesStrings.push(siteStrings);
-      }
+      const siteStrings = chains
+        .map((chain) => protein.#makeSiteString(site, chain))
+        .join(" or ");
+      selectedSitesStrings.push(siteStrings);
     });
+
     protein.currentSelectionSiteString = selectedSitesStrings.length
       ? `protein and (${selectedSitesStrings.join(" or ")})`
       : undefined;
 
+    console.log(protein.currentSelectionSiteString);
     // Create a representation of the selected sites on the protein structure
     if (protein.currentSelectionSiteString !== undefined) {
       protein.stage.getRepresentationsByName("currentSelection").dispose();
@@ -553,6 +554,26 @@ export class Protein extends EventTarget {
   #makeSiteString(site, chain) {
     return `(${chain != "polymer" ? ":" : ""}${chain} and ${site})`;
   }
+  /**
+   * Format sites to handle insertion codes
+   * @param {String}
+   */
+
+  #formatSiteCode(site) {
+    // Attempt to convert the site string into a number
+    const numberPart = parseFloat(site);
+
+    // Check if the full site string was numeric or if it had an insertion code
+    if (!isNaN(numberPart) && numberPart.toString().length < site.length) {
+      // The site has an insertion code; extract it
+      const insertionCode = site.substring(numberPart.toString().length);
+      // Reconnect them with a '^' character
+      return numberPart + "^" + insertionCode.toUpperCase();
+    }
+
+    // If no insertion code is present or conversion was unsuccessful, return original site
+    return numberPart + "^";
+  }
   /**
    * Format the selection string for non-carbon hydrogen atoms
    * @param {String}

v0/js/tool.js

@@ -605,9 +605,9 @@ export class Tool {
       },
       backgroundRepresentation: { abbrev: "br", default: "rope", json: false },
       ligandRepresentation: { abbrev: "lr", default: "spacefill", json: false },
-      proteinColor: { abbrev: "pc", default: "#363636", json: false },
-      backgroundColor: { abbrev: "bc", default: "#363636", json: false },
-      ligandColor: { abbrev: "lc", default: "#363636", json: false },
+      proteinColor: { abbrev: "pc", default: "#c9c9c9", json: false },
+      backgroundColor: { abbrev: "bc", default: "#c9c9c9", json: false },
+      ligandColor: { abbrev: "lc", default: "#c9c9c9", json: false },
       ligandElement: { abbrev: "le", default: false, json: false },
       proteinElement: { abbrev: "pce", default: false, json: false },
       proteinOpacity: { abbrev: "po", default: "1", json: false },

v0/js/utils.js

@@ -42,7 +42,7 @@ export function summarizeMetricData(data, excludedAminoAcids = null) {
         condition: e.condition,
         site: e.site,
         site_reference: e.site_reference,
-        site_protein: e.site_protein,
+        site_protein: String(e.site_protein),
         site_chain: e.site_chain,
         wildtype: e.wildtype,
         ...metricDataRollup.get(e.site).get(e.condition),