make legend scrollbar scale to the visible fraction

fixes the legend part of #1859

Author: alexcjohnson

src/components/legend/constants.js

@@ -10,7 +10,7 @@
 
 module.exports = {
     scrollBarWidth: 6,
-    scrollBarHeight: 20,
+    scrollBarMinHeight: 20,
     scrollBarColor: '#808BA4',
     scrollBarMargin: 4
 };

src/components/legend/draw.js

@@ -207,13 +207,6 @@ module.exports = function draw(gd) {
     // legend, background and border, scroll box and scroll bar
     Drawing.setTranslate(legend, lx, ly);
 
-    var scrollBarYMax = legendHeight -
-            constants.scrollBarHeight -
-            2 * constants.scrollBarMargin,
-        scrollBoxYMax = opts._height - legendHeight,
-        scrollBarY,
-        scrollBoxY;
-
     if(opts._height <= legendHeight || gd._context.staticPlot) {
         // if scrollbar should not be shown.
         bg.attr({
@@ -235,8 +228,15 @@ module.exports = function draw(gd) {
         scrollBox.call(Drawing.setClipUrl, clipId);
     }
     else {
-        scrollBarY = constants.scrollBarMargin,
-        scrollBoxY = scrollBox.attr('data-scroll') || 0;
+        var scrollBarHeight = Math.max(constants.scrollBarMinHeight,
+            legendHeight * legendHeight / opts._height);
+        var scrollBarYMax = legendHeight -
+            scrollBarHeight -
+            2 * constants.scrollBarMargin;
+        var scrollBoxYMax = opts._height - legendHeight;
+
+        var scrollBarY = constants.scrollBarMargin;
+        var scrollBoxY = scrollBox.attr('data-scroll') || 0;
 
         // increase the background and clip-path width
         // by the scrollbar width and margin
@@ -262,7 +262,7 @@ module.exports = function draw(gd) {
 
         scrollBox.call(Drawing.setClipUrl, clipId);
 
-        if(firstRender) scrollHandler(scrollBarY, scrollBoxY);
+        if(firstRender) scrollHandler(scrollBarY, scrollBoxY, scrollBarHeight);
 
         legend.on('wheel', null);  // to be safe, remove previous listeners
         legend.on('wheel', function() {
@@ -272,7 +272,7 @@ module.exports = function draw(gd) {
                 -scrollBoxYMax, 0);
             scrollBarY = constants.scrollBarMargin -
                 scrollBoxY / scrollBoxYMax * scrollBarYMax;
-            scrollHandler(scrollBarY, scrollBoxY);
+            scrollHandler(scrollBarY, scrollBoxY, scrollBarHeight);
             if(scrollBoxY !== 0 && scrollBoxY !== -scrollBoxYMax) {
                 d3.event.preventDefault();
             }
@@ -299,14 +299,14 @@ module.exports = function draw(gd) {
                 constants.scrollBarMargin + scrollBarYMax);
             scrollBoxY = - (scrollBarY - constants.scrollBarMargin) /
                 scrollBarYMax * scrollBoxYMax;
-            scrollHandler(scrollBarY, scrollBoxY);
+            scrollHandler(scrollBarY, scrollBoxY, scrollBarHeight);
         });
 
         scrollBar.call(drag);
     }
 
 
-    function scrollHandler(scrollBarY, scrollBoxY) {
+    function scrollHandler(scrollBarY, scrollBoxY, scrollBarHeight) {
         scrollBox
             .attr('data-scroll', scrollBoxY)
             .call(Drawing.setTranslate, 0, scrollBoxY);
@@ -316,7 +316,7 @@ module.exports = function draw(gd) {
             legendWidth,
             scrollBarY,
             constants.scrollBarWidth,
-            constants.scrollBarHeight
+            scrollBarHeight
         );
         clipPath.select('rect').attr({
             y: opts.borderwidth - scrollBoxY

test/jasmine/tests/legend_scroll_test.js

@@ -138,27 +138,30 @@ describe('The legend', function() {
             var finalDataScroll = dragScroll(getScrollBar());
             var scrollBox = getScrollBox();
 
-            expect(scrollBox.getAttribute('data-scroll')).toBe(finalDataScroll);
+            var dataScroll = scrollBox.getAttribute('data-scroll');
+            expect(dataScroll).toBeCloseTo(finalDataScroll, 3);
             expect(scrollBox.getAttribute('transform')).toBe(
-                'translate(0, ' + finalDataScroll + ')');
+                'translate(0, ' + dataScroll + ')');
         });
 
         it('should not scroll on dragging the scrollbox', function() {
             var scrollBox = getScrollBox();
             var finalDataScroll = dragScroll(scrollBox);
 
-            expect(scrollBox.getAttribute('data-scroll')).not.toBe(finalDataScroll);
-            expect(scrollBox.getAttribute('transform')).not.toBe(
-                'translate(0, ' + finalDataScroll + ')');
+            var dataScroll = scrollBox.getAttribute('data-scroll');
+            expect(dataScroll).not.toBeCloseTo(finalDataScroll, 3);
+            expect(scrollBox.getAttribute('transform')).toBe(
+                'translate(0, ' + dataScroll + ')');
         });
 
         it('should not scroll on dragging the scrollbar with a right click', function() {
             var finalDataScroll = dragScroll(getScrollBar(), true);
             var scrollBox = getScrollBox();
 
-            expect(scrollBox.getAttribute('data-scroll')).not.toBe(finalDataScroll);
-            expect(scrollBox.getAttribute('transform')).not.toBe(
-                'translate(0, ' + finalDataScroll + ')');
+            var dataScroll = scrollBox.getAttribute('data-scroll');
+            expect(dataScroll).not.toBeCloseTo(finalDataScroll, 3);
+            expect(scrollBox.getAttribute('transform')).toBe(
+                'translate(0, ' + dataScroll + ')');
         });
 
         it('should keep the scrollbar position after a toggle event', function(done) {
@@ -237,13 +240,18 @@ describe('The legend', function() {
                 scrollBar = getScrollBar(),
                 legendHeight = getLegendHeight(gd);
 
-            // The scrollbar is 20px tall and has 4px margins
+            // The scrollbar is >20px tall and has 4px margins
+            var scrollBarHeight = scrollBar.getBoundingClientRect().height;
+            // in this mock there are 22 traces, and 13 are visible in the legend
+            // at any given time
+            expect(scrollBarHeight).toBeCloseTo(legendHeight * 13 / 22, -1);
 
             legend.dispatchEvent(scrollTo(-1000));
-            expect(+scrollBar.getAttribute('y')).toBe(4);
+            expect(+scrollBar.getAttribute('y')).toBeCloseTo(4, 3);
 
             legend.dispatchEvent(scrollTo(10000));
-            expect(+scrollBar.getAttribute('y')).toBe(legendHeight - 4 - 20);
+            expect(+scrollBar.getAttribute('y'))
+                .toBeCloseTo(legendHeight - 4 - scrollBarHeight, 3);
         });
 
         it('should be removed from DOM when \'showlegend\' is relayout\'ed to false', function(done) {