use old version of export func, fixes #33

beat/web/reports/static/reports/app/directives/downloadLink.js

@@ -23,28 +23,35 @@
 /*
  * downloadLink
  * Desc:
- * 	A button to download the content of the report item
+ * 	A button to download the content of the report item in the
+ * 	chosen file format (PNG, JPEG, PDF)
  */
 angular.module('reportApp')
-.directive("downloadLink", [function(){
+.directive("downloadLink", ['PlotService', function(PlotService){
 	return {
 		scope: {
-			getDownloadHref: '&',
 			domId: '@',
-			imgName: '@'
+			group: '=',
+			itemId: '='
 		},
 		link: function(scope){
-			scope.downloadLinkId = () => `${scope.domId}-download`;
+			scope.filetypes = [
+				'PNG',
+				'JPEG',
+				'PDF'
+			];
 
-			scope.setupDownloadLinkTest = (event) => {
-				const a = document.querySelector(`#${scope.downloadLinkId()}`);
-				const hrefs = scope.getDownloadHref()();
+			// download the img via the invisible link element
+			scope.downloadImgs = (e, ftype) => {
+				// get plot data URL
+				PlotService.downloadPlot(scope.group, scope.itemId, ftype)
+				.then(data => {
+					e.preventDefault();
+					// invisible el, see end of template
+					const a = document.querySelector(`#${scope.domId}-download`);
 
-				event.preventDefault();
-
-				hrefs.forEach((href, i) => {
-					a.href = href;
-					a.download = `${scope.imgName}-${i}.png`;
+					a.href = data;
+					a.download = `${scope.domId}-${scope.itemId}.${ftype.toLowerCase()}`;
 					a.click();
 					a.href = '';
 					a.download = '';
@@ -53,14 +60,16 @@ angular.module('reportApp')
 			};
 		},
 		template: `
-<a
-	id='{{ downloadLinkId() }}'
-	style='color: white;'
-	class='btn btn-primary'
-	ng-click='setupDownloadLinkTest($event)'>
-	<i class='fa fa-download fa-lg'></i>
-	Download
-</a>
+<div class='btn-group'>
+	<button type='button' class='btn btn-primary dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+		Download
+		<span class="caret"></span>
+	</button>
+	<ul class="dropdown-menu">
+		<li><a ng-repeat='t in filetypes' ng-click='downloadImgs($event, t)'>{{ t }}</a></li>
+	</ul>
+</div>
+<a id='{{ domId }}-download'></a>
 `
 	};
 }]);

beat/web/reports/static/reports/app/directives/edit/plotItem.js

@@ -90,16 +90,6 @@ angular.module('reportApp')
 				() => JSON.stringify(scope.group._aliases),
 				updatePlot
 			);
-
-			scope.exportSrcFunc = () => () => {
-				const el = document.querySelectorAll(`#${scope.renderDivId} img`);
-				const srcs = Array.from(el)
-				.map(e => e.src)
-				//.map(src => src.replace(/^data:undefined/, 'data:application/octet-stream'));
-				;
-
-				return srcs;
-			};
 		},
 		template: `
 <div id="{{domId}}-heading" class="panel-heading" role="tab">
@@ -128,8 +118,8 @@ angular.module('reportApp')
 		</div>
 		<download-link
 			dom-id='{{ domId }}'
-			img-name='{{ renderDivId }}'
-			get-download-href='exportSrcFunc()'
+			group='group'
+			item-id='itemId'
 			>
 			</download-link>
 	</h4>

beat/web/reports/static/reports/app/services/plotService.js

@@ -48,6 +48,7 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
 
 	// constructs the payload to send to the server
 	const constructPlotInfo = (group, itemId) => {
+		console.log(group);
 		const content = group.reportItems.find(i => i.id === itemId).content;
 
 		// defaults obj, in case we're using defaults
@@ -130,6 +131,10 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
 	const fetchDownload = (requestData, contentType) => {
 		const urlPrefix = '';
 
+		// override the 'merged' property to always request the merged version.
+		// requested the unmerged version only downloads the first image.
+		requestData[0] = Object.assign({}, requestData[0], { merged: true });
+
 		return new Promise((resolve, reject) => {
 			beat.experiments.utils.getPlotData(
 				// url_prefix
@@ -153,7 +158,7 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
 		// but it seems to always be an empty string now
 		const urlPrefix = '';//UrlService.getApiSegment().split('/').filter(s => s.length > 0).join('/');
 
-		// promisify this utils func so we dont have to deal with callback hell
+		// this func *cannot* be promisified! the callback is fired whenever the plot is re-rendered.
 		beat.experiments.utils.displayPlot(
 			// url_prefix
 			urlPrefix,
@@ -170,6 +175,13 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
 		);
 	};
 
+	// helper func to process a request to plot
+	const processDownload = (group, itemId, contentType) => {
+		const reqData = constructPlotInfo(group, itemId);
+
+		return fetchDownload(reqData, contentType);
+	};
+
 	// helper func to process a request to plot
 	const processItem = (group, itemId, containerId, onRenderCallback) => {
 		const reqData = constructPlotInfo(group, itemId);
@@ -205,8 +217,11 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
 	};
 
 	// chooses whether to add the plot request to a queue or service directly
-	// args: group, itemId, containerId
+	// args: group, itemId, containerId, onRenderCallback
 	ps.addPlot = (...args) => noQueueNeeded ? processItem(...args) : addItemToQueue(...args);
 
+	// args: group, itemId, contentType
+	ps.downloadPlot = (...args) => processDownload(...args);
+
 	return ps;
 }]);