Add multiselect #2140

dy · 2017-11-02T16:49:16Z

Reproduces #1853

etpinard · 2017-11-02T21:13:13Z

Yep, npm run test-jasmine -- --bundleTest=ie9_test.js correctly fails as poly-bool has a few Unit8Array calls:

Now, I don't think multi-selections in IE9 is a must. Maybe there's a way to make poly-bool not invoke Unit8Array on load?

dy · 2017-11-02T22:45:13Z

@etpinard turns out poly-bool is a huge dependency with redundancy. Replaced it with polybooljs - faster and smaller alternative

etpinard · 2017-11-02T23:06:25Z

src/plots/cartesian/select.js

+                dragOptions.polygons.push(currentPolygon);
+
+                // we have to keep reference to arrays, therefore just replace items
+                dragOptions.mergedPolygons.splice.apply(dragOptions.mergedPolygons, [0, dragOptions.mergedPolygons.length].concat(mergedPolygons));


What does this do? Could we just use a plain-old for-loop?

etpinard · 2017-11-02T23:11:11Z

src/plots/cartesian/dragbox.js

-    var modes = ['lasso', 'select'];
-
-    return modes.indexOf(dragmode) !== -1;
+    return dragmode === 'lasso' || dragmode === 'select';


Way better 🐎 . Thanks!

etpinard · 2017-11-03T14:35:00Z

src/plots/cartesian/select.js

        });
    };
 };

+function joinPolygons(list, poly) {


Joining the polygons sounds very reasonable to me. But, some users might expect that selections within selections would remove the inner polygons. Perhaps we'll need to add layout options (e.g. layout.multiselectionmode: 'join' | 'cut').

Any thoughts about this @alexcjohnson @chriddyp @cldougl @monfera ?

so 'join' mode would always add regions to the selection (and do nothing if a selected region is selected a second time) and 'cut' mode would always remove regions from the selection (and do nothing if the region was not previously selected)?

+1 for a cut mode (after seeing the join in action)

My gut reaction: if you start a new selection inside an existing one, it's purely subtractive, if you start outside the existing ones it's purely additive. Would have to play with it implemented to see if this really feels intuitive though...

Ok, added subtract selection by holding Alt in e8c18f0

My gut reaction: if you start a new selection inside an existing one, it's purely subtractive, if you start outside the existing ones it's purely additive.

+1

Ok, added subtract selection by holding Alt in e8c18f0

That is more powerful (as well as easier to code 😅 ), my only concern is whether people will be able to find it. Though I guess if they can find add they can find subtract...

(and I never saw <kbd> before, nice! 🎉 )

Nice solution @dfcreative . The only (potential) problem I can think of is mobile and tablets users complaining no having access to Shift and Alt keys and by consequent multi-selections.

@etpinard good point, we can use @alexcjohnson strategy for that. But I'd wait for persistent selections PR merged first

chriddyp · 2017-11-03T18:35:14Z

This is so awesome.

etpinard · 2017-11-03T21:01:59Z

But I'd wait for persistent selections PR merged first

Sounds good @dfcreative Looks like everyone is happy with e8c18f0 🎉

Now, would you mind adding a few test cases in https://github.com/plotly/plotly.js/blob/master/test/jasmine/tests/select_test.js to 🔒 down the behavior?

etpinard

@dfcreative thanks for adding those test cases! This PR is looking great.

I made a few comments, the most important being the moving most of the new cartesian/dragbox.js logic to cartesian/select.js so that all subplot types can support multi-select.

etpinard · 2017-11-13T16:27:00Z

src/plots/cartesian/dragbox.js

@@ -168,13 +171,31 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
            else if(isSelectOrLasso(dragModeNow)) {
                dragOptions.xaxes = xa;
                dragOptions.yaxes = ya;
+
+                // take over selection polygons from prev mode, if any
+                if((e.shiftKey || e.altKey) && (plotinfo.selection && plotinfo.selection.polygons) && !dragOptions.polygons) {


Would it be possible to move this block into prepSelect so that all subplot types that support selections can allow multi-select? Right now, only cartesian and gl2d plot types allow it.

etpinard · 2017-11-13T16:27:43Z

src/plots/cartesian/dragbox.js

                prepSelect(e, startX, startY, dragOptions, dragModeNow);
            }
        }
    };

    dragElement.init(dragOptions);

+    // FIXME: this hack highlights selection once we enter select/lasso mode
+    if(isSelectOrLasso(gd._fullLayout.dragmode) && plotinfo.selection) {


I'm not a big fan of this behavior. @dfcreative is there a particular reason why you added this?

Not relevant since #2135

etpinard · 2017-11-13T16:28:18Z

src/plots/cartesian/dragbox.js

@@ -526,6 +547,9 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
        }

        updateSubplots([x0, y0, pw - dx, ph - dy]);
+
+        if(plotinfo.ondrag) plotinfo.ondrag.call([x0, y0, pw - dx, ph - dy]);


why do we need this?

etpinard · 2017-11-13T16:34:09Z

test/jasmine/tests/select_test.js

+            })
+            .then(function() {
+                // sub selection
+                drag([[219, 143], [219, 183]], {altKey: true});


Brilliant tests ✨

Thanks

:) you're welcome!

etpinard · 2017-11-13T18:44:50Z

Beautifully done @dfcreative, merge away 💃

immotus · 2018-03-02T06:10:37Z

Is there a way to disable multiselect mode and return to the old behaviour when Shift was invoking pan mode?

dy · 2018-03-02T06:44:21Z

@PavelGolodoniuc pan mode can be enabled by Ctrl key, is that a case?

immotus · 2018-03-06T02:58:53Z

@dfcreative it doesn't seem to be the case. When "Box select" is mode is selected Ctrl key doesn't seem to enable pan. Also our application traditionally used Ctrl key over the plot for a user-defined functionality.

immotus · 2018-03-12T06:03:06Z

@dfcreative, @etpinard Can the multiselect mode including Shift/Alt/Ctrl handler be disabled completely in the Box select mode? In our application we do not allow irregular selections in general and thus would like to disable this functionality completely.

Add multiselect

b800e55

dy requested a review from etpinard November 2, 2017 16:49

etpinard added status: in progress feature something new labels Nov 2, 2017

dy added 2 commits November 2, 2017 15:36

Fix failing cases

05b0dca

Avoid overcalculation

40fbca9

Replace poly-bool

473d34d

etpinard reviewed Nov 2, 2017

View reviewed changes

Enhance readability

02db56f

etpinard reviewed Nov 3, 2017

View reviewed changes

dy added 2 commits November 3, 2017 13:56

Add subtraction mode

e8c18f0

Fix initial-shift selection

ca4aaae

etpinard added this to the v1.32.0 milestone Nov 3, 2017

Add multiselection test

39a4dc4

etpinard suggested changes Nov 13, 2017

View reviewed changes

etpinard added status: reviewable and removed status: in progress labels Nov 13, 2017

Fix review comments

ab92fd2

etpinard approved these changes Nov 13, 2017

View reviewed changes

dy merged commit 2656167 into master Nov 13, 2017

dy deleted the multiselect branch November 13, 2017 18:46

etpinard mentioned this pull request Nov 13, 2017

Support for making multiple selections using Box selector or Lasso selector tools in Plotly.js #698

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add multiselect #2140

Add multiselect #2140

dy commented Nov 2, 2017 •

edited

Loading

etpinard commented Nov 2, 2017 •

edited

Loading

dy commented Nov 2, 2017

etpinard Nov 2, 2017

etpinard Nov 2, 2017

etpinard Nov 3, 2017 •

edited

Loading

cldougl Nov 3, 2017 •

edited

Loading

cldougl Nov 3, 2017

alexcjohnson Nov 3, 2017

dy Nov 3, 2017 •

edited

Loading

etpinard Nov 3, 2017

alexcjohnson Nov 3, 2017

etpinard Nov 3, 2017 •

edited

Loading

dy Nov 3, 2017

chriddyp commented Nov 3, 2017

etpinard commented Nov 3, 2017

etpinard left a comment

etpinard Nov 13, 2017

dy Nov 13, 2017

etpinard Nov 13, 2017

dy Nov 13, 2017

etpinard Nov 13, 2017

dy Nov 13, 2017

etpinard Nov 13, 2017

dy Nov 13, 2017

etpinard commented Nov 13, 2017

immotus commented Mar 2, 2018

dy commented Mar 2, 2018

immotus commented Mar 6, 2018

immotus commented Mar 12, 2018

Add multiselect #2140

Add multiselect #2140

Conversation

dy commented Nov 2, 2017 • edited Loading

etpinard commented Nov 2, 2017 • edited Loading

dy commented Nov 2, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard Nov 3, 2017 • edited Loading

Choose a reason for hiding this comment

cldougl Nov 3, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dy Nov 3, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard Nov 3, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chriddyp commented Nov 3, 2017

etpinard commented Nov 3, 2017

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

etpinard commented Nov 13, 2017

immotus commented Mar 2, 2018

dy commented Mar 2, 2018

immotus commented Mar 6, 2018

immotus commented Mar 12, 2018

dy commented Nov 2, 2017 •

edited

Loading

etpinard commented Nov 2, 2017 •

edited

Loading

etpinard Nov 3, 2017 •

edited

Loading

cldougl Nov 3, 2017 •

edited

Loading

dy Nov 3, 2017 •

edited

Loading

etpinard Nov 3, 2017 •

edited

Loading