implement hoverlabel.namelength for traces using Fx.loneHover

etpinard · etpinard · commit 918d22e731c7 · 2019-04-08T12:07:35.000-04:00
... that is pie, sankey, sunburst and all gl3d traces
diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js
@@ -124,6 +124,7 @@ exports.loneHover = function loneHover(hoverItem, opts) {
         fontFamily: hoverItem.fontFamily,
         fontSize: hoverItem.fontSize,
         fontColor: hoverItem.fontColor,
+        nameLength: hoverItem.nameLength,
 
         // filler to make createHoverText happy
         trace: hoverItem.trace || {
diff --git a/src/plots/gl2d/scene2d.js b/src/plots/gl2d/scene2d.js
@@ -686,7 +686,8 @@ proto.draw = function() {
                     borderColor: Fx.castHoverOption(trace, ptNumber, 'bordercolor'),
                     fontFamily: Fx.castHoverOption(trace, ptNumber, 'font.family'),
                     fontSize: Fx.castHoverOption(trace, ptNumber, 'font.size'),
-                    fontColor: Fx.castHoverOption(trace, ptNumber, 'font.color')
+                    fontColor: Fx.castHoverOption(trace, ptNumber, 'font.color'),
+                    nameLength: Fx.castHoverOption(trace, ptNumber, 'namelength')
                 }, {
                     container: this.svgContainer,
                     gd: this.graphDiv
diff --git a/src/plots/gl3d/scene.js b/src/plots/gl3d/scene.js
@@ -32,6 +32,7 @@ var computeTickMarks = require('./layout/tick_marks');
 var STATIC_CANVAS, STATIC_CONTEXT;
 
 function render(scene) {
+    var gd = scene.graphDiv;
     var trace;
 
     // update size of svg container
@@ -70,6 +71,7 @@ function render(scene) {
     if(lastPicked !== null) {
         var pdata = project(scene.glplot.cameraParams, selection.dataCoordinate);
         trace = lastPicked.data;
+        var traceNow = gd._fullData[trace.index];
         var ptNumber = selection.index;
 
         var labels = {
@@ -78,11 +80,11 @@ function render(scene) {
             zLabel: formatter('zaxis', selection.traceCoordinate[2])
         };
 
-        var hoverinfo = Fx.castHoverinfo(trace, scene.fullLayout, ptNumber);
+        var hoverinfo = Fx.castHoverinfo(traceNow, scene.fullLayout, ptNumber);
         var hoverinfoParts = (hoverinfo || '').split('+');
         var isHoverinfoAll = hoverinfo && hoverinfo === 'all';
 
-        if(!trace.hovertemplate && !isHoverinfoAll) {
+        if(!traceNow.hovertemplate && !isHoverinfoAll) {
             if(hoverinfoParts.indexOf('x') === -1) labels.xLabel = undefined;
             if(hoverinfoParts.indexOf('y') === -1) labels.yLabel = undefined;
             if(hoverinfoParts.indexOf('z') === -1) labels.zLabel = undefined;
@@ -138,55 +140,55 @@ function render(scene) {
             x: selection.traceCoordinate[0],
             y: selection.traceCoordinate[1],
             z: selection.traceCoordinate[2],
-            data: trace._input,
-            fullData: trace,
-            curveNumber: trace.index,
+            data: traceNow._input,
+            fullData: traceNow,
+            curveNumber: traceNow.index,
             pointNumber: ptNumber
         };
 
-        Fx.appendArrayPointValue(pointData, trace, ptNumber);
+        Fx.appendArrayPointValue(pointData, traceNow, ptNumber);
 
         if(trace._module.eventData) {
-            pointData = trace._module.eventData(pointData, selection, trace, {}, ptNumber);
+            pointData = traceNow._module.eventData(pointData, selection, traceNow, {}, ptNumber);
         }
 
         var eventData = {points: [pointData]};
 
         if(scene.fullSceneLayout.hovermode) {
             Fx.loneHover({
-                trace: trace,
+                trace: traceNow,
                 x: (0.5 + 0.5 * pdata[0] / pdata[3]) * width,
                 y: (0.5 - 0.5 * pdata[1] / pdata[3]) * height,
                 xLabel: labels.xLabel,
                 yLabel: labels.yLabel,
                 zLabel: labels.zLabel,
                 text: tx,
                 name: lastPicked.name,
-                color: Fx.castHoverOption(trace, ptNumber, 'bgcolor') || lastPicked.color,
-                borderColor: Fx.castHoverOption(trace, ptNumber, 'bordercolor'),
-                fontFamily: Fx.castHoverOption(trace, ptNumber, 'font.family'),
-                fontSize: Fx.castHoverOption(trace, ptNumber, 'font.size'),
-                fontColor: Fx.castHoverOption(trace, ptNumber, 'font.color'),
-                hovertemplate: Lib.castOption(trace, ptNumber, 'hovertemplate'),
+                color: Fx.castHoverOption(traceNow, ptNumber, 'bgcolor') || lastPicked.color,
+                borderColor: Fx.castHoverOption(traceNow, ptNumber, 'bordercolor'),
+                fontFamily: Fx.castHoverOption(traceNow, ptNumber, 'font.family'),
+                fontSize: Fx.castHoverOption(traceNow, ptNumber, 'font.size'),
+                fontColor: Fx.castHoverOption(traceNow, ptNumber, 'font.color'),
+                nameLength: Fx.castHoverOption(traceNow, ptNumber, 'namelength'),
+                hovertemplate: Lib.castOption(traceNow, ptNumber, 'hovertemplate'),
                 hovertemplateLabels: Lib.extendFlat({}, pointData, labels),
                 eventData: [pointData]
             }, {
                 container: svgContainer,
-                gd: scene.graphDiv
+                gd: gd
             });
         }
 
         if(selection.buttons && selection.distance < 5) {
-            scene.graphDiv.emit('plotly_click', eventData);
+            gd.emit('plotly_click', eventData);
         } else {
-            scene.graphDiv.emit('plotly_hover', eventData);
+            gd.emit('plotly_hover', eventData);
         }
 
         oldEventData = eventData;
-    }
-    else {
+    } else {
         Fx.loneUnhover(svgContainer);
-        scene.graphDiv.emit('plotly_unhover', oldEventData);
+        gd.emit('plotly_unhover', oldEventData);
     }
 
     scene.drawAnnotations(scene);
diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js
@@ -363,10 +363,11 @@ function attachFxHandlers(sliceTop, gd, cd) {
             pt.percentLabel = helpers.formatPiePercent(pt.percent, separators);
             if(hoverinfo && hoverinfo.indexOf('percent') !== -1) thisText.push(pt.percentLabel);
 
-            var hoverLabel = trace.hoverlabel;
+            var hoverLabel = trace2.hoverlabel;
             var hoverFont = hoverLabel.font;
 
             Fx.loneHover({
+                trace: trace,
                 x0: hoverCenterX - rInscribed * cd0.r,
                 x1: hoverCenterX + rInscribed * cd0.r,
                 y: hoverCenterY,
@@ -378,8 +379,7 @@ function attachFxHandlers(sliceTop, gd, cd) {
                 fontFamily: helpers.castOption(hoverFont.family, pt.pts),
                 fontSize: helpers.castOption(hoverFont.size, pt.pts),
                 fontColor: helpers.castOption(hoverFont.color, pt.pts),
-
-                trace: trace2,
+                nameLength: helpers.castOption(hoverLabel.namelength, pt.pts),
                 hovertemplate: helpers.castOption(trace2.hovertemplate, pt.pts),
                 hovertemplateLabels: pt,
                 eventData: [eventData(pt, trace2)]
diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js
@@ -186,6 +186,7 @@ module.exports = function plot(gd, calcData) {
             fontFamily: castHoverOption(obj, 'font.family'),
             fontSize: castHoverOption(obj, 'font.size'),
             fontColor: castHoverOption(obj, 'font.color'),
+            nameLength: castHoverOption(obj, 'namelength'),
             idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left',
 
             hovertemplate: obj.hovertemplate,
@@ -267,6 +268,7 @@ module.exports = function plot(gd, calcData) {
             fontFamily: castHoverOption(obj, 'font.family'),
             fontSize: castHoverOption(obj, 'font.size'),
             fontColor: castHoverOption(obj, 'font.color'),
+            nameLength: castHoverOption(obj, 'namelength'),
             idealAlign: 'left',
 
             hovertemplate: obj.hovertemplate,
diff --git a/src/traces/sunburst/plot.js b/src/traces/sunburst/plot.js
@@ -581,18 +581,19 @@ function attachFxHandlers(sliceTop, gd, cd) {
             if(hasFlag('text') && hoverPt.text) thisText.push(hoverPt.text);
 
             Fx.loneHover({
+                trace: traceNow,
                 x0: hoverCenterX - rInscribed * pt.rpx1,
                 x1: hoverCenterX + rInscribed * pt.rpx1,
                 y: hoverCenterY,
                 idealAlign: pt.pxmid[0] < 0 ? 'left' : 'right',
-                trace: traceNow,
                 text: thisText.join('<br>'),
                 name: (hovertemplate || hasFlag('name')) ? traceNow.name : undefined,
                 color: _cast('hoverlabel.bgcolor') || cdi.color,
                 borderColor: _cast('hoverlabel.bordercolor'),
                 fontFamily: _cast('hoverlabel.font.family'),
                 fontSize: _cast('hoverlabel.font.size'),
                 fontColor: _cast('hoverlabel.font.color'),
+                nameLength: _cast('hoverlabel.namelength'),
                 hovertemplate: hovertemplate,
                 hovertemplateLabels: hoverPt,
                 eventData: [makeEventData(pt, traceNow)]
diff --git a/test/jasmine/tests/gl3d_plot_interact_test.js b/test/jasmine/tests/gl3d_plot_interact_test.js
@@ -226,6 +226,18 @@ describe('Test gl3d plots', function() {
                 }
             );
         })
+        .then(function() { return Plotly.restyle(gd, 'hoverlabel.namelength', 3); })
+        .then(delay(20))
+        .then(_hover)
+        .then(delay(20))
+        .then(function() {
+            assertHoverLabelContent(
+                {
+                    nums: ['x: 0', 'y: 0', 'z: 0'].join('\n'),
+                    name: 'tra'
+                }
+            );
+        })
         .catch(failTest)
         .then(done);
     });
diff --git a/test/jasmine/tests/pie_test.js b/test/jasmine/tests/pie_test.js
@@ -1169,6 +1169,24 @@ describe('pie hovering', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('should honor *hoverlabel.namelength*', function(done) {
+            mockCopy.data[0].name = 'loooooooooooooooooooooooong';
+            mockCopy.data[0].hoverinfo = 'all';
+
+            Plotly.plot(gd, mockCopy.data, mockCopy.layout)
+            .then(_hover)
+            .then(function() {
+                assertHoverLabelContent({nums: '4\n5\n33.3%', name: 'looooooooooo...'}, 'base');
+            })
+            .then(function() { return Plotly.restyle(gd, 'hoverlabel.namelength', 2); })
+            .then(_hover)
+            .then(function() {
+                assertHoverLabelContent({nums: '4\n5\n33.3%', name: 'lo'}, 'base');
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 
     describe('should fit labels within graph div', function() {
diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js
@@ -16,6 +16,7 @@ var destroyGraphDiv = require('../assets/destroy_graph_div');
 var failTest = require('../assets/fail_test');
 var mouseEvent = require('../assets/mouse_event');
 var getNodeCoords = require('../assets/get_node_coords');
+var assertHoverLabelContent = require('../assets/custom_assertions').assertHoverLabelContent;
 var assertHoverLabelStyle = require('../assets/custom_assertions').assertHoverLabelStyle;
 var supplyAllDefaults = require('../assets/supply_defaults');
 var defaultColors = require('@src/components/color/attributes').defaults;
@@ -866,6 +867,32 @@ describe('sankey tests', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('should honor *hoverlabel.namelength*', function(done) {
+            var gd = createGraphDiv();
+            var mockCopy = Lib.extendDeep({}, mock);
+
+            Plotly.plot(gd, mockCopy)
+            .then(function() { _hover(404, 302); })
+            .then(function() {
+                assertHoverLabelContent({
+                    nums: 'Solid\nincoming flow count: 4\noutgoing flow count: 3',
+                    name: '447TWh'
+                });
+            })
+            .then(function() {
+                return Plotly.restyle(gd, 'hoverlabel.namelength', 3);
+            })
+            .then(function() { _hover(404, 302); })
+            .then(function() {
+                assertHoverLabelContent({
+                    nums: 'Solid\nincoming flow count: 4\noutgoing flow count: 3',
+                    name: '447'
+                });
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 
     describe('Test hover/click event data:', function() {
diff --git a/test/jasmine/tests/sunburst_test.js b/test/jasmine/tests/sunburst_test.js
@@ -365,6 +365,25 @@ describe('Test sunburst hover:', function() {
                 parent: 'Eve'
             }
         }
+    }, {
+        desc: 'with hoverlabel.namelength set ',
+        traces: [{
+            hoverlabel: {namelength: 4},
+            hoverinfo: 'all'
+        }],
+        pos: 4,
+        exp: {
+            label: {
+                nums: 'Abel',
+                name: 't...'
+            },
+            ptData: {
+                curveNumber: 0,
+                pointNumber: 5,
+                label: 'Abel',
+                parent: 'Eve'
+            }
+        }
     }, {
         desc: 'with values',
         traces: [{
