Add scattermapbox select/lasso drag modes #1836

etpinard · 2017-06-30T21:08:38Z

resolves #1402

In brief, this PR:

adds arrayOk support for marker.opacity in scattermapbox traces [ 7d3dd35 ]
- this makes dimming the markers points much easier (and faster 🐎 ) than having to use a multi-trace solution like we did for scattergl's gl-scatter2d mode.
adds support for select and lasso dragmode for circle markers in scattermapbox traces [294e5f6]
- ♻️ reuses dragElement on the mapbox <div>
- 🚀 events plotly_selecting, plotly_selected and plotly_deselect work as on the other supported subplot types
- 📚 event data also includes the boxes' range (in select mode) and lasso points (in lasso mode) in lon/lat coordinates.
- ⚠️ I chose to not allow non-circle markers and text fields to dim during selections in this PR. Main reason: mapbox-gl@0.22.1 doesn't allow arrayOk settings for those, but the latest version does. So this could be easily added when we bumped the mapbox-gl version after the image server rewrite. Note that, non-circle markers and text fields are still included in the plotly_selected event data even though they're not dimmed.
adds three new modebar buttons to control layout.dragmode (pan, select, lasso, note that dragmode zoom hasn't been implemented yet for mapbox subplots)
cleans up a few other things selection related [commits e8b8624, 744f3c8 and a376817]

- `npm run test-image -- mapbox_*` sometimes blows up

- to easily combine logic for scatter* trace types that use scatter/subtypes.js

- e.g. to allow mapbox subplot convert px coords to lon/lat w/o hackely mocking too many things

- create dragElement on mapbox subplot <div> when dragmode is set to select or lasso, - undo dragElement onmousedown handle for other dragmode values - keep ref to scattermapbox/plot instance in calcdata to call its update method directly in select - must keep track of trace with dimmed pts to go through arrayOk logic in scatter/convert

- ... as it should have been all along, non-attribute keys in fullTrace (and fullLayout for that matter) should be named with a leading underscore. - scattergl glTrace ref is now consistent with the scattermapbox version

- and set dragmode to 'pan' in fullLayout when its value is coerced to 'zoom' so the corresponding modebar button is correctly highlighted. - do this until dragmode 'zoom' (i.e. a zoombox like behavior) is implemented.

- during supplyDefaults

etpinard · 2017-06-30T21:09:22Z

might as well ping @jackparmer @chriddyp @cpsievert who probably can't wait to use this feature.

jackparmer · 2017-06-30T21:41:55Z

d-wasserman · 2017-07-04T19:26:59Z

When will this make it into pip? Is it already? Really excited for this feature!

dy · 2017-07-04T20:25:29Z

src/plots/cartesian/select.js

-                dataPts[ax._id] = pts.filtered.map(axValue(ax));
-            }
-        }
+        fillRangeItems(eventData, poly, pts);


Oh, probably we have to merge this before I continue multiselect, because I depend on this part of code a lot.

dy · 2017-07-04T20:41:24Z

@etpinard should we consider enabling multiple selection for this too? Related PR

etpinard · 2017-07-04T20:43:30Z

@etpinard should we consider enabling multiple selection for this too?

Not in this PR. This PR here has to go in the next release. Multiple selections is a lower priority item at the moment. Apologies in advance for the merge conflicts.

etpinard · 2017-07-10T16:13:35Z

@alexcjohnson would you mind taking a 👓 at this?

alexcjohnson · 2017-07-10T19:39:49Z

src/traces/scattermapbox/convert.js

@@ -20,7 +22,8 @@ var convertTextOpts = require('../../plots/mapbox/convert_text_opts');

 var COLOR_PROP = 'circle-color';
 var SIZE_PROP = 'circle-radius';
-
+var OPACITY_PROP = 'circle-opacity';
+var DESELECTDIM = 0.2;


Can you pull this out of here, scatter, and scattergl into a shared constant?

Ha. You caught me being lazy. #1847 will make this thing configurable, but yeah might as well move it to a constant file for now.

done in 882e8e3

alexcjohnson · 2017-07-10T19:55:47Z

Very nice - you can address DESELECTDIM now or just wait for #1847, up to you. 💃

chriddyp · 2017-08-03T23:42:17Z

@Holisticnature - This is getting into plotly.py pip tonight or tomorrow: plotly/plotly.py#796 and into Dash tonight or tomorrow as well (plotly/dash-core-components#46)

d-wasserman · 2017-08-04T05:27:43Z

That is great! Thanks for the update!

d-wasserman · 2017-08-13T21:15:17Z

@chriddyp - I have it working on my install, but I was hoping there might be some codes samples on added to the Scattermapbox docs on how to update a chart based on the selection. Are there any examples on how to apply the selected items to update a chart? I found a few similar examples with hovering/selecting on histograms on the scatter plot page/dash docs/uber example, but it is not exactly the same.

etpinard added 9 commits June 30, 2017 13:36

add lassoPoints assertions

746ec7e

implement arrayOk for marker.opacity in scattermapbox traces

7d3dd35

run mapbox image test with --queue options

1d0b29e

- `npm run test-image -- mapbox_*` sometimes blows up

add 'scatter-like' category

e8b8624

- to easily combine logic for scatter* trace types that use scatter/subtypes.js

allow prepSelect callers to set own fillRangeItems routine

1f4eabb

- e.g. to allow mapbox subplot convert px coords to lon/lat w/o hackely mocking too many things

rename glTrace ref on scattergl fullTrace to _glTrace

744f3c8

- ... as it should have been all along, non-attribute keys in fullTrace (and fullLayout for that matter) should be named with a leading underscore. - scattergl glTrace ref is now consistent with the scattermapbox version

add dragmode pan button to mapbox modebar

e3aa07d

- and set dragmode to 'pan' in fullLayout when its value is coerced to 'zoom' so the corresponding modebar button is correctly highlighted. - do this until dragmode 'zoom' (i.e. a zoombox like behavior) is implemented.

clear all selection outlines in one place

a376817

- during supplyDefaults

etpinard added status: reviewable feature something new labels Jun 30, 2017

etpinard added this to the 1.29.0 milestone Jun 30, 2017

dy reviewed Jul 4, 2017

View reviewed changes

alexcjohnson reviewed Jul 10, 2017

View reviewed changes

put DESELECTDIM in interactions constants file

882e8e3

etpinard merged commit edf52ca into master Jul 10, 2017

etpinard deleted the scattermapbox-lasso branch July 10, 2017 22:27

plotly deleted a comment from jackparmer Aug 3, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add scattermapbox select/lasso drag modes #1836

Add scattermapbox select/lasso drag modes #1836

etpinard commented Jun 30, 2017

etpinard commented Jun 30, 2017

jackparmer commented Jun 30, 2017

d-wasserman commented Jul 4, 2017 •

edited

Loading

dy Jul 4, 2017

dy commented Jul 4, 2017 •

edited

Loading

etpinard commented Jul 4, 2017 •

edited

Loading

etpinard commented Jul 10, 2017

alexcjohnson Jul 10, 2017

etpinard Jul 10, 2017 •

edited

Loading

etpinard Jul 10, 2017

alexcjohnson commented Jul 10, 2017

chriddyp commented Aug 3, 2017

d-wasserman commented Aug 4, 2017

d-wasserman commented Aug 13, 2017

Add scattermapbox select/lasso drag modes #1836

Add scattermapbox select/lasso drag modes #1836

Conversation

etpinard commented Jun 30, 2017

etpinard commented Jun 30, 2017

jackparmer commented Jun 30, 2017

d-wasserman commented Jul 4, 2017 • edited Loading

dy Jul 4, 2017

Choose a reason for hiding this comment

dy commented Jul 4, 2017 • edited Loading

etpinard commented Jul 4, 2017 • edited Loading

etpinard commented Jul 10, 2017

alexcjohnson Jul 10, 2017

Choose a reason for hiding this comment

etpinard Jul 10, 2017 • edited Loading

Choose a reason for hiding this comment

etpinard Jul 10, 2017

Choose a reason for hiding this comment

alexcjohnson commented Jul 10, 2017

chriddyp commented Aug 3, 2017

d-wasserman commented Aug 4, 2017

d-wasserman commented Aug 13, 2017

d-wasserman commented Jul 4, 2017 •

edited

Loading

dy commented Jul 4, 2017 •

edited

Loading

etpinard commented Jul 4, 2017 •

edited

Loading

etpinard Jul 10, 2017 •

edited

Loading