Generalize "paintAxis" function to work with tracks without dataRange

Author: jrobinso

dev/shoebox/shoebox.html

@@ -127,7 +127,9 @@ class FeatureParser {
                 const tokens = line.split(this.delimiter || "\t")
                 try {
                     const tmpHeader = Object.assign({columnNames}, header)
-                    if (this.decode(tokens, tmpHeader)) {
+                    let firstFeature
+                    if (firstFeature = this.decode(tokens, tmpHeader)) {
+                        header.firstFeature = firstFeature
                         break
                     } else {
                         if (tokens.length > 1) {

js/feature/featureParser.js

@@ -6,7 +6,7 @@ export default function decodeShoebox(tokens, header, maxColumnCount = Number.MA
 
     const chr = tokens[0]
     const start = parseInt(tokens[1])
-    const end = tokens.length > 2 ? parseInt(tokens[2]) : start + 1
+    const end = parseInt(tokens[2])
     if (isNaN(start) || isNaN(end)) {
         return new DecodeError(`Unparsable bed record.`)
     }

js/shoebox/decodeShoebox.js

@@ -3,6 +3,7 @@ import FeatureSource from "../feature/featureSource.js"
 import TrackBase from "../trackBase.js"
 import IGVGraphics from "../igv-canvas.js"
 import ShoeboxColorScale from "./shoeboxColorScale.js"
+import paintAxis from "../util/paintAxis.js"
 
 /**
  * Configurable properties
@@ -33,12 +34,6 @@ class ShoeboxTrack extends TrackBase {
 
         this.type = "shoebox"
 
-        // Hardcoded -- todo, perhaps, get from track line
-        this.sampleKeys = []
-        for (let i = 1; i <= this.rowCount; i++) {
-            this.sampleKeys.push(i)
-        }
-
         if (config.max) {
             this.dataRange = {
                 min: config.min || 0,
@@ -49,9 +44,12 @@ class ShoeboxTrack extends TrackBase {
         const configCopy = Object.assign({}, this.config)
         configCopy.format = 'shoebox'   // bit of a hack
         this.featureSource = FeatureSource(configCopy, this.browser.genome)
+
+        this.paintAxis = paintAxis
     }
 
     async postInit() {
+
         if (typeof this.featureSource.getHeader === "function") {
             this.header = await this.featureSource.getHeader()
             if (this.disposed) return   // This track was removed during async load
@@ -62,6 +60,8 @@ class ShoeboxTrack extends TrackBase {
                 this.header.scale = Number.parseFloat(this.header.scale)
             }
             this.setTrackProperties(this.header)
+
+            this.rowCount = this.header.firstFeature ? this.header.firstFeature.values.length : 100
         }
 
         // Must do the following after setting track properties as they can be overriden via a track line
@@ -76,10 +76,6 @@ class ShoeboxTrack extends TrackBase {
 
     }
 
-    get rowCount() {
-        return 100    // TODO  Hardcoded, get from data
-    }
-
     get color() {
         return this._color || "rgb(0,0,255)"
     }
@@ -91,6 +87,14 @@ class ShoeboxTrack extends TrackBase {
         }
     }
 
+    get axisMin() {
+        return 1
+    }
+
+    get axisMax() {
+        return this.rowCount
+    }
+
     menuItemList() {
 
         const menuItems = []
@@ -99,6 +103,7 @@ class ShoeboxTrack extends TrackBase {
         let object = $('<div>')
         object.text('Set row height')
 
+        const browser = this.browser
         function dialogHandler(e) {
 
             const callback = () => {
@@ -107,6 +112,8 @@ class ShoeboxTrack extends TrackBase {
 
                 if (undefined !== number) {
 
+                    browser.sampleNameViewportWidth = undefined   // TODO, a better way to trigger this
+
                     const tracks = []
                     if (this.trackView.track.selected) {
                         tracks.push(...(this.trackView.browser.getSelectedTrackViews().map(({track}) => track)))
@@ -116,7 +123,7 @@ class ShoeboxTrack extends TrackBase {
 
                     for (const track of tracks) {
                         track.rowHeight = number
-                        if(track.rowHeight * track.rowCount < track.height) {
+                        if (track.rowHeight * track.rowCount < track.height) {
                             track.trackView.setTrackHeight(track.rowHeight * track.rowCount, true)
                         }
                         track.trackView.checkContentHeight()
@@ -165,23 +172,12 @@ class ShoeboxTrack extends TrackBase {
         this.trackView.repaintViews()
     }
 
-    hasSamples() {
-        return true   // by definition
-    }
-
-    getSamples() {
-        return {
-            names: this.sampleKeys,
-            height: this.rowHeight,
-            yOffset: 0
-        }
-    }
-
     async getFeatures(chr, start, end, bpPerPixel) {
         const visibilityWindow = this.visibilityWindow
-        return this.featureSource.getFeatures({chr, start, end, bpPerPixel, visibilityWindow})
-    }
+        const features = await this.featureSource.getFeatures({chr, start, end, bpPerPixel, visibilityWindow})
 
+        return features
+    }
 
     draw({context, pixelTop, pixelWidth, pixelHeight, features, bpPerPixel, bpStart}) {
 
@@ -254,7 +250,6 @@ class ShoeboxTrack extends TrackBase {
             const rect = feature.pixelRect
             return rect && y >= rect.y && y <= (rect.y + rect.h)
         })
-
     }
 
     hoverText(clickState) {

js/shoebox/shoeboxTrack.js

@@ -4,21 +4,28 @@ const shim = .01
 const diagnosticColor = "rgb(251,128,114)"
 const colorStripWidth = 4
 const axesXOffset = colorStripWidth + 1
+
 function paintAxis(ctx, width, height, colorOrUndefined) {
 
-    if (undefined === this.dataRange || undefined === this.dataRange.max || undefined === this.dataRange.min) {
+    let axisMin = this.axisMin //|| this.dataRange ? this.dataRange.min : 0
+    let axisMax = this.axisMax //|| this.dataRange ? this.dataRange.max : undefined
+    if (undefined === axisMax && this.dataRange) {
+        axisMin = this.dataRange.min || 0
+        axisMax = this.dataRange.max
+    }
+    if (undefined === axisMax) {
         return
     }
 
-    IGVGraphics.fillRect(ctx, 0, 0, width, height, { fillStyle: 'white' })
+    IGVGraphics.fillRect(ctx, 0, 0, width, height, {fillStyle: 'white'})
     if (colorOrUndefined) {
-        IGVGraphics.fillRect(ctx, width - colorStripWidth - 2, 0, colorStripWidth, height, { fillStyle: colorOrUndefined })
+        IGVGraphics.fillRect(ctx, width - colorStripWidth - 2, 0, colorStripWidth, height, {fillStyle: colorOrUndefined})
     }
 
     const flipAxis = (undefined === this.flipAxis) ? false : this.flipAxis
 
     const xTickStart = 0.95 * width - 8 - axesXOffset
-    const xTickEnd   = 0.95 * width - axesXOffset
+    const xTickEnd = 0.95 * width - axesXOffset
 
     const properties =
         {
@@ -30,13 +37,13 @@ function paintAxis(ctx, width, height, colorOrUndefined) {
 
     // tick
     IGVGraphics.strokeLine(ctx, xTickStart, shim * height, xTickEnd, shim * height, properties)
-    IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.min : this.dataRange.max), xTickStart + 4, shim * height + 12, properties)
+    IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? axisMin : axisMax), xTickStart + 4, shim * height + 12, properties)
 
     const y = (1.0 - shim) * height
 
     // tick
     IGVGraphics.strokeLine(ctx, xTickStart, y, xTickEnd, y, properties)
-    IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.max : this.dataRange.min), xTickStart + 4, y - 4, properties)
+    IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? axisMax : axisMin), xTickStart + 4, y - 4, properties)
 
     // vertical axis
     IGVGraphics.strokeLine(ctx, xTickEnd, shim * height, xTickEnd, y, properties)
@@ -45,6 +52,8 @@ function paintAxis(ctx, width, height, colorOrUndefined) {
 
         if (number === 0) {
             return "0"
+        } else if (Number.isInteger()) {
+            return number
         } else if (Math.abs(number) >= 10) {
             return number.toFixed()
         } else if (Math.abs(number) >= 1) {