Fix for scattergl reversed lines bug

[archmoj]

Fixes #2904

Bug fix for 2D line plots.
Negative scales are handled in the webgl vertex shader so that the line plots would be displayed in layouts with reversed ranges.
@etpinard
@alexcjohnson

[etpinard]

Thanks @archmoj !

Pro tip: make the PR title descriptive, so that we have an idea of what the PR is about just by looking at the title. No one remember issue numbers. Thanks again!

[etpinard]

gl-vis/regl-line2d@master...archmoj:rev-bounds2d

@dy would you mind taking a 👀 at this patch?

[etpinard]

@archmoj I'm curious. What made you decide to patch the regl-line2d?

From https://codepen.io/anon/pen/EpJObQ, swapping mode: 'lines' for mode: 'lines+markers' makes things work leading me to believe that we "could" fix this in plotly.js' scattergl/index.js.

[archmoj]

@etpinard
When using only lines (without markers, etc.) using reversed ranges used to create a horizontal or vertical line rather than actual graph.
Please try this:

Plotly.newPlot(gd, [{ "type": "scattergl", "mode": "lines", "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "y": [0, 1, 0, 7, 7, 0, 2, 4, 3, 0], "line": { "width": 10, "dash": "solid" } }], { xaxis:{ range: [-1, 10] }, yaxis:{ range: [10, -1] }}) ;

[etpinard]

Yeah I know, but

Plotly.newPlot(gd, [{ "type": "scattergl", "mode": "markers+lines", "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "y": [0, 1, 0, 7, 7, 0, 2, 4, 3, 0], "line": { "width": 10, "dash": "solid" } }], { xaxis:{ range: [-1, 10] }, yaxis:{ range: [10, -1] }}) ;

gives the correct result:

with the current master regl-line2d shader.

[archmoj]

I see that the point of a patch in javascript file.
However with in the shader we defined and used 'scale' both as a local variable and uniform!

1. uniform vec2 scale, translate; // global
2. vec2 scale = max(scale, MIN_DIFF); // local
   And I think in the example image provided above the corners may not be properly rendered?

[archmoj]

To compare with the above image here is an example of applying only lines with round corners (using new regl-line2d shader).

Plotly.newPlot(gd, [{ "type": "scattergl", "mode": "lines", "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "y": [0, 1, 0, 7, 7, 0, 2, 4, 3, 0], "line": { "width": 10, "dash": "solid" } }], { xaxis:{ range: [-1, 10] }, yaxis:{ range: [10, -1] }}) ;

[etpinard]

However with in the shader we defined and used 'scale' both as a local variable and uniform!

To compare with the above image here is an example of applying only lines with round corners (using new regl-line2d shader).

Thanks for the explanation. This makes it very clear. Don't be shy to write down comments on "important" lines on your github PRs to add a little bit of backstory to your work. This makes the review much easier (and faster).

---

Now, I think the next step would be the make a PR to https://github.com/a-vis/regl-line2d and ping @dy

[archmoj]

Not being listed in the contributors of regl I was not able to push my branch for the fix to a-vis/regl-line2d (rather than my fork) so that it could be on a-vis. A similar permission may be required for regl npm packages.
@dy
@alexcjohnson
@bpostlethwaite

[alexcjohnson]

Looks good to me! 💃

[etpinard]

Lovely fix 🥇