Add spikelines #2247

apalchys · 2018-01-11T20:00:54Z

This PR adds support of spikelines in any hovermode.

Also some new properties were added:

spikedistance and hoverdistance to control the range of appearing of spikelines and hoverlabels;
spikesnap to control the placement of the spikelines point.

Note: only the cartesian type of axis supports new functionality.

Relates to #2155

…ta will not be overwritten

etpinard · 2018-01-15T23:42:08Z

I'll review this tomorrow am (UTC-5). Sorry for the wait.

etpinard

@apalchys amazing work!

To the best of my knowledge, this latest iteration has everything @alexcjohnson described in his #2155 (comment) done in a very clear and concise matter.

I found a few ways to make your additions to fx/hover.js even clearer. Let me know what you think!

My most blocking comments are the following:

declare hoverdistance and spikedistance with min: -1
clicking on spikes button an even number of times in the modebar should get the user back to the original settings

Just as an FYI, if you can addressed these issues before tomorrow night, this PR will be merged and released as part of 1.33.0 on Thursday.

etpinard · 2018-01-16T16:51:36Z

src/components/fx/layout_attributes.js

-
+    hoverdistance: {
+        valType: 'integer',
+        min: 0,


As Infinity isn't JSON-serializable, we declare attributes of the likes (e.g. hoverlabel.namelength) with min: -1, so that users can set hoverdistance: -1 for an infinite search radius. Morevover, hoverdistance: 0 should imply no hover labels/events, similarly for spikedistance.

Thanks! Done.

etpinard · 2018-01-16T16:52:30Z

src/components/fx/layout_attributes.js

+        role: 'style',
+        editType: 'none',
+        description: [
+            'Sets the default distance (in points) to look for data',


We usually write (in pixels) instead of (in points) in our attribute descriptions.

etpinard · 2018-01-16T16:55:34Z

src/components/fx/layout_defaults.js

@@ -28,6 +28,8 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
    else hovermodeDflt = 'closest';

    coerce('hovermode', hovermodeDflt);
+    coerce('hoverdistance');


We could get fancy here by making this:

var hoverMode = coerce('hovermode', hovermodeDflt); if(hoverDistance) coerce('hoverdistance');

as hoverdistance is useless when hovermode: false.

Unfortunately, we can't add similar logic for spikedistance here as showspikes is per axis.

Actually, we can, because if hovermode is false, we are not firing any hover events, so the spikelines are disabled too.
So we can write it like this:

var hoverMode = coerce('hovermode', hovermodeDflt); if(hoverMode) { coerce('hoverdistance'); coerce('spikedistance'); }

Good catch. Thanks!

etpinard · 2018-01-16T16:59:27Z

src/components/modebar/buttons.js

@@ -551,12 +548,10 @@ modeBarButtons.toggleSpikelines = {
    click: function(gd) {
        var fullLayout = gd._fullLayout;

-        fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
-            (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+        fullLayout._cartesianSpikesEnabled = fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on';


We might still need something similar here.

For example, with

var layout = { xaxis: { showspikes: true }, yaxis: { showspikes: false } };

then click on toggleSpikeLines gives:

with no way to get back to the original behavior using the mode bar buttons.

Great. Thanks!

Now, could you restore and update the modebar_test.js cases you removed in your first commit?

etpinard · 2018-01-16T16:59:47Z

src/plots/cartesian/axes.js

@@ -2048,7 +2048,7 @@ axes.doTicks = function(gd, axid, skipTitle) {
                        top: pos,
                        bottom: pos,
                        left: ax._offset,
-                        rigth: ax._offset + ax._length,
+                        right: ax._offset + ax._length,


Good catch. Did this cause any bugs previously?

It did in one of my early implementations

etpinard · 2018-01-16T17:15:14Z

src/components/fx/hover.js

+        return result;
+    }
+
+    if(fullLayout._has('cartesian')) {


Nice use of _has('cartesian') 👌

etpinard · 2018-01-16T17:17:16Z

src/components/fx/hover.js

@@ -1236,3 +1406,12 @@ function hoverChanged(gd, evt, oldhoverdata) {
    }
    return false;
 }
+
+function spikesChanged(gd, oldspikepoints) {
+    // don't emit any events if nothing changed


Looks like this got copied from function hoverChanged() {}, but spike lines don't emit any events whatsoever. Would you mind 🔪 this line to avoid confusion.

I use it to avoid the redrawing of the plot because of new spikelines if spikelines points didn't change

etpinard · 2018-01-16T17:22:42Z

src/components/fx/hover.js

+                    if(closestVPoints.length) {
+                        var closestVPt = closestVPoints[0];
+                        if(isNumeric(closestVPt.x0) && isNumeric(closestVPt.y0)) {
+                            tmpPoint = clearClosestPoint(closestVPt);


This clearClosestPoint method is doing mostly initialisation as opposed to clearing something that exists already.

Would be mind rename it either initClosestPoint or fillClosestPoint? This would make it more aligned with the rest of our codebase.

You are right, I've renamed it to fillClosestPoint.

etpinard · 2018-01-16T17:27:57Z

src/components/fx/hover.js

+                xpx = xa.c2p(xval),
+                ypx = ya.c2p(yval),
+                dxy = function(point) {
+                    var rad = Math.max(3, point.mrc || 0),


This Math.max(3, point.mrc || 0) only applies to scatter traces and is a duplicate of this line in scatter/hover.js.

Perhaps we should make the relevant traces/*/hover.js methods (I can think of scatter at the moment, but there might be more) add a .kink field to their output point data to not have to duplicate the somewhat tricky logic here again?

Moved it to the point.kink property of the scatter/hover returned object.

etpinard · 2018-01-16T17:32:57Z

src/components/fx/hover.js

+    var xa,
+        ya;
+
+    var showY = closestPoints.hLinePoint ? true : false;


maybe:

var showY = !!closestPoints.hLinePoint; // or var showY = Boolean(closestPoints.hLinePoint);

would suffice?

Thanks, changed it to var showY = !!closestPoints.hLinePoint;

apalchys · 2018-01-17T14:15:09Z

@etpinard Thank you for the review! I fixed all highlighted issues. Please check.

apalchys · 2018-01-17T14:37:15Z

hmm.. some test is failing but I can't reproduce it locally. Is it possible to re-run tests without commits?

alexcjohnson · 2018-01-17T14:45:44Z

hmm.. some test is failing but I can't reproduce it locally. Is it possible to re-run tests without commits?

Mmm, I think I've seen that one fail sporadically. You can't rerun the test, but we can...

etpinard · 2018-01-17T15:49:20Z

Awesome @apalchys

Once the spike toggling modebar tests are restored and updated (#2247 (comment)), this PR will be good to merge!

etpinard · 2018-01-17T16:25:36Z

Great PR. Thanks very much @apalchys

💃 💃 💃

apalchys · 2018-01-17T16:26:45Z

@etpinard @alexcjohnson Thank you for your help! 👍

lambone · 2018-02-11T10:26:04Z

I found it does not work for scattergl and because the pointData in function hoverPoints lacks of kink attribute.

alexcjohnson · 2018-02-11T15:06:33Z

@lambone see #2336 - I will include scattergl in the fix.

wangyueming · 2018-02-23T03:29:47Z

I checked the version 1.34.0, it does not work yet.

I made a simple fix in src/traces/scattergl/index.js.

    var minRad = (trace.mode.indexOf('markers') !== -1) ? 3 : 0.5;
    Lib.extendFlat(pointData, {
        color: getTraceColor(trace, di),

        x0: xc - rad,
        x1: xc + rad,
        xLabelVal: di.x,

        y0: yc - rad,
        y1: yc + rad,
        yLabelVal: di.y,

        // HACK add kink
        kink: Math.max(minRad, di.mrc || 0),
        cd: fakeCd
    });

alexcjohnson · 2018-02-23T03:42:10Z

@wangyueming #2379 was only merged 3 days ago. It will be in 1.35, likely next week.

apalchys added 10 commits January 11, 2018 16:30

add crossline functionality

132b5b2

fix crossline tests

85714e8

fix crossline tests

cd83ecf

move the search for crosslinePoints to ensure that the hoverLabels da…

006b55d

…ta will not be overwritten

add spikedistance, hoverdistance, spikesnap

b14286b

fix tests related to new spike mode

e5875a9

fix hoverdistance and spikedistance when it set to 0

37e419f

re-work spikeline based on PR review

911ae0e

add new tests and fix cursor

751d527

fix tests

f562832

etpinard added bug something broken feature something new status: in progress labels Jan 15, 2018

etpinard suggested changes Jan 16, 2018

View reviewed changes

fix issues after PR code review

6c2f368

restore and update spikeline tests

f56413a

etpinard approved these changes Jan 17, 2018

View reviewed changes

etpinard merged commit e341edd into plotly:master Jan 17, 2018

etpinard added status: reviewable and removed status: in progress labels Jan 17, 2018

etpinard added this to the v1.33.0 milestone Jan 17, 2018

etpinard mentioned this pull request Feb 6, 2018

Regression: spikelines no longer supported on bar charts #2336

Closed

alexcjohnson mentioned this pull request Feb 17, 2018

Generalize spikelines #2379

Merged

etpinard mentioned this pull request Oct 1, 2019

Modebar toggle spikes fixup #4241

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add spikelines #2247

Add spikelines #2247

apalchys commented Jan 11, 2018

etpinard commented Jan 15, 2018

etpinard left a comment

etpinard Jan 16, 2018

apalchys Jan 17, 2018

etpinard Jan 16, 2018

etpinard Jan 16, 2018

apalchys Jan 17, 2018

etpinard Jan 17, 2018

etpinard Jan 16, 2018

apalchys Jan 17, 2018

etpinard Jan 17, 2018

etpinard Jan 16, 2018

apalchys Jan 17, 2018

etpinard Jan 16, 2018

etpinard Jan 16, 2018

apalchys Jan 17, 2018

etpinard Jan 16, 2018

apalchys Jan 17, 2018

etpinard Jan 16, 2018

apalchys Jan 17, 2018

etpinard Jan 16, 2018

apalchys Jan 17, 2018

apalchys commented Jan 17, 2018

apalchys commented Jan 17, 2018

alexcjohnson commented Jan 17, 2018

etpinard commented Jan 17, 2018

etpinard commented Jan 17, 2018

apalchys commented Jan 17, 2018

lambone commented Feb 11, 2018

alexcjohnson commented Feb 11, 2018

wangyueming commented Feb 23, 2018 •

edited

Loading

alexcjohnson commented Feb 23, 2018

Add spikelines #2247

Add spikelines #2247

Conversation

apalchys commented Jan 11, 2018

etpinard commented Jan 15, 2018

etpinard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

apalchys commented Jan 17, 2018

apalchys commented Jan 17, 2018

alexcjohnson commented Jan 17, 2018

etpinard commented Jan 17, 2018

etpinard commented Jan 17, 2018

apalchys commented Jan 17, 2018

lambone commented Feb 11, 2018

alexcjohnson commented Feb 11, 2018

wangyueming commented Feb 23, 2018 • edited Loading

alexcjohnson commented Feb 23, 2018

wangyueming commented Feb 23, 2018 •

edited

Loading