From fa2034616b138ef43821629a763c823628999d0f Mon Sep 17 00:00:00 2001 From: Robert Hubley Date: Tue, 2 May 2017 17:16:43 -0700 Subject: [PATCH] - Coverage graph was not resizing properly - Using the size of the parent ( containing ) element to determine component size. --- angular-example.html | 33 ++++++++++++++------- bower.json | 5 +++- dist/AlignmentSummaryViewer.js | 47 +++++++++++++++--------------- dist/AlignmentSummaryViewer.min.js | 2 +- html-example.html | 7 +++-- src/AlignmentSummaryViewer.js | 46 +++++++++++++---------------- 6 files changed, 75 insertions(+), 65 deletions(-) diff --git a/angular-example.html b/angular-example.html index 83eb5f6..b7eb935 100644 --- a/angular-example.html +++ b/angular-example.html @@ -1,24 +1,32 @@ + + + -
+


Seed Coverage and Whisker Plots

Representation of the #### seed alignment sequences, indicating their length distribution across the model as well as the overall depth of coverage.

-
-
- +
+
+
- +
+ +
+ + + @@ -523,11 +523,12 @@ // Load the viewer var mySummary = new AlignmentSummaryViewer( document.getElementById('alignment_canvas'), + document.getElementById('canvasdiv'), summaryData, {}); window.onresize = function(event) { if ( mySummary != null ) { - mySummary.resetHeight(); - mySummary.render('norm'); + // resize and render + mySummary.resize(); } }; diff --git a/src/AlignmentSummaryViewer.js b/src/AlignmentSummaryViewer.js index 120ec0e..6cec352 100644 --- a/src/AlignmentSummaryViewer.js +++ b/src/AlignmentSummaryViewer.js @@ -1,9 +1,10 @@ (function(global) { 'use strict'; - function AlignmentSummaryViewer(align_canvas, json, _options) { + function AlignmentSummaryViewer(align_canvas, parent_element, json, _options) { this.json = json; this.align_canvas = align_canvas; + this.parent_element = parent_element; this.cursorImage = null; this.cursorImageStartX = 0; @@ -32,7 +33,6 @@ this.alignmentGraphStartY = this.rulerStartY + this.rulerHeight; this.legendStartY = this.alignmentGraphStartY + (this.json.alignments.length * (this.alignmentGlyphHeight + this.alignmentSpacing)); - this.resetHeight(); var obj = this; @@ -62,23 +62,20 @@ '#00ff66', '#00ffcc', '#00ccff', '#0066ff', '#0000ff' ]; - // Constants to reduce lookup(?) in event listener - this.WIDTH = this.align_canvas.width; - this.HEIGHT = this.align_canvas.height; - this.pixelToBP = this.json.length / this.WIDTH; this.currRulerY = 0; - this.render('norm'); + // Resize and render + this.resize(); } AlignmentSummaryViewer.prototype.setData = function(json) { this.json = json; this.align_context.clearRect(0, 0, this.align_canvas.width, - this.align_canvas.height); + this.align_canvas.height); this.legendStartY = this.alignmentGraphStartY + (this.json.alignments.length * (this.alignmentGlyphHeight + this.alignmentSpacing)); this.cursorImage = null; - this.resetHeight(); - this.render('norm'); + // resize and render + this.resize(); }; AlignmentSummaryViewer.prototype.renderCrosshair = function(x, y) { @@ -135,7 +132,7 @@ } }; - AlignmentSummaryViewer.prototype.resetHeight = function() { + AlignmentSummaryViewer.prototype.resize = function() { // We don't want the canvas to get scaled through CSS. This // mechanism treats the canvas as an image and blurs the heck // out of it. In order to automatically get it fill the @@ -145,14 +142,15 @@ // old -- causes blur: this.align_canvas.style.width = '100%'; // this.align_canvas.style.height = '100%'; // this.align_canvas.width = this.align_canvas.offsetWidth; - // new: - this.align_canvas.width = window.innerWidth - 20; + // newer: + this.align_canvas.width = this.parent_element.offsetWidth; this.align_canvas.height = this.minTopMargin + this.coverageGraphHeight + this.rulerHeight + (this.json.alignments.length * (this.alignmentGlyphHeight + this.alignmentSpacing)) + this.legendHeight + this.minBottomMargin; + this.render('norm'); }; @@ -303,16 +301,15 @@ var sumCoverage = 0; // Whole depth components for (j = 0; j < Math.floor(unitsPerPixel); j += 1) { - sumCoverage += depth[curBase + j]; + sumCoverage += depth[Math.floor(curBase) + j]; } // Fractional depth component - sumCoverage += (depth[curBase + j + 1] * (unitsPerPixel % 1)); + sumCoverage += (depth[Math.floor(curBase) + j + 1] * (unitsPerPixel % 1)); var weightedAverageDepth = sumCoverage / unitsPerPixel; - curBase += Math.floor(unitsPerPixel); + curBase += unitsPerPixel; - this.align_context.lineTo(curX, starty + height - (weightedAverageDepth * depthScale) - 1); - - // curDepth = starty + height - (weightedAverageDepth * depthScale) - 1; + this.align_context.lineTo(curX, + starty + height - (weightedAverageDepth * depthScale) - 1); curX = curX + 1; } if (noFill === 0) { @@ -333,7 +330,6 @@ } this.align_context.lineTo(curX + pixelsPerUnit, starty + height - (coverage * depthScale) - 1); - // curDepth = starty + height - (coverage * depthScale) - 1; curX = curX + pixelsPerUnit; } if (noFill === 0) { @@ -348,10 +344,10 @@ }; - // Nice utilty for assisting in axis tic generation borrowed from the Dfam website - // graphics.js - probably written by Jody Clements, Rob Finn or Travis Wheeler ( or all of them ). + // Nice utility for assisting in axis tic generation borrowed from + // the Dfam website graphics.js - probably written by Jody Clements, + // Rob Finn or Travis Wheeler ( or all of them ). AlignmentSummaryViewer.prototype.nice_bounds = function(axis_start, axis_end, num_ticks) { - // default value is 10 num_ticks = num_ticks || 10; var true_axis_end = axis_end; var axis_width = axis_end - axis_start; @@ -437,8 +433,8 @@ this.cursorImage = null; // Clear overlayed canvases - // this.align_context.clearRect(0, 0, this.align_canvas.width, - // this.align_canvas.height); + this.align_context.clearRect(0, 0, this.align_canvas.width, + this.align_canvas.height); var ctx = this.align_context; // Draw y-axis of evil