add is-active and is-hovered dynamic props to buttons:

- use update object and current axis range to determine
  whether a given button is active
- fill button with Color.ligthLine on mouse over and
  when active.

Author: etpinard

src/components/rangeselector/draw.js

@@ -54,17 +54,28 @@ module.exports = function draw(gd) {
 
         buttons.each(function(d) {
             var button = d3.select(this);
+            var update = getUpdateObject(axisLayout, d);
+
+            d.isActive = isActive(axisLayout, d, update);
 
             button.call(drawButtonRect, selectorLayout, d);
             button.call(drawButtonText, selectorLayout, d);
 
             button.on('click', function() {
                 if(gd._dragged) return;
 
-                var update = getUpdateObject(axisLayout, d);
-
                 Plotly.relayout(gd, update);
             });
+
+            button.on('mouseover', function() {
+                d.isHovered = true;
+                button.call(drawButtonRect, selectorLayout, d);
+            });
+
+            button.on('mouseout', function() {
+                d.isHovered = false;
+                button.call(drawButtonRect, selectorLayout, d);
+            });
         });
 
         // N.B. this mutates selectorLayout
@@ -96,7 +107,21 @@ function selectorKeyFunc(d) {
     return d._id;
 }
 
-function drawButtonRect(button, selectorLayout) {
+function isActive(axisLayout, opts, update) {
+    if(opts.step === 'all') {
+        return axisLayout.autorange === true;
+    }
+    else {
+        var keys = Object.keys(update);
+
+        return (
+            axisLayout.range[0] === update[keys[0]] &&
+            axisLayout.range[1] === update[keys[1]]
+        );
+    }
+}
+
+function drawButtonRect(button, selectorLayout, d) {
     var rect = button.selectAll('rect')
         .data([0]);
 
@@ -111,10 +136,16 @@ function drawButtonRect(button, selectorLayout) {
     });
 
     rect.call(Color.stroke, selectorLayout.bordercolor)
-        .call(Color.fill, selectorLayout.bgcolor)
+        .call(Color.fill, getFillColor(selectorLayout, d))
         .style('stroke-width', selectorLayout.borderwidth + 'px');
 }
 
+function getFillColor(selectorLayout, d) {
+    return (d.isActive || d.isHovered) ?
+        Color.lightLine :
+        selectorLayout.bgcolor;
+}
+
 function drawButtonText(button, selectorLayout, d) {
     function textLayout(s) {
         svgTextUtils.convertToTspans(s, function() {

test/jasmine/tests/range_selector_test.js

@@ -1,9 +1,9 @@
 var RangeSelector = require('@src/components/rangeselector');
 var getUpdateObject = require('@src/components/rangeselector/get_update_object');
 
+var d3 = require('d3');
 var Plotly = require('@lib');
 var Lib = require('@src/lib');
-var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var getRectCenter = require('../assets/get_rect_center');
@@ -396,6 +396,12 @@ describe('[range selector suite]', function() {
             expect(d3.selectAll(query).size()).toEqual(cnt);
         }
 
+        function checkActiveButton(activeIndex) {
+            d3.selectAll('.button').each(function(d, i) {
+                expect(d.isActive).toBe(activeIndex === i);
+            });
+        }
+
         it('should display the correct nodes', function() {
             assertNodeCount('.rangeselector', 1);
             assertNodeCount('.button', mockCopy.layout.xaxis.rangeselector.buttons.length);
@@ -410,18 +416,37 @@ describe('[range selector suite]', function() {
 
         });
 
-        it('should update range when clicked', function() {
+        it('should update range and active button when clicked', function() {
             var range0 = gd.layout.xaxis.range[0];
             var buttons = d3.selectAll('.button').select('rect');
 
+            checkActiveButton(buttons.size() - 1);
+
             var pos0 = getRectCenter(buttons[0][0]);
             var posReset = getRectCenter(buttons[0][buttons.size()-1]);
 
             mouseEvent('click', pos0[0], pos0[1]);
             expect(gd.layout.xaxis.range[0]).toBeGreaterThan(range0);
 
+            checkActiveButton(0);
+
             mouseEvent('click', posReset[0], posReset[1]);
             expect(gd.layout.xaxis.range[0]).toEqual(range0);
+
+            checkActiveButton(buttons.size() - 1);
+        });
+
+        it('should change color on mouse over', function() {
+            var button = d3.select('.button').select('rect');
+            var pos = getRectCenter(button.node());
+
+            expect(button.style('fill')).toEqual('rgb(255, 255, 255)');
+
+            mouseEvent('mouseover', pos[0], pos[1]);
+            expect(button.style('fill')).toEqual('rgb(238, 238, 238)');
+
+            mouseEvent('mouseout', pos[0], pos[1]);
+            expect(button.style('fill')).toEqual('rgb(255, 255, 255)');
         });
 
     });