Merge pull request #4472 from plotly/xyz-columns-event-data-fixes

Fix event data and some hover templates for x/y/z heatmap + contour

Author: etpinard

src/traces/heatmap/convert_column_xyz.js

@@ -41,6 +41,8 @@ module.exports = function convertColumnData(trace, ax1, ax2, var1Name, var2Name,
         hovertext = Lib.init2dArray(col2vals.length, col1vals.length);
     }
 
+    var after2before = Lib.init2dArray(col2vals.length, col1vals.length);
+
     for(i = 0; i < colLen; i++) {
         if(col1[i] !== BADNUM && col2[i] !== BADNUM) {
             var i1 = Lib.findBin(col1[i] + col1dv.minDiff / 2, col1vals);
@@ -51,6 +53,7 @@ module.exports = function convertColumnData(trace, ax1, ax2, var1Name, var2Name,
                 var arrayVar = trace[arrayVarName];
                 var newArray = newArrays[j];
                 newArray[i2][i1] = arrayVar[i];
+                after2before[i2][i1] = i;
             }
 
             if(hasColumnText) text[i2][i1] = textCol[i];
@@ -73,4 +76,6 @@ module.exports = function convertColumnData(trace, ax1, ax2, var1Name, var2Name,
     if(ax2 && ax2.type === 'category') {
         trace['_' + var2Name + 'CategoryMap'] = col2vals.map(function(v) { return ax2._categories[v];});
     }
+
+    trace._after2before = after2before;
 };

src/traces/heatmap/hover.js

@@ -112,7 +112,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, hoverLay
     var zLabel = Axes.tickText(dummyAx, zVal, 'hover').text;
 
     return [Lib.extendFlat(pointData, {
-        index: [ny, nx],
+        index: trace._after2before ? trace._after2before[ny][nx] : [ny, nx],
         // never let a 2D override 1D type as closest point
         distance: pointData.maxHoverDistance,
         spikeDistance: pointData.maxSpikeDistance,

test/jasmine/tests/contour_test.js

@@ -619,6 +619,13 @@ describe('contour hover', function() {
         return hoverData;
     }
 
+    function assertLabels(hoverPoint, xLabel, yLabel, zLabel, text) {
+        expect(hoverPoint.xLabelVal).toBe(xLabel, 'have correct x label');
+        expect(hoverPoint.yLabelVal).toBe(yLabel, 'have correct y label');
+        expect(hoverPoint.zLabelVal).toBe(zLabel, 'have correct z label');
+        expect(hoverPoint.text).toBe(text, 'have correct text label');
+    }
+
     describe('missing data', function() {
         beforeAll(function(done) {
             gd = createGraphDiv();
@@ -648,4 +655,29 @@ describe('contour hover', function() {
             expect(pt).toEqual(undefined);
         });
     });
+
+    describe('for xyz-column traces', function() {
+        beforeAll(function(done) {
+            gd = createGraphDiv();
+
+            Plotly.plot(gd, [{
+                type: 'contour',
+                x: [1, 2, 3],
+                y: [2, 3, 4],
+                z: [10, 4, 20],
+                text: ['a', 'b', 'c'],
+                hoverinfo: 'text'
+            }])
+            .then(done);
+        });
+
+        afterAll(destroyGraphDiv);
+
+        it('should find closest point and should', function() {
+            var pt = _hover(gd, 2, 3)[0];
+
+            expect(pt.index).toBe(1, 'have correct index');
+            assertLabels(pt, 2, 3, 4, 'b');
+        });
+    });
 });

test/jasmine/tests/heatmap_test.js

@@ -881,14 +881,14 @@ describe('heatmap hover', function() {
         it('should find closest point (case 1) and should', function() {
             var pt = _hover(gd, 0.5, 0.5)[0];
 
-            expect(pt.index).toEqual([1, 0], 'have correct index');
+            expect(pt.index).toBe(1, 'have correct index');
             assertLabels(pt, 1, 1, 4);
         });
 
         it('should find closest point (case 2) and should', function() {
             var pt = _hover(gd, 1.5, 0.5)[0];
 
-            expect(pt.index).toEqual([0, 0], 'have correct index');
+            expect(pt.index).toBe(0, 'have correct index');
             assertLabels(pt, 2, 0.2, 6);
         });
     });
@@ -931,13 +931,13 @@ describe('heatmap hover', function() {
         it('should find closest point and should', function(done) {
             var pt = _hover(gd, 0.5, 0.5)[0];
 
-            expect(pt.index).toEqual([0, 0], 'have correct index');
+            expect(pt.index).toBe(0, 'have correct index');
             assertLabels(pt, 1, 1, 10, 'a');
 
             Plotly.relayout(gd, 'xaxis.range', [1, 2]).then(function() {
                 var pt2 = _hover(gd, 1.5, 0.5)[0];
 
-                expect(pt2.index).toEqual([0, 1], 'have correct index');
+                expect(pt2.index).toBe(1, 'have correct index');
                 assertLabels(pt2, 2, 1, 4, 'b');
             })
             .then(done);

test/jasmine/tests/hover_label_test.js

@@ -1019,6 +1019,51 @@ describe('hover info', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('should display correct label - x/y/z heatmap|contour', function(done) {
+            Plotly.plot(gd, [{
+                type: 'heatmap',
+                x: [1, 1, 2, 2],
+                y: [1, 2, 1, 2],
+                z: [1, 2, 3, 4],
+                customdata: ['a', 'b', 'c', 'd'],
+                ids: ['A', 'B', 'C', 'D'],
+                hovertemplate: '%{customdata} | %{id}<extra>%{data.type}: %{pointNumber}</extra>'
+            }], {
+                width: 400,
+                height: 400,
+                margin: {l: 0, t: 0, r: 0, b: 0}
+            })
+            .then(function() {
+                _hover(gd, 50, 50);
+                assertHoverLabelContent({
+                    nums: 'b | B',
+                    name: 'heatmap: 1'
+                });
+
+                _hover(gd, 250, 300);
+                assertHoverLabelContent({
+                    nums: 'c | C',
+                    name: 'heatmap: 2'
+                });
+            })
+            .then(function() { return Plotly.restyle(gd, 'type', 'contour'); })
+            .then(function() {
+                _hover(gd, 50, 50);
+                assertHoverLabelContent({
+                    nums: 'b | B',
+                    name: 'contour: 1'
+                });
+
+                _hover(gd, 250, 300);
+                assertHoverLabelContent({
+                    nums: 'c | C',
+                    name: 'contour: 2'
+                });
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 
     describe('hover info for negative data on a log axis', function() {