Add support for <sub> and <sup> in "extra" hover label

src/components/fx/hover.js

@@ -925,15 +925,10 @@ function createHoverText(hoverData, opts, gd) {
         if(d.nameOverride !== undefined) d.name = d.nameOverride;
 
         if(d.name) {
-            // strip out our pseudo-html elements from d.name (if it exists at all)
-            name = svgTextUtils.plainText(d.name || '');
-
-            var nameLength = Math.round(d.nameLength);
-
-            if(nameLength > -1 && name.length > nameLength) {
-                if(nameLength > 3) name = name.substr(0, nameLength - 3) + '...';
-                else name = name.substr(0, nameLength);
-            }
+            name = svgTextUtils.plainText(d.name || '', {
+                len: d.nameLength,
+                allowedTags: ['br', 'sub', 'sup']
+            });
         }
 
         if(d.zLabel !== undefined) {

src/lib/svg_text_utils.js

@@ -264,8 +264,6 @@ var ZERO_WIDTH_SPACE = '\u200b';
  */
 var PROTOCOLS = ['http:', 'https:', 'mailto:', '', undefined, ':'];
 
-var STRIP_TAGS = new RegExp('</?(' + Object.keys(TAG_STYLES).join('|') + ')( [^>]*)?/?>', 'g');
-
 var NEWLINES = /(\r\n?|\n)/g;
 
 var SPLIT_TAGS = /(<[^<>]*>)/;
@@ -315,10 +313,66 @@ function getQuotedMatch(_str, re) {
 
 var COLORMATCH = /(^|;)\s*color:/;
 
-exports.plainText = function(_str) {
-    // strip out our pseudo-html so we have a readable
-    // version to put into text fields
-    return (_str || '').replace(STRIP_TAGS, ' ');
+/**
+ * Strip string of tags
+ *
+ * @param {string} _str : input string
+ * @param {object} opts :
+ * - maxLen {number} max length of output string
+ * - allowedTags {array} list of pseudo-html tags to NOT strip
+ * @return {string}
+ */
+exports.plainText = function(_str, opts) {
+    opts = opts || {};
+
+    var len = (opts.len !== undefined && opts.len !== -1) ? opts.len : Infinity;
+    var allowedTags = opts.allowedTags !== undefined ? opts.allowedTags : ['br'];
+
+    var ellipsis = '...';
+    var eLen = ellipsis.length;
+
+    var oldParts = _str.split(SPLIT_TAGS);
+    var newParts = [];
+    var prevTag = '';
+    var l = 0;
+
+    for(var i = 0; i < oldParts.length; i++) {
+        var p = oldParts[i];
+        var match = p.match(ONE_TAG);
+        var tagType = match && match[2].toLowerCase();
+
+        if(tagType) {
+            // N.B. tags do not count towards string length
+            if(allowedTags.indexOf(tagType) !== -1) {
+                newParts.push(p);
+                prevTag = tagType;
+            }
+        } else {
+            var pLen = p.length;
+
+            if((l + pLen) < len) {
+                newParts.push(p);
+                l += pLen;
+            } else if(l < len) {
+                var pLen2 = len - l;
+
+                if(prevTag && (prevTag !== 'br' || pLen2 <= eLen || pLen <= eLen)) {
+                    newParts.pop();
+                }
+
+                if(len > eLen) {
+                    newParts.push(p.substr(0, pLen2 - eLen) + ellipsis);
+                } else {
+                    newParts.push(p.substr(0, pLen2));
+                }
+                break;
+            }
+
+            prevTag = '';
+        }
+    }
+
+    return newParts.join('');
 };
 
 /*

test/jasmine/tests/hover_label_test.js

@@ -248,7 +248,7 @@ describe('hover info', function() {
 
             assertHoverLabelContent({
                 nums: '1\nhover text',
-                name: '<img src=x o...',
+                name: '',
                 axis: '0.388'
             });
         });

test/jasmine/tests/svg_text_utils_test.js

@@ -468,4 +468,41 @@ describe('svg+text utils', function() {
             expect(node.text()).toEqual('test\u200b5\u200bmore');
         });
     });
+
+    describe('plainText:', function() {
+        var fn = util.plainText;
+
+        it('should strip tags except <br> by default', function() {
+            expect(fn('a<b>b</b><br><sup>tm</sup>a')).toBe('ab<br>tma');
+        });
+
+        it('should work in various cases w/o <br>', function() {
+            var sIn = 'ThisIsDATA<sup>300</sup>';
+
+            expect(fn(sIn)).toBe('ThisIsDATA300');
+            expect(fn(sIn, {len: 3})).toBe('Thi');
+            expect(fn(sIn, {len: 4})).toBe('T...');
+            expect(fn(sIn, {len: 13})).toBe('ThisIsDATA...');
+            expect(fn(sIn, {len: 16})).toBe('ThisIsDATA300');
+            expect(fn(sIn, {allowedTags: ['sup']})).toBe('ThisIsDATA<sup>300</sup>');
+            expect(fn(sIn, {len: 13, allowedTags: ['sup']})).toBe('ThisIsDATA...');
+            expect(fn(sIn, {len: 16, allowedTags: ['sup']})).toBe('ThisIsDATA<sup>300</sup>');
+        });
+
+        it('should work in various cases w/ <br>', function() {
+            var sIn = 'ThisIs<br>DATA<sup>300</sup>';
+
+            expect(fn(sIn)).toBe('ThisIs<br>DATA300');
+            expect(fn(sIn, {len: 3})).toBe('Thi');
+            expect(fn(sIn, {len: 4})).toBe('T...');
+            expect(fn(sIn, {len: 7})).toBe('ThisIs...');
+            expect(fn(sIn, {len: 8})).toBe('ThisIs...');
+            expect(fn(sIn, {len: 9})).toBe('ThisIs...');
+            expect(fn(sIn, {len: 10})).toBe('ThisIs<br>D...');
+            expect(fn(sIn, {len: 13})).toBe('ThisIs<br>DATA...');
+            expect(fn(sIn, {len: 16})).toBe('ThisIs<br>DATA300');
+            expect(fn(sIn, {allowedTags: ['sup']})).toBe('ThisIsDATA<sup>300</sup>');
+            expect(fn(sIn, {allowedTags: ['br', 'sup']})).toBe('ThisIs<br>DATA<sup>300</sup>');
+        });
+    });
 });