Options for draw order of points (issue #2) & Bug fix (issue #5)

canvasDraw.js

@@ -370,6 +370,11 @@ function initializeOptions(plotOptions) {
 	op.yLabel = plotOptions.hasOwnProperty('yLabel') ? plotOptions.yLabel : 'y data';
 	op.plotTitle = plotOptions.hasOwnProperty('plotTitle') ? plotOptions.plotTitle : 'Plot Title';
 	op.legendTitle = plotOptions.hasOwnProperty('legendTitle') ? plotOptions.legendTitle : 'Legend Title';
+	op.drawOrder = plotOptions.hasOwnProperty('drawOrder') ? plotOptions.drawOrder : 'original';
+	if (!['original','randomSameSeed','randomDifferentSeed','batches'].includes(op.drawOrder)) {
+		console.warn("Invalid draw order for points. Setting to 'original'")
+		op.drawOrder = 'original';
+	}
 	return op
 }
 
@@ -521,6 +526,40 @@ function findDuplicates(array) {
 	return array.filter(a => a in objTmp ? true : (objTmp[a] = true) && false, objTmp)
 }
 
+/* Function to set the order of points for drawing 
+ *
+ * Parameters:
+ *     data: array of objects, each representing one data point, and of the form:
+ *           { batch: <batch>, color: <hex color>, id: <point id>, text: <label for point>,
+ *             x: <x-coordinate>, y: <y-coordinate>}
+ *     drawOrder: string, specifies order for drawing points. Choices:
+ *                randomSameSeed: shuffle input data to draw points randomly, but with same seed each time
+ *                randomDifferentSeed: shuffle input data to draw points randomly, but with different seed each time
+ *                batches: sort data according to batches, with the largest batch first
+ *                <anything else>: draw points in order they were given
+*/
+function setDataOrder(data,drawOrder) {
+	if (drawOrder == 'randomSameSeed') { // return random order w/ same seed each time
+		var chance1 = new Chance(124);
+		return chance1.shuffle(data);
+	} else if (drawOrder == 'randomDifferentSeed') { // return random order w/ different seed each time
+		var randInt = Math.floor(Math.random()*10);
+		var chance1 = new Chance(randInt);
+		return chance1.shuffle(data);
+	} else if (drawOrder == 'batches') { // return ordered by batches, largest to smallest
+		var sortedData = []
+		canvasPlot.batchIds.reverse().forEach( batchId => { 
+			var thesePoints = data.filter( d => d.batch == batchId )
+			thesePoints.forEach( p => {
+				sortedData.push(p)
+			})
+		})
+		return sortedData;
+	} else { // return original data
+		return data;
+	}
+}
+
 /*
  * Main function for making plot. Exported
  *
@@ -575,6 +614,7 @@ function drawPlot (data,plotGeometry,plotOptions,colorMap) {
 	document.getElementById('plot-info-div').style.display = 'block';
 	document.getElementById('canvas-plot-wrapper').style.display = 'block';
 	createAxes(canvasPlot.data, canvasPlot.xScale, canvasPlot.yScale);
+	canvasPlot.data = setDataOrder(canvasPlot.data, canvasPlot.plotOptions.drawOrder);
 	drawActualPoints(canvasPlot.data, canvasPlot.xScale, canvasPlot.yScale);
 	selectedPoints = updateSelectedPointColors(canvasPlot.data, selectedPoints);
 	selectedPoints.forEach(function(dot) {
@@ -798,6 +838,7 @@ function drawPlot (data,plotGeometry,plotOptions,colorMap) {
 	}, false)
 	// hide tooltips when mouse moves off canvas:
 	document.getElementById('catch-zoom').addEventListener('mouseout', function() { 
+		highlightCtx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height); // clear highlight canvas
 		tipCanvas.style.left = "-900px"; // move tooltip off view 
 		tipCanvas.style.top = "100px";
 	}, false)

demo-only.html

@@ -68,7 +68,7 @@ <h1 id='canvas-plot-titledd'>This page is for demonstration only</h1>
 			yLabel: 'y data',
 			plotTitle: 'Demonstration',
 			legendTitle: 'Made-up data with a super duper long title',
-			separateGroupLayers: false
+			drawOrder: 'batches'
 		}
 		/*
 			Required format of 'data':

ngchm.js

@@ -10,6 +10,18 @@ export var VAN = new Vanodi({
 				  { name: 'Color By', baseid: 'covariate', min: 1, max: 1, helpText: 'Covariate used to color points in the Scatter Plot' }] }
 		],
 		options: [
+			{ label: 'Render Order', type: 'dropdown', choices: [
+					{ label: 'Random (same seed)', value: 'randomSameSeed' },
+					{ label: 'Random (different seed)', value: 'randomDifferentSeed' },
+					{ label: 'NG-CHM Order', value: 'original' },
+					{ label: 'Group Size', value: 'batches' }
+				],
+				helpText: 'Order to render points.<br><br>' +
+							'<u>Random (same seed)</u>: random order, with same seed each time<br><br>' +
+							'<u>Random (different seed)</u>: random order, with different seed each time<br><br>' +
+							'<u>NGCHM Order</u>: same order as columns/rows of the NGCHM<br><br>' +
+							'<u>Group Size</u>: group with largest number of points on bottom, group with smallest number of points on top.'
+			},
 			{ label: 'Background Color', type: 'dropdown', choices: [
 				{ label: 'White', value: "white" },
 				{ label: 'Ivory', value: "ivory" },
@@ -109,15 +121,15 @@ VAN.addMessageListener ('plot', function plotMessageHandler (vanodi) {
 		xLabel: vanodi.config.axes[0].coordinates[0].label,
 		yLabel: vanodi.config.axes[0].coordinates[1].label,
 		plotTitle: vanodi.config.plotTitle,
-		legendTitle: vanodi.config.axes[0].covariates[0].label
+		legendTitle: vanodi.config.axes[0].covariates[0].label,
+		drawOrder: vanodi.config.options['Render Order']
 	}
 	$(document).ready(function() {
 		var slider = document.getElementById('point-size-slider')
 		ScatterPlot.plotOptions.pointSize = slider.value
 		canvasPlot.batchIds = canvasPlot.getBatchIds(ScatterPlot.plotData)
 		canvasPlot.axis = vanodi.config.axes[0].axisName
-		var chance1 = new Chance(124);
-		canvasPlot.data = chance1.shuffle(ScatterPlot.plotData)
+		canvasPlot.data = ScatterPlot.plotData
 		canvasPlot.drawPlot(canvasPlot.data, ScatterPlot.plotGeometry, ScatterPlot.plotOptions, ScatterPlot.colorMap);
 		slider.oninput = function() {
 			canvasPlot.plotOptions.pointSize = this.value;