Merge pull request #6953 from plotly/hover-zorder

Fix closest hover and click+select with `zorder`

Author: archmoj

draftlogs/6918_add.md

@@ -1 +1,2 @@
-- Add a new attribute `zorder` to SVG based Cartesian traces (not to WebGL traces). Traces with higher `zorder` values are drawn in front of traces with lower `zorder` values. This feature was anonymously sponsored: thank you to our sponsor!
+ - Add zorder attribute to control stacking order of SVG traces drawn into cartesian subplots [[#6918](https://github.com/plotly/plotly.js/pull/6918), [#6953](https://github.com/plotly/plotly.js/pull/6953)],
+   This feature was anonymously sponsored: thank you to our sponsor!

src/components/fx/hover.js

@@ -381,8 +381,16 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
             }
         }
     } else {
-        for(curvenum = 0; curvenum < gd.calcdata.length; curvenum++) {
-            cd = gd.calcdata[curvenum];
+        // take into account zorder
+        var zorderedCalcdata = gd.calcdata.slice();
+        zorderedCalcdata.sort(function(a, b) {
+            var aZorder = a[0].trace.zorder || 0;
+            var bZorder = b[0].trace.zorder || 0;
+            return aZorder - bZorder;
+        });
+
+        for(curvenum = 0; curvenum < zorderedCalcdata.length; curvenum++) {
+            cd = zorderedCalcdata[curvenum];
             trace = cd[0].trace;
             if(trace.hoverinfo !== 'skip' && helpers.isTraceInSubplots(trace, subplots)) {
                 searchData.push(cd);

test/jasmine/tests/hover_label_test.js

@@ -4780,6 +4780,52 @@ describe('hover distance', function() {
     });
 });
 
+describe('hover working with zorder', function() {
+    'use strict';
+
+    var mock = {
+        data: [{
+            zorder: 100,
+            marker: {size: 50},
+            text: ['A', 'B'],
+            y: [0, 1]
+        }, {
+            marker: {size: 50},
+            text: ['C', 'D'],
+            y: [2, 1]
+        }],
+        layout: {
+            width: 400,
+            height: 400,
+            showlegend: false,
+            hovermode: 'closest'
+        }
+    };
+
+    afterEach(destroyGraphDiv);
+
+    beforeEach(function(done) {
+        Plotly.newPlot(createGraphDiv(), mock).then(done);
+    });
+
+    it('pick the trace on top', function() {
+        var gd = document.getElementById('graph');
+        Fx.hover('graph', {xval: 1}, 'xy');
+
+        expect(gd._hoverdata.length).toEqual(1);
+
+        assertHoverLabelContent({
+            nums: '(1, 1)\nB',
+            name: 'trace 0'
+        });
+
+        var hoverTrace = gd._hoverdata[0];
+        expect(hoverTrace.text).toEqual('B');
+        expect(hoverTrace.curveNumber).toEqual(0);
+        expect(hoverTrace.pointNumber).toEqual(1);
+    });
+});
+
 describe('hover label rotation:', function() {
     var gd;
 

test/jasmine/tests/select_test.js

@@ -301,7 +301,7 @@ describe('Click-to-select', function() {
             return _immediateClickPt({ x: 130, y: 250 });
         })
         .then(function() {
-            assertSelectedPoints([], [1], []);
+            assertSelectedPoints([0], [], []);
         })
         .then(done, done.fail);
     });