fixed ordering in table

public/app.js

@@ -4,11 +4,12 @@ const parseTime = d3.timeParse("%B %e, %Y");
 
 let instances;
 let xScale, yScale;
+let highlighted = 0;
 
 const renderTable = () => {
 	const trs = d3.select('tbody')
 		.selectAll('tr')
-		.data(instances.filter(d => d.highlighted), d => d.id)
+		.data(instances.filter(d => d.highlighted > 0).sort((a,b) => a.highlighted - b.highlighted), d => d.id)
 		.enter()
 		.append('tr')
 		.selectAll('td')
@@ -45,11 +46,11 @@ const renderPoints = () => {
 
 	d3.selectAll('circle')
 		.classed('highlighted', (datum, index)=>{
-			return datum.highlighted
+			return datum.highlighted > 0
 		})
 
 	d3.selectAll('circle').on('click', (event, datum) => {
-		datum.highlighted = true;
+		datum.highlighted = ++highlighted;
 		renderPoints()
 		renderTable()
 	});
@@ -97,7 +98,7 @@ const createFormSubmissionHandler = () => {
 		event.preventDefault();
 		const instanceID = parseInt(d3.select('input[type="text"]').property('value'))
 		const found = instances.find(i => i.instance_id === instanceID)
-		found.highlighted = true;
+		found.highlighted = ++highlighted;
 		renderTable();
 		renderPoints();
 	});
@@ -105,7 +106,7 @@ const createFormSubmissionHandler = () => {
 
 window.onload = async ()=>{
 	instances = await d3.json('/instances');
-	instances.forEach(instance => instance.highlighted = false)
+	instances.forEach(instance => instance.highlighted = highlighted)
 	setupGraph();
 	createAxes();
 	renderPoints();