Invisible plot lines with WebGL (scattergl) in prod mode

[virgile-hogman]

I'm trying to draw standard plots with WebGL but the lines remain invisible :(
The data is loaded correctly, as you can see the values when hovering on the points, so it seems to be a problem of rendering for the lines. Note the markers (X) are correctly shown.

For WebGL i'm using data.type="scattergl" instead of the usual scatter. The reason is i have several hundreds of thousands of points to visualize and it's way faster with WebGL. Note the problem also occurs if i load very little data. However if i plot with scatter it works fine! So the code should be good. Also, if i build my angular library in dev mode, i.e. without build optimization, it works! So it's the combination of scattergl + prod mode that fails. Any idea to explain this bug?

This somehow looks similar to this old issue in plotly: plotly/plotly.js#942 but it's not related to WebGL nor any optimization. I have no idea how to debug this between your Angular wrapper and the plotly library. It's quite difficult to understand where the issue is.

[virgile-hogman]

FYI i also opened a ticket in the plotly.js project: plotly/plotly.js#3411.

[virgile-hogman]

All right i managed to reproduce it with a toy project based on the sample given on your main README here.

public graph = {
    data: [
        { x: [1, 2, 3], y: [2, 6, 3], type: 'scattergl', mode: 'lines+points', marker: {color: 'red'} },
        { x: [1, 2, 3], y: [1, 2, 3], type: 'markers' },
        { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },        
    ],
    layout: {width: 320, height: 240, title: 'A Fancy Plot'}
  };

With ng serve --prod using scattergl the red lines and points are invisible.

With ng serve OR using scatter, it works!

[andrefarzat]

I could replicate with your example. So, I am guessing that the angular minification ( resulted from --prod process ) is also minifying plotly.js which might be causing this issue.
I will be working on separating better the plotly.js library and this library to be included as external ( nor bundled as is ). Please, update this issue here if you get an answer from the other issue you opened.

[virgile-hogman]

Many thanks for your effort! Much appreciated :)

[virgile-hogman]

To make it easier to test i just created a small github repo with this sample project:
https://github.com/virgile-hogman/sample-pyplot-webgl

Compared to the version above I slightly changed it to show both scatter and scattergl at the same time. Note the bug only appears in prod mode. Also i was not sure how the different methods were rendered at the same time but even if i keep the scattergl data alone it's the same.

Feel free to send me some changes if you have some other suggestions. I'll let you know if something new come from plotly.js.

[andrefarzat]

@virgile-hogman Thank you for creating this sample repo. I could test on it and see that it is fixes on version 1.0.0 of angular-plotly.js. As I suspected, the angular minification was minifying plotly.js library which was already minified. When you minify twice, bad things can happen.

Thus, the version 1.0.0 (released today) now includes plotly.js non-minified. The issue on this is that it takes waaaaaay more time to ng serve --prod or even ng build --prod. The solution for this was creating PlotlyViaCDNModule and PlotlyViaWindowModule. Please, check the docs and give me your feedback. If the issue continues, please reopen the issue 😸.

[virgile-hogman]

@andrefarzat amazing! I tried it also on my real project and it works 👍 What a good a news! 🥇

At first sight the minimization doesn't look slower for me that it was before. It is obviously way longer than a dev mode but that makes sense because of all the optimizations to produce the bundle. Great you also put some new options for custom build but i didn't need those at this point.

Great job and fast fix, big thanks!!

[virgile-hogman]

Another good news, another issue i had when hovering on plots is now solved!
This problem appeared with a fully optimized bundle, consisting of two parameters: optimization (minimizer) + buildOptimizer (tree shaking), which are enabled by default in prod mode, at least with Angular 7.
I had to turn the buildOptimizer off to make the application work (more info here), but now i can also enable it again and i'm convinced the solution came with your last fix. At least it's the most rational explanation, as the double minimization created some issues.
Now i have a fully optimized bundle, so that's great! :)