diff --git a/public/app.js b/public/app.js index db1dbc8..7aa9169 100644 --- a/public/app.js +++ b/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();