- Coverage graph was not resizing properly

- Using the size of the parent ( containing ) element to determine component size.
Dfam-consortium · May 3, 2017 · fa20346 · fa20346
1 parent 4b2d5a7
commit fa20346
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 65 deletions.
diff --git a/angular-example.html b/angular-example.html
@@ -1,24 +1,32 @@
 <!doctype html>
 <html>
+  <head>
+    <link rel='stylesheet prefetch' href='bower_components/angular-material/angular-material.min.css'>
+  </head>
   <body>
-    <div ng-app="myApp" ng-controller="testContrl" layout="row" resize>
+    <div ng-app="myApp" ng-controller="testContrl" layout="column" resize>
       <br>
       <br>
       <h3><b>Seed Coverage and Whisker Plots</b></h3>
       <hr> Representation of the #### seed alignment sequences, indicating their length distribution across the model as well as the overall depth of coverage.
       <br>
       <br>
-      <div layout="row" flex>
-        <div style="ddborder: 1px solid;">
-          <alignheatmap align-data="summaryData"></alignheatmap>
+      <div layout="column" flex>
+        <div layout="row" layout-margin>
+          <alignheatmap flex="95" align-data="summaryData"></alignheatmap>
         </div>
       </div>
-      <input type="button" value="Load Data" ng-click="addData();" />
+      <div layout="row">
+        <input type="button" value="Load Data" ng-click="addData();" />
+      </div>
     </div>
     <script src='bower_components/angular/angular.min.js'></script>
+    <script src='bower_components/angular-animate/angular-animate.min.js'></script>
+    <script src='bower_components/angular-aria/angular-aria.min.js'></script>
+    <script src='bower_components/angular-material/angular-material.min.js'></script>
     <script src='dist/AlignmentSummaryViewer.min.js'></script>
     <script>
-var myApp = angular.module('myApp', []);
+var myApp = angular.module('myApp', ['ngMaterial']);
 
 myApp.directive('resize', function($window) {
   return {
@@ -50,16 +58,20 @@ <h3><b>Seed Coverage and Whisker Plots</b></h3>
     link: function(scope, el, attrs) {
       var mySummary;
       var align_canvas = document.createElement('canvas');
-      el.append(align_canvas);
+      // The template div is a child of the directive (el)
+      // Since there is only one child the parent for the canvas
+      // will be:
+      var parent_element = el.children()[0];
+      parent_element.append(align_canvas);
 
       scope.$watch('alignData', function(newValue) {
         onDataChange();
       });
 
       scope.$on('resize::resize', function() {
         if (mySummary != null) {
-          mySummary.resetHeight();
-          mySummary.render('norm');
+          // resize and render
+          mySummary.resize();
         }
       });
 
@@ -77,11 +89,10 @@ <h3><b>Seed Coverage and Whisker Plots</b></h3>
           if ( mySummary != null ) {
             mySummary.setData(scope.alignData);
           }else {
-            mySummary = new AlignmentSummaryViewer(align_canvas, scope.alignData, {});
+            mySummary = new AlignmentSummaryViewer(align_canvas, parent_element, scope.alignData, {});
           }
         }
       }
-
     }
   }
 });

diff --git a/bower.json b/bower.json
@@ -2,7 +2,10 @@
   "name": "AlignmentSummaryViewer",
   "version": "1.0.0",
   "dependencies": {
-    "angular": "1.5.5"
+    "angular": "1.5.5",
+    "angular-animate": "1.5.5",
+    "angular-aria": "1.5.5",
+    "angular-material": "1.1.1"
   },
   "devDependencies": {
     "flightplan": "git://github.com/pstadler/flightplan.git#0.6.15"

diff --git a/dist/AlignmentSummaryViewer.js b/dist/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
@@ -146,13 +143,17 @@
     //                       this.align_canvas.style.height = '100%';
     //                       this.align_canvas.width = this.align_canvas.offsetWidth;
     //   new:
-    this.align_canvas.width = window.innerWidth - 20;
+    // this.align_canvas.width = window.innerWidth - 20;
+    //   newer:
+console.log('help...' + this.parent_element);
+    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 +304,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 +333,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 +347,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 +436,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