Merge pull request #1417 from plotly/heatmap-xyz-text-in-hover-fix

Fix for xyz column heatmap trace 'text' on hover

Author: etpinard

src/traces/heatmap/calc.js

@@ -121,7 +121,7 @@ module.exports = function calc(gd, trace) {
         Axes.expand(ya, yArray);
     }
 
-    var cd0 = {x: xArray, y: yArray, z: z};
+    var cd0 = {x: xArray, y: yArray, z: z, text: trace.text};
 
     // auto-z and autocolorscale if applicable
     colorscaleCalc(trace, z, '', 'z');

src/traces/heatmap/hover.js

@@ -96,8 +96,8 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, contour)
     if(zmask && !zmask[ny][nx]) zVal = undefined;
 
     var text;
-    if(Array.isArray(trace.text) && Array.isArray(trace.text[ny])) {
-        text = trace.text[ny][nx];
+    if(Array.isArray(cd0.text) && Array.isArray(cd0.text[ny])) {
+        text = cd0.text[ny][nx];
     }
 
     return [Lib.extendFlat(pointData, {

test/jasmine/tests/heatmap_test.js

@@ -528,19 +528,10 @@ describe('heatmap hover', function() {
 
     var gd;
 
-    beforeAll(function(done) {
+    beforeAll(function() {
         jasmine.addMatchers(customMatchers);
-
-        gd = createGraphDiv();
-
-        var mock = require('@mocks/heatmap_multi-trace.json'),
-            mockCopy = Lib.extendDeep({}, mock);
-
-        Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
     });
 
-    afterAll(destroyGraphDiv);
-
     function _hover(gd, xval, yval) {
         var fullLayout = gd._fullLayout,
             calcData = gd.calcdata,
@@ -563,24 +554,73 @@ describe('heatmap hover', function() {
         return hoverData;
     }
 
-    function assertLabels(hoverPoint, xLabel, yLabel, zLabel) {
+    function assertLabels(hoverPoint, xLabel, yLabel, zLabel, text) {
         expect(hoverPoint.xLabelVal).toEqual(xLabel, 'have correct x label');
         expect(hoverPoint.yLabelVal).toEqual(yLabel, 'have correct y label');
         expect(hoverPoint.zLabelVal).toEqual(zLabel, 'have correct z label');
+        expect(hoverPoint.text).toEqual(text, 'have correct text label');
     }
 
-    it('should find closest point (case 1) and should', function() {
-        var pt = _hover(gd, 0.5, 0.5)[0];
+    describe('for `heatmap_multi-trace`', function() {
 
-        expect(pt.index).toEqual([1, 0], 'have correct index');
-        assertLabels(pt, 1, 1, 4);
-    });
+        beforeAll(function(done) {
+            gd = createGraphDiv();
+
+            var mock = require('@mocks/heatmap_multi-trace.json'),
+                mockCopy = Lib.extendDeep({}, mock);
+
+            Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
+        });
+
+        afterAll(destroyGraphDiv);
+
+        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');
+            assertLabels(pt, 1, 1, 4);
+        });
 
-    it('should find closest point (case 2) and should', function() {
-        var pt = _hover(gd, 1.5, 0.5)[0];
+        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');
-        assertLabels(pt, 2, 0.2, 6);
+            expect(pt.index).toEqual([0, 0], 'have correct index');
+            assertLabels(pt, 2, 0.2, 6);
+        });
     });
 
+    describe('for xyz-column traces', function() {
+
+        beforeAll(function(done) {
+            gd = createGraphDiv();
+
+            Plotly.plot(gd, [{
+                type: 'heatmap',
+                x: [1, 2, 3],
+                y: [1, 1, 1],
+                z: [10, 4, 20],
+                text: ['a', 'b', 'c'],
+                hoverinfo: 'text'
+            }])
+            .then(done);
+        });
+
+        afterAll(destroyGraphDiv);
+
+        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');
+            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');
+                assertLabels(pt2, 2, 1, 4, 'b');
+            })
+            .then(done);
+        });
+
+    });
 });