Start something that would Fix #32

Author: dnil

assets/js/gens.js

@@ -5,10 +5,10 @@ import { OverviewCanvas } from './overview.js'
 import { VariantTrack, AnnotationTrack, TranscriptTrack, CytogeneticIdeogram } from './track.js'
 export {
   setupDrawEventManager, drawTrack, previousChromosome, nextChromosome,
-  panTracks, zoomIn, zoomOut, parseRegionDesignation, queryRegionOrGene
+  panTracks, zoomIn, zoomInY, zoomOut, zoomOutY, parseRegionDesignation, queryRegionOrGene
 } from './navigation.js'
 
-export function initCanvases({ sampleName, caseId, genomeBuild, hgFileDir, uiColors, scoutBaseURL, selectedVariant, annotationFile }) {
+export function initCanvases ({ sampleName, caseId, genomeBuild, hgFileDir, uiColors, scoutBaseURL, selectedVariant, annotationFile }) {
   // initialize and return the different canvases
   // WEBGL values
   const near = 0.1
@@ -44,7 +44,7 @@ export function initCanvases({ sampleName, caseId, genomeBuild, hgFileDir, uiCol
 }
 
 // Make hard link and copy link to clipboard
-export function copyPermalink(genomeBuild, region) {
+export function copyPermalink (genomeBuild, region) {
   // create element and add url to it
   const tempElement = document.createElement('input')
   const loc = window.location
@@ -57,14 +57,14 @@ export function copyPermalink(genomeBuild, region) {
 }
 
 // Reloads page to printable size
-export function loadPrintPage(region) {
+export function loadPrintPage (region) {
   let location = window.location.href.replace(/region=.*&/, `region=${region}&`)
   location = location.includes('?') ? `${location}&print_page=true` : `${location}?print_page=true`
   window.location.replace(location)
 }
 
 // Show print prompt and reloads page after print
-export function printPage() {
+export function printPage () {
   document.querySelector('.no-print').toggleAttribute('hidden')
   window.addEventListener('afterprint', () => {
     window.location.replace(window.location.href.replace('&print_page=true', ''))

assets/js/interactive.js

@@ -38,9 +38,9 @@ export class InteractiveCanvas extends BaseScatterTrack {
 
     // Log2 ratio values
     this.log2 = {
-      yStart: 4.0, // Start value for y axis
-      yEnd: -4.0, // End value for y axis
-      step: 1.0, // Step value for drawing ticks along y-axis
+      yStart: 2.0, // Start value for y axis
+      yEnd: -2.0, // End value for y axis
+      step: 0.5, // Step value for drawing ticks along y-axis
       color: '#000000' // Viz color
     }
 
@@ -180,24 +180,49 @@ export class InteractiveCanvas extends BaseScatterTrack {
       this.markingRegion = false
       this.drag = false
     })
+    // when user asks for Y zoom
+    this.staticCanvas.addEventListener('zoomY', event => {
+      this.clearStaticContent()
+      if (event.detail.direction === 'out') {
+        this.log2.yStart += 1
+        this.log2.yEnd -= 1
+        if (this.log2.yStart > 2) {
+          this.log2.step = 1
+        }
+      }
+      if (event.detail.direction === 'in' && this.log2.yStart > 1) {
+        this.log2.yStart -= 1
+        this.log2.yEnd += 1
+        if (this.log2.yStart <= 2) {
+          this.log2.step = 0.5
+        }
+      }
+      // then draw new with new coords
+      this.drawStaticContent()
+      drawTrack({ ...readInputField(), force: true, displayLoading: false, drawTitle: false })
+    })
   }
 
-  // Draw static content for interactive canvas
-  async drawStaticContent () {
+  // clear static content
+  async clearStaticContent () {
     const linePadding = 2
     const staticContext = this.staticCanvas.getContext('2d')
-
     // Fill background colour
     staticContext.fillStyle = '#F7F9F9'
     staticContext.fillRect(0, 0, this.staticCanvas.width, this.staticCanvas.height)
-
     // Make content area visible
     // content window
     staticContext.clearRect(this.x + linePadding, this.y + linePadding,
       this.plotWidth, this.staticCanvas.height)
     // area for ticks above content area
     staticContext.clearRect(0, 0, this.staticCanvas.width, this.y + linePadding)
+    // Transfer image to visible canvas
+    staticContext.drawImage(this.drawCanvas, 0, 0)
+  }
 
+  // Draw static content for interactive canvas
+  async drawStaticContent () {
+    const staticContext = this.staticCanvas.getContext('2d')
     // Draw rotated y-axis legends
     drawRotatedText(staticContext, 'B Allele Freq', 18, this.x - this.legendMargin,
       this.y + this.plotHeight / 2, -Math.PI / 2, this.titleColor)
@@ -313,12 +338,11 @@ export class InteractiveCanvas extends BaseScatterTrack {
       // Draw chromosome title on the content canvas as a blitting
       // work around
       this.titleYPos = result.y_pos - this.titleMargin
-      if ( drawTitle ) {
+      if (drawTitle) {
         this.titleBbox !== null && this.blitChromName(
-          {textPosition: this.titleBbox, clearOnly: true
-        })
+          { textPosition: this.titleBbox, clearOnly: true })
         this.titleBbox = this.drawTitle(`Chromosome ${result.chrom}`)
-        this.blitChromName({textPosition: this.titleBbox})
+        this.blitChromName({ textPosition: this.titleBbox })
       }
 
       return result

assets/js/navigation.js

@@ -2,13 +2,13 @@ import { get } from './fetch.js'
 import { CHROMOSOMES } from './track.js'
 import { chromSizes } from './helper.js'
 
-function redrawEvent({ region, exclude = [], ...kwargs }) {
+function redrawEvent ({ region, exclude = [], ...kwargs }) {
   return new CustomEvent(
     'draw', { detail: { region: region, exclude: exclude, ...kwargs } }
   )
 }
 
-function drawEventManager({ target, throttleTime }) {
+function drawEventManager ({ target, throttleTime }) {
   const tracks = [
     ...target.querySelectorAll('.track-container'),
     target.querySelector('#cytogenetic-ideogram')
@@ -30,7 +30,7 @@ function drawEventManager({ target, throttleTime }) {
   }
 }
 
-export function setupDrawEventManager({ target, throttleTime = 20 }) {
+export function setupDrawEventManager ({ target, throttleTime = 20 }) {
   const manager = drawEventManager({ target, throttleTime })
   target.addEventListener('draw', (event) => {
     manager(event)
@@ -42,7 +42,7 @@ export function readInputField() {
   return parseRegionDesignation(field.value)
 }
 
-function updateInputField({ chrom, start, end }) {
+function updateInputField ({ chrom, start, end }) {
   const field = document.getElementById('region-field')
   field.value = `${chrom}:${start}-${end}`
   field.placeholder = field.value
@@ -54,7 +54,7 @@ function updateInputField({ chrom, start, end }) {
 // eg 1:12-220 --> 1, 12 220
 // 1: --> 1, null, null
 // 1 --> 1, null, null
-export function parseRegionDesignation(regionString) {
+export function parseRegionDesignation (regionString) {
   if (regionString.includes(':')) {
     const [chromosome, position] = regionString.split(':')
     // verify chromosome
@@ -68,7 +68,7 @@ export function parseRegionDesignation(regionString) {
   }
 }
 
-export async function limitRegionToChromosome({ chrom, start, end, genomeBuild = '38' }) {
+export async function limitRegionToChromosome ({ chrom, start, end, genomeBuild = '38' }) {
   // assert that start/stop are within start and end of chromosome
   const sizes = await chromSizes(genomeBuild)
   const chromSize = sizes[chrom]
@@ -93,7 +93,7 @@ export async function limitRegionToChromosome({ chrom, start, end, genomeBuild =
   return { chrom: chrom, start: Math.round(updStart), end: Math.round(updEnd) }
 }
 
-export async function drawTrack({
+export async function drawTrack ({
   chrom, start, end, genomeBuild = '38',
   exclude = [], force = false, ...kwargs
 }) {
@@ -113,7 +113,7 @@ export async function drawTrack({
 // If query is a regionString draw the relevant region
 // If input is a chromosome display entire chromosome
 // Else query api for genes with that name and draw that region
-export function queryRegionOrGene(query, genomeBuild = 38) {
+export function queryRegionOrGene (query, genomeBuild = 38) {
   if (query.includes(':')) {
     drawTrack(parseRegionDesignation(query))
   } else if (CHROMOSOMES.includes(query)) {
@@ -133,21 +133,21 @@ export function queryRegionOrGene(query, genomeBuild = 38) {
 }
 
 // goto the next chromosome
-export function nextChromosome() {
+export function nextChromosome () {
   const position = readInputField()
   const chrom = CHROMOSOMES[CHROMOSOMES.indexOf(position.chrom) + 1]
   drawTrack({ chrom: chrom, start: 1, end: null })
 }
 
 // goto the previous chromosome
-export function previousChromosome() {
+export function previousChromosome () {
   const position = readInputField()
   const chrom = CHROMOSOMES[CHROMOSOMES.indexOf(position.chrom) - 1]
   drawTrack({ chrom: chrom, start: 1, end: null })
 }
 
 // Pan whole canvas and tracks to the left
-export function panTracks(direction = 'left', speed = 0.1) {
+export function panTracks (direction = 'left', speed = 0.1) {
   const pos = readInputField()
   const distance = Math.abs(Math.floor(speed * (pos.end - pos.start)))
   if (direction === 'left') {
@@ -166,7 +166,7 @@ export function panTracks(direction = 'left', speed = 0.1) {
 }
 
 // Handle zoom in button click
-export function zoomIn() {
+export function zoomIn () {
   const pos = readInputField()
   const factor = Math.floor((pos.end - pos.start) * 0.2)
   pos.start += factor
@@ -175,19 +175,37 @@ export function zoomIn() {
 }
 
 // Handle zoom out button click
-export function zoomOut() {
+export function zoomOut () {
   const pos = readInputField()
   const factor = Math.floor((pos.end - pos.start) / 3)
   pos.start = (pos.start - factor) < 1 ? 1 : pos.start - factor
   pos.end += factor
   drawTrack({ chrom: pos.chrom, start: pos.start, end: pos.end, exclude: ['cytogenetic-ideogram'], drawTitle: false })
 }
 
+// Handle zoom in Y button click
+export function zoomInY () {
+  console.log('dispatching zoom in Y')
+  const zoomYEvent = new CustomEvent(
+    'zoomY', { detail: { direction: 'in' } }
+  )
+  document.getElementById('interactive-static').dispatchEvent(zoomYEvent)
+}
+
+// Handle zoom out Y button click
+export function zoomOutY () {
+  console.log('dispatching zoom out Y')
+  const zoomYEvent = new CustomEvent(
+    'zoomY', { detail: { direction: 'out' } }
+  )
+  document.getElementById('interactive-static').dispatchEvent(zoomYEvent)
+}
+
 // Dispatch dispatch an event to draw a given region
 // Redraw events can be limited to certain tracks or include all tracks
 class KeyLogger {
   // Records keypress combinations
-  constructor(bufferSize = 10) {
+  constructor (bufferSize = 10) {
     // Setup variables
     this.bufferSize = bufferSize
     this.lastKeyTime = Date.now()
@@ -213,14 +231,14 @@ class KeyLogger {
     })
   }
 
-  recentKeys(timeWindow) {
+  recentKeys (timeWindow) {
     // get keys pressed within a window of time.
     const currentTime = Date.now()
     return this.keyBuffer.filter(keyEvent =>
       timeWindow > currentTime - keyEvent.time)
   }
 
-  lastKeypressTime() {
+  lastKeypressTime () {
     return this.keyBuffer[this.keyBuffer.length - 1] - Date.now()
   }
 }
@@ -272,11 +290,19 @@ document.addEventListener('keyevent', event => {
       case '+':
         zoomIn()
         break
+      case '?':
+      case 'W':
+        zoomInY()
+        break
       case 'ArrowDown':
       case 's':
       case '-':
         zoomOut()
         break
+      case 'S':
+      case '_':
+        zoomOutY()
+        break
       default:
     }
   }

gens/blueprints/gens/templates/gens.html

@@ -82,6 +82,12 @@
             <button onclick='gens.zoomIn();' class='button--zoom-in no-print'>
                 <span class='icon search-plus' title='Zoom in'></span>
             </button>
+            <button onclick='gens.zoomInY();' class='button--zoom-in-y no-print'>
+                <span class='icon search-plus' title='Zoom in Y'><br>Y</span>
+            </button>
+            <button onclick='gens.zoomOutY();' class='button--zoom-out-y no-print'>
+                <span class='icon search-minus' title='Zoom out Y'><br>Y</span>
+            </button>
             <button onclick='gens.zoomOut();' class='button--zoom-out no-print'>
                 <span class='icon search-minus' title='Zoom out'></span>
             </button>
@@ -176,7 +182,7 @@
       targetElementIds: ['interactive-content'],
     })
 
-    Promise.all([ic.drawStaticContent(), oc.drawOverviewContent()]).then( () => {
+    Promise.all([ic.clearStaticContent(), ic.drawStaticContent(), oc.drawOverviewContent()]).then( () => {
         // setup event managers and draw the tracks
         gens.drawTrack({chrom: '{{ chrom }}', start: start, end: {{ end }} })
         document.dispatchEvent(new CustomEvent('data-loaded'))