Change peak dup metrics, add plot export

Only consider autosomal alignments for peak duplicate metrics

You can now export plots to SVG and PNG, but the exports are only
accurate in Firefox and Chrome so far.

COPYRIGHT

@@ -239,3 +239,8 @@ Incorporated in the United States and/or other countries.
 
 Font Awesome was made by Dave Gandy, for which we thank him. It truly
 is awesome.
+
+The export of the web viewer plots uses code from
+https://stackoverflow.com/a/44769098, which according to the Stack
+Overflow terms of service is licensed under CC BY-SA 3.0
+(https://creativecommons.org/licenses/by-sa/3.0/).

Makefile

@@ -2,14 +2,14 @@
 # VARIABLES
 #
 
-VERSION = 0.9.2
+VERSION = 0.9.3
 
 #
 # PATHS
 #
 
 SRC_DIR = src
-CPP_DIR = $(shell readlink -f $(SRC_DIR)/cpp)
+CPP_DIR = $(shell realpath -e $(SRC_DIR)/cpp)
 SCRIPTS_DIR = $(SRC_DIR)/scripts
 WEB_DIR = $(SRC_DIR)/web
 BUILD_DIR = build

debian/changelog

@@ -1,3 +1,10 @@
+ataqv (0.9.3-1) unstable; urgency=low
+
+  * Only consider autosomal alignments for peak duplicate metrics
+  * Add plot export to SVG and PNG (Firefox and Chrome only so far)
+
+ -- Parker Lab Software <[email protected]>  Thu, 29 Jun 2017 10:00:00 -0500
+
 ataqv (0.9.2-1) unstable; urgency=low
 
   * Peak duplicate metrics; correct maximum fragment length measurement.

docs/demo/css/ataqv.css

@@ -450,6 +450,7 @@ table.dataTable thead th.sorting_desc::after {
 
 .tableContainer {
     margin-bottom: 2em;
+    min-width: 100em;
 }
 
 /* end tables */
@@ -493,7 +494,7 @@ table.dataTable thead th.sorting_desc::after {
 
 .tabs .active a {
     color: #fff;
-    border-bottom: 10px solid #444;
+    border-bottom: 4px solid #fff;
 }
 
 .tabs li:hover {
@@ -537,16 +538,13 @@ table.dataTable thead th.sorting_desc::after {
     position: absolute;
     left: 0;
     top: 150%;
-    min-width: 20em;
-    max-width: 100%;
+    min-width: 30em;
     min-height: 2em;
-    max-height: 20em;
     display: block;
     content: attr(data-hovertext);
     text-align: left;
     font-size: 0.9em;
     font-weight: normal;
-    font-style: italic;
     white-space: normal;
     padding: 0.5em;
     color: #444;
@@ -564,6 +562,10 @@ td:last-child *[data-hovertext]:hover::after,
 }
 
 #banner {
+    position: fixed;
+    top: 0;
+    z-index: 99999;
+    width: 100%;
     padding: 1.5em 0.5em 0 0.5em;
     background: #000;
     color: #fff;
@@ -597,6 +599,10 @@ td:last-child *[data-hovertext]:hover::after,
     text-decoration: none;
 }
 
+#exportCanvas {
+    display: none;
+}
+
 #mask {
     position: fixed;
     z-index: 999;
@@ -615,7 +621,7 @@ td:last-child *[data-hovertext]:hover::after,
     display: none;
     opacity: 0;
     position: absolute;
-    max-width: 400px;
+    max-width: 600px;
     border: none;
     border-radius: 0.5rem;
     background: #fff;
@@ -661,7 +667,7 @@ td:last-child *[data-hovertext]:hover::after,
     top: 0;
     z-index: 99999;
     left: -99999em;
-    height: 100%;
+    height: 100vh;
     width: 100%;
     padding: 10%;
     text-align: center;
@@ -710,6 +716,12 @@ td:last-child *[data-hovertext]:hover::after,
     justify-content: flex-start;
 }
 
+#sampleCount {
+    font-size: .75em;
+    opacity: 0.75;
+    padding-left: .5em;
+}
+
 #plotSampleList {
     margin: 0 0 1em 0;
 }
@@ -818,10 +830,6 @@ td:last-child *[data-hovertext]:hover::after,
     fill: #eee;
 }
 
-.axis.x .tick text {
-    transform: translate(-0.5em, 1em) rotate(-45deg);
-}
-
 .plotItem {
     opacity: 0.75;
 }
@@ -835,6 +843,10 @@ td:last-child *[data-hovertext]:hover::after,
     opacity: 1;
 }
 
+.legendItem.highlight {
+    color: rgba(255, 255, 0, 1) !important;
+}
+
 .dot.highlight {
     fill: rgba(255, 255, 0, 1) !important;
 }
@@ -906,8 +918,8 @@ td:last-child *[data-hovertext]:hover::after,
     margin: 0 1em 0 2em;
     position: relative;
     font-size: 0.75rem;
-    height: 100p%;
-    overflow: auto;
+    max-height: 8em;
+    overflow-y: auto;
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;

docs/demo/index.html

@@ -12,6 +12,7 @@
 
         <script src="js/d3.min.js"></script>
         <script src="js/datatables.min.js"></script>
+
         <script src="js/ataqv.js" defer></script>
         <script src="js/configuration.js" defer></script>
     </head>
@@ -65,7 +66,7 @@ <h1>
                     <div id="plotTabContent">
                         <div id="plotSampleList">
                             <div>
-                                <h2>Samples</h2>
+                                <h2>Samples<span id="sampleCount"></span></h2>
                                 <div class="controls horizontal">
                                     <button class="showall">Show all</button>
                                     <button class="hideall">Hide all</button>
@@ -89,12 +90,14 @@ <h2><span>Plot help: HQAA fragment length distribution (FLD)</span><button class
                                             <p>Double click or use the mouse wheel or trackpad scroll to zoom. Click and drag to pan.</p>
                                             <p>Mouse over items in the sample list at the top of the page to highlight samples. Click them to toggle sample visibility.</p>
 
-                                            <p>The dashed red line is the reference fragment length distribution. You can toggle it on and off.</p>
+                                            <p>The dashed red line is the reference fragment length distribution (<span class="fragment_length_reference_source"></span>). You can toggle it on and off.</p>
                                             <p>You can smooth the lines to make it easier to compare experiments, or make the plot more responsive if you have a lot of data. By default, smoothing is set to 10. For the most accurate plot, choose a smoothing value of one.</p>
 
                                         </div>
                                         <div class="controls">
                                             <button class="reset" title="Reset plot zoom"><i class="fa fa-home"></i></button>
+                                            <button class="exportSVG" title="Export SVG"><i class="fa fa-save"></i></button>
+                                            <button class="exportPNG" title="Export PNG"><i class="fa fa-file-image-o"></i></button>
                                             <button class="helpOpener" data-helpid="fragmentLengthPlotHelp"><i class="fa fa-info-circle"></i></button>
                                         </div>
                                     </div>
@@ -139,6 +142,8 @@ <h2><span>Plot help: distance from reference FLD</span><button class="cleaner"><
                                         </div>
                                         <div class="controls">
                                             <button class="reset" title="Reset plot zoom"><i class="fa fa-home"></i></button>
+                                            <button class="exportSVG" title="Export SVG"><i class="fa fa-save"></i></button>
+                                            <button class="exportPNG" title="Export PNG"><i class="fa fa-file-image-o"></i></button>
                                             <button class="helpOpener" data-helpid="fragmentLengthDistancePlotHelp"><i class="fa fa-info-circle"></i></button>
                                         </div>
                                     </div>
@@ -176,6 +181,8 @@ <h2><span>Plot help: TSS enrichment</span><button class="cleaner"><i class="fa f
                                         </div>
                                         <div class="controls">
                                             <button class="reset" title="Reset plot zoom"><i class="fa fa-home"></i></button>
+                                            <button class="exportSVG" title="Export SVG"><i class="fa fa-save"></i></button>
+                                            <button class="exportPNG" title="Export PNG"><i class="fa fa-file-image-o"></i></button>
                                             <button class="helpOpener" data-helpid="tssEnrichmentPlotHelp"><i class="fa fa-info-circle"></i></button>
                                         </div>
                                     </div>
@@ -204,6 +211,8 @@ <h2><span>Plot help: Cumulative fraction of HQAA in peaks</span><button class="c
                                         </div>
                                         <div class="controls">
                                             <button class="reset" title="Reset plot zoom"><i class="fa fa-home"></i></button>
+                                            <button class="exportSVG" title="Export SVG"><i class="fa fa-save"></i></button>
+                                            <button class="exportPNG" title="Export PNG"><i class="fa fa-file-image-o"></i></button>
                                             <button class="helpOpener" data-helpid="peakReadCountsPlotHelp"><i class="fa fa-info-circle"></i></button>
                                         </div>
                                     </div>
@@ -235,6 +244,8 @@ <h2><span>Plot help: Cumulative fraction of peak territory</span><button class="
                                         </div>
                                         <div class="controls">
                                             <button class="reset" title="Reset plot zoom"><i class="fa fa-home"></i></button>
+                                            <button class="exportSVG" title="Export SVG"><i class="fa fa-save"></i></button>
+                                            <button class="exportPNG" title="Export PNG"><i class="fa fa-file-image-o"></i></button>
                                             <button class="helpOpener" data-helpid="peakTerritoryPlotHelp"><i class="fa fa-info-circle"></i></button>
                                         </div>
                                     </div>
@@ -263,6 +274,8 @@ <h2><span>Plot help: Mapping quality distribution</span><button class="cleaner">
                                         </div>
                                         <div class="controls">
                                             <button class="reset" title="Reset plot zoom"><i class="fa fa-home"></i></button>
+                                            <button class="exportSVG" title="Export SVG"><i class="fa fa-save"></i></button>
+                                            <button class="exportPNG" title="Export PNG"><i class="fa fa-file-image-o"></i></button>
                                             <button class="helpOpener" data-helpid="mapqPlotHelp"><i class="fa fa-info-circle"></i></button>
                                         </div>
                                     </div>
@@ -276,7 +289,7 @@ <h2><span>Plot help: Mapping quality distribution</span><button class="cleaner">
                         </div>
                     </div>
                     <div class="footer">
-                        Plots made with <a href="https://github.com/ParkerLab/ataqv/">ataqv</a>, from <a href="https://theparkerlab.org">the Parker lab</a> at <a href="http://umich.edu/">the University of Michigan</a>
+                        Plots made with <a href="https://github.com/ParkerLab/ataqv/">ataqv</a>, from <a href="http://theparkerlab.org">the Parker lab</a> at <a href="http://umich.edu/">the University of Michigan</a>
                     </div>
                 </div>
             </div>
@@ -513,7 +526,7 @@ <h2>Peak Metrics</h2>
                         </table>
                     </div>
                     <div class="footer">
-                        Metrics produced with <a href="https://github.com/ParkerLab/ataqv/">ataqv</a>, from <a href="https://theparkerlab.org">the Parker lab</a> at <a href="http://umich.edu/">the University of Michigan</a>
+                        Metrics produced with <a href="https://github.com/ParkerLab/ataqv/">ataqv</a>, from <a href="http://theparkerlab.org">the Parker lab</a> at <a href="http://umich.edu/">the University of Michigan</a>
                     </div>
                 </div>
             </div>
@@ -546,7 +559,7 @@ <h2>Peak Metrics</h2>
                         </tbody>
                     </table>
                     <div class="footer">
-                        Experiments measured with <a href="https://github.com/ParkerLab/ataqv/">ataqv</a>, from <a href="https://theparkerlab.org">the Parker lab</a> at <a href="http://umich.edu/">the University of Michigan</a>
+                        Experiments measured with <a href="https://github.com/ParkerLab/ataqv/">ataqv</a>, from <a href="http://theparkerlab.org">the Parker lab</a> at <a href="http://umich.edu/">the University of Michigan</a>
                     </div>
                 </div>
             </div>
@@ -574,6 +587,8 @@ <h2><span>Using the Experiments tab</span><button class="cleaner"><i class="fa f
                 <p>You can search the experiment list by entering text in the Search box.</p>
             </div>
         </div>
+        <canvas id="exportCanvas" width="1280" height="720"></canvas>
+        <a id="exportDownload" target="_blank"></a>
         <script>
             function initialize() {
                 ataqv.initialize();