From b84d75597dece91255321cbf25dcb35d1beebba6 Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Fri, 7 Sep 2018 17:59:37 -0700 Subject: [PATCH] Avoid race conditions around showing and hiding the line chart tooltip --- ui/app/components/line-chart.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.js index c973ae47c..633c33945 100644 --- a/ui/app/components/line-chart.js +++ b/ui/app/components/line-chart.js @@ -197,11 +197,14 @@ export default Component.extend(WindowResizable, { const canvas = d3.select(this.element.querySelector('.canvas')); const updateActiveDatum = this.updateActiveDatum.bind(this); - canvas.on('mouseenter', () => { - run.schedule('afterRender', this, () => this.set('isActive', true)); + const chart = this; + canvas.on('mouseenter', function() { + const mouseX = d3.mouse(this)[0]; + chart.set('latestMouseX', mouseX); + updateActiveDatum(mouseX); + run.schedule('afterRender', chart, () => chart.set('isActive', true)); }); - const chart = this; canvas.on('mousemove', function() { const mouseX = d3.mouse(this)[0]; chart.set('latestMouseX', mouseX); @@ -209,7 +212,7 @@ export default Component.extend(WindowResizable, { }); canvas.on('mouseleave', () => { - this.set('isActive', false); + run.schedule('afterRender', this, () => this.set('isActive', false)); this.set('activeDatum', null); }); },