Invisible plot lines with WebGL (scattergl) in prod mode #3411

Activity

1. etpinard commented on Jan 7, 2019

   

   etpinard

   on Jan 7, 2019

   Contributor

   More actions

   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!
2. virgile-hogman commented on Jan 7, 2019

   

   virgile-hogman

   on Jan 7, 2019

   Last edited by virgile-hogman

   Author

   More actions

   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.
3. virgile-hogman commented on Jan 7, 2019

   

   virgile-hogman

   on Jan 7, 2019

   Last edited by virgile-hogman

   Author

   More actions

   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!

   
4. arlowhite commented on Jan 7, 2019

   

   arlowhite

   on Jan 7, 2019

   More actions

   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
5. virgile-hogman commented on Jan 9, 2019

   

   virgile-hogman

   on Jan 9, 2019

   Last edited by virgile-hogman

   Author

   More actions

   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
6. virgile-hogman commented on Jan 14, 2019

   

   virgile-hogman

   on Jan 14, 2019

   Author

   More actions

   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.

   🎉React with 🎉1Reacted by etpinard
7. virgile-hogman

   closed this as completedon Jan 14, 2019
8. virgile-hogman commented on Jan 15, 2019

   

   virgile-hogman

   on Jan 15, 2019

   Last edited by virgile-hogman

   Author

   More actions

   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! :)