Improve transcript navigation, close popover on "Escape", etc.

scripts/python/cache/gene_structure_cache.py

@@ -489,10 +489,10 @@ def populate_by_org(self, organism):
         structures = parse_structures(canonical_ids, gff_path, gff_url)
 
         sorted_structures = sort_structures(structures, organism, canonical_ids)
-        refined_structures = compress_structures(sorted_structures)
+        # refined_structures = compress_structures(sorted_structures)
 
         # sorted_slim_genes = sort_by_interest(slim_genes, organism)
-        self.write(refined_structures, organism, gff_url, bmtsv_url)
+        self.write(sorted_structures, organism, gff_url, bmtsv_url)
 
     def populate(self):
         """Fill gene caches for all configured organisms

scripts/python/cache/protein_cache.py

@@ -126,7 +126,7 @@ def merge_signalp(
             if transcript_name not in features_by_transcript:
                 transcript_names_not_found.append(transcript_id)
                 continue
-            name = '_SP'
+            name = 'S'
             parsed_feat, feature_names_by_id = parse_feature(
                 name, start, stop, name, feature_names_by_id
             )
@@ -202,7 +202,13 @@ def merge_uniprot(organism, features_by_transcript, transcript_names_by_id, feat
             continue
 
         name = name.replace(';', ' ---')
-        name = "_UT_" + name
+        if name == 'Helical':
+            name = 'H'
+        elif name == 'Extracellular':
+            name = 'E'
+        elif name == 'Cytoplasmic':
+            name = 'C'
+        name = "_" + name
         parsed_feat, feature_names_by_id = parse_feature(
             name, start, stop, name, feature_names_by_id
         )

src/js/init/write-container.js

@@ -47,6 +47,15 @@ function getContainerSvgClass(ideo) {
   return svgClass;
 }
 
+/** Hide tooltip upon pressing "esc" on keyboard */
+function handleEscape(event) {
+  if (event.keyCode === 27) { // "Escape" key pressed
+    const tooltip = document.querySelector('#_ideogramTooltip');
+    if (!tooltip) return;
+    tooltip.style.opacity = 0;
+  }
+}
+
 /**
  * Write tooltip div setup with default styling.
  */
@@ -62,7 +71,11 @@ function writeTooltipContainer(ideo) {
     .style('background', 'white')
     .style('border', '1px solid black')
     .style('border-radius', '5px')
-    .style('z-index', '1000');
+    .style('z-index', '1000')
+    .style('margin-left', '-2px'); // Mitigate crowding, e.g. BRCA1 for RAD51
+
+  document.removeEventListener('keydown', handleEscape);
+  document.addEventListener('keydown', handleEscape);
 }
 
 function writeContainerDom(ideo) {

src/js/kit/gene-structure.js

@@ -4,7 +4,7 @@ import {tippyCss, tippyLightCss} from './tippy-styles';
 
 import {d3} from '../lib';
 import {getIcon} from '../annotations/legend';
-import {getProteinSvg} from './protein';
+import {getProtein, getHasTopology} from './protein';
 
 const y = 15;
 
@@ -176,22 +176,22 @@ function addMenuListeners(ideo) {
 
     // Go to next transcript on clicking down arrow icon, previous on up
     if (Array.from(svgMaybe.classList).includes('_ideoMenuArrow')) {
-      const menuArrow = event.target;
+      const menuArrow = svgMaybe;
       const direction = menuArrow.getAttribute('data-dir');
       const offset = direction === 'down' ? 1 : -1;
       updateGeneStructure(ideo, offset);
       event.stopPropagation();
     }
   });
 
-  // Go to next transcript on pressing down arrow key, previous on up
-  document.addEventListener('keydown', (event) => {
-    const key = event.key;
-    if (['ArrowDown', 'ArrowUp'].includes(key)) {
-      const offset = key === 'ArrowDown' ? 1 : -1;
-      updateGeneStructure(ideo, offset);
-    }
-  });
+  // // Go to next transcript on pressing down arrow key, previous on up
+  // document.addEventListener('keydown', (event) => {
+  //   const key = event.key;
+  //   if (['ArrowDown', 'ArrowUp'].includes(key)) {
+  //     const offset = key === 'ArrowDown' ? 1 : -1;
+  //     updateGeneStructure(ideo, offset);
+  //   }
+  // });
 }
 
 function toggleSpliceByKeyboard(event) {
@@ -995,25 +995,39 @@ function getSvg(geneStructure, ideo, spliceExons=false) {
       `style="${sharedStyle} left: -10px;"`;
   }
 
+  const structureName = geneStructure.name;
+  const gene = getGeneFromStructureName(structureName);
+  const menu = getMenu(gene, ideo, structureName).replaceAll('"', '\'');
+
+  const hasTopology = getHasTopology(gene, ideo);
+
+  const [proteinSvg, proteinLengthAa] =
+    getProtein(structureName, subparts, isPositiveStrand, hasTopology, ideo);
+
   const transcriptLengthBp = getTranscriptLengthBp(subparts, spliceExons);
   const prettyLength = transcriptLengthBp.toLocaleString();
+
   const footerDetails = [
     `${totalBySubpart['exon']} exons`,
     `<span id='_ideoTranscriptLengthBp'>${prettyLength} bp</span> `
   ];
+
+  // Note protein length in amino acids (aa)
+  // TODO: This is a no-op; see note about phase in protein.js
+  if (proteinLengthAa) {
+    const prettyLengthAa = proteinLengthAa.toLocaleString();
+    footerDetails.push(
+      `<span id='_ideoProteinLengthAa'>${prettyLengthAa} aa</span> `
+    );
+  }
+
+  // Note if transcript is unusual type, e.g. nonsense mediated decay (NMD)
   const biotypeText = geneStructure.biotype.replace(/_/g, ' ');
   if (biotypeText !== 'protein coding') {
     footerDetails.push(biotypeText);
   }
-
-  const structureName = geneStructure.name;
-  const gene = getGeneFromStructureName(structureName);
-  const menu = getMenu(gene, ideo, structureName).replaceAll('"', '\'');
   const footerData = menu + footerDetails.join(` ${pipe} `);
 
-  const [proteinSvg, hasTopology] =
-    getProteinSvg(structureName, subparts, isPositiveStrand, ideo);
-
   let svgHeight = proteinSvg === '' ? '40' : '60';
   if (hasTopology) svgHeight = '70';
 
@@ -1041,9 +1055,9 @@ function getMenuArrows() {
   const upStyle = `style="${style}; margin-left: 2px;"`;
   const cls = 'class="_ideoMenuArrow"';
   const tippyPlace = 'data-tippy-placement="bottom-start"';
-  const downContent = 'Next transcript (down arrow)';
+  const downContent = 'Next transcript';
   const downTippy = `data-tippy-content="${downContent}" ${tippyPlace}`;
-  const upContent = 'Previous transcript (up arrow)';
+  const upContent = 'Previous transcript';
   const upTippy = `data-tippy-content="${upContent}" ${tippyPlace}`;
   const downAttrs = `${downStyle} ${cls} data-dir="down" ${downTippy}`;
   const upAttrs = `${upStyle} ${cls} data-dir="up" ${upTippy}`;