Click `anywhere` feature #5443

sleighsoft · 2021-01-24T13:05:35Z

This adds a click anywhere feature as proposed in #2696

This PR is meant as a point of discussion. Feel free to leave feedback.

Demo Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../plotly.js/dist/plotly.js"></script>
</head>

<body>
    <div id="tester" style="width:600px;height:250px;"></div>
    <script>
        var TESTER = document.getElementById('tester');
        Plotly.newPlot(TESTER, [{
            x: [1, 2, 3, 4],
            y: [4, 1, 3, 5],
            mode: "lines+markers",
            marker: {size: 12},
        }], {
            margin: { t: 0 },
            clickmode: "event+anywhere"
        });
        TESTER.on('plotly_click', function(clickData) {
            var x = clickData["points"][0]["x"];
            Plotly.relayout(TESTER, {
                shapes: [
                {
                    type: "line",
                    x0: x,
                    y0: 0,
                    x1: x,
                    y1: 1,
                    yref: "paper",
                    line: {color: "RoyalBlue", width:3},
                }
                ]
            });
        });
    </script>
</body>
</html>

sleighsoft · 2021-01-24T13:05:54Z

@archmoj, I have a question regarding testing. I have looked through the code and did not find how you are testing the different clickmode flags under test\jasmine\tests\click_test.js. Could you give me some guidance/help on how to implement a proper test for it, please.

src/components/fx/layout_attributes.js

archmoj · 2021-01-25T15:58:26Z

@archmoj, I have a question regarding testing. I have looked through the code and did not find how you are testing the different clickmode flags under test\jasmine\tests\click_test.js. Could you give me some guidance/help on how to implement a proper test for it, please.

The "select" clickmode are tested in `select_test"
For example

plotly.js/test/jasmine/tests/select_test.js

Line 132 in 8d7db15

describe('Click-to-select', function() {

You could start a new test file perhaps anywhere_test to add new tests.

Also thanks for the new PR. It looks pretty close. And I don't think you need to close this one and reopen again now that you opened the PR from your click branch. If we ever wanted to merge upstream/master it should be easy to sync your repo.

sleighsoft · 2021-01-31T11:22:40Z

Hey @archmoj, I have added a couple of test but I would like to debug them to make sure I didn't forget anything and that the expected values are set correctly. Do you have any recommendations on how I can debug a karma test? I've tried setting up the chrome debugging in vscode but wasn't successfull so far. It somehow never stops at my breakpoints even though they are at the start of the file. Any advice is very much welcome!

archmoj · 2021-01-31T13:24:22Z

Hey @archmoj, I have added a couple of test but I would like to debug them to make sure I didn't forget anything and that the expected values are set correctly. Do you have any recommendations on how I can debug a karma test? I've tried setting up the chrome debugging in vscode but wasn't successfull so far. It somehow never stops at my breakpoints even though they are at the start of the file. Any advice is very much welcome!

Great news.
Please see https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md#using-the-developer-console-in-karma-to-writedebug-jasmine-tests

sleighsoft · 2021-02-07T18:23:47Z

Do I have to push the dist/ and build/ directories as well? They are not ignored.

sleighsoft · 2021-02-07T18:25:34Z

I have added a test case. I consider this to be finished. Let me know if there are any more changes necessary.

archmoj · 2021-02-07T18:28:14Z

Do I have to push the dist/ and build/ directories as well? They are not ignored.

No. You should not commit them.

sleighsoft · 2021-02-07T18:47:42Z

Tests don't seem to fail due to my changes, right?

sleighsoft · 2021-02-10T20:45:00Z

@archmoj ?

archmoj · 2021-02-10T21:04:46Z

Tests don't seem to fail due to my changes, right?

We experienced failures on the CircleCI in the last week.
Could you please fetch upstream/master and merge it into your branch?
That should fix the tests.

yiyuezhuo · 2021-02-15T03:12:40Z

It seems that xaxis.p2d and yaxis.p2d doesn't exists in Map, gd._fullLayout.geo._subplot.xaxis.p2c() and gd._fullLayout.geo._subplot.yaxis.p2c() is an alternative to get LonLat coordinates.

sleighsoft · 2021-02-15T21:50:35Z

Maybe worth it to add to the test case as well

try to enable click anywhere in Geo mode

nicolaskruchten · 2021-03-10T21:29:15Z

A small update on timing: our team is working hard on releasing v2.0 of Plotly.js, which we anticipate will happen in early April. This PR would be a good candidate to land in the library in v2.1 or later, so with apologies for the delay, we will likely not be able to give much feedback on this PR for the next few weeks :)

sleighsoft · 2021-09-11T14:41:10Z

Failing tests seem unrelated to my additions. From my side this feature is ready to be merged @archmoj

archmoj · 2021-09-12T23:22:51Z

Failing tests seem unrelated to my additions. From my side this feature is ready to be merged @archmoj

They all passed now.

archmoj · 2021-09-12T23:24:56Z

Thanks very much for the PR and the follow up.
All looking good to me.
Passing over to @nicolaskruchten and @alexcjohnson.

sleighsoft · 2021-09-13T07:59:10Z

You're welcome, looking forward to being able to finally start clicking anywhere!

nicolaskruchten · 2021-09-13T14:33:18Z

Thanks for your contributions here @sleighsoft! We're hard at work on v2.6.0 but I want to get this merged into 2.7.0.

How/does this interact with double-clicks, out of curiosity? Do we need to think about any special handling here @alexcjohnson ?

alexcjohnson · 2021-09-17T07:38:25Z

src/components/fx/click.js

+        if(gd._hoverdata) {
+            data = gd._hoverdata;
+        } else if(clickmode.indexOf('anywhere') > -1) {
+            if(gd._fullLayout.geo) {


This logic means that if the plot has a geo subplot, we're assuming the click was on that, even if the plot has other subplots too. But we can do a lot better than that, and there are more subplot types than just geo and 2D cartesian. And fortunately we already have a mechanism to detect this: the third arg to click is subplot and it should tell us exactly which subplot the click came from.

2D cartesian, ternary, and polar subplots report this correctly (eg 'x2y3', 'ternary2', 'polar3'), geo doesn't but it should be easy to fix that. Then what we need to do is find the actual subplot object, and depending on its type calculate the appropriate coordinates within that particular subplot.

Pie, sankey, and funnelarea also all reach this point but don't give a subplot. We could have them give the trace number I guess, but is there anything useful to report for them? Just the raw coordinates within the plot?

3D, parcoords, and parcats don't even get here, I'm happy to ignore those for now.

Is that something that you intend to do in a second round or within this PR. If it is something I should fix, then I'd like a short example ideally for each plot type as I am not familiar with most of the ones you listed.

Please see https://rreusser.github.io/plotly-mock-viewer/#plot_types as well as https://rreusser.github.io/plotly-mock-viewer/#polar_subplots which render https://github.com/plotly/plotly.js/blob/master/test/image/mocks/plot_types.json and
https://github.com/plotly/plotly.js/blob/master/test/image/mocks/polar_subplots.json.

alexcjohnson · 2021-09-17T07:46:03Z

How/does this interact with double-clicks, out of curiosity?

I'd need to play with it to really be able to say, but I'm not worried about it: this is being inserted right where the click event would have been emitted anyway, so if there's a problem with doubleclick it's already a problem without this feature.

As far as actually reporting a usable doubleclick for users, ATM our plotly_doubleclick event always returns null event data AFAICT, so if at some point we want to do better we can handle both hoverdata and anywhere-coordinates there.

sleighsoft · 2021-09-20T17:30:02Z

Apparently, there is also an issue with margins? #2696 (comment)
Don't have time right now to check

dmenne · 2022-07-26T07:50:12Z

Any chance that this gets merged?

Pablongo24 · 2022-11-12T17:30:22Z

Can someone please summarize:

Why this PR is still open?
Why it took until 2021 for someone to even start working on it? A click-anywhere feature seems so obvious to so many use cases. In the issues, people have been asking for it since Jan 2017 - #145.

nicolaskruchten · 2022-11-12T17:53:37Z

@Pablongo24 your comment comes across as quite aggressive and demanding and its tone is not particularly welcome here.

Because there is still unaddressed feedback in the PR.
It's hard to answer such a question, and in some sense this is the question in open-source: there are thousands of people who in principle could have started working on it, but none of them had the right mix of time/motivation/skills to do so. If you step back a bit, it's actually more surprising that someone actually has done so: providing free labour to the rest of the world is the outlier behaviour rather than the expectation.

Pablongo24 · 2022-11-12T18:02:51Z

@Pablongo24 your comment comes across as quite aggressive and demanding and its tone is not particularly welcome here.

@nicolaskruchten not sure why it came across as aggressive. Just asked two questions out of legitimate curiosity. I understand the dynamics of working on open-source projects. Merely pointing out that in the 6 years since this issue first popped up, several other features have been added - many of them seemingly more difficult to implement (though I realize I'm not even remotely close to a JS expert, so my perception might be wrong).

gvwilson · 2024-06-10T17:53:08Z

This pull request has been sitting for a while, so I would like to close it as part of our effort to tidy up our public repositories. I've assigned it to myself to keep track of it; I'll wait until 2024-06-17 for someone to say it's still relevant and they'll to take it on, and otherwise I will close it then. Thanks - @gvwilson

nve-sak · 2024-06-24T14:15:10Z

As a Python user of Plotly, I'll toss in that capturing the coordinates of a click is a desirable feature with considerable downstream potential. Unfortunately, I don't have the plotly.js (or any javascript) knowledge to be of any help. Thanks a lot to the Plotly team for working hard on javascript, Python and other bindings.

lmioduszewski · 2024-08-04T22:06:01Z

If it's helpful to anyone else...I added the ability to get lat/lon from a mapbox using the above click anywhere code. Code for the click.js file is below. My fork is here https://github.com/lmioduszewski/plotly.js/tree/Click-Anywhere

I also made edits to my own fork of plotly.py so it works in Python as well. That branch is here https://github.com/lmioduszewski/plotly.py.

Both of these are many commits behind, and I'm not sure the best way to update my repos to be consistent with the current plotly.py/plotly.js.

use strict';

var Registry = require('../../registry');
var hover = require('./hover').hover;

module.exports = function click(gd, evt, subplot) {
    var annotationsDone = Registry.getComponentMethod('annotations', 'onClick')(gd, gd._hoverdata);

    // fallback to fail-safe in case the plot type's hover method doesn't pass the subplot.
    // Ternary, for example, didn't, but it was caught because tested.
    if(subplot !== undefined) {
        // The true flag at the end causes it to re-run the hover computation to figure out *which*
        // point is being clicked. Without this, clicking is somewhat unreliable.
        hover(gd, evt, subplot, true);
    }

    function emitClick(data) { gd.emit('plotly_click', {points: data, event: evt}); }

    var clickmode = gd._fullLayout.clickmode;
    var data;
    if(evt && evt.target) {
        if(gd._hoverdata) {
            data = gd._hoverdata;
        } else if(clickmode.indexOf('anywhere') > -1) {
            if(gd._fullLayout.geo) {
                var lat = gd._fullLayout.geo._subplot.xaxis.p2c();
                var lon = gd._fullLayout.geo._subplot.yaxis.p2c();
                data = [{lat: lat, lon: lon}];
            } if(gd._fullLayout.mapbox) {
                var mapboxInstance = gd._fullLayout.mapbox._subplot.map;
                var rect = evt.target.getBoundingClientRect();
                var xx = evt.clientX - rect.left;
                var yy = evt.clientY - rect.top;
                var lngLat = mapboxInstance.unproject([xx, yy]);
                data = [{lon: lngLat.lng, lat: lngLat.lat}];
            } else {
                var bb = evt.target.getBoundingClientRect();
                var x = gd._fullLayout.xaxis.p2d(evt.clientX - bb.left);
                var y = gd._fullLayout.yaxis.p2d(evt.clientY - bb.top);
                data = [{x: x, y: y}];
            }
        }
        if(data) {
            if(annotationsDone && annotationsDone.then) {
                annotationsDone.then(function() { emitClick(data); });
            } else emitClick(data);
        }

        // why do we get a double event without this???
        if(evt.stopImmediatePropagation) evt.stopImmediatePropagation();
    }
};

click v1

6a07bc9

sleighsoft mentioned this pull request Jan 24, 2021

First attempt at a click anywhere #5416

Closed

fix lint

0ab1e75

archmoj reviewed Jan 25, 2021

View reviewed changes

src/components/fx/layout_attributes.js Outdated Show resolved Hide resolved

archmoj added status: in progress community community contribution feature something new labels Jan 25, 2021

Merge branch 'master' into click_v1

603cfa1

Fix linting

279a0d1

archmoj added status: reviewable and removed status: in progress labels Feb 7, 2021

archmoj requested a review from alexcjohnson February 10, 2021 23:43

Merge branch 'master' into click_v1

fb506ba

try to enable click anywhere in Geo mode

4d221db

yiyuezhuo mentioned this pull request Feb 15, 2021

try to enable click anywhere in Geo mode sleighsoft/plotly.js#2

Merged

yiyuezhuo and others added 2 commits February 16, 2021 19:17

fix anywhere leak problem

461b695

Merge pull request #2 from yiyuezhuo/click_geo

0956827

try to enable click anywhere in Geo mode

sleighsoft added 2 commits September 11, 2021 14:23

update plot-schema diff

9b5c237

Add geoscatter test and refactor tests

a406275

archmoj added this to the v2.6.0 milestone Sep 12, 2021

archmoj requested a review from nicolaskruchten September 12, 2021 23:27

alexcjohnson reviewed Sep 17, 2021

View reviewed changes

archmoj removed this from the v2.6.0 milestone Oct 29, 2021

archmoj added status: has TODOs and removed status: reviewable labels Oct 29, 2021

alexcjohnson mentioned this pull request Apr 7, 2022

dash-svm-2022 #minor plotly/dash-sample-apps#705

Open

11 tasks

gvwilson self-assigned this Jun 10, 2024

gvwilson removed their assignment Aug 2, 2024

gvwilson added P2 considered for next cycle and removed status: has TODOs labels Aug 8, 2024

FredLL-Avaiga mentioned this pull request Sep 4, 2024

Get geolocation from clicking on a map Avaiga/taipy#1739

Closed

6 tasks

gvwilson self-assigned this Nov 20, 2024

gvwilson added the cs customer success label Nov 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Click `anywhere` feature #5443

Click `anywhere` feature #5443

sleighsoft commented Jan 24, 2021

sleighsoft commented Jan 24, 2021

archmoj commented Jan 25, 2021

sleighsoft commented Jan 31, 2021

archmoj commented Jan 31, 2021

sleighsoft commented Feb 7, 2021

sleighsoft commented Feb 7, 2021

archmoj commented Feb 7, 2021

sleighsoft commented Feb 7, 2021

sleighsoft commented Feb 10, 2021

archmoj commented Feb 10, 2021

yiyuezhuo commented Feb 15, 2021

sleighsoft commented Feb 15, 2021

nicolaskruchten commented Mar 10, 2021

sleighsoft commented Sep 11, 2021 •

edited

Loading

archmoj commented Sep 12, 2021

archmoj commented Sep 12, 2021

sleighsoft commented Sep 13, 2021

nicolaskruchten commented Sep 13, 2021

alexcjohnson Sep 17, 2021

sleighsoft Sep 20, 2021

archmoj Oct 5, 2021

alexcjohnson commented Sep 17, 2021

sleighsoft commented Sep 20, 2021

dmenne commented Jul 26, 2022

Pablongo24 commented Nov 12, 2022

nicolaskruchten commented Nov 12, 2022

Pablongo24 commented Nov 12, 2022 •

edited

Loading

gvwilson commented Jun 10, 2024

nve-sak commented Jun 24, 2024

lmioduszewski commented Aug 4, 2024

Click anywhere feature #5443

Are you sure you want to change the base?

Click anywhere feature #5443

Conversation

sleighsoft commented Jan 24, 2021

sleighsoft commented Jan 24, 2021

archmoj commented Jan 25, 2021

sleighsoft commented Jan 31, 2021

archmoj commented Jan 31, 2021

sleighsoft commented Feb 7, 2021

sleighsoft commented Feb 7, 2021

archmoj commented Feb 7, 2021

sleighsoft commented Feb 7, 2021

sleighsoft commented Feb 10, 2021

archmoj commented Feb 10, 2021

yiyuezhuo commented Feb 15, 2021

sleighsoft commented Feb 15, 2021

nicolaskruchten commented Mar 10, 2021

sleighsoft commented Sep 11, 2021 • edited Loading

archmoj commented Sep 12, 2021

archmoj commented Sep 12, 2021

sleighsoft commented Sep 13, 2021

nicolaskruchten commented Sep 13, 2021

alexcjohnson Sep 17, 2021

Choose a reason for hiding this comment

sleighsoft Sep 20, 2021

Choose a reason for hiding this comment

archmoj Oct 5, 2021

Choose a reason for hiding this comment

alexcjohnson commented Sep 17, 2021

sleighsoft commented Sep 20, 2021

dmenne commented Jul 26, 2022

Pablongo24 commented Nov 12, 2022

nicolaskruchten commented Nov 12, 2022

Pablongo24 commented Nov 12, 2022 • edited Loading

gvwilson commented Jun 10, 2024

nve-sak commented Jun 24, 2024

lmioduszewski commented Aug 4, 2024

Click `anywhere` feature #5443

Click `anywhere` feature #5443

sleighsoft commented Sep 11, 2021 •

edited

Loading

Pablongo24 commented Nov 12, 2022 •

edited

Loading