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.

I'm using Angular with the standard plotly wrapper so i opened a ticket there as well but i can't tell yet where the bug is. Also note if i build my angular app 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?

I'm sorry i can't provide you an online code and seen it depends on the build mode it wouldn't be relevant. But it may be something you've already seen such as this #3405 (but it was for react.js!) or maybe you can give me some tips.

Thank you in advance for any help.

[etpinard]

I'm sorry i can't provide you an online code and seen it depends on the build mode

OK, but could you provide the src file and build command you used? Thank you!

[virgile-hogman]

Thank you very much for your answer. Sorry i can't provide you something you can directly build.
It's quite difficult to isolate all the relevant parts because it's quite a big project, the plotting part is used in an internal Angular library then used to build another Angular component... and i'm also new to Angular.

Here is a small archive extract.tar.gz containing what i think are the most relevant files:

• angular.json: so you can see the optimizer flags. Note the buildOptimizer=false because of other issues with rxjs events. Apart from that it should be default options coming with Angular cli 7.0. If i build my application with ng build my-app --prod the lines are invisible. If i remove --prod they are shown. Basically the dev mode will turn off the optimizations.
• plotting/plot/plot.component: a very basic component encapsulating the angular plotly wrapper
• plotting/utils/plotly-graph.ts: used to provide the data (through AddScatterTrace)
• plotting/utils/trace-scatter.ts: used to handle a scatter plot, setting a few options like those for lines and markers. Note in this case we have ScatterTrace.mode="lines" (invisible) while it works for markers.

Sorry if this may sound a bit confusing, but I hope it can help a bit more. Don't hesitate to ask me again if you need more specific info.

[virgile-hogman]

OK i can reproduce the problem with a toy project! It was easier to demonstrate than i expected :)

I guess it's possible to build the demo online but i don't know how to with Angular. But if you do it by hand it won't take you more than a few minutes.
Here i'm using node.js 10.15.0 and Angular CLI 7.1.4 (just run npm install -g @angular/cli@7.1.4).
Following the instructions on the main page here:

Create a new Angular project

ng new test-webgl
cd test-webgl
npm install angular-plotly.js plotly.js --save

Then edit src/app/app.components.ts

  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'}
  };

In app.component.html add this line:

<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>

In app.component.ts simply include PlotlyModule (i give you all the code as CommonModule seems obsolete now)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PlotlyModule } from 'angular-plotly.js';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, PlotlyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then build the project with ng serve --prod and open your page at http://localhost:4200/
As you can see the first plot in red is invisible while the others are shown.

Now if build with ng serve (without --prod) or if i replace scattergl with scatter it works!

[arlowhite]

What version of plotly.js are you using?
I'm curious if using the Plotly.react API instead would work. A while ago, I created an Angular Component built around that API: https://github.com/arlowhite/angular-plotly-react
You could give it a try and see if it happens to work with --prod

[virgile-hogman]

hello,
sorry for late answer.

What version of plotly.js are you using?

The last available versions plotly.js 1.43.2 and angular-plotly.js 0.2.2.

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.

I'm curious if using the Plotly.react API instead would work.

I didn't try your component yet, i'll try to check it but any other help from you guys is welcome! The author of the standard Angular wrapper mentioned it could come from the minimization process, but he was not entirely sure. More info here: plotly/angular-plotly.js#31

[virgile-hogman]

Great news! The author of angular-plotly.js could fix it, see plotly/angular-plotly.js#31.
It was due to a double minimization of plotly.js when bundling the Angular application in prod mode. It is solved in angular-plotly.js 1.0.0, this issue can be closed.

[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 the last fix on angular-plotly.js. 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! :)