Merge pull request #4539 from plotly/mesh3d-hover-on-face-data

Fix hover of mesh3d traces with face color and face intensity

Author: archmoj

package-lock.json

@@ -80,7 +80,7 @@
     "gl-heatmap2d": "^1.0.5",
     "gl-line3d": "^1.1.11",
     "gl-mat4": "^1.2.0",
-    "gl-mesh3d": "^2.2.1",
+    "gl-mesh3d": "^2.3.0",
     "gl-plot2d": "^1.4.2",
     "gl-plot3d": "^2.4.0",
     "gl-pointcloud2d": "^1.0.2",

package.json

@@ -34,11 +34,15 @@ proto.handlePick = function(selection) {
     if(selection.object === this.mesh) {
         var selectIndex = selection.index = selection.data.index;
 
-        selection.traceCoordinate = [
-            this.data.x[selectIndex],
-            this.data.y[selectIndex],
-            this.data.z[selectIndex]
-        ];
+        if(selection.data._cellCenter) {
+            selection.traceCoordinate = selection.data.dataCoordinate;
+        } else {
+            selection.traceCoordinate = [
+                this.data.x[selectIndex],
+                this.data.y[selectIndex],
+                this.data.z[selectIndex]
+            ];
+        }
 
         var text = this.data.hovertext || this.data.text;
         if(Array.isArray(text) && text[selectIndex] !== undefined) {

src/traces/mesh3d/convert.js

@@ -2020,6 +2020,7 @@
             "lighting": {
                 "facenormalsepsilon": 0
             },
+            "hovertemplate": "x: %{x}<br>y: %{y}<br>z: %{z}<br>cell intensity: %{intensity}",
             "type": "mesh3d"
         }
     ],

test/image/mocks/gl3d_mesh3d_cell-intensity.json

@@ -14,6 +14,7 @@ var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
 
 var mock = require('@mocks/gl3d_marker-arrays.json');
 var mesh3dcoloringMock = require('@mocks/gl3d_mesh3d_coloring.json');
+var mesh3dcellIntensityMock = require('@mocks/gl3d_mesh3d_cell-intensity.json');
 var multipleScatter3dMock = require('@mocks/gl3d_multiple-scatter3d-traces.json');
 
 // lines, markers, text, error bars and surfaces each
@@ -554,10 +555,10 @@ describe('Test gl3d trace click/hover:', function() {
         .then(delay(20))
         .then(function() {
             assertHoverText(
-                'x: 1',
-                'y: 0',
+                'x: 0.6666667',
+                'y: 0.3333333',
                 'z: 1',
-                'face color: #0F0',
+                'face color: #00F',
                 'face color'
             );
         })
@@ -566,8 +567,8 @@ describe('Test gl3d trace click/hover:', function() {
         .then(function() {
             assertHoverText(
                 'x: 1',
-                'y: 1',
-                'z: 1',
+                'y: 0.3333333',
+                'z: 0.6666667',
                 'face color: #0FF',
                 'face color'
             );
@@ -577,27 +578,58 @@ describe('Test gl3d trace click/hover:', function() {
         .then(function() {
             assertHoverText(
                 'x: 1',
-                'y: 1',
-                'z: 0',
-                'face color: #00F',
+                'y: 0.6666667',
+                'z: 0.3333333',
+                'face color: #0FF',
                 'face color'
             );
         })
         .then(function() { mouseEvent('mouseover', 200, 300); })
         .then(delay(20))
         .then(function() {
             assertHoverText(
-                'x: 0',
+                'x: 0.6666667',
                 'y: 0',
-                'z: 0',
-                'face color: #000',
+                'z: 0.3333333',
+                'face color: #F00',
                 'face color'
             );
         })
         .catch(failTest)
         .then(done);
     });
 
+    it('@gl should display correct face intensities', function(done) {
+        var fig = mesh3dcellIntensityMock;
+
+        Plotly.newPlot(gd, fig)
+        .then(delay(20))
+        .then(function() { mouseEvent('mouseover', 200, 200); })
+        .then(delay(20))
+        .then(function() {
+            assertHoverText(
+                'x: 0.4666667',
+                'y: 0.4333333',
+                'z: 0.01583333',
+                'cell intensity: 0.16',
+                'trace 0'
+            );
+        })
+        .then(function() { mouseEvent('mouseover', 200, 300); })
+        .then(delay(20))
+        .then(function() {
+            assertHoverText(
+                'x: 0.7666667',
+                'y: 0.1333333',
+                'z: −0.3305',
+                'cell intensity: 3.04',
+                'trace 0'
+            );
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
     it('@gl should pick latest & closest points on hover if two points overlap', function(done) {
         var _mock = Lib.extendDeep({}, mock4);