Merge pull request #55 from Clinical-Genomics/fast_pan

Fast pan

CHANGELOG.md

@@ -11,6 +11,8 @@ About changelog [here](https://keepachangelog.com/en/1.0.0/)
 ### Changed
 - Use sample id instead of display name for variant retrieval
 - Hide balanced variants
+- Keyboard pan speed increased
+
 
 ## [2.1.1]
 ### Added

assets/js/interactive.js

@@ -84,8 +84,8 @@ export class InteractiveCanvas extends BaseScatterTrack {
     this.contentCanvas.addEventListener('update-title', event => {
       console.log(`interactive got an ${event.type} event`)
       const len = event.detail.bands.length
-      if (len > 0) { 
-        const bandIds = len === 1 ? event.detail.bands[0].id : `${event.detail.bands[0].id}-${event.detail.bands[len-1].id}`
+      if (len > 0) {
+        const bandIds = len === 1 ? event.detail.bands[0].id : `${event.detail.bands[0].id}-${event.detail.bands[len - 1].id}`
         this.drawCanvas.getContext('2d').clearRect(this.titleBbox.x, this.titleBbox.y, this.titleBbox.width, this.titleBbox.height)
         this.titleBbox = this.drawTitle(`Chromosome ${event.detail.chrom}; ${bandIds}`)
         this.blitChromName({textPosition: this.titleBbox})

assets/js/navigation.js

@@ -147,19 +147,21 @@ export function previousChromosome() {
 }
 
 // Pan whole canvas and tracks to the left
-export function panTracks(direction = 'left') {
+export function panTracks(direction = 'left', speed = 0.1) {
   const pos = readInputField()
-  let distance = Math.floor(0.1 * (pos.end - pos.start))
-  // Don't allow negative values
-  distance = (pos.start < distance) ? distance + (pos.start - distance) : distance
-  // todo keep distance constant
+  const distance = Math.abs(Math.floor(speed * (pos.end - pos.start)))
   if (direction === 'left') {
     pos.start -= distance
     pos.end -= distance
   } else {
     pos.start += distance
     pos.end += distance
   }
+  // drawTrack will correct the window eventually, but let us not go negative at least
+  if (pos.start < 1) {
+    pos.start = 1
+    pos.end = distance
+  }
   drawTrack({ chrom: pos.chrom, start: pos.start, end: pos.end, drawTitle: false, exclude: ['cytogenetic-ideogram'] })
 }
 
@@ -260,10 +262,10 @@ document.addEventListener('keyevent', event => {
         nextChromosome()
         break
       case 'a':
-        panTracks('left')
+        panTracks('left', 0.7)
         break
       case 'd':
-        panTracks('right')
+        panTracks('right', 0.7)
         break
       case 'ArrowUp':
       case 'w':

gens/blueprints/gens/templates/gens.html

@@ -76,7 +76,7 @@
 
         <div id='button-container'>
             <select id='source-list'></select>
-            <button onclick='gens.panTracks("left");' class='button--pan no-print'>
+            <button onclick='gens.panTracks("left", 0.7);' class='button--pan no-print'>
                 <span class='icon arrow-left' title='Left'></span>
             </button>
             <button onclick='gens.zoomIn();' class='button--zoom-in no-print'>
@@ -85,7 +85,7 @@
             <button onclick='gens.zoomOut();' class='button--zoom-out no-print'>
                 <span class='icon search-minus' title='Zoom out'></span>
             </button>
-            <button onclick='gens.panTracks("right");' class='button--pan no-print'>
+            <button onclick='gens.panTracks("right", 0.7);' class='button--pan no-print'>
                 <span class='icon arrow-right' title='Right'></span>
             </button>
             <form id='region-form'>