'fill' fx calcdata items instead of 'merging' them

- previously fx attribute arrays with length less than the
  calcdata trace length were skipped. That is, they did not get
  filled with their default
- this patch here ensures that the defaults values are present
  in the calcdata so that we don't have to rely on fallbacks in the
  hover hot code path.

Author: etpinard

src/components/fx/calc.js

@@ -30,17 +30,17 @@ module.exports = function calc(gd) {
         // won't match the data array order.
         if(Registry.traceIs(trace, 'pie')) continue;
 
-        var mergeFn = Registry.traceIs(trace, '2dMap') ? paste : Lib.mergeArray;
+        var fillFn = Registry.traceIs(trace, '2dMap') ? paste : Lib.fillArray;
 
-        mergeFn(trace.hoverinfo, cd, 'hi', makeCoerceHoverInfo(trace));
+        fillFn(trace.hoverinfo, cd, 'hi', makeCoerceHoverInfo(trace));
 
         if(!trace.hoverlabel) continue;
 
-        mergeFn(trace.hoverlabel.bgcolor, cd, 'hbg');
-        mergeFn(trace.hoverlabel.bordercolor, cd, 'hbc');
-        mergeFn(trace.hoverlabel.font.size, cd, 'hts');
-        mergeFn(trace.hoverlabel.font.color, cd, 'htc');
-        mergeFn(trace.hoverlabel.font.family, cd, 'htf');
+        fillFn(trace.hoverlabel.bgcolor, cd, 'hbg');
+        fillFn(trace.hoverlabel.bordercolor, cd, 'hbc');
+        fillFn(trace.hoverlabel.font.size, cd, 'hts');
+        fillFn(trace.hoverlabel.font.color, cd, 'htc');
+        fillFn(trace.hoverlabel.font.family, cd, 'htf');
     }
 };
 

src/lib/index.js

@@ -350,19 +350,25 @@ lib.noneOrAll = function(containerIn, containerOut, attrList) {
     }
 };
 
-/** merge data array into calcdata items
+lib.mergeArray = function(traceAttr, cd, cdAttr) {
+    if(Array.isArray(traceAttr)) {
+        var imax = Math.min(traceAttr.length, cd.length);
+        for(var i = 0; i < imax; i++) cd[i][cdAttr] = traceAttr[i];
+    }
+};
+
+/** fill data array into calcdata items
  *
  * @param {array} traceAttr : trace attribute
  * @param {object} cd : calcdata trace
  * @param {string} cdAttr : calcdata key
  * @param {function} [fn] : optional function to apply to each array item
  */
-lib.mergeArray = function(traceAttr, cd, cdAttr, fn) {
+lib.fillArray = function(traceAttr, cd, cdAttr, fn) {
     fn = fn || lib.identity;
 
     if(Array.isArray(traceAttr)) {
-        var imax = Math.min(traceAttr.length, cd.length);
-        for(var i = 0; i < imax; i++) {
+        for(var i = 0; i < cd.length; i++) {
             cd[i][cdAttr] = fn(traceAttr[i]);
         }
     }

test/jasmine/tests/hover_label_test.js

@@ -1187,6 +1187,44 @@ describe('Test hover label custom styling:', function() {
                 path: ['rgb(68, 68, 68)', 'rgb(255, 255, 255)'],
                 text: [13, 'Arial', 'rgb(255, 255, 255)']
             });
+
+            // test insufficient arrayOk case
+            return Plotly.restyle(gd, 'hoverinfo', [['none']]);
+        })
+        .then(function() {
+            expect(gd.calcdata[0].map(function(o) { return o.hi; })).toEqual(
+                ['none', 'x+y+z+text', 'x+y+z+text'],
+                'should fill calcdata item with correct default'
+            );
+
+            _hover(gd, { xval: gd._fullData[0].x[0] });
+
+            assertPtLabel(null);
+            assertCommonLabel(null);
+        })
+        .then(function() {
+            _hover(gd, { xval: gd._fullData[0].x[1] });
+
+            assertPtLabel({
+                path: ['rgb(0, 0, 0)', 'rgb(255, 255, 255)'],
+                text: [13, 'Arial', 'rgb(255, 255, 255)']
+            });
+            assertCommonLabel({
+                path: ['rgb(68, 68, 68)', 'rgb(255, 255, 255)'],
+                text: [13, 'Arial', 'rgb(255, 255, 255)']
+            });
+        })
+        .then(function() {
+            _hover(gd, { xval: gd._fullData[0].x[2] });
+
+            assertPtLabel({
+                path: ['rgb(0, 255, 255)', 'rgb(68, 68, 68)'],
+                text: [13, 'Arial', 'rgb(68, 68, 68)']
+            });
+            assertCommonLabel({
+                path: ['rgb(68, 68, 68)', 'rgb(255, 255, 255)'],
+                text: [13, 'Arial', 'rgb(255, 255, 255)']
+            });
         })
         .catch(fail)
         .then(done);