From ce78b5cc0fc0cfb0f7da3471db4c6cb5674bcbb3 Mon Sep 17 00:00:00 2001
From: marohrdanz <marohrdanz@mdanderson.org>
Date: Tue, 11 Aug 2020 13:32:21 -0500
Subject: [PATCH 1/5] Add option to choose draw order for points

Added an option to the gear menu for user to choose which order
to draw points: random (same seed each time), random (different seed
each time), original (same order as NGCHM), or according to batch
size (largest batch drawn first, then second largest, etc).

Addresses #2
---
 canvasDraw.js  | 40 ++++++++++++++++++++++++++++++++++++++++
 demo-only.html |  2 +-
 ngchm.js       | 18 +++++++++++++++---
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/canvasDraw.js b/canvasDraw.js
index 88ccc44..215bb3d 100755
--- a/canvasDraw.js
+++ b/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) {
diff --git a/demo-only.html b/demo-only.html
index 6452348..87f13be 100755
--- a/demo-only.html
+++ b/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':
diff --git a/ngchm.js b/ngchm.js
index b2611cb..81dcd5c 100644
--- a/ngchm.js
+++ b/ngchm.js
@@ -35,6 +35,18 @@ export var VAN = new Vanodi({
 					{ label: 'Blue', value: 'blue'}
 				], 
 				helpText: 'Color used to highlight selected points'
+			},
+			{ label: 'Draw Order', type: 'dropdown', choices: [
+					{ label: 'Random (same seed)', value: 'randomSameSeed' },
+					{ label: 'Random (different seed)', value: 'randomDifferentSeed' },
+					{ label: 'Original', value: 'original' },
+					{ label: 'By Group', value: 'batches' }
+				],
+				helpText: 'Order to draw 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>Original</u>: same order as in NGCHM<br><br>' +
+							'<u>By Group</u>: draw group with largest number of points first, then group with second largest, etc.'
 			}
 		]
 }); /* end function registerPlugin */
@@ -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['Draw 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;

From d9dd36c38dbeb0997000274295565cfe6d4d5527 Mon Sep 17 00:00:00 2001
From: marohrdanz <marohrdanz@mdanderson.org>
Date: Wed, 12 Aug 2020 13:45:50 -0500
Subject: [PATCH 2/5] Make dropdown labels more clear for point ordering

Change the text of the dropdown labels for 'original' and 'batches'
ordering to try and make them more clear to users.
---
 ngchm.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ngchm.js b/ngchm.js
index 81dcd5c..251a905 100644
--- a/ngchm.js
+++ b/ngchm.js
@@ -39,14 +39,14 @@ export var VAN = new Vanodi({
 			{ label: 'Draw Order', type: 'dropdown', choices: [
 					{ label: 'Random (same seed)', value: 'randomSameSeed' },
 					{ label: 'Random (different seed)', value: 'randomDifferentSeed' },
-					{ label: 'Original', value: 'original' },
-					{ label: 'By Group', value: 'batches' }
+					{ label: 'NG-CHM Order', value: 'original' },
+					{ label: 'Group Size', value: 'batches' }
 				],
 				helpText: 'Order to draw 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>Original</u>: same order as in NGCHM<br><br>' +
-							'<u>By Group</u>: draw group with largest number of points first, then group with second largest, etc.'
+							'<u>NGCHM Order</u>: same order as in NGCHM<br><br>' +
+							'<u>Group Size</u>: draw group with largest number of points first, then group with second largest, etc.'
 			}
 		]
 }); /* end function registerPlugin */

From b41d9fe8daf4575a3609f298511314b755ffcd15 Mon Sep 17 00:00:00 2001
From: marohrdanz <marohrdanz@mdanderson.org>
Date: Thu, 13 Aug 2020 13:24:14 -0500
Subject: [PATCH 3/5] Clear highlights when mouse leaves canvas

There is an issue where if the user moves the mouse very quickly
off the canvas, the last highlighted point remains highlighted.
To prevent this, clearing the highlight canvas whenever the mouse
leaves (points selected will remain selected)

Addresses #5
---
 canvasDraw.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/canvasDraw.js b/canvasDraw.js
index 215bb3d..44c90cc 100755
--- a/canvasDraw.js
+++ b/canvasDraw.js
@@ -838,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)

From 64f29359e5fd042f4fb8a142012fabe215931039 Mon Sep 17 00:00:00 2001
From: marohrdanz <marohrdanz@mdanderson.org>
Date: Fri, 14 Aug 2020 08:18:01 -0500
Subject: [PATCH 4/5] Change 'Draw Order' to 'Render Order'

Making this change based on input from team; trying to make the
language clearer.
---
 ngchm.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/ngchm.js b/ngchm.js
index 251a905..10a30a0 100644
--- a/ngchm.js
+++ b/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 in NGCHM<br><br>' +
+							'<u>Group Size</u>: draw group with largest number of points first, then group with second largest, etc., so the smallest group is on top.'
+			},
 			{ label: 'Background Color', type: 'dropdown', choices: [
 				{ label: 'White', value: "white" },
 				{ label: 'Ivory', value: "ivory" },
@@ -35,18 +47,6 @@ export var VAN = new Vanodi({
 					{ label: 'Blue', value: 'blue'}
 				], 
 				helpText: 'Color used to highlight selected points'
-			},
-			{ label: 'Draw 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 draw 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 in NGCHM<br><br>' +
-							'<u>Group Size</u>: draw group with largest number of points first, then group with second largest, etc.'
 			}
 		]
 }); /* end function registerPlugin */
@@ -122,7 +122,7 @@ VAN.addMessageListener ('plot', function plotMessageHandler (vanodi) {
 		yLabel: vanodi.config.axes[0].coordinates[1].label,
 		plotTitle: vanodi.config.plotTitle,
 		legendTitle: vanodi.config.axes[0].covariates[0].label,
-		drawOrder: vanodi.config.options['Draw Order']
+		drawOrder: vanodi.config.options['Render Order']
 	}
 	$(document).ready(function() {
 		var slider = document.getElementById('point-size-slider')

From b32246414b87d8465e7bb388a1b445241c4ae8d2 Mon Sep 17 00:00:00 2001
From: marohrdanz <marohrdanz@mdanderson.org>
Date: Thu, 27 Aug 2020 08:13:03 -0500
Subject: [PATCH 5/5] Tweak help language

Made small changes to clarify help text based on group feedback.
---
 ngchm.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ngchm.js b/ngchm.js
index 10a30a0..63ad865 100644
--- a/ngchm.js
+++ b/ngchm.js
@@ -19,8 +19,8 @@ export var VAN = new Vanodi({
 				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 in NGCHM<br><br>' +
-							'<u>Group Size</u>: draw group with largest number of points first, then group with second largest, etc., so the smallest group is on top.'
+							'<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" },