unhighlight by clicking on circle

public/app.js

@@ -6,16 +6,15 @@ const parseTime = d3.timeParse("%B %e, %Y");
 
 let instances;
 let xScale, yScale;
-let highlighted = 0;
+let highlighted = []
 
 const renderTable = () => {
 	const trs = d3.select('tbody')
+		.html('')
 		.selectAll('tr')
-		.data(instances.filter(d => d.highlighted > 0).sort((a,b) => a.highlighted - b.highlighted), d => d.id)
+		.data(highlighted, d => d.id)
 		.enter()
 		.append('tr')
-		//.exit()
-		//.remove()
 		.selectAll('td')
 		.data(d => [
 			d.instance_id, 
@@ -45,13 +44,14 @@ const renderPoints = () => {
 		.attr('cx', (datum, index) => xScale(parseTime(datum.graduation_date)) );
 
 	d3.selectAll('circle')
-		.classed('highlighted', (datum, index)=> datum.highlighted > 0 )
+		.classed('highlighted', (datum, index)=> highlighted.find(i => i.instance_id === datum.instance_id) !== undefined)
 
 	d3.selectAll('circle').on('click', (event, datum) => {
-		if(datum.highlighted === 0){
-			datum.highlighted = ++highlighted;
+		const found = highlighted.find(i => i.instance_id === datum.instance_id)
+		if(found === undefined){
+			highlighted.push(datum)
 		} else {
-			datum.highlighted = 0;
+			highlighted = highlighted.filter(i => i.instance_id != datum.instance_id)
 		}
 		renderPoints()
 		renderTable()
@@ -100,7 +100,9 @@ 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 = ++highlighted;
+		if(found !== undefined && highlighted.find(instance => instance.instance_id === instanceID) === undefined){
+			highlighted.push(found);
+		}
 		renderTable();
 		renderPoints();
 	});
@@ -108,7 +110,6 @@ const createFormSubmissionHandler = () => {
 
 window.onload = async ()=>{
 	instances = await d3.json('/instances');
-	instances.forEach(instance => instance.highlighted = highlighted)
 	setupGraph();
 	createAxes();
 	renderPoints();