honour hoverlabel.namelength when hovertemplate is set

... while making hoverlabel.namelength dflt to -1
    when hovertemplate is set

Author: etpinard

src/components/fx/attributes.js

@@ -38,6 +38,7 @@ module.exports = {
         namelength: {
             valType: 'integer',
             min: -1,
+            dflt: 15,
             arrayOk: true,
             role: 'style',
             editType: 'none',
@@ -47,7 +48,8 @@ module.exports = {
                 'regardless of length. 0-3 shows the first 0-3 characters, and',
                 'an integer >3 will show the whole name if it is less than that',
                 'many characters, but if it is longer, will truncate to',
-                '`namelength - 3` characters and add an ellipsis.'
+                '`namelength - 3` characters and add an ellipsis.',
+                'Note that when `hovertemplate` is set, `namelength` defaults to *-1*.'
             ].join(' ')
         },
         editType: 'calc'

src/components/fx/defaults.js

@@ -17,5 +17,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
     }
 
-    handleHoverLabelDefaults(traceIn, traceOut, coerce, layout.hoverlabel);
+    var opts = Lib.extendFlat({}, layout.hoverlabel);
+    if(traceOut.hovertemplate) opts.namelength = -1;
+
+    handleHoverLabelDefaults(traceIn, traceOut, coerce, opts);
 };

src/components/fx/hover.js

@@ -933,11 +933,7 @@ function createHoverText(hoverData, opts, gd) {
             if(fullLayout.meta) {
                 d.name = Lib.templateString(d.name, {meta: fullLayout.meta});
             }
-
-            name = svgTextUtils.plainText(d.name || '', {
-                len: d.nameLength,
-                allowedTags: ['br', 'sub', 'sup', 'b', 'i', 'em']
-            });
+            name = plainText(d.name, d.nameLength);
         }
 
         if(d.zLabel !== undefined) {
@@ -989,8 +985,10 @@ function createHoverText(hoverData, opts, gd) {
             );
 
             text = text.replace(EXTRA_STRING_REGEX, function(match, extra) {
-                name = extra; // Assign name for secondary text label
-                return ''; // Remove from main text label
+                // assign name for secondary text label
+                name = plainText(extra, d.nameLength);
+                // remove from main text label
+                return '';
             });
         }
 
@@ -1617,3 +1615,10 @@ function spikesChanged(gd, oldspikepoints) {
     ) return true;
     return false;
 }
+
+function plainText(s, len) {
+    return svgTextUtils.plainText(s || '', {
+        len: len,
+        allowedTags: ['br', 'sub', 'sup', 'b', 'i', 'em']
+    });
+}

src/lib/svg_text_utils.js

@@ -317,7 +317,7 @@ var COLORMATCH = /(^|;)\s*color:/;
  *
  * @param {string} _str : input string
  * @param {object} opts :
- * - maxLen {number} max length of output string
+ * - len {number} max length of output string
  * - allowedTags {array} list of pseudo-html tags to NOT strip
  * @return {string}
  */

test/jasmine/tests/hover_label_test.js

@@ -805,22 +805,37 @@ describe('hover info', function() {
                     name: 'trace one'
                 });
             })
+            .then(function() {
+                return Plotly.restyle(gd, 'hoverlabel.namelength', 2);
+            })
+            .then(function() {
+                _hover(gd, 250, 50);
+                assertHoverLabelContent({
+                    nums: '(1,3) -- 2',
+                    name: 'tr'
+                });
+
+                _hover(gd, 250, 300);
+                assertHoverLabelContent({
+                    nums: '(1,1) -- 5.56',
+                    name: 'tr'
+                });
+            })
             .then(function() {
                 var nl = [[0, 0, 0], [0, 0, 0]];
                 return Plotly.restyle(gd, 'hoverlabel.namelength', [nl, nl]);
             })
             .then(function() {
-                // hoverlabel.namelength has no effect when <extra></extra> is set
                 _hover(gd, 250, 50);
                 assertHoverLabelContent({
                     nums: '(1,3) -- 2',
-                    name: 'trace two'
+                    name: ''
                 });
 
                 _hover(gd, 250, 300);
                 assertHoverLabelContent({
                     nums: '(1,1) -- 5.56',
-                    name: 'trace one'
+                    name: ''
                 });
             })
             .then(function() {